From 75e5d3cc429849a24196b77e9eeacb8b001cc698 Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 30 Mar 2020 12:09:12 +0200 Subject: [PATCH] Move the mediatag and avatar code outsite of common-ui-elements --- www/common/common-ui-elements.js | 221 +------------------------ www/common/common-util.js | 21 +++ www/common/messenger-ui.js | 2 +- www/common/sframe-common-codemirror.js | 10 +- www/common/sframe-common.js | 7 +- www/common/toolbar3.js | 15 +- www/kanban/inner.js | 10 +- www/pad/cursor.js | 6 - www/profile/inner.js | 4 +- www/teams/inner.js | 6 +- www/whiteboard/inner.js | 2 + 11 files changed, 55 insertions(+), 249 deletions(-) diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 60a3bcfc5..4d487f779 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -8,7 +8,6 @@ define([ '/common/common-constants.js', '/common/common-feedback.js', '/common/hyperscript.js', - '/common/media-tag.js', '/common/clipboard.js', '/customize/messages.js', '/customize/application_config.js', @@ -18,19 +17,10 @@ define([ '/common/visible.js', 'css!/customize/fonts/cptools/style.css', - '/bower_components/croppie/croppie.min.js', - 'css!/bower_components/croppie/croppie.css', -], function ($, Config, Util, Hash, Language, UI, Constants, Feedback, h, MediaTag, Clipboard, +], function ($, Config, Util, Hash, Language, UI, Constants, Feedback, h, Clipboard, Messages, AppConfig, Pages, NThen, InviteInner, Visible) { var UIElements = {}; - // Configure MediaTags to use our local viewer - if (MediaTag) { - MediaTag.setDefaultConfig('pdf', { - viewer: '/common/pdfjs/web/viewer.html' - }); - } - UIElements.prettySize = function (bytes) { var kB = Util.bytesToKilobytes(bytes); if (kB < 1024) { return kB + Messages.KB; } @@ -110,7 +100,7 @@ define([ var data = users[key]; var name = data.displayName || data.name || Messages.anonymous; var avatar = h('span.cp-usergrid-avatar.cp-avatar'); - UIElements.displayAvatar(common, $(avatar), data.avatar, name); + common.displayAvatar($(avatar), data.avatar, name); var removeBtn, el; if (config.remove) { removeBtn = h('span.fa.fa-times'); @@ -1930,205 +1920,6 @@ define([ }; }; - // Avatars - - UIElements.displayMediatagImage = function (Common, $tag, cb) { - if (!$tag.length || !$tag.is('media-tag')) { return void cb('NOT_MEDIATAG'); } - var observer = new MutationObserver(function(mutations) { - mutations.forEach(function(mutation) { - if (mutation.addedNodes.length) { - if (mutation.addedNodes.length > 1 || - mutation.addedNodes[0].nodeName !== 'IMG') { - return void cb('NOT_IMAGE'); - } - var $image = $tag.find('img'); - var onLoad = function () { - var img = new Image(); - img.onload = function () { - var _cb = cb; - cb = $.noop; - _cb(null, $image, img); - }; - img.src = $image.attr('src'); - }; - if ($image[0].complete) { onLoad(); } - $image.on('load', onLoad); - } - }); - }); - observer.observe($tag[0], { - attributes: false, - childList: true, - characterData: false - }); - MediaTag($tag[0]).on('error', function (data) { - console.error(data); - }); - }; - - var emoji_patt = /([\uD800-\uDBFF][\uDC00-\uDFFF])/; - var isEmoji = function (str) { - return emoji_patt.test(str); - }; - var emojiStringToArray = function (str) { - var split = str.split(emoji_patt); - var arr = []; - for (var i=0; i', {'class': 'cp-avatar-default'}).text(text); - $container.append($avatar); - if (cb) { cb(); } - }; - if (!window.Symbol) { return void displayDefault(); } // IE doesn't have Symbol - if (!href || href.length === 1) { return void displayDefault(); } - - var centerImage = function ($img, $image, img) { - 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); } - }; - - var parsed = Hash.parsePadUrl(href); - if (parsed.type !== "file" || parsed.hashData.type !== "file") { - var $img = $('').appendTo($container); - var img = new Image(); - $(img).attr('src', href); - img.onload = function () { - centerImage($img, $(img), img); - $(img).appendTo($img); - }; - return; - } - // No password for avatars - var privateData = common.getMetadataMgr().getPrivateData(); - var origin = privateData.fileHost || privateData.origin; - var secret = Hash.getSecrets('file', parsed.hash); - if (secret.keys && secret.channel) { - var hexFileName = secret.channel; - var cryptKey = Hash.encodeBase64(secret.keys && secret.keys.cryptKey); - var src = origin + Hash.getBlobPathFromHex(hexFileName); - common.getFileSize(hexFileName, function (e, data) { - if (e || !data) { return void displayDefault(); } - if (typeof data !== "number") { return void displayDefault(); } - if (Util.bytesToMegabytes(data) > 0.5) { return void displayDefault(); } - var $img = $('').appendTo($container); - $img.attr('src', src); - $img.attr('data-crypto-key', 'cryptpad:' + cryptKey); - UIElements.displayMediatagImage(common, $img, function (err, $image, img) { - if (err) { return void console.error(err); } - centerImage($img, $image, img); - }); - }); - } - }; - var transformAvatar = function (file, cb) { - if (file.type === 'image/gif') { return void cb(file); } - var $croppie = $('
', { - 'class': 'cp-app-profile-resizer' - }); - - if (typeof ($croppie.croppie) !== "function") { - console.warn('fuck'); - return void cb(file); - } - - var todo = function () { - UI.confirm($croppie[0], function (yes) { - if (!yes) { return; } - $croppie.croppie('result', { - type: 'blob', - size: {width: 300, height: 300} - }).then(function(blob) { - blob.lastModifiedDate = new Date(); - blob.name = 'avatar'; - cb(blob); - }); - }); - }; - - var reader = new FileReader(); - reader.onload = function(e) { - $croppie.croppie({ - url: e.target.result, - viewport: { width: 100, height: 100 }, - boundary: { width: 400, height: 300 }, - }); - todo(); - }; - reader.readAsDataURL(file); - }; - UIElements.addAvatar = function (common, cb) { - var AVATAR_SIZE_LIMIT = 0.5; - var allowedMediaTypes = [ - 'image/png', - 'image/jpeg', - 'image/jpg', - 'image/gif', - ]; - var fmConfig = { - noHandlers: true, - noStore: true, - body: $('body'), - onUploaded: cb - }; - var FM = common.createFileManager(fmConfig); - var accepted = ".gif,.jpg,.jpeg,.png"; - var data = { - FM: FM, - filter: function (file) { - var sizeMB = Util.bytesToMegabytes(file.size); - var type = file.type; - // We can't resize .gif so we have to display an error if it is too big - if (sizeMB > AVATAR_SIZE_LIMIT && type === 'image/gif') { - UI.log(Messages._getKey('profile_uploadSizeError', [ - Messages._getKey('formattedMB', [AVATAR_SIZE_LIMIT]) - ])); - return false; - } - // Display an error if the image type is not allowed - if (allowedMediaTypes.indexOf(type) === -1) { - UI.log(Messages._getKey('profile_uploadTypeError', [ - accepted.split(',').join(', ') - ])); - return false; - } - return true; - }, - transformer: transformAvatar, - accept: accepted - }; - return data; - }; - /* Create a usage bar which keeps track of how much storage space is used by your CryptDrive. The getPinnedUsage RPC is one of the heavier calls, so we throttle its usage. Clients will not update more than once per @@ -2640,7 +2431,7 @@ define([ $displayName.text(newName || Messages.anonymous); if (accountName && oldUrl !== url) { $avatar.html(''); - UIElements.displayAvatar(Common, $avatar, url, + Common.displayAvatar($avatar, url, newName || Messages.anonymous, function ($img) { oldUrl = url; $userAdmin.find('> button').removeClass('cp-avatar'); @@ -2879,6 +2670,7 @@ define([ }); }; + // XXX add txid UIElements.initFilePicker = function (common, cfg) { var onSelect = cfg.onSelect || $.noop; var sframeChan = common.getSframeChannel(); @@ -3028,7 +2820,7 @@ define([ var teams = Object.keys(privateData.teams).map(function (id) { var data = privateData.teams[id]; var avatar = h('span.cp-creation-team-avatar.cp-avatar'); - UIElements.displayAvatar(common, $(avatar), data.avatar, data.name); + common.displayAvatar($(avatar), data.avatar, data.name); return h('div.cp-creation-team', { 'data-id': id, title: data.name, @@ -3725,6 +3517,9 @@ define([ return m; }; + UIElements.getMediaTagPreview = function () { + }; + UIElements.displayFriendRequestModal = function (common, data) { var msg = data.content.msg; var userData = msg.content.user; diff --git a/www/common/common-util.js b/www/common/common-util.js index da373f1ad..f9c64eb0e 100644 --- a/www/common/common-util.js +++ b/www/common/common-util.js @@ -445,6 +445,27 @@ return false; }; + var emoji_patt = /([\uD800-\uDBFF][\uDC00-\uDFFF])/; + var isEmoji = function (str) { + return emoji_patt.test(str); + }; + var emojiStringToArray = function (str) { + var split = str.split(emoji_patt); + var arr = []; + for (var i=0; i'; - return html; + return MT.getCursorAvatar(cursor); }; var marks = {}; exp.removeCursors = function () { diff --git a/www/common/sframe-common.js b/www/common/sframe-common.js index 8d04c6263..e10a90976 100644 --- a/www/common/sframe-common.js +++ b/www/common/sframe-common.js @@ -11,6 +11,7 @@ define([ '/common/sframe-common-codemirror.js', '/common/sframe-common-cursor.js', '/common/sframe-common-mailbox.js', + '/common/inner/common-mediatag.js', '/common/metadata-manager.js', '/customize/application_config.js', @@ -35,6 +36,7 @@ define([ CodeMirror, Cursor, Mailbox, + MT, MetadataMgr, AppConfig, CommonRealtime, @@ -90,8 +92,8 @@ define([ funcs.initFilePicker = callWithCommon(UIElements.initFilePicker); funcs.openFilePicker = callWithCommon(UIElements.openFilePicker); funcs.openTemplatePicker = callWithCommon(UIElements.openTemplatePicker); - funcs.displayMediatagImage = callWithCommon(UIElements.displayMediatagImage); - funcs.displayAvatar = callWithCommon(UIElements.displayAvatar); + funcs.displayMediatagImage = callWithCommon(MT.displayMediatagImage); + funcs.displayAvatar = callWithCommon(MT.displayAvatar); funcs.createButton = callWithCommon(UIElements.createButton); funcs.createUsageBar = callWithCommon(UIElements.createUsageBar); funcs.updateTags = callWithCommon(UIElements.updateTags); @@ -103,6 +105,7 @@ define([ funcs.createNewPadModal = callWithCommon(UIElements.createNewPadModal); funcs.onServerError = callWithCommon(UIElements.onServerError); funcs.importMediaTagMenu = callWithCommon(UIElements.importMediaTagMenu); + funcs.getMediaTagPreview = callWithCommon(UIElements.getMediaTagPreview); // Thumb funcs.displayThumbnail = callWithCommon(Thumb.displayThumbnail); diff --git a/www/common/toolbar3.js b/www/common/toolbar3.js index 13f7b9f50..09f7784a6 100644 --- a/www/common/toolbar3.js +++ b/www/common/toolbar3.js @@ -7,10 +7,11 @@ define([ '/common/common-hash.js', '/common/common-util.js', '/common/common-feedback.js', + '/common/inner/common-mediatag.js', '/common/hyperscript.js', '/common/messenger-ui.js', '/customize/messages.js', -], function ($, Config, ApiConfig, UIElements, UI, Hash, Util, Feedback, h, +], function ($, Config, ApiConfig, UIElements, UI, Hash, Util, Feedback, MT, h, MessengerUI, Messages) { var Common; @@ -345,17 +346,9 @@ MessengerUI, Messages) { window.open(origin+'/profile/#' + data.profile); }); } - if (data.avatar && UIElements.getAvatar(data.avatar)) { - $span.append(UIElements.getAvatar(data.avatar)); + Common.displayAvatar($span, data.avatar, name, function () { $span.append($rightCol); - } else { - Common.displayAvatar($span, data.avatar, name, function ($img) { - if (data.avatar && $img && $img.length) { - UIElements.setAvatar(data.avatar, $img[0].outerHTML); - } - $span.append($rightCol); - }); - } + }); $span.data('uid', data.uid); $editUsersList.append($span); }); diff --git a/www/kanban/inner.js b/www/kanban/inner.js index 310219e75..6a8595821 100644 --- a/www/kanban/inner.js +++ b/www/kanban/inner.js @@ -9,6 +9,7 @@ define([ '/common/common-hash.js', '/common/common-interface.js', '/common/common-ui-elements.js', + '/common/inner/common-mediatag.js', '/common/modes.js', '/customize/messages.js', '/common/hyperscript.js', @@ -40,6 +41,7 @@ define([ Hash, UI, UIElements, + MT, Modes, Messages, h, @@ -90,13 +92,9 @@ define([ var getAvatar = function (cursor, noClear) { // Tippy - var html = ''; - if (cursor.avatar && UIElements.getAvatar(cursor.avatar)) { - html += UIElements.getAvatar(cursor.avatar); - } - html += cursor.name + ''; + var html = MT.getCursorAvatar(cursor); - var l = UIElements.getFirstCharacter(cursor.name || Messages.anonymous); + var l = Util.getFirstCharacter(cursor.name || Messages.anonymous); var text = ''; if (cursor.color) { diff --git a/www/pad/cursor.js b/www/pad/cursor.js index 33308c24c..e8753ed4b 100644 --- a/www/pad/cursor.js +++ b/www/pad/cursor.js @@ -41,12 +41,6 @@ define([ var cursors = {}; var makeTippy = function (cursor) { - /*var html = ''; - if (cursor.avatar && UIElements.getAvatar(cursor.avatar)) { - html += UIElements.getAvatar(cursor.avatar); - } - html += cursor.name + ''; - return html;*/ return cursor.name; }; diff --git a/www/profile/inner.js b/www/profile/inner.js index c97521407..7bc6c4022 100644 --- a/www/profile/inner.js +++ b/www/profile/inner.js @@ -10,6 +10,7 @@ define([ '/common/common-ui-elements.js', '/common/common-realtime.js', '/common/clipboard.js', + '/common/inner/common-mediatag.js', '/common/hyperscript.js', '/customize/messages.js', '/customize/application_config.js', @@ -36,6 +37,7 @@ define([ UIElements, Realtime, Clipboard, + MT, h, Messages, AppConfig, @@ -351,7 +353,7 @@ define([ displayAvatar(); if (APP.readOnly) { return; } - var data = UIElements.addAvatar(common, function (ev, data) { + var data = MT.addAvatar(common, function (ev, data) { var old = common.getMetadataMgr().getUserData().avatar; var todo = function () { APP.module.execCommand("SET", { diff --git a/www/teams/inner.js b/www/teams/inner.js index 0eb649252..4dccf34d1 100644 --- a/www/teams/inner.js +++ b/www/teams/inner.js @@ -12,6 +12,7 @@ define([ '/common/sframe-common.js', '/common/proxy-manager.js', '/common/userObject.js', + '/common/inner/common-mediatag.js', '/common/hyperscript.js', '/customize/application_config.js', '/common/messenger-ui.js', @@ -35,6 +36,7 @@ define([ SFCommon, ProxyManager, UserObject, + MT, h, AppConfig, MessengerUI, @@ -966,7 +968,7 @@ define([ // Upload var avatar = h('div.cp-team-avatar.cp-avatar'); var $avatar = $(avatar); - var data = UIElements.addAvatar(common, function (ev, data) { + var data = MT.addAvatar(common, function (ev, data) { if (!data.url) { return void UI.warn(Messages.error); } APP.module.execCommand('GET_TEAM_METADATA', { teamId: APP.team @@ -1051,7 +1053,7 @@ define([ var displayUser = function (common, data) { var avatar = h('span.cp-teams-invite-from-avatar.cp-avatar'); - UIElements.displayAvatar(common, $(avatar), data.avatar, data.displayName); + common.displayAvatar($(avatar), data.avatar, data.displayName); return h('div.cp-teams-invite-from-author', [ avatar, h('span.cp-teams-invite-from-name', data.displayName) diff --git a/www/whiteboard/inner.js b/www/whiteboard/inner.js index 650fc1251..80ab8408f 100644 --- a/www/whiteboard/inner.js +++ b/www/whiteboard/inner.js @@ -404,6 +404,8 @@ define([ if (data.type === 'file') { var mt = ''; framework._.sfCommon.displayMediatagImage($(mt), function (err, $image) { + // Convert src from blob URL to base64 data URL + // XXX base64 is heavy... Util.blobURLToImage($image.attr('src'), function (imgSrc) { var img = new Image(); img.onload = function () { addImageToCanvas(img); };