Ability to import mediatags to the drive

www/common/common-ui-elements.js

@@ -2361,5 +2361,96 @@ define([
 
     };
 
+    var createContextMenu = function (menu) {
+        var $menu = $(menu).appendTo($('body'));
+
+        var display = function (e) {
+            $menu.css({ display: "block" });
+            var h = $menu.outerHeight();
+            var w = $menu.outerWidth();
+            var wH = window.innerHeight;
+            var wW = window.innerWidth;
+            if (h > wH) {
+                $menu.css({
+                    top: '0px',
+                    bottom: ''
+                });
+            } else if (e.pageY + h <= wH) {
+                $menu.css({
+                    top: e.pageY+'px',
+                    bottom: ''
+                });
+            } else {
+                $menu.css({
+                    bottom: '0px',
+                    top: ''
+                });
+            }
+            if(w > wW) {
+                $menu.css({
+                    left: '0px',
+                    right: ''
+                });
+            } else if (e.pageX + w <= wW) {
+                $menu.css({
+                    left: e.pageX+'px',
+                    right: ''
+                });
+            } else {
+                $menu.css({
+                    left: '',
+                    right: '0px',
+                });
+            }
+        };
+
+        var hide = function () {
+            $menu.hide();
+        };
+        var remove = function () {
+            $menu.remove();
+        };
+
+        $('body').click(hide);
+
+        return {
+            menu: menu,
+            show: display,
+            hide: hide,
+            remove: remove
+        };
+    };
+
+    var mediatagContextMenu;
+    UIElements.importMediaTagMenu = function (common) {
+        if (mediatagContextMenu) { return mediatagContextMenu; }
+
+        // Create context menu
+        var menu = h('div.cp-contextmenu.dropdown.cp-unselectable', [
+            h('ul.dropdown-menu', {
+                'role': 'menu',
+                'aria-labelledBy': 'dropdownMenu',
+                'style': 'display:block;position:static;margin-bottom:5px;'
+            }, [
+                h('li', h('a.dropdown-item', {
+                    'tabindex': '-1',
+                }, Messages.pad_mediatagImport))
+            ])
+        ]);
+        var m = createContextMenu(menu);
+
+        mediatagContextMenu = m;
+
+        var $menu = $(m.menu);
+        $menu.on('click', 'a', function (e) {
+            e.stopPropagation();
+            m.hide();
+            var $mt = $menu.data('mediatag');
+            common.importMediaTag($mt);
+        });
+
+        return m;
+    };
+
     return UIElements;
 });

www/common/diffMarked.js

@@ -166,7 +166,8 @@ define([
         return patch;
     };
 
-    DiffMd.apply = function (newHtml, $content) {
+    DiffMd.apply = function (newHtml, $content, common) {
+        var contextMenu = common.importMediaTagMenu();
         var id = $content.attr('id');
         if (!id) { throw new Error("The element must have a valid id"); }
         var pattern = /(<media-tag src="([^"]*)" data-crypto-key="([^"]*)">)<\/media-tag>/g;
@@ -192,6 +193,11 @@ define([
             DD.apply($content[0], patch);
             var $mts = $content.find('media-tag:not(:has(*))');
             $mts.each(function (i, el) {
+                $(el).contextmenu(function (e) {
+                    e.preventDefault();
+                    $(contextMenu.menu).data('mediatag', $(el));
+                    contextMenu.show(e);
+                });
                 MediaTag(el);
                 var observer = new MutationObserver(function(mutations) {
                     mutations.forEach(function(mutation) {

www/common/media-tag.js

@@ -390,6 +390,7 @@
         var end = function (decrypted) {
             process(mediaObject, decrypted, cfg, function (err) {
                 if (err) { return void emit('error', err); }
+                mediaObject._blob = decrypted;
                 emit('complete', decrypted);
             });
         };

www/common/outer/sharedworker.js

@@ -18,6 +18,9 @@ var debug = function (msg) { console.log(msg); };
 
 var init = function (client, cb) {
     debug('SharedW INIT');
+    require.config({
+        waitSeconds: 600
+    });
 
     require(['/api/config?cb=' + (+new Date()).toString(16)], function (ApiConfig) {
         if (ApiConfig.requireConf) { require.config(ApiConfig.requireConf); }

www/common/sframe-common-outer.js

@@ -379,6 +379,29 @@ define([
                 });
             });
 
+            sframeChan.on('Q_IMPORT_MEDIATAG', function (obj, cb) {
+                var key = obj.key;
+                var channel = obj.channel;
+                var hash = Utils.Hash.getFileHashFromKeys({
+                    version: 1,
+                    channel: channel,
+                    keys: {
+                        fileKeyStr: key
+                    }
+                });
+                var href = '/file/#' + hash;
+                var data = {
+                    title: obj.name,
+                    href: href,
+                    channel: channel,
+                    owners: obj.owners,
+                    forceSave: true,
+                };
+                Cryptpad.setPadTitle(data, function (err) {
+                    Cryptpad.setPadAttribute('fileType', obj.type, null, href);
+                    cb(err);
+                });
+            });
 
             sframeChan.on('Q_SETTINGS_SET_DISPLAY_NAME', function (newName, cb) {
                 Cryptpad.setDisplayName(newName, function (err) {

www/common/sframe-common.js

@@ -94,6 +94,7 @@ define([
     funcs.getPadCreationScreen = callWithCommon(UIElements.getPadCreationScreen);
     funcs.createNewPadModal = callWithCommon(UIElements.createNewPadModal);
     funcs.onServerError = callWithCommon(UIElements.onServerError);
+    funcs.importMediaTagMenu = callWithCommon(UIElements.importMediaTagMenu);
 
     // Thumb
     funcs.displayThumbnail = callWithCommon(Thumb.displayThumbnail);
@@ -130,6 +131,24 @@ define([
         }
         return;
     };
+    funcs.importMediaTag = function ($mt) {
+        if (!$mt || !$mt.is('media-tag')) { return; }
+        var chanStr = $mt.attr('src');
+        var keyStr = $mt.attr('data-crypto-key');
+        var channel = chanStr.replace(/\/blob\/[0-9a-f]{2}\//i, '');
+        var key = keyStr.replace(/cryptpad:/i, '');
+        var metadata = $mt[0]._mediaObject._blob.metadata;
+        ctx.sframeChan.query('Q_IMPORT_MEDIATAG', {
+            channel: channel,
+            key: key,
+            name: metadata.name,
+            type: metadata.type,
+            owners: metadata.owners
+        }, function () {
+            UI.log(Messages.saved);
+        });
+    };
+
     funcs.getFileSize = function (channelId, cb) {
         funcs.sendAnonRpcMsg("GET_FILE_SIZE", channelId, function (data) {
             if (!data) { return void cb("No response"); }

www/common/sframe-protocol.js

@@ -261,4 +261,7 @@ define({
     'EV_AUTOSTORE_DISPLAY_POPUP': true,
     'Q_AUTOSTORE_STORE': true,
     'Q_IS_PAD_STORED': true,
+
+    // Import mediatag from a pad
+    'Q_IMPORT_MEDIATAG': true
 });