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}$/;
 
 /**
@@ -41,7 +41,7 @@ module.exports = {
     return new Promise(function(resolve, reject) {
       const MAX_WIDTH = 800;
       const MAX_HEIGHT = 600;
-  
+
       let targetWidth = inputWidth;
       let targetHeight = inputHeight;
       if (targetHeight > MAX_HEIGHT) {
@@ -52,7 +52,7 @@ module.exports = {
         targetHeight = Math.floor(targetHeight * (MAX_WIDTH / targetWidth));
         targetWidth = MAX_WIDTH;
       }
-  
+
       const canvas = document.createElement("canvas");
       canvas.width = targetWidth;
       canvas.height = targetHeight;
@@ -74,7 +74,7 @@ module.exports = {
       }, mimeType);
     });
   },
-  
+
   /**
    * Load a file into a newly created image element.
    *
@@ -87,7 +87,7 @@ module.exports = {
       const img = document.createElement("img");
       const objectUrl = URL.createObjectURL(imageFile);
       img.src = objectUrl;
-  
+
       // Once ready, create a thumbnail
       img.onload = function() {
         URL.revokeObjectURL(objectUrl);
@@ -109,14 +109,16 @@ module.exports = {
     return new Promise(function(resolve, reject) {
       // Load the file into an html element
       const video = document.createElement("video");
-  
+
       const reader = new FileReader();
       reader.onload = function(e) {
         video.src = e.target.result;
-  
+
         // 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) {