infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Fix image flicker when the drive is refreshed

pull/1/head
ClemDee 2019-08-01 11:38:47 +02:00
parent 1f9635a9de
commit 1395c1a8ac
2 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
www/common/common-thumbnail.js
View File

@ -230,9 +230,20 @@ define([
if (!Visible.currently()) { to = window.setTimeout(interval, Thumb.UPDATE_FIRST); }
};
var stringToBlobToUrl = function (b64) {
var byteString = atob(b64.split(',')[1]);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var blob = new Blob([ab], {type: "image/png"});
var url = URL.createObjectURL(blob);
return url;
};
var addThumbnail = function (err, thumb, $span, cb) {
var img = new Image();
img.src = thumb.slice(0,5) === 'data:' ? thumb : 'data:image/png;base64,'+thumb;
img.src = stringToBlobToUrl(thumb);
$span.find('.cp-icon').hide();
$span.prepend(img);
cb($(img));

42
www/drive/inner.js
View File

@ -1658,7 +1658,8 @@ define([
$owner.attr('title', Messages.fm_padIsOwnedOther);
}
};
var addFileData = function (element, $span) {
var thumbsUrls = {};
var addFileData = function (element, $element) {
if (!manager.isFile(element)) { return; }
var data = manager.getFileData(element);
@ -1667,7 +1668,7 @@ define([
var hrefData = Hash.parsePadUrl(href);
if (hrefData.type) {
$span.addClass('cp-border-color-'+hrefData.type);
$element.addClass('cp-border-color-'+hrefData.type);
}
var $state = $('<span>', {'class': 'cp-app-drive-element-state'});
@ -1687,25 +1688,36 @@ define([
var $expire = $expirableIcon.clone().appendTo($state);
$expire.attr('title', Messages._getKey('fm_expirablePad', [new Date(data.expire).toLocaleString()]));
}
_addOwnership($span, $state, data);
_addOwnership($element, $state, data);
var name = manager.getTitle(element);
// The element with the class '.name' is underlined when the 'li' is hovered
var $name = $('<span>', {'class': 'cp-app-drive-element-name'}).text(name);
$span.append($name);
$span.append($state);
$span.attr('title', name);
$element.append($name);
$element.append($state);
$element.attr('title', name);
// display the thumbnail
// if the thumbnail has already been displayed once, do not reload it, keep the same url
if (thumbsUrls[element]) {
var img = new Image();
img.src = thumbsUrls[element];
$element.find('.cp-icon').addClass('cp-app-drive-element-list');
$element.prepend(img);
$(img).addClass('cp-app-drive-element-grid cp-app-drive-element-thumbnail');
}
else {
common.displayThumbnail(href || data.roHref, data.channel, data.password, $element, function ($thumb) {
// Called only if the thumbnail exists
// Remove the .hide() added by displayThumnail() because it hides the icon in list mode too
$element.find('.cp-icon').removeAttr('style').addClass('cp-app-drive-element-list');
$thumb.addClass('cp-app-drive-element-grid cp-app-drive-element-thumbnail');
thumbsUrls[element] = $thumb[0].src;
});
}
var type = Messages.type[hrefData.type] || hrefData.type;
common.displayThumbnail(href || data.roHref, data.channel, data.password, $span, function ($thumb) {
// Called only if the thumbnail exists
// Remove the .hide() added by displayThumnail() because it hides the icon in
// list mode too
$span.find('.cp-icon').removeAttr('style').addClass('cp-app-drive-element-list');
$thumb.addClass('cp-app-drive-element-grid')
.addClass('cp-app-drive-element-thumbnail');
});
var $type = $('<span>', {
'class': 'cp-app-drive-element-type cp-app-drive-element-list'
}).text(type);
@ -1715,7 +1727,7 @@ define([
var $cdate = $('<span>', {
'class': 'cp-app-drive-element-ctime cp-app-drive-element-list'
}).text(getDate(data.ctime));
$span.append($type).append($adate).append($cdate);
$element.append($type).append($adate).append($cdate);
};
var addFolderData = function (element, key, $span) {