Get mediatag embed code from the file app

customize.dist/translations/messages.fr.js

@@ -171,6 +171,11 @@ define(function () {
     out.viewShareTitle = "Copier lien d'accès en lecture seule dans le presse-papiers";
     out.viewOpen = "Voir dans un nouvel onglet";
     out.viewOpenTitle = "Ouvrir le lien en lecture seule dans un nouvel onglet";
+    out.fileShare = "Copier le lien";
+    out.fileEmbed = "Obtenir le code d'intégration";
+    out.fileEmbedTitle = "Intégrer le fichier dans une page web";
+    out.fileEmbedScript = "Pour intégrer un fichier, veuillez inclure le script suivant une fois dans votre page afin de pouvoir charger le Media Tag :";
+    out.fileEmbedTag = "Ensuite vous pouvez placer ce Media Tag où vous souhaitez dans votre page pour l'intégrer :";
 
     out.notifyJoined = "{0} a rejoint la session collaborative";
     out.notifyRenamed = "{0} a changé son nom en {1}";

customize.dist/translations/messages.js

@@ -173,6 +173,11 @@ define(function () {
     out.viewShareTitle = "Copy the read-only link to clipboard";
     out.viewOpen = "Open read-only link in a new tab";
     out.viewOpenTitle = "Open this pad in read-only mode in a new tab";
+    out.fileShare = "Copy link";
+    out.fileEmbed = "Get embed code";
+    out.fileEmbedTitle = "Embed the file in an external page";
+    out.fileEmbedScript = "To embed this file, include this script once in your page to load the Media Tag:";
+    out.fileEmbedTag = "Then place this Media Tag wherever in your page you would like to embed:";
 
     out.notifyJoined = "{0} has joined the collaborative session";
     out.notifyRenamed = "{0} is now known as {1}";

www/common/cryptpad-common.js

@@ -1396,6 +1396,23 @@ define([
       return isEmoji(emojis[0])? emojis[0]: str[0];
     };
 
+    common.getMediatagScript = function () {
+        var origin = window.location.origin;
+        return '<script src="' + origin + '/common/media-tag-nacl.min.js"></script>';
+    };
+    common.getMediatagFromHref = function (href) {
+        var parsed = common.parsePadUrl(href);
+        var secret = common.getSecrets('file', parsed.hash);
+        if (secret.keys && secret.channel) {
+            var cryptKey = secret.keys && secret.keys.fileKeyStr;
+            var hexFileName = common.base64ToHex(secret.channel);
+            var origin = Config.fileHost || window.location.origin;
+            var src = origin + common.getBlobPathFromHex(hexFileName);
+            return '<media-tag src="' + src + '" data-crypto-key="cryptpad:' + cryptKey + '">' +
+                   '</media-tag>';
+        }
+        return;
+    };
     $(window.document).on('decryption', function (e) {
         var decrypted = e.originalEvent;
         if (decrypted.callback) {

www/common/toolbar2.js

@@ -481,17 +481,68 @@ define([
         if (!window.location.hash) {
             throw new Error("Unable to display the share button: hash required in the URL");
         }
+        // Create dropdowns
         var $shareIcon = $('<span>', {'class': 'fa fa-share-alt'});
-        var $button = $('<button>', {'title': Messages.shareButton}).append($shareIcon);
+        var options = [];
-        $button.addClass('shareButton');
+        options.push({
-        $button.click(function () {
+            tag: 'a',
-            var url = window.location.href;
+            attributes: {title: Messages.editShareTitle, 'class': 'fileShare'},
+            content: '<span class="fa fa-file"></span> ' + Messages.fileShare
+        });
+        options.push({
+            tag: 'a',
+            attributes: {title: Messages.editShareTitle, 'class': 'fileEmbed'},
+            content: '<span class="fa fa-file"></span> ' + Messages.fileEmbed
+        });
+        var dropdownConfigShare = {
+            text: $('<div>').append($shareIcon).html(),
+            options: options,
+            feedback: 'FILESHARE_MENU',
+        };
+        var $shareBlock = Cryptpad.createDropdown(dropdownConfigShare);
+        $shareBlock.find('.cp-dropdown-content').addClass(SHARE_CLS);
+        $shareBlock.addClass('shareButton');
+        $shareBlock.find('button').attr('title', Messages.shareButton);
+
+        // Add handlers
+        var url = window.location.href;
+        $shareBlock.find('a.fileShare').click(function () {
             var success = Cryptpad.Clipboard.copy(url);
             if (success) { Cryptpad.log(Messages.shareSuccess); }
         });
+        $shareBlock.find('a.fileEmbed').click(function () {
+            var $content = $('<div>');
+            $('<input>', {'style':'display:none;'}).appendTo($content);
+            $('<h3>').text(Messages.fileEmbedTitle).appendTo($content);
+            var $script = $('<p>').text(Messages.fileEmbedScript).appendTo($content);
+            $('<br>').appendTo($script);
+            var scriptId = uid();
+            $('<input>', {
+                type: 'text',
+                id: scriptId,
+                readonly: 'readonly',
+                value: Cryptpad.getMediatagScript(),
+            }).appendTo($script);
+            var $tag = $('<p>').text(Messages.fileEmbedTag).appendTo($content);
+            $('<br>').appendTo($tag);
+            var tagId = uid();
+            $('<input>', {
+                type:'text',
+                id: tagId,
+                readonly:'readonly',
+                value:Cryptpad.getMediatagFromHref(url),
+            }).appendTo($tag);
+            Cryptpad.alert($content.html(), null, true);
+            $('#'+scriptId).click(function () {
+                this.select();
+            });
+            $('#'+tagId).click(function () {
+                this.select();
+            });
+        });
 
-        toolbar.$leftside.append($button);
+        toolbar.$leftside.append($shareBlock);
-        return $button;
+        return $shareBlock;
     };
 
     var createTitle = function (toolbar, config) {

www/common/toolbar3.js

@@ -440,6 +440,7 @@ define([
     };
 
     var createFileShare = function (toolbar) {
+        throw new Error('TODO: Update createFileShare to add "embed" and work in secure iframes');
         if (!window.location.hash) {
             throw new Error("Unable to display the share button: hash required in the URL");
         }

www/file/main.js

@@ -107,6 +107,8 @@ define([
                     $mt.attr('src', '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName);
                     $mt.attr('data-crypto-key', 'cryptpad:'+cryptKey);
 
+                    var rightsideDisplayed = false;
+
                     $(window.document).on('decryption', function (e) {
                         var decrypted = e.originalEvent;
                         if (decrypted.callback) {
@@ -127,12 +129,15 @@ define([
                         text += '<em>' + Messages._getKey('formattedMB', [sizeMb]) + '</em>';
                         $dlButton.html(text);
 
-                        toolbar.$rightside.append(Cryptpad.createButton('export', true, {}, function () {
+                        if (!rightsideDisplayed) {
-                            saveAs(decrypted.blob, decrypted.metadata.name);
+                            toolbar.$rightside.append(Cryptpad.createButton('export', true, {}, function () {
-                        }))
+                                saveAs(decrypted.blob, decrypted.metadata.name);
-                        .append(Cryptpad.createButton('forget', true, {}, function () {
+                            }))
-                            // not sure what to do here
+                            .append(Cryptpad.createButton('forget', true, {}, function () {
-                        }));
+                                // not sure what to do here
+                            }));
+                            rightsideDisplayed = true;
+                        }
 
                         // make pdfs big
                         var toolbarHeight = $iframe.find('#toolbar').height();