Create thumbnails only when the tab is not focused

This commit is contained in:
yflory
2017-11-06 13:36:54 +01:00
parent a37e6c7979
commit 9060464f37
8 changed files with 120 additions and 88 deletions

View File

@@ -1,6 +1,11 @@
define([
'/common/common-util.js',
'/common/visible.js',
'/common/common-hash.js',
'/file/file-crypto.js',
'/bower_components/localforage/dist/localforage.min.js',
'/bower_components/tweetnacl/nacl-fast.min.js',
], function () {
], function (Util, Visible, Hash, FileCrypto, localForage) {
var Nacl = window.nacl;
var Thumb = {
dimension: 100,
@@ -190,5 +195,82 @@ define([
require(['/bower_components/html2canvas/build/html2canvas.min.js'], todo);
};
Thumb.initPadThumbnails = function (opts) {
if (!opts.href || !opts.getContent) {
throw new Error("href and getContent are needed for thumbnails");
}
var oldThumbnailState;
var mkThumbnail = function () {
var content = opts.getContent();
if (content === oldThumbnailState) { return; }
Thumb.fromDOM(opts, function (err, b64) {
oldThumbnailState = content;
Thumb.setPadThumbnail(opts.href, b64);
});
};
var nafa = Util.notAgainForAnother(mkThumbnail, Thumb.UPDATE_INTERVAL);
var to;
var tUntil;
var interval = function () {
tUntil = nafa();
if (tUntil) {
window.clearTimeout(to);
to = window.setTimeout(interval, tUntil+1);
return;
}
to = window.setTimeout(interval, Thumb.UPDATE_INTERVAL+1);
};
Visible.onChange(function (v) {
if (v) {
window.clearTimeout(to);
return;
}
interval();
});
if (!Visible.currently()) { to = window.setTimeout(interval, Thumb.UPDATE_FIRST); }
};
var addThumbnail = function (err, thumb, $span, cb) {
var img = new Image();
img.src = thumb.slice(0,5) === 'data:' ? thumb : 'data:;base64,'+thumb;
$span.find('.cp-icon').hide();
$span.prepend(img);
cb($(img));
};
Thumb.setPadThumbnail = function (href, b64, cb) {
cb = cb || function () {};
var k ='thumbnail-' + href;
localForage.setItem(k, b64, cb);
};
Thumb.displayThumbnail = function (href, $container, cb) {
cb = cb || function () {};
var parsed = Hash.parsePadUrl(href);
var k ='thumbnail-' + href;
var whenNewThumb = function () {
var secret = Hash.getSecrets('file', parsed.hash);
var hexFileName = Util.base64ToHex(secret.channel);
var src = Hash.getBlobPathFromHex(hexFileName);
var cryptKey = secret.keys && secret.keys.fileKeyStr;
var key = Nacl.util.decodeBase64(cryptKey);
FileCrypto.fetchDecryptedMetadata(src, key, function (e, metadata) {
if (!metadata.thumbnail) {
return void localForage.setItem(k, 'EMPTY');
}
localForage.setItem(k, metadata.thumbnail, function (err) {
addThumbnail(err, metadata.thumbnail, $container, cb);
});
});
};
localForage.getItem(k, function (err, v) {
if (!v && parsed.type === 'file') {
// We can only create thumbnails for files here since we can't easily decrypt pads
return void whenNewThumb();
}
if (!v) { return; }
if (v === 'EMPTY') { return; }
addThumbnail(err, v, $container, cb);
});
};
return Thumb;
});

View File

@@ -8,7 +8,6 @@ define([
'/common/cryptpad-common.js',
'/bower_components/nthen/index.js',
'/common/sframe-common.js',
'/common/sframe-common-interface.js',
'/customize/messages.js',
'/common/common-util.js',
'/common/common-thumbnail.js',
@@ -27,7 +26,6 @@ define([
Cryptpad,
nThen,
SFCommon,
SFUI,
Messages,
Util,
Thumb,
@@ -270,23 +268,16 @@ define([
var privateDat = cpNfInner.metadataMgr.getPrivateData();
if (options.thumbnail && privateDat.thumbnails) {
var oldThumbnailState;
var hash = privateDat.availableHashes.editHash ||
privateDat.availableHashes.viewHash;
var href = privateDat.pathname + '#' + hash;
var mkThumbnail = function () {
if (!hash) { return; }
if (state !== STATE.READY) { return; }
if (!cpNfInner.chainpad) { return; }
var content = cpNfInner.chainpad.getUserDoc();
if (content === oldThumbnailState) { return; }
Thumb.fromDOM(options.thumbnail, function (err, b64) {
oldThumbnailState = content;
SFUI.setPadThumbnail(href, b64);
});
};
window.setInterval(mkThumbnail, Thumb.UPDATE_INTERVAL);
window.setTimeout(mkThumbnail, Thumb.UPDATE_FIRST);
if (hash) {
options.thumbnail.href = privateDat.pathname + '#' + hash;
options.thumbnail.getContent = function () {
if (!cpNfInner.chainpad) { return; }
return cpNfInner.chainpad.getUserDoc();
};
Thumb.initPadThumbnails(options.thumbnail);
}
}
if (newPad) {

View File

@@ -3,16 +3,13 @@ define([
'/api/config',
'/common/cryptpad-common.js',
'/common/common-util.js',
'/common/common-hash.js',
'/common/media-tag.js',
'/common/tippy.min.js',
'/customize/application_config.js',
'/file/file-crypto.js',
'/bower_components/localforage/dist/localforage.min.js',
'/bower_components/tweetnacl/nacl-fast.min.js',
'css!/common/tippy.css',
], function ($, Config, Cryptpad, Util, Hash, MediaTag, Tippy, AppConfig, FileCrypto, localForage) {
], function ($, Config, Cryptpad, Util, MediaTag, Tippy, AppConfig) {
var UI = {};
var Messages = Cryptpad.Messages;
var Nacl = window.nacl;
@@ -33,49 +30,6 @@ define([
* - createDropdown
*/
var addThumbnail = function (err, thumb, $span, cb) {
var img = new Image();
img.src = thumb.slice(0,5) === 'data:' ? thumb : 'data:;base64,'+thumb;
$span.find('.cp-icon').hide();
$span.prepend(img);
cb($(img));
};
UI.setPadThumbnail = function (href, b64, cb) {
cb = cb || $.noop;
var k ='thumbnail-' + href;
localForage.setItem(k, b64, cb);
};
localForage.removeItem('thumbnail-/1/edit/lqg6RRnynI76LV0sR8F0YA/Nh1SNXxB5U2UjaADvODfvI5l/');
UI.displayThumbnail = function (href, $container, cb) {
cb = cb || $.noop;
var parsed = Hash.parsePadUrl(href);
var k ='thumbnail-' + href;
var whenNewThumb = function () {
var secret = Hash.getSecrets('file', parsed.hash);
var hexFileName = Util.base64ToHex(secret.channel);
var src = Hash.getBlobPathFromHex(hexFileName);
var cryptKey = secret.keys && secret.keys.fileKeyStr;
var key = Nacl.util.decodeBase64(cryptKey);
FileCrypto.fetchDecryptedMetadata(src, key, function (e, metadata) {
if (!metadata.thumbnail) {
return void localForage.setItem(k, 'EMPTY');
}
localForage.setItem(k, metadata.thumbnail, function (err) {
addThumbnail(err, metadata.thumbnail, $container, cb);
});
});
};
localForage.getItem(k, function (err, v) {
if (!v && parsed.type === 'file') {
// We can only create thumbnails for files here since we can't easily decrypt pads
return void whenNewThumb();
}
if (!v) { return; }
if (v === 'EMPTY') { return; }
addThumbnail(err, v, $container, cb);
});
};
UI.updateTags = function (common, href) {
var sframeChan = common.getSframeChannel();
sframeChan.query('Q_TAGS_GET', href || null, function (err, res) {

View File

@@ -14,7 +14,8 @@ define([
'/customize/application_config.js',
'/common/cryptpad-common.js',
'/common/common-realtime.js',
'/common/common-util.js'
'/common/common-util.js',
'/common/common-thumbnail.js'
], function (
$,
nThen,
@@ -30,7 +31,8 @@ define([
AppConfig,
Cryptpad,
CommonRealtime,
Util
Util,
Thumb
) {
// Chainpad Netflux Inner
@@ -80,7 +82,9 @@ define([
funcs.createButton = callWithCommon(UI.createButton);
funcs.createUsageBar = callWithCommon(UI.createUsageBar);
funcs.updateTags = callWithCommon(UI.updateTags);
funcs.displayThumbnail = UI.displayThumbnail;
// Thumb
funcs.displayThumbnail = Thumb.displayThumbnail;
// History
funcs.getHistory = callWithCommon(History.create);