cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-18 03:18:19 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3464 from thornbill/fix-card-padder

Browse Source 
Fix minor issues with card padder icons
This commit is contained in:
Bill Thornton 2022-02-28 02:39:52 -05:00 committed by GitHub
commit f43b83e2b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/cardbuilder/cardBuilder.js
View File

@ -1354,8 +1354,13 @@ import ServerConnections from '../ServerConnections';
let cardPadderIcon = ''; let cardPadderIcon = '';
if (imgUrl) { // TV Channel logos are transparent so skip the placeholder to avoid overlapping
cardPadderIcon = getDefaultText(item, options); if (imgUrl && item.Type !== 'TvChannel') {
cardPadderIcon = getDefaultText(item, {
// Always use an icon
defaultCardImageIcon: 'folder',
...options
});
} }
cardImageContainerOpen = `<div class="${cardBoxClass}"><div class="${cardScalableClass}"><div class="cardPadder cardPadder-${shape}">${cardPadderIcon}</div>${cardImageContainerOpen}`; cardImageContainerOpen = `<div class="${cardBoxClass}"><div class="${cardScalableClass}"><div class="cardPadder cardPadder-${shape}">${cardPadderIcon}</div>${cardImageContainerOpen}`;
@ -1514,6 +1519,8 @@ import ServerConnections from '../ServerConnections';
case 'Episode': case 'Episode':
case 'Series': case 'Series':
return '<span class="cardImageIcon material-icons tv" aria-hidden="true"></span>'; return '<span class="cardImageIcon material-icons tv" aria-hidden="true"></span>';
case 'Program':
return '<span class="cardImageIcon material-icons live_tv" aria-hidden="true"></span>';
case 'Book': case 'Book':
return '<span class="cardImageIcon material-icons book" aria-hidden="true"></span>'; return '<span class="cardImageIcon material-icons book" aria-hidden="true"></span>';
case 'Folder': case 'Folder':
@ -1522,11 +1529,13 @@ import ServerConnections from '../ServerConnections';
return '<span class="cardImageIcon material-icons collections" aria-hidden="true"></span>'; return '<span class="cardImageIcon material-icons collections" aria-hidden="true"></span>';
case 'Playlist': case 'Playlist':
return '<span class="cardImageIcon material-icons view_list" aria-hidden="true"></span>'; 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': case 'PhotoAlbum':
return '<span class="cardImageIcon material-icons photo_album" aria-hidden="true"></span>'; return '<span class="cardImageIcon material-icons photo_album" aria-hidden="true"></span>';
} }
if (options && options.defaultCardImageIcon) { if (options?.defaultCardImageIcon) {
return '<span class="cardImageIcon material-icons ' + options.defaultCardImageIcon + '" aria-hidden="true"></span>'; return '<span class="cardImageIcon material-icons ' + options.defaultCardImageIcon + '" aria-hidden="true"></span>';
} }

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

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

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

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