proper thumbnailing for images and videos

components/fileUpload.js

@@ -27,6 +27,8 @@ let fileUpload = create({
           this.props.addUpload(fileObject)
         }
         reader.readAsDataURL(file)
+      } else {
+        this.props.addUpload({file: file, preview: "/icons/file.svg"})
       }
     })
   },

components/input.js

@@ -106,35 +106,45 @@ let input = create({
       let mimeType = upload.file.type
       let eventType = "m.file"
       let additionalPromise
-      if (mimeType.startsWith("image/")) {
-        eventType = "m.image"
-        // create and upload thumbnail
-        let thumbnailType = "image/png"
-        if (mimeType == "image/jpeg") {
-          thumbnailType = mimeType
-        }
-        additionalPromise = riot.loadImageElement(upload.file)
-          .then((img) => {
-            return riot.createThumbnail(img,
-              img.width,
-              img.height,
-              thumbnailType)
-            })
+      if (mimeType.startsWith("image/") || mimeType.startsWith("video/")) {
+        function elementToThumbnail(element) {
+          return new Promise((resolve, reject) => {
+            riot.createThumbnail(element,
+              element.width,
+              element.height,
+              thumbnailType
+            )
             .catch((error) => {
               console.error("neo: error getting thumbnail", error)
+              reject()
             })
             .then((thumbResult) => {
               return client.uploadContent(thumbResult.thumbnail, {onlyContentUri: false})
             }).then((response) => {
-              return {
+              return resolve({
                 thumbnail_url: response.content_uri,
                 thumbnail_info: {
                   mimetype: thumbnailType
                 }
-              }
+              })
             })
-      } else if (mimeType.startsWith("video/")) {
-        eventType = "m.video"
+
+          })
+        }
+        if (mimeType.startsWith("image/")) {
+          eventType = "m.image"
+          additionalPromise = riot.loadImageElement(upload.file)
+            .then((element) => {return elementToThumbnail(element)})
+        } else if (mimeType.startsWith("video/")) {
+          eventType = "m.video"
+          additionalPromise = riot.loadVideoElement(upload.file)
+            .then((element) => {return elementToThumbnail(element)})
+        }
+        // create and upload thumbnail
+        let thumbnailType = "image/png"
+        if (mimeType == "image/jpeg") {
+          thumbnailType = mimeType
+        }
       } else if (mimeType.startsWith("audio/")) {
         eventType = "m.audio"
       } else {

lib/riot-utils.js

@@ -14,7 +14,7 @@ limitations under the License.
 
 const Promise = require('bluebird');
 const sanitize = require('sanitize-html');
-require("blueimp-canvas-to-blob");
+//require("blueimp-canvas-to-blob");
 const COLOR_REGEX = /^#[0-9a-fA-F]{6}$/;
 
 /**
@@ -117,6 +117,8 @@ module.exports = {
         // Once ready, returns its size
         // Wait until we have enough data to thumbnail the first frame.
         video.onloadeddata = function() {
+          video.width = video.videoWidth
+          video.height = video.videoHeight
           resolve(video);
         };
         video.onerror = function(e) {