From e89e92e25c55b8a9709cc6dae4c5cf15b4f86148 Mon Sep 17 00:00:00 2001
From: Bill Thornton <billt2006@gmail.com>
Date: Sat, 26 Feb 2022 01:56:41 -0500
Subject: [PATCH 1/2] Fix minor issues with card padder icons

---
 src/components/cardbuilder/cardBuilder.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index 197e0efcae..a7dceee54a 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -1354,8 +1354,13 @@ import ServerConnections from '../ServerConnections';
 
             let cardPadderIcon = '';
 
-            if (imgUrl) {
-                cardPadderIcon = getDefaultText(item, options);
+            // 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'
+                });
             }
 
             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 'Series':
                     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':
                     return '<span class="cardImageIcon material-icons book" aria-hidden="true"></span>';
                 case 'Folder':
@@ -1526,7 +1533,7 @@ import ServerConnections from '../ServerConnections';
                     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>';
             }
 

From 4dd645bbfaae34d9f813a38c129f0cefffc460f2 Mon Sep 17 00:00:00 2001
From: Bill Thornton <billt2006@gmail.com>
Date: Mon, 28 Feb 2022 00:10:29 -0500
Subject: [PATCH 2/2] Hide card padders in image loader

---
 src/components/cardbuilder/cardBuilder.js |  6 ++++--
 src/components/images/imageLoader.js      | 10 ++++++++--
 src/components/images/style.scss          |  3 ++-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index a7dceee54a..d46ee4cde1 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -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>';
             }
diff --git a/src/components/images/imageLoader.js b/src/components/images/imageLoader.js
index febd43b7b6..e25531a0ac 100644
--- a/src/components/images/imageLoader.js
+++ b/src/components/images/imageLoader.js
@@ -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') {
diff --git a/src/components/images/style.scss b/src/components/images/style.scss
index 9fae14fd0f..64726ae08a 100644
--- a/src/components/images/style.scss
+++ b/src/components/images/style.scss
@@ -18,7 +18,8 @@
     animation: fadein 0.1s;
 }
 
-.lazy-hidden {
+.lazy-hidden,
+.lazy-hidden-children * {
     opacity: 0;
 }