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

Hide card padders in image loader

Browse source
This commit is contained in:
Bill Thornton 2022-02-28 00:10:29 -05:00
parent e89e92e25c
commit 4dd645bbfa
3 changed files with 14 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1357,9 +1357,9 @@ import ServerConnections from '../ServerConnections';
// TV Channel logos are transparent so skip the placeholder to avoid overlapping
if (imgUrl && item.Type !== 'TvChannel') {
cardPadderIcon = getDefaultText(item, {
...options,
// Always use an icon
defaultCardImageIcon: 'folder'
defaultCardImageIcon: 'folder',
...options
});
}
@ -1529,6 +1529,8 @@ import ServerConnections from '../ServerConnections';
return '<span class="cardImageIcon material-icons collections" aria-hidden="true"></span>';
case 'Playlist':
return '<span class="cardImageIcon material-icons view_list" aria-hidden="true"></span>';
case 'Photo':
return '<span class="cardImageIcon material-icons photo" aria-hidden="true"></span>';
case 'PhotoAlbum':
return '<span class="cardImageIcon material-icons photo_album" aria-hidden="true"></span>';
}

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

@ -95,9 +95,12 @@ worker.addEventListener(
const elem = event.target;
requestAnimationFrame(() => {
const canvas = elem.previousSibling;
if (elem.classList.contains('blurhashed') && canvas && canvas.tagName === 'CANVAS') {
if (elem.classList.contains('blurhashed') && canvas?.tagName === 'CANVAS') {
canvas.classList.add('lazy-hidden');
}
// HACK: Hide the content of the card padder
elem.parentNode?.querySelector('.cardPadder')?.classList.add('lazy-hidden-children');
});
elem.removeEventListener('animationend', onAnimationEnd);
}
@ -135,10 +138,13 @@ worker.addEventListener(
function emptyImageElement(elem) {
elem.removeEventListener('animationend', onAnimationEnd);
const canvas = elem.previousSibling;
if (canvas && canvas.tagName === 'CANVAS') {
if (canvas?.tagName === 'CANVAS') {
canvas.classList.remove('lazy-hidden');
}
// HACK: Unhide the content of the card padder
elem.parentNode?.querySelector('.cardPadder')?.classList.remove('lazy-hidden-children');
let url;
if (elem.tagName !== 'IMG') {

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

@ -18,7 +18,8 @@
animation: fadein 0.1s;
}
.lazy-hidden {
.lazy-hidden,
.lazy-hidden-children * {
opacity: 0;
}