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

Code cleanup

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

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
}; };

View file

@ -12,36 +12,19 @@ import 'css!./style';
fillImageElement(elem, source); fillImageElement(elem, source);
} }
// function destroyBlurhash(target) { async function itemBlurhashing(target) {
// let canvas = target.getElementsByClassName('blurhash-canvas')[0];
// target.removeChild(canvas);
// target.classList.remove('blurhashed');
// }
async function itemBlurhashing(entry) {
// This intersection ratio ensures that items that are near the borders are also blurhashed, alongside items that are outside the viewport
// if (entry.intersectionRation <= 0.025)
if (entry.target) {
let target = entry.target;
// We only keep max 80 items blurhashed in screen to save memory
// if (document.getElementsByClassName('blurhashed').length <= 80) {
//} else {
// destroyBlurhash(target);
//}
let blurhashstr = target.getAttribute('data-blurhash'); let blurhashstr = target.getAttribute('data-blurhash');
if (blurhash.isBlurhashValid(blurhashstr) && target.getElementsByClassName('blurhash-canvas').length === 0) { if (blurhashstr && blurhash.isBlurhashValid(blurhashstr)) {
console.log('Blurhashing item ' + target.parentElement.parentElement.parentElement.getAttribute('data-index') + ' with intersection ratio ' + entry.intersectionRatio); // Although the default values provided by blurhash devs is 32x32, 18x18 seems to be the sweetest spot possible,
// let width = target.offsetWidth; // cramping up a lot the performance and reducing the memory usage, while retaining almost full blur quality.
// let height = target.offsetHeight; // Lower values had more visible pixelation
let width = 18; let width = 18;
let height = 18; let height = 18;
if (width && height) {
let pixels; let pixels;
try { try {
pixels = blurhash.decode(blurhashstr, width, height); pixels = blurhash.decode(blurhashstr, width, height);
} catch (err) { } catch (err) {
console.log('Blurhash decode error: ' + err.toString()); console.error('Blurhash decode error: ' + err.toString());
return; return;
} }
let canvas = document.createElement('canvas'); let canvas = document.createElement('canvas');
@ -51,7 +34,6 @@ import 'css!./style';
let imgData = ctx.createImageData(width, height); let imgData = ctx.createImageData(width, height);
imgData.data.set(pixels); imgData.data.set(pixels);
// Values taken from https://www.npmjs.com/package/blurhash
ctx.putImageData(imgData, 0, 0); ctx.putImageData(imgData, 0, 0);
let child = target.appendChild(canvas); let child = target.appendChild(canvas);
@ -66,42 +48,35 @@ import 'css!./style';
target.classList.add('blurhashed'); 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);
} }
} }