Merge pull request jellyfin#2309 from jellyfin/white-flashing-images

fix(card): white flashing images
iwalton3 · Jan 5, 2021 · 945946b · 945946b
2 parents a125455 + a91d4b6
commit 945946b
Showing 1 changed file with 16 additions and 4 deletions.
diff --git a/src/components/images/imageLoader.js b/src/components/images/imageLoader.js
@@ -87,9 +87,6 @@ import './style.css';
             requestAnimationFrame(() => {
                 if (elem.tagName !== 'IMG') {
                     elem.style.backgroundImage = "url('" + url + "')";
-                    if (elem.classList.contains('blurhashed')) {
-                        elem.style.backgroundColor = '#fff';
-                    }
                 } else {
                     elem.setAttribute('src', url);
                 }
@@ -101,6 +98,12 @@ import './style.css';
                 } else {
                     elem.classList.add('lazy-image-fadein');
                 }
+
+                const canvas = elem.previousSibling;
+                if (elem.classList.contains('blurhashed') && canvas && canvas.tagName === 'CANVAS') {
+                    canvas.classList.remove('lazy-image-fadein-fast', 'lazy-image-fadein');
+                    canvas.classList.add('lazy-hidden');
+                }
             });
         });
     }
@@ -111,7 +114,6 @@ import './style.css';
         if (elem.tagName !== 'IMG') {
             url = elem.style.backgroundImage.slice(4, -1).replace(/"/g, '');
             elem.style.backgroundImage = 'none';
-            elem.style.backgroundColor = null;
         } else {
             url = elem.getAttribute('src');
             elem.setAttribute('src', '');
@@ -120,6 +122,16 @@ import './style.css';
 
         elem.classList.remove('lazy-image-fadein-fast', 'lazy-image-fadein');
         elem.classList.add('lazy-hidden');
+
+        const canvas = elem.previousSibling;
+        if (canvas && canvas.tagName === 'CANVAS') {
+            canvas.classList.remove('lazy-hidden');
+            if (userSettings.enableFastFadein()) {
+                canvas.classList.add('lazy-image-fadein-fast');
+            } else {
+                canvas.classList.add('lazy-image-fadein');
+            }
+        }
     }
 
     export function lazyChildren(elem) {