Create thumbnails only when the tab is not focused

pull/1/head
yflory 7 years ago
parent a37e6c7979
commit 9060464f37

@ -348,13 +348,11 @@ define([
getContainer: getThumbnailContainer, getContainer: getThumbnailContainer,
filter: function (el, before) { filter: function (el, before) {
if (before) { if (before) {
// Overflow visible to the parents makes it look better but $(el).parents().css('overflow', 'visible');
// it creates chaos in the editbale area
//$(el).parents().css('overflow', 'visible');
$(el).css('max-height', Math.max(600, $(el).width()) + 'px'); $(el).css('max-height', Math.max(600, $(el).width()) + 'px');
return; return;
} }
//$(el).parents().css('overflow', ''); $(el).parents().css('overflow', '');
$(el).css('max-height', ''); $(el).css('max-height', '');
} }
} }

@ -1,6 +1,11 @@
define([ 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', '/bower_components/tweetnacl/nacl-fast.min.js',
], function () { ], function (Util, Visible, Hash, FileCrypto, localForage) {
var Nacl = window.nacl; var Nacl = window.nacl;
var Thumb = { var Thumb = {
dimension: 100, dimension: 100,
@ -190,5 +195,82 @@ define([
require(['/bower_components/html2canvas/build/html2canvas.min.js'], todo); 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; return Thumb;
}); });

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

@ -3,16 +3,13 @@ define([
'/api/config', '/api/config',
'/common/cryptpad-common.js', '/common/cryptpad-common.js',
'/common/common-util.js', '/common/common-util.js',
'/common/common-hash.js',
'/common/media-tag.js', '/common/media-tag.js',
'/common/tippy.min.js', '/common/tippy.min.js',
'/customize/application_config.js', '/customize/application_config.js',
'/file/file-crypto.js',
'/bower_components/localforage/dist/localforage.min.js',
'/bower_components/tweetnacl/nacl-fast.min.js', '/bower_components/tweetnacl/nacl-fast.min.js',
'css!/common/tippy.css', 'css!/common/tippy.css',
], function ($, Config, Cryptpad, Util, Hash, MediaTag, Tippy, AppConfig, FileCrypto, localForage) { ], function ($, Config, Cryptpad, Util, MediaTag, Tippy, AppConfig) {
var UI = {}; var UI = {};
var Messages = Cryptpad.Messages; var Messages = Cryptpad.Messages;
var Nacl = window.nacl; var Nacl = window.nacl;
@ -33,49 +30,6 @@ define([
* - createDropdown * - 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) { UI.updateTags = function (common, href) {
var sframeChan = common.getSframeChannel(); var sframeChan = common.getSframeChannel();
sframeChan.query('Q_TAGS_GET', href || null, function (err, res) { sframeChan.query('Q_TAGS_GET', href || null, function (err, res) {

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

@ -47,6 +47,11 @@
align-items: center; align-items: center;
img {
max-width: 100px;
max-height: 100px;
}
.cp-filepicker-content-element-name { .cp-filepicker-content-element-name {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

@ -22,6 +22,7 @@ define([
'cm/mode/markdown/markdown', 'cm/mode/markdown/markdown',
'css!cm/lib/codemirror.css', 'css!cm/lib/codemirror.css',
'/bower_components/file-saver/FileSaver.min.js', '/bower_components/file-saver/FileSaver.min.js',
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css', 'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
@ -801,16 +802,20 @@ define([
var initThumbnails = function () { var initThumbnails = function () {
var oldThumbnailState; var oldThumbnailState;
var privateDat = metadataMgr.getPrivateData(); var privateDat = metadataMgr.getPrivateData();
if (!privateDat.thumbnails) { return; } // Thumbnails are disabled
var hash = privateDat.availableHashes.editHash || var hash = privateDat.availableHashes.editHash ||
privateDat.availableHashes.viewHash; privateDat.availableHashes.viewHash;
if (!hash) { return; }
var href = privateDat.pathname + '#' + hash; var href = privateDat.pathname + '#' + hash;
var $el = $('.cp-app-poll-realtime'); var $el = $('.cp-app-poll-realtime');
//var $el = $('#cp-app-poll-table'); //var $el = $('#cp-app-poll-table');
var scrollTop;
var options = { var options = {
getContainer: function () { return $el[0]; }, getContainer: function () { return $el[0]; },
filter: function (el, before) { filter: function (el, before) {
if (before) { if (before) {
//$el.parents().css('overflow', 'visible'); $el.parents().css('overflow', 'visible');
scrollTop = $('#cp-app-poll-form').scrollTop();
$el.css('max-height', Math.max(600, $(el).width()) + 'px'); $el.css('max-height', Math.max(600, $(el).width()) + 'px');
$el.find('tr td:first-child, tr td:last-child, tr td:nth-last-child(2)') $el.find('tr td:first-child, tr td:last-child, tr td:nth-last-child(2)')
.css('position', 'static'); .css('position', 'static');
@ -820,7 +825,7 @@ define([
$el.find('#cp-app-poll-table-scroll').css('max-width', '100%'); $el.find('#cp-app-poll-table-scroll').css('max-width', '100%');
return; return;
} }
//$el.parents().css('overflow', ''); $el.parents().css('overflow', '');
$el.css('max-height', ''); $el.css('max-height', '');
$el.find('#cp-app-poll-comments').css('display', ''); $el.find('#cp-app-poll-comments').css('display', '');
$el.find('#cp-app-poll-table-container').css('text-align', ''); $el.find('#cp-app-poll-table-container').css('text-align', '');
@ -828,20 +833,12 @@ define([
$el.find('#cp-app-poll-table-scroll').css('max-width', ''); $el.find('#cp-app-poll-table-scroll').css('max-width', '');
$el.find('tr td:first-child, tr td:last-child, tr td:nth-last-child(2)') $el.find('tr td:first-child, tr td:last-child, tr td:nth-last-child(2)')
.css('position', ''); .css('position', '');
} $('#cp-app-poll-form').scrollTop(scrollTop);
}; },
var mkThumbnail = function () { href: href,
if (!hash) { return; } getContent: function () { return JSON.stringify(APP.proxy.content); }
if (!APP.proxy) { return; }
var content = JSON.stringify(APP.proxy.content);
if (content === oldThumbnailState) { return; }
Thumb.fromDOM(options, function (err, b64) {
oldThumbnailState = content;
SFUI.setPadThumbnail(href, b64);
});
}; };
window.setInterval(mkThumbnail, Thumb.UPDATE_INTERVAL); Thumb.initPadThumbnails(options);
window.setTimeout(mkThumbnail, Thumb.UPDATE_FIRST);
}; };
var checkDeletedCells = function () { var checkDeletedCells = function () {

@ -377,6 +377,7 @@ define([
var initThumbnails = function () { var initThumbnails = function () {
var oldThumbnailState; var oldThumbnailState;
var privateDat = metadataMgr.getPrivateData(); var privateDat = metadataMgr.getPrivateData();
if (!privateDat.thumbnails) { return; }
var hash = privateDat.availableHashes.editHash || var hash = privateDat.availableHashes.editHash ||
privateDat.availableHashes.viewHash; privateDat.availableHashes.viewHash;
var href = privateDat.pathname + '#' + hash; var href = privateDat.pathname + '#' + hash;
@ -389,7 +390,7 @@ define([
var D = Thumb.getResizedDimensions($canvas[0], 'pad'); var D = Thumb.getResizedDimensions($canvas[0], 'pad');
Thumb.fromCanvas($canvas[0], D, function (err, b64) { Thumb.fromCanvas($canvas[0], D, function (err, b64) {
oldThumbnailState = content; oldThumbnailState = content;
SFUI.setPadThumbnail(href, b64); Thumb.setPadThumbnail(href, b64);
}); });
}; };
window.setInterval(mkThumbnail, Thumb.UPDATE_INTERVAL); window.setInterval(mkThumbnail, Thumb.UPDATE_INTERVAL);

Loading…
Cancel
Save