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