From 43ad4f0a841be3ba34270e7dffa039bd2e1be4aa Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 3 Dec 2020 15:22:39 +0100 Subject: [PATCH] Deduplicate code between File and MediaTag --- .../src/less2/include/markdown.less | 45 ++--- .../src/less2/include/modals-ui-elements.less | 2 + www/common/common-thumbnail.js | 6 +- www/common/media-tag.js | 36 ++-- www/file/app-file.less | 5 + www/file/file-crypto.js | 66 -------- www/file/inner.html | 1 - www/file/inner.js | 160 ++++-------------- www/pad/inner.js | 2 +- 9 files changed, 89 insertions(+), 234 deletions(-) diff --git a/customize.dist/src/less2/include/markdown.less b/customize.dist/src/less2/include/markdown.less index af3ac74d8..f88d8ca7c 100644 --- a/customize.dist/src/less2/include/markdown.less +++ b/customize.dist/src/less2/include/markdown.less @@ -64,26 +64,7 @@ } } -.markdown_cryptpad() { - word-wrap: break-word; - - h1, h2, h3, h4, h5, h6 { - font-weight: bold; - padding-bottom: 0.3em; - border-bottom: 1px solid #eee; - } - li { - min-height: 22px; - } - .todo-list-item { - list-style: none; - position: relative; - .fa { - position: absolute; - margin-left: -17px; - margin-top: 4px; - } - } +.mediatag_cryptpad() { media-tag { cursor: pointer; * { @@ -126,6 +107,30 @@ display: inline-block; border: 1px solid #BBB; } +} + +.markdown_cryptpad() { + word-wrap: break-word; + + h1, h2, h3, h4, h5, h6 { + font-weight: bold; + padding-bottom: 0.3em; + border-bottom: 1px solid #eee; + } + li { + min-height: 22px; + } + .todo-list-item { + list-style: none; + position: relative; + .fa { + position: absolute; + margin-left: -17px; + margin-top: 4px; + } + } + + .mediatag_cryptpad(); pre.markmap { border: 1px solid #ddd; diff --git a/customize.dist/src/less2/include/modals-ui-elements.less b/customize.dist/src/less2/include/modals-ui-elements.less index 27eb233da..ff40729a6 100644 --- a/customize.dist/src/less2/include/modals-ui-elements.less +++ b/customize.dist/src/less2/include/modals-ui-elements.less @@ -1,6 +1,7 @@ @import (reference) "./colortheme-all.less"; @import (reference) "./variables.less"; @import (reference) "./browser.less"; +@import (reference) "./markdown.less"; .modals-ui-elements_main() { --LessLoader_require: LessLoader_currentFile(); @@ -214,6 +215,7 @@ flex: 1; min-width: 0; overflow: auto; + .mediatag_cryptpad(); media-tag { & > * { max-width: 100%; diff --git a/www/common/common-thumbnail.js b/www/common/common-thumbnail.js index 8c78d9d6d..012c2c9b4 100644 --- a/www/common/common-thumbnail.js +++ b/www/common/common-thumbnail.js @@ -3,9 +3,9 @@ define([ '/common/common-util.js', '/common/visible.js', '/common/common-hash.js', - '/file/file-crypto.js', + '/common/media-tag.js', '/bower_components/tweetnacl/nacl-fast.min.js', -], function ($, Util, Visible, Hash, FileCrypto) { +], function ($, Util, Visible, Hash, MediaTag) { var Nacl = window.nacl; var Thumb = { dimension: 100, @@ -314,7 +314,7 @@ define([ var hexFileName = secret.channel; var src = fileHost + Hash.getBlobPathFromHex(hexFileName); var key = secret.keys && secret.keys.cryptKey; - FileCrypto.fetchDecryptedMetadata(src, key, function (e, metadata) { + MediaTag.fetchDecryptedMetadata(src, key, function (e, metadata) { if (e) { if (e === 'XHR_ERROR') { return; } return console.error(e); diff --git a/www/common/media-tag.js b/www/common/media-tag.js index 446dfdf08..a00377ff4 100644 --- a/www/common/media-tag.js +++ b/www/common/media-tag.js @@ -125,7 +125,6 @@ var factory = function () { }; var makeProgressBar = function (cfg, mediaObject) { - // XXX CSP: we'll need to add style in cryptpad's less if (mediaObject.bar) { return; } mediaObject.bar = true; var style = (function(){/* @@ -151,10 +150,10 @@ var factory = function () { } .mediatag-progress-text { height: 25px; + width: 50px; margin-left: 5px; line-height: 25px; vertical-align: top; - width: auto; display: inline-block; color: #3F4141; font-weight: bold; @@ -618,6 +617,7 @@ var factory = function () { var handlers = cfg.handlers || { 'progress': [], 'complete': [], + 'metadata': [], 'error': [] }; @@ -700,8 +700,7 @@ var factory = function () { if (errDecryption) { return void reject(errDecryption); } - // XXX emit 'metadata' u8Decrypted.metadata - // Cache and display the decrypted blob + emit('metadata', u8Decrypted.metadata); resolve(u8Decrypted); }, function (progress) { emit('progress', { @@ -736,21 +735,18 @@ var factory = function () { var maxSize = typeof(config.maxDownloadSize) === "number" ? config.maxDownloadSize : (5 * 1024 * 1024); - getFileSize(src, function (err, size) { - if (err) { - return void error(err); - } - // If the size is smaller than the autodownload limit, load the blob. - // If the blob is already loaded or being loaded, don't show the button. - if (!size || size < maxSize || getCache()) { - makeProgressBar(cfg, mediaObject); - return void dl(); - } - var sizeMb = Math.round(10 * size / 1024 / 1024) / 10; - fetchDecryptedMetadata(src, strKey, function (err, md) { - if (err) { return void error(err); } - cfg.metadata = md; - // XXX emit 'metadata' + fetchDecryptedMetadata(src, strKey, function (err, md) { + if (err) { return void error(err); } + cfg.metadata = md; + emit('metadata', md); + getFileSize(src, function (err, size) { + // If the size is smaller than the autodownload limit, load the blob. + // If the blob is already loaded or being loaded, don't show the button. + if (!size || size < maxSize || getCache()) { + makeProgressBar(cfg, mediaObject); + return void dl(); + } + var sizeMb = Math.round(10 * size / 1024 / 1024) / 10; makeDownloadButton(cfg, mediaObject, sizeMb, dl); }); }); @@ -765,6 +761,8 @@ var factory = function () { config[key] = value; }; + init.fetchDecryptedMetadata = fetchDecryptedMetadata; + return init; }; diff --git a/www/file/app-file.less b/www/file/app-file.less index d6e8ad69c..be7e067f1 100644 --- a/www/file/app-file.less +++ b/www/file/app-file.less @@ -1,5 +1,6 @@ @import (reference) '../../customize/src/less2/include/tokenfield.less'; @import (reference) '../../customize/src/less2/include/framework.less'; +@import (reference) '../../customize/src/less2/include/markdown.less'; &.cp-app-file { @@ -47,6 +48,7 @@ z-index: -1; } + .mediatag_cryptpad(); media-tag { img { max-width: 100%; @@ -198,6 +200,9 @@ max-height: 100%; max-width: 100%; } + &:empty { + display: none !important; + } } } diff --git a/www/file/file-crypto.js b/www/file/file-crypto.js index 12453bb48..6a0c08816 100644 --- a/www/file/file-crypto.js +++ b/www/file/file-crypto.js @@ -48,69 +48,6 @@ define([ return new Blob(chunks); }; - var concatBuffer = function (a, b) { // TODO make this not so ugly - return new Uint8Array(slice(a).concat(slice(b))); - }; - - var fetchMetadata = function (src, cb) { - var done = false; - var CB = function (err, res) { - if (done) { return; } - done = true; - cb(err, res); - }; - - var xhr = new XMLHttpRequest(); - xhr.open("GET", src, true); - xhr.setRequestHeader('Range', 'bytes=0-1'); - xhr.responseType = 'arraybuffer'; - - xhr.onerror= function () { return CB('XHR_ERROR'); }; - xhr.onload = function () { - if (/^4/.test('' + this.status)) { return CB('XHR_ERROR'); } - var res = new Uint8Array(xhr.response); - var size = decodePrefix(res); - var xhr2 = new XMLHttpRequest(); - - xhr2.open("GET", src, true); - xhr2.setRequestHeader('Range', 'bytes=2-' + (size + 2)); - xhr2.responseType = 'arraybuffer'; - xhr2.onload = function () { - if (/^4/.test('' + this.status)) { return CB('XHR_ERROR'); } - var res2 = new Uint8Array(xhr2.response); - var all = concatBuffer(res, res2); - CB(void 0, all); - }; - xhr2.send(null); - }; - xhr.send(null); - }; - - var decryptMetadata = function (u8, key) { - var prefix = u8.subarray(0, 2); - var metadataLength = decodePrefix(prefix); - - var metaBox = new Uint8Array(u8.subarray(2, 2 + metadataLength)); - var metaChunk = Nacl.secretbox.open(metaBox, createNonce(), key); - - try { - return JSON.parse(Nacl.util.encodeUTF8(metaChunk)); - } - catch (e) { return null; } - }; - - var fetchDecryptedMetadata = function (src, key, cb) { - if (typeof(src) !== 'string') { - return window.setTimeout(function () { - cb('NO_SOURCE'); - }); - } - fetchMetadata(src, function (e, buffer) { - if (e) { return cb(e); } - cb(void 0, decryptMetadata(buffer, key)); - }); - }; - var decrypt = function (u8, key, done, progress) { var MAX = u8.length; var _progress = function (offset) { @@ -268,8 +205,5 @@ define([ encrypt: encrypt, joinChunks: joinChunks, computeEncryptedSize: computeEncryptedSize, - decryptMetadata: decryptMetadata, - fetchMetadata: fetchMetadata, - fetchDecryptedMetadata: fetchDecryptedMetadata, }; }); diff --git a/www/file/inner.html b/www/file/inner.html index a3e5070e4..45ba831fe 100644 --- a/www/file/inner.html +++ b/www/file/inner.html @@ -16,7 +16,6 @@ - diff --git a/www/file/inner.js b/www/file/inner.js index 6cc129de5..59291c964 100644 --- a/www/file/inner.js +++ b/www/file/inner.js @@ -43,7 +43,6 @@ define([ var andThen = function (common) { var $appContainer = $('#cp-app-file-content'); var $form = $('#cp-app-file-upload-form'); - var $dlform = $('#cp-app-file-download-form'); var $dlview = $('#cp-app-file-download-view'); var $label = $form.find('label'); var $bar = $('.cp-toolbar-container'); @@ -86,36 +85,44 @@ define([ if (!uploadMode) { (function () { - Messages.download = "Download"; // XXX - Messages.decrypt = "Decrypt"; // XXX - - var progress = h('div.cp-app-file-progress'); - var progressTxt = h('span.cp-app-file-progress-txt'); - var $progress = $(progress); - var $progressTxt = $(progressTxt); - var downloadEl = h('span.cp-app-file-progress-dl', Messages.download); - var decryptEl = h('span.cp-app-file-progress-dc', Messages.decrypt); - var progressContainer = h('div.cp-app-file-progress-container', [ - downloadEl, - decryptEl, - progress - ]); - var hexFileName = secret.channel; var src = fileHost + Hash.getBlobPathFromHex(hexFileName); var key = secret.keys && secret.keys.cryptKey; var cryptKey = Nacl.util.encodeBase64(key); - FileCrypto.fetchDecryptedMetadata(src, key, function (e, metadata) { - if (e) { - if (e === 'XHR_ERROR') { - return void UI.errorLoadingScreen(Messages.download_resourceNotAvailable, false, function () { - common.gotoURL('/file/'); - }); - } - return void console.error(e); + var $mt = $dlview.find('media-tag'); + $mt.attr('src', src); + $mt.attr('data-crypto-key', 'cryptpad:'+cryptKey); + $mt.css('transform', 'scale(2)'); + + var rightsideDisplayed = false; + var metadataReceived = false; + UI.removeLoadingScreen(); + $dlview.show(); + + MediaTag($mt[0]).on('complete', function (decrypted) { + $mt.css('transform', ''); + if (!rightsideDisplayed) { + toolbar.$drawer + .append(common.createButton('export', true, {}, function () { + saveAs(decrypted.content, decrypted.metadata.name); + })); + rightsideDisplayed = true; } + // make pdfs big + var toolbarHeight = $('#cp-toolbar').height(); + $('media-tag iframe').css({ + 'height': 'calc(100vh - ' + toolbarHeight + 'px)', + 'width': '100vw', + 'position': 'absolute', + 'bottom': 0, + 'left': 0, + 'border': 0 + }); + }).on('metadata', function (metadata) { + if (metadataReceived) { return; } + metadataReceived = true; // Add pad attributes when the file is saved in the drive Title.onTitleChange(function () { var owners = metadata.owners; @@ -150,106 +157,11 @@ define([ toolbar.$drawer.append(common.createButton('hashtag', true)); } toolbar.$file.show(); - - var displayFile = function (ev, sizeMb, CB) { - var called_back; - var cb = function (e) { - if (called_back) { return; } - called_back = true; - if (CB) { CB(e); } - }; - - var $mt = $dlview.find('media-tag'); - $mt.attr('src', src); - $mt.attr('data-crypto-key', 'cryptpad:'+cryptKey); - - var rightsideDisplayed = false; - - MediaTag($mt[0], { - force: true // Download starts automatically - }).on('complete', function (decrypted) { - $dlview.show(); - $dlform.hide(); - var $dlButton = $dlview.find('media-tag button'); - if (ev) { $dlButton.click(); } - - if (!rightsideDisplayed) { - toolbar.$drawer - .append(common.createButton('export', true, {}, function () { - saveAs(decrypted.content, decrypted.metadata.name); - })); - rightsideDisplayed = true; - } - - // make pdfs big - var toolbarHeight = $('#cp-toolbar').height(); - var $another_iframe = $('media-tag iframe').css({ - 'height': 'calc(100vh - ' + toolbarHeight + 'px)', - 'width': '100vw', - 'position': 'absolute', - 'bottom': 0, - 'left': 0, - 'border': 0 - }); - - if ($another_iframe.length) { - $another_iframe.load(function () { - cb(); - }); - } else { - cb(); - } - }).on('progress', function (data) { - var p = data.progress +'%'; - $progress.width(p); - $progressTxt.text(Math.floor(data.progress) + '%'); - }).on('error', function (err) { - console.error(err); - }); - }; - - // XXX Update "download_button" key to use "download" first and "decrypt" second - var todoBigFile = function (sizeMb) { - $dlform.show(); - UI.removeLoadingScreen(); - var button = h('button.btn.btn-primary', { - title: Messages.download_button - }, Messages.download_button); - $dlform.append([ - h('h2', Util.fixHTML(metadata.name)), - h('div.cp-button-container', [ - button, - progressTxt - ]), - ]); - - // don't display the size if you don't know it. - if (typeof(sizeMb) === 'number') { - $dlform.find('h2').append(' - ' + - Messages._getKey('formattedMB', [sizeMb])); - } - var decrypting = false; - var onClick = function (ev) { - if (decrypting) { return; } - decrypting = true; - $(button).prop('disabled', 'disabled'); - $dlform.append(progressContainer); - displayFile(ev, sizeMb, function (err) { - $appContainer.css('background-color', - common.getAppConfig().appBackgroundColor); - if (err) { UI.alert(err); } - }); - }; - if (typeof(sizeMb) === 'number' && sizeMb < 5) { return void onClick(); } - $(button).click(onClick); - }; - common.getFileSize(hexFileName, function (e, data) { - if (e) { - return void UI.errorLoadingScreen(e); - } - var size = Util.bytesToMegabytes(data); - return void todoBigFile(size); - }); + }).on('error', function (err) { + $appContainer.css('background-color', + common.getAppConfig().appBackgroundColor); + UI.warn(Messages.error); + console.error(err); }); })(); return; diff --git a/www/pad/inner.js b/www/pad/inner.js index f9b5dffb9..a22c0d81d 100644 --- a/www/pad/inner.js +++ b/www/pad/inner.js @@ -478,7 +478,7 @@ define([ var list_values = slice(el.children) .map(function (el) { return el.outerHTML; }) .join(''); - mediaMap[el.getAttribute('src')] = list_values; + mediaTagMap[el.getAttribute('src')] = list_values; if (mediaObject.complete) { observer.disconnect(); } } });