mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Code cleanup

Browse source
This commit is contained in:
ferferga 2020-05-26 21:53:49 +02:00
parent f3129f28ef
commit 6428bb1ad5
2 changed files with 43 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/cardbuilder/cardBuilder.js
View file

@ -615,7 +615,7 @@ import 'programStyles';
return { return {
imgUrl: imgUrl, imgUrl: imgUrl,
blurhash: item.ImageBlurHashes[imgTag] || null, blurhash: (item.ImageBlurHashes || {})[imgType],
forceName: forceName, forceName: forceName,
coverImage: coverImage coverImage: coverImage
}; };

109
src/components/images/imageLoader.js
View file

@ -12,96 +12,71 @@ import 'css!./style';
fillImageElement(elem, source); fillImageElement(elem, source);
} }
// function destroyBlurhash(target) { async function itemBlurhashing(target) {
// let canvas = target.getElementsByClassName('blurhash-canvas')[0]; let blurhashstr = target.getAttribute('data-blurhash');
// target.removeChild(canvas); if (blurhashstr && blurhash.isBlurhashValid(blurhashstr)) {
// target.classList.remove('blurhashed'); // Although the default values provided by blurhash devs is 32x32, 18x18 seems to be the sweetest spot possible,
// } // cramping up a lot the performance and reducing the memory usage, while retaining almost full blur quality.
// Lower values had more visible pixelation
async function itemBlurhashing(entry) { let width = 18;
// This intersection ratio ensures that items that are near the borders are also blurhashed, alongside items that are outside the viewport let height = 18;
// if (entry.intersectionRation <= 0.025) let pixels;
if (entry.target) { try {
let target = entry.target; pixels = blurhash.decode(blurhashstr, width, height);
// We only keep max 80 items blurhashed in screen to save memory } catch (err) {
// if (document.getElementsByClassName('blurhashed').length <= 80) { console.error('Blurhash decode error: ' + err.toString());
return;
//} else {
// destroyBlurhash(target);
//}
let blurhashstr = target.getAttribute('data-blurhash');
if (blurhash.isBlurhashValid(blurhashstr) && target.getElementsByClassName('blurhash-canvas').length === 0) {
console.log('Blurhashing item ' + target.parentElement.parentElement.parentElement.getAttribute('data-index') + ' with intersection ratio ' + entry.intersectionRatio);
// let width = target.offsetWidth;
// let height = target.offsetHeight;
let width = 18;
let height = 18;
if (width && height) {
let pixels;
try {
pixels = blurhash.decode(blurhashstr, width, height);
} catch (err) {
console.log('Blurhash decode error: ' + err.toString());
return;
}
let canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
let ctx = canvas.getContext('2d');
let imgData = ctx.createImageData(width, height);
imgData.data.set(pixels);
// Values taken from https://www.npmjs.com/package/blurhash
ctx.putImageData(imgData, 0, 0);
let child = target.appendChild(canvas);
child.classList.add('blurhash-canvas');
child.style.opacity = 1;
if (userSettings.enableFastFadein()) {
child.classList.add('lazy-blurhash-fadein-fast');
} else {
child.classList.add('lazy-blurhash-fadein');
}
target.classList.add('blurhashed');
}
} }
let canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
let ctx = canvas.getContext('2d');
let imgData = ctx.createImageData(width, height);
imgData.data.set(pixels);
ctx.putImageData(imgData, 0, 0);
let child = target.appendChild(canvas);
child.classList.add('blurhash-canvas');
child.style.opacity = 1;
if (userSettings.enableFastFadein()) {
child.classList.add('lazy-blurhash-fadein-fast');
} else {
child.classList.add('lazy-blurhash-fadein');
}
target.classList.add('blurhashed');
} }
return;
} }
function switchCanvas(elem) { function switchCanvas(elem) {
let child = elem.getElementsByClassName('blurhash-canvas')[0]; let child = elem.getElementsByClassName('blurhash-canvas')[0];
if (child) { if (child) {
if (elem.getAttribute('data-src')) { child.style.opacity = elem.getAttribute('data-src') ? 1 : 0;
child.style.opacity = 1;
} else {
child.style.opacity = 0;
}
} }
return;
} }
export function fillImage(entry) { export function fillImage(entry) {
if (!entry) { if (!entry) {
throw new Error('entry cannot be null'); throw new Error('entry cannot be null');
} }
let target = entry.target;
var source = undefined; var source = undefined;
if (entry.target) {
source = entry.target.getAttribute('data-src'); if (target) {
source = target.getAttribute('data-src');
} else { } else {
source = entry; source = entry;
} }
if (!entry.target.classList.contains('blurhashed')) { if (!target.classList.contains('blurhashed')) {
itemBlurhashing(entry); itemBlurhashing(target);
} }
if (entry.intersectionRatio > 0) { if (entry.intersectionRatio > 0) {
if (source) fillImageElement(entry.target, source); if (source) fillImageElement(target, source);
} else if (!source) { } else if (!source) {
emptyImageElement(entry.target); emptyImageElement(target);
} }
} }