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

www/assert/index.html

@@ -19,6 +19,11 @@
         .error {
             border: 1px solid red;
         }
+        .thumb {
+            max-height: 150px;
+            width: auto;
+            border: 3px solid black;
+        }
     </style>
 
 </head>
@@ -36,6 +41,7 @@
 <!-- -->
 <div id="quot"><p>"pewpewpew"</p></div>
 
+
 <hr>
 
 <h2>Test 2</h2>
@@ -45,3 +51,6 @@
 <div id="widget"><div data-cke-widget-id="0" tabindex="-1" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_block" data-cke-display-name="macro:velocity" contenteditable="false"><div class="macro cke_widget_element" data-macro="startmacro:velocity|-||-|Here is a macro" data-cke-widget-data="%7B%22classes%22%3A%7B%22macro%22%3A1%7D%7D" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="xwiki-macro"><p>Here is a macro</p></div><span style='background: rgba(220, 220, 220, 0.5) url("/customize/cryptofist_small.png") repeat scroll 0% 0%; top: -15px; left: 0px; display: block;' class="cke_reset cke_widget_drag_handler_container"><img title="Click and drag to move" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" data-cke-widget-drag-handler="1" class="cke_reset cke_widget_drag_handler" height="15" width="15"></span></div></div>
 
 <hr>
+
+<img id="thumb-orig" src="/customize/alt-favicon.png" />
+

www/assert/main.js

@@ -5,8 +5,9 @@ define([
     'json.sortify',
     '/common/cryptpad-common.js',
     '/drive/tests.js',
-    '/common/test.js'
+    '/common/test.js',
-], function ($, Hyperjson, TextPatcher, Sortify, Cryptpad, Drive, Test) {
+    '/common/common-thumbnail.js',
+], function ($, Hyperjson, TextPatcher, Sortify, Cryptpad, Drive, Test, Thumb) {
     window.Hyperjson = Hyperjson;
     window.TextPatcher = TextPatcher;
     window.Sortify = Sortify;
@@ -207,6 +208,31 @@ define([
         return cb(true);
     }, "version 2 hash failed to parse correctly");
 
+    assert(function (cb) {
+        var getBlob = function (url, cb) {
+            var xhr = new XMLHttpRequest();
+            xhr.open("GET", url, true);
+            xhr.responseType = "blob";
+            xhr.onload = function () {
+                cb(void 0, this.response);
+            };
+            xhr.send();
+        };
+
+        var $img = $('img#thumb-orig');
+        getBlob($img.attr('src'), function (e, blob) {
+            console.log(e, blob);
+            Thumb.fromImageBlob(blob, function (e, thumb) {
+                console.log(thumb);
+                var th = new Image();
+                th.src = URL.createObjectURL(thumb);
+                th.onload = function () {
+                    $(document.body).append($(th).addClass('thumb'));
+                    cb(th.width === Thumb.dimension && th.height === Thumb.dimension);
+                };
+            });
+        });
+    });
 
     Drive.test(assert);
 

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) {
-                blobToArrayBuffer(file, function (e, buffer) {
-                    finish(buffer);
-                });
-            };
-
-            if (!thumbnail) { return void processFile(); }
-            blobToArrayBuffer(thumbnail, function (e, buffer) {
                 if (e) { console.error(e); }
-                thumb = arrayBufferToString(buffer);
+                file_arraybuffer = buffer;
-                processFile();
+                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) {
+    Thumb.fromCanvas = Thumb.fromImage = function (canvas, cb) {
-        canvas = canvas;
         var c2 = document.createElement('canvas');
-        var d = Thumb.dimension;
+        var D = getResizedDimensions(canvas);
-        c2.width = d;
+        if (!D) { return void cb('TOO_SMALL'); }
-        c2.height = 2;
+
+        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
     };

www/file/file-crypto.js

@@ -185,7 +185,7 @@ define([
                     });
                 }
                 if (plaintext) {
-                    if (i * cypherChunkLength < u8.length) { // not done
+                    if ((2 + metadataLength + i * cypherChunkLength) < u8.length) { // not done
                         chunks.push(plaintext);
                         return setTimeout(again);
                     }