Enable avatars in pad2

www/common/cryptpad-common.js

@@ -829,6 +829,13 @@ define([
         });
     };
 
+    // SFRAME: talk to anon_rpc from the iframe
+    common.anonRpcMsg = function (msg, data, cb) {
+        if (!msg) { return; }
+        if (!anon_rpc) { return void cb('ANON_RPC_NOT_READY'); }
+        anon_rpc.send(msg, data, cb);
+    };
+
     common.getFileSize = function (href, cb) {
         if (!anon_rpc) { return void cb('ANON_RPC_NOT_READY'); }
         //if (!pinsReady()) { return void cb('RPC_NOT_READY'); }
@@ -1256,7 +1263,7 @@ define([
       }
       return arr;
     };
-    var getFirstEmojiOrCharacter = function (str) {
+    var getFirstEmojiOrCharacter = common.getFirstEmojiOrCharacter = function (str) {
       if (!str || !str.trim()) { return '?'; }
       var emojis = emojiStringToArray(str);
       return isEmoji(emojis[0])? emojis[0]: str[0];
@@ -1645,6 +1652,7 @@ define([
         return $block;
     };
 
+    // SFRAME: moved to sframe-common-interface.js
     common.createUserAdminMenu = function (config) {
         var $displayedName = $('<span>', {'class': config.displayNameCls || 'displayName'});
         var accountName = localStorage[common.userNameKey];

www/common/metadata-manager.js

@@ -36,7 +36,6 @@ define([], function () {
             // We don't want to add our user data to the object multiple times.
             //var containsYou = false;
             //console.log(metadataObj);
-            console.log(metadataObj.users);
             Object.keys(metadataObj.users).forEach(function (x) {
                 if (members.indexOf(x) === -1) { return; }
                 mdo[x] = metadataObj.users[x];

www/common/sframe-common-interface.js

@@ -1,10 +1,107 @@
 define([
     'jquery',
-    '/common/cryptpad-common.js'
-], function ($, Cryptpad) {
+    '/common/cryptpad-common.js',
+    '/common/media-tag.js',
+], function ($, Cryptpad, MediaTag) {
     var UI = {};
     var Messages = Cryptpad.Messages;
 
+    /**
+     * Requirements from cryptpad-common.js
+     * getFileSize
+     *  - hrefToHexChannelId
+     * displayAvatar
+     *  - getFirstEmojiOrCharacter
+     *  - parsePadUrl
+     *  - getSecrets
+     *  - base64ToHex
+     *  - getBlobPathFromHex
+     *  - bytesToMegabytes
+     * createUserAdminMenu
+     *  - fixHTML
+     *  - createDropdown
+    */
+
+    UI.getFileSize = function (Common, href, cb) {
+        var channelId = Cryptpad.hrefToHexChannelId(href);
+        Common.sendAnonRpcMsg("GET_FILE_SIZE", channelId, function (data) {
+            if (!data) { return void cb("No response"); }
+            if (data.error) { return void cb(data.error); }
+            if (data.response && data.response.length && typeof(data.response[0]) === 'number') {
+                return void cb(void 0, data.response[0]);
+            } else {
+                cb('INVALID_RESPONSE');
+            }
+        });
+    };
+
+    UI.displayAvatar = function (Common, $container, href, name, cb) {
+        var MutationObserver = window.MutationObserver;
+        var displayDefault = function () {
+            var text = Cryptpad.getFirstEmojiOrCharacter(name);
+            var $avatar = $('<span>', {'class': 'default'}).text(text);
+            $container.append($avatar);
+            if (cb) { cb(); }
+        };
+
+        if (!href) { return void displayDefault(); }
+        var parsed = Cryptpad.parsePadUrl(href);
+        var secret = Cryptpad.getSecrets('file', parsed.hash);
+        if (secret.keys && secret.channel) {
+            var cryptKey = secret.keys && secret.keys.fileKeyStr;
+            var hexFileName = Cryptpad.base64ToHex(secret.channel);
+            var src = Cryptpad.getBlobPathFromHex(hexFileName);
+            UI.getFileSize(Common, href, function (e, data) {
+                if (e) {
+                    displayDefault();
+                    return void console.error(e);
+                }
+                if (typeof data !== "number") { return void displayDefault(); }
+                if (Cryptpad.bytesToMegabytes(data) > 0.5) { return void displayDefault(); }
+                var $img = $('<media-tag>').appendTo($container);
+                $img.attr('src', src);
+                $img.attr('data-crypto-key', 'cryptpad:' + cryptKey);
+                var observer = new MutationObserver(function(mutations) {
+                    mutations.forEach(function(mutation) {
+                        if (mutation.type === 'childList' && mutation.addedNodes.length) {
+                            if (mutation.addedNodes.length > 1 ||
+                                mutation.addedNodes[0].nodeName !== 'IMG') {
+                                $img.remove();
+                                return void displayDefault();
+                            }
+                            var $image = $img.find('img');
+                            var onLoad = function () {
+                                var img = new Image();
+                                img.onload = function () {
+                                    var w = img.width;
+                                    var h = img.height;
+                                    if (w>h) {
+                                        $image.css('max-height', '100%');
+                                        $img.css('flex-direction', 'column');
+                                        if (cb) { cb($img); }
+                                        return;
+                                    }
+                                    $image.css('max-width', '100%');
+                                    $img.css('flex-direction', 'row');
+                                    if (cb) { cb($img); }
+                                };
+                                img.src = $image.attr('src');
+                            };
+                            if ($image[0].complete) { onLoad(); }
+                            $image.on('load', onLoad);
+                        }
+                    });
+                });
+                observer.observe($img[0], {
+                    attributes: false,
+                    childList: true,
+                    characterData: false
+                });
+                MediaTag($img[0]);
+            });
+        }
+    };
+
     UI.createUserAdminMenu = function (config) {
         var Common = config.Common;
         var metadataMgr = config.metadataMgr;
@@ -118,10 +215,9 @@ define([
             var newName = myData.name;
             var url = myData.avatar;
             $displayName.text(newName || Messages.anonymous);
-            console.log(newName || Messages.anonymous);
             if (accountName) {
                 $avatar.html('');
-                Cryptpad.displayAvatar($avatar, url, newName, function ($img) {
+                UI.displayAvatar(Common, $avatar, url, newName, function ($img) {
                     if ($img) {
                         $userAdmin.find('button').addClass('avatar');
                     }

www/common/sframe-common.js

@@ -34,6 +34,7 @@ define([
 
     // UI
     funcs.createUserAdminMenu = UI.createUserAdminMenu;
+    funcs.displayAvatar = UI.displayAvatar;
 
     // Title module
     funcs.createTitle = Title.create;
@@ -43,8 +44,6 @@ define([
         return ctx.cpNfInner.metadataMgr.getMetadata().defaultTitle;
     };
 
-
-
     funcs.setDisplayName = function (name, cb) {
         ctx.sframeChan.query('Q_SETTINGS_SET_DISPLAY_NAME', name, function (err) {
             if (cb) { cb(err); }
@@ -63,6 +62,15 @@ define([
         });
     };
 
+    funcs.sendAnonRpcMsg = function (msg, content, cb) {
+        ctx.sframeChan.query('Q_ANON_RPC_MESSAGE', {
+            msg: msg,
+            content: content
+        }, function (err, data) {
+            if (cb) { cb(data); }
+        });
+    };
+
 /*    funcs.storeLinkToClipboard = function (readOnly, cb) {
         ctx.sframeChan.query('Q_STORE_LINK_TO_CLIPBOARD', readOnly, function (err) {
             if (cb) { cb(err); }

www/common/sframe-protocol.js

@@ -54,4 +54,7 @@ define({
 
     // Store the editing or readonly link of the current pad to the clipboard (share button)
     'Q_STORE_LINK_TO_CLIPBOARD': true,
+
+    // Use anonymous rpc from inside the iframe (for avatars & pin usage)
+    'Q_ANON_RPC_MESSAGE': true,
 });

www/common/toolbar3.js

@@ -234,7 +234,7 @@ define([
                 $span.append(avatars[data.avatar]);
                 $span.append($rightCol);
             } else {
-                Cryptpad.displayAvatar($span, data.avatar, name, function ($img) {
+                Common.displayAvatar(Common, $span, data.avatar, name, function ($img) {
                     if (data.avatar && $img) {
                         avatars[data.avatar] = $img[0].outerHTML;
                     }

www/pad2/outer.js

@@ -84,6 +84,12 @@ define([
                 }
             });
 
+            sframeChan.on('Q_ANON_RPC_MESSAGE', function (data, cb) {
+                Cryptpad.anonRpcMsg(data.msg, data.content, function (err, response) {
+                    cb({error: err, response: response});
+                });
+            });
+
             sframeChan.on('Q_SET_PAD_TITLE_IN_DRIVE', function (newTitle, cb) {
                 Cryptpad.renamePad(newTitle, undefined, function (err) {
                     if (err) { cb('ERROR'); } else { cb(); }
@@ -126,4 +132,4 @@ define([
             });
         });
     });
-});
+});