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

Fallback to old behaviour when blurhash for specific item doesn't exist

Browse source
This commit is contained in:
ferferga 2020-06-04 18:13:28 +02:00
parent 169ecacc62
commit 1591aef481
1 changed files with 16 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -12,9 +12,8 @@ import 'css!./style';
fillImageElement(elem, source); fillImageElement(elem, source);
} }
async function itemBlurhashing(target) { async function itemBlurhashing(target, blurhashstr) {
let blurhashstr = target.getAttribute('data-blurhash'); if (blurhash.isBlurhashValid(blurhashstr)) {
if (blurhashstr && blurhash.isBlurhashValid(blurhashstr)) {
// Although the default values provided by blurhash devs is 32x32, 18x18 seems to be the sweetest spot possible, // 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. // cramping up a lot the performance and reducing the memory usage, while retaining almost full blur quality.
// Lower values had more visible pixelation // Lower values had more visible pixelation
@ -25,6 +24,7 @@ import 'css!./style';
pixels = blurhash.decode(blurhashstr, width, height); pixels = blurhash.decode(blurhashstr, width, height);
} catch (err) { } catch (err) {
console.error('Blurhash decode error: ', err); console.error('Blurhash decode error: ', err);
target.classList.add('non-blurhashable');
return; return;
} }
let canvas = document.createElement('canvas'); let canvas = document.createElement('canvas');
@ -46,6 +46,7 @@ import 'css!./style';
} }
target.classList.add('blurhashed'); target.classList.add('blurhashed');
target.removeAttribute('data-blurhash');
} }
} }
@ -65,12 +66,15 @@ import 'css!./style';
if (target) { if (target) {
source = target.getAttribute('data-src'); source = target.getAttribute('data-src');
var blurhashstr = target.getAttribute('data-blurhash');
} else { } else {
source = entry; source = entry;
} }
if (!target.classList.contains('blurhashed') && userSettings.enableBlurhash()) { if (!target.classList.contains('blurhashed', 'non-blurhashable') && userSettings.enableBlurhash() && blurhashstr) {
itemBlurhashing(target); itemBlurhashing(target, blurhashstr);
} else if (userSettings.enableBlurhash() && !blurhashstr && !target.classList.contains('blurhashed')) {
target.classList.add('non-blurhashable');
} }
if (entry.intersectionRatio > 0) { if (entry.intersectionRatio > 0) {
@ -89,7 +93,7 @@ import 'css!./style';
preloaderImg.src = url; preloaderImg.src = url;
// This is necessary, so changing blurhash settings without reloading the page works // This is necessary, so changing blurhash settings without reloading the page works
if (!userSettings.enableBlurhash()) { if (!userSettings.enableBlurhash() || elem.classList.contains('non-blurhashable')) {
elem.classList.add('lazy-hidden'); elem.classList.add('lazy-hidden');
} }
@ -101,15 +105,15 @@ import 'css!./style';
} }
elem.removeAttribute('data-src'); elem.removeAttribute('data-src');
if (userSettings.enableBlurhash()) { if (elem.classList.contains('non-blurhashable') || !userSettings.enableBlurhash()) {
switchCanvas(elem);
} else {
elem.classList.remove('lazy-hidden'); elem.classList.remove('lazy-hidden');
if (userSettings.enableFastFadein()) { if (userSettings.enableFastFadein()) {
elem.classList.add('lazy-image-fadein-fast'); elem.classList.add('lazy-image-fadein-fast');
} else { } else {
elem.classList.add('lazy-image-fadein'); elem.classList.add('lazy-image-fadein');
} }
} else {
switchCanvas(elem);
} }
}); });
} }
@ -126,11 +130,11 @@ import 'css!./style';
} }
elem.setAttribute('data-src', url); elem.setAttribute('data-src', url);
if (userSettings.enableBlurhash()) { if (elem.classList.contains('non-blurhashable') || !userSettings.enableBlurhash()) {
switchCanvas(elem);
} else {
elem.classList.remove('lazy-image-fadein-fast', 'lazy-image-fadein'); elem.classList.remove('lazy-image-fadein-fast', 'lazy-image-fadein');
elem.classList.add('lazy-hidden'); elem.classList.add('lazy-hidden');
} else {
switchCanvas(elem);
} }
} }