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

remove unnecessary canvas animations and switch to CSS3 animations

Browse source
This commit is contained in:
Fernando Fernández 2021-12-30 22:55:27 +01:00
parent d1e0a7b1d7
commit 486b0db0cd
No known key found for this signature in database
GPG key ID: 44495B839CCFF8CF
2 changed files with 21 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,8 +7,11 @@ const targetDic = {};
worker.addEventListener( worker.addEventListener(
'message', 'message',
({ data: { pixels, hsh, width, height } }) => { ({ data: { pixels, hsh, width, height } }) => {
if (targetDic[hsh]) { const elems = targetDic[hsh];
drawBlurhash(targetDic[hsh], pixels, width, height); if (elems && elems.length) {
for (const elem of elems) {
drawBlurhash(elem, pixels, width, height);
}
delete targetDic[hsh]; delete targetDic[hsh];
} }
} }
@ -34,12 +37,8 @@ worker.addEventListener(
ctx.putImageData(imgData, 0, 0); ctx.putImageData(imgData, 0, 0);
requestAnimationFrame(() => { requestAnimationFrame(() => {
// This class is just an utility class, so users can customize the canvas using their own CSS.
canvas.classList.add('blurhash-canvas'); canvas.classList.add('blurhash-canvas');
if (userSettings.enableFastFadein()) {
canvas.classList.add('lazy-blurhash-fadein-fast');
} else {
canvas.classList.add('lazy-blurhash-fadein');
}
target.parentNode.insertBefore(canvas, target); target.parentNode.insertBefore(canvas, target);
target.classList.add('blurhashed'); target.classList.add('blurhashed');
@ -82,7 +81,7 @@ worker.addEventListener(
source = entry; source = entry;
} }
if (entry.isIntersecting) { if (entry.intersectionRatio > 0) {
if (source) { if (source) {
fillImageElement(target, source); fillImageElement(target, source);
} }
@ -91,7 +90,7 @@ worker.addEventListener(
} }
} }
function onTransitionEnd(event) { function onAnimationEnd(event) {
const elem = event.target; const elem = event.target;
requestAnimationFrame(() => { requestAnimationFrame(() => {
const canvas = elem.previousSibling; const canvas = elem.previousSibling;
@ -99,7 +98,7 @@ worker.addEventListener(
canvas.classList.add('lazy-hidden'); canvas.classList.add('lazy-hidden');
} }
}); });
elem.removeEventListener('transitionend', onTransitionEnd); elem.removeEventListener('animationend', onAnimationEnd);
} }
function fillImageElement(elem, url) { function fillImageElement(elem, url) {
@ -111,7 +110,7 @@ worker.addEventListener(
preloaderImg.src = url; preloaderImg.src = url;
elem.classList.add('lazy-hidden'); elem.classList.add('lazy-hidden');
elem.addEventListener('transitionend', onTransitionEnd); elem.addEventListener('animationend', onAnimationEnd);
preloaderImg.addEventListener('load', () => { preloaderImg.addEventListener('load', () => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
@ -122,18 +121,18 @@ worker.addEventListener(
} }
elem.removeAttribute('data-src'); elem.removeAttribute('data-src');
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');
} }
elem.classList.remove('lazy-hidden');
}); });
}); });
} }
function emptyImageElement(elem) { function emptyImageElement(elem) {
elem.removeEventListener('transitionend', onTransitionEnd); elem.removeEventListener('animationend', onAnimationEnd);
const canvas = elem.previousSibling; const canvas = elem.previousSibling;
if (canvas && canvas.tagName === 'CANVAS') { if (canvas && canvas.tagName === 'CANVAS') {
canvas.classList.remove('lazy-hidden'); canvas.classList.remove('lazy-hidden');

26
src/components/images/style.scss
View file

@ -1,17 +1,3 @@
.lazy-image-fadein {
opacity: 1;
transition: opacity 0.5s;
}
.lazy-image-fadein-fast {
opacity: 1;
transition: opacity 0.1s;
}
.lazy-hidden {
opacity: 0;
}
@keyframes fadein { @keyframes fadein {
from { from {
opacity: 0; opacity: 0;
@ -22,12 +8,18 @@
} }
} }
.lazy-blurhash-fadein-fast { .lazy-image-fadein {
opacity: 1;
animation: fadein 0.5s;
}
.lazy-image-fadein-fast {
opacity: 1;
animation: fadein 0.1s; animation: fadein 0.1s;
} }
.lazy-blurhash-fadein { .lazy-hidden {
animation: fadein 0.4s; opacity: 0;
} }
.blurhash-canvas { .blurhash-canvas {