Merge branch 'code2' of github.com:xwiki-labs/cryptpad into code2

www/common/common-file.js

@@ -1,12 +1,13 @@
 define([
     'jquery',
     '/file/file-crypto.js',
+    '/common/common-thumbnail.js',
     '/bower_components/tweetnacl/nacl-fast.min.js',
-], function ($, FileCrypto) {
+], function ($, FileCrypto, Thumb) {
     var Nacl = window.nacl;
     var module = {};
 
-    var blobToArrayBuffer = function (blob, cb) {
+    var blobToArrayBuffer = module.blobToArrayBuffer = function (blob, cb) {
         var reader = new FileReader();
         reader.onloadend = function () {
             cb(void 0, this.result);
@@ -263,30 +264,46 @@ define([
 
         var handleFile = File.handleFile = function (file, e, thumbnail) {
             var thumb;
-            var finish = function (arrayBuffer) {
+            var file_arraybuffer;
+            var finish = function () {
                 var metadata = {
                     name: file.name,
                     type: file.type,
                 };
                 if (thumb) { metadata.thumbnail = thumb; }
                 queue.push({
-                    blob: arrayBuffer,
+                    blob: file_arraybuffer,
                     metadata: metadata,
                     dropEvent: e
                 });
             };
 
-            var processFile = function () {
-                blobToArrayBuffer(file, function (e, buffer) {
-                    finish(buffer);
-                });
-            };
-
-            if (!thumbnail) { return void processFile(); }
-            blobToArrayBuffer(thumbnail, function (e, buffer) {
+            blobToArrayBuffer(file, function (e, buffer) {
                 if (e) { console.error(e); }
-                thumb = arrayBufferToString(buffer);
-                processFile();
+                file_arraybuffer = buffer;
+                if (thumbnail) { // there is already a thumbnail
+                    return blobToArrayBuffer(thumbnail, function (e, buffer) {
+                        if (e) { console.error(e); }
+                        thumb = arrayBufferToString(buffer);
+                        finish();
+                    });
+                }
+
+                if (!Thumb.isSupportedType(file.type)) { return finish(); }
+                // make a resized thumbnail from the image..
+                Thumb.fromImageBlob(file, function (e, thumb_blob) {
+                    if (e) { console.error(e); }
+                    if (!thumb_blob) { return finish(); }
+
+                    blobToArrayBuffer(thumb_blob, function (e, buffer) {
+                        if (e) {
+                            console.error(e);
+                            return finish();
+                        }
+                        thumb = arrayBufferToString(buffer);
+                        finish();
+                    });
+                });
             });
         };
 

www/common/common-thumbnail.js

@@ -3,7 +3,18 @@ define([
 ], function () {
     var Nacl = window.nacl;
     var Thumb = {
-        dimension: 150, // thumbnails are all 150px
+        dimension: 100,
+    };
+
+    var supportedTypes = [
+        'image/png',
+        'image/jpeg',
+        'image/jpg',
+        'image/gif', // TODO confirm this is true
+    ];
+
+    Thumb.isSupportedType = function (type) {
+        return supportedTypes.indexOf(type) !== -1;
     };
 
     // create thumbnail image from metadata
@@ -27,22 +38,67 @@ define([
         }
     };
 
+    var getResizedDimensions = function (img) {
+        var h = img.height;
+        var w = img.width;
+
+        var dim = Thumb.dimension;
+        // if the image is too small, don't bother making a thumbnail
+        if (h <= dim || w <= dim) { return null; }
+
+        // the image is taller than it is wide, so scale to that.
+        var r = dim / (h > w? h: w); // ratio
+
+        var d;
+        if (h > w) {
+            d = Math.floor(((h * r) - dim) / 2);
+            return {
+                x1: 0,
+                x2: dim,
+                y1: d,
+                y2: dim + d,
+            };
+        } else {
+            d = Math.floor(((w * r) - dim) / 2);
+            return {
+                x1: d,
+                x2: dim + d,
+                y1: 0,
+                y2: dim,
+            };
+        }
+    };
+
     // assumes that your canvas is square
     // nodeback returning blob
-    Thumb.fromCanvas = function (canvas, cb) {
-        canvas = canvas;
+    Thumb.fromCanvas = Thumb.fromImage = function (canvas, cb) {
         var c2 = document.createElement('canvas');
-        var d = Thumb.dimension;
-        c2.width = d;
-        c2.height = 2;
+        var D = getResizedDimensions(canvas);
+        if (!D) { return void cb('TOO_SMALL'); }
+
+        c2.width = Thumb.dimension;
+        c2.height = Thumb.dimension;
 
         var ctx = c2.getContext('2d');
-        ctx.drawImage(canvas, 0, 0, d, d);
+        ctx.drawImage(canvas, D.x1, D.y1, D.x2, D.y2);
         c2.toBlob(function (blob) {
             cb(void 0, blob);
         });
     };
 
+    Thumb.fromImageBlob = function (blob, cb) {
+        var url = URL.createObjectURL(blob);
+        var img = new Image();
+
+        img.onload = function () {
+            Thumb.fromImage(img, cb);
+        };
+        img.onerror = function () {
+            cb('ERROR');
+        };
+        img.src = url;
+    };
+
     Thumb.fromVideo = function (video, cb) {
         cb = cb; // WIP
     };