Add a toggle for blurhash

src/components/displaySettings/displaySettings.js

@@ -181,6 +181,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
         context.querySelector('#chkThemeSong').checked = userSettings.enableThemeSongs();
         context.querySelector('#chkThemeVideo').checked = userSettings.enableThemeVideos();
         context.querySelector('#chkFadein').checked = userSettings.enableFastFadein();
+        context.querySelector('#chkBlurhash').checked = userSettings.enableBlurhash();
         context.querySelector('#chkBackdrops').checked = userSettings.enableBackdrops();
         context.querySelector('#chkDetailsBanner').checked = userSettings.detailsBanner();
 
@@ -223,6 +224,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
         userSettingsInstance.skin(context.querySelector('.selectSkin').value);
 
         userSettingsInstance.enableFastFadein(context.querySelector('#chkFadein').checked);
+        userSettingsInstance.enableBlurhash(context.querySelector('#chkBlurhash').checked);
         userSettingsInstance.enableBackdrops(context.querySelector('#chkBackdrops').checked);
         userSettingsInstance.detailsBanner(context.querySelector('#chkDetailsBanner').checked);
 

src/components/displaySettings/displaySettings.template.html

@@ -143,12 +143,12 @@
         <select is="emby-select" class="selectSoundEffects" label="${LabelSoundEffects}"></select>
     </div>
 
-    <div class="inputContainer inputContainer-withDescription fldFadein">
+    <div class="inputContainer inputContainer-withDescription">
         <input is="emby-input" type="number" id="txtLibraryPageSize" pattern="[0-9]*" required="required" min="0" max="1000" step="1" label="${LabelLibraryPageSize}" />
         <div class="fieldDescription">${LabelLibraryPageSizeHelp}</div>
     </div>
 
-    <div class="checkboxContainer checkboxContainer-withDescription fldFadein">
+    <div class="checkboxContainer checkboxContainer-withDescription">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkFadein" />
             <span>${EnableFastImageFadeIn}</span>
@@ -156,14 +156,15 @@
         <div class="fieldDescription checkboxFieldDescription">${EnableFastImageFadeInHelp}</div>
     </div>
 
-    <div class="checkboxContainer checkboxContainer-withDescription fldFadein">
+    <div class="checkboxContainer checkboxContainer-withDescription">
         <label>
-            <input type="checkbox" is="emby-checkbox" id="chkFadein" />
+            <input type="checkbox" is="emby-checkbox" id="chkBlurhash" />
             <span>${EnableBlurhash}</span>
         </label>
         <div class="fieldDescription checkboxFieldDescription">${EnableBlurhashHelp}</div>
     </div>
-    <div class="checkboxContainer checkboxContainer-withDescription fldDetailsBanner">
+
+    <div class="checkboxContainer checkboxContainer-withDescription">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkDetailsBanner" />
             <span>${EnableDetailsBanner}</span>

src/components/images/imageLoader.js

@@ -69,8 +69,10 @@ import 'css!./style';
             source = entry;
         }
 
-        if (!target.classList.contains('blurhashed')) {
+        if (!target.classList.contains('blurhashed') && userSettings.enableBlurhash()) {
             itemBlurhashing(target);
+        } else if (!userSettings.enableBlurhash()) {
+            target.classList.add('lazy-hidden');
         }
 
         if (entry.intersectionRatio > 0) {
@@ -88,15 +90,26 @@ import 'css!./style';
         let preloaderImg = new Image();
         preloaderImg.src = url;
 
+        if (!userSettings.enableBlurhash()) elem.classList.add('lazy-hidden');
+
         preloaderImg.addEventListener('load', () => {
             if (elem.tagName !== 'IMG') {
                 elem.style.backgroundImage = "url('" + url + "')";
             } else {
                 elem.setAttribute('src', url);
             }
-
             elem.removeAttribute('data-src');
-            switchCanvas(elem);
+
+            if (userSettings.enableBlurhash()) {
+                switchCanvas(elem);
+            } else {
+                elem.classList.remove('lazy-hidden');
+                if (userSettings.enableFastFadein()) {
+                    elem.classList.add('lazy-image-fadein-fast');
+                } else {
+                    elem.classList.add('lazy-image-fadein');
+                }
+            }
         });
     }
 
@@ -110,9 +123,18 @@ import 'css!./style';
             url = elem.getAttribute('src');
             elem.setAttribute('src', '');
         }
-
         elem.setAttribute('data-src', url);
-        switchCanvas(elem);
+
+        if (userSettings.enableBlurhash()) {
+            switchCanvas(elem);
+        } else {
+            if (userSettings.enableFastFadein()) {
+                elem.classList.remove('lazy-image-fadein-fast');
+            } else {
+                elem.classList.remove('lazy-image-fadein');
+            }
+            elem.classList.add('lazy-hidden');
+        }
     }
 
     export function lazyChildren(elem) {

src/components/images/style.css

@@ -1,3 +1,17 @@
+.lazy-image-fadein {
+    opacity: 1;
+    transition: opacity 0.7s;
+}
+
+.lazy-image-fadein-fast {
+    opacity: 1;
+    transition: opacity 0.2s;
+}
+
+.lazy-hidden {
+    opacity: 0;
+}
+
 .lazy-blurhash-fadein-fast {
     transition: opacity 0.2s;
 }

src/scripts/settings/userSettings.js

@@ -128,6 +128,15 @@ import events from 'events';
         return val !== 'false';
     }
 
+    export function enableBlurhash(val) {
+        if (val !== undefined) {
+            return this.set('blurhash', val.toString(), false);
+        }
+
+        val = this.get('blurhash', false);
+        return val !== 'false';
+    }
+
     export function enableBackdrops(val) {
         if (val !== undefined) {
             return this.set('enableBackdrops', val.toString(), false);
@@ -294,6 +303,7 @@ export default {
     enableThemeSongs: enableThemeSongs,
     enableThemeVideos: enableThemeVideos,
     enableFastFadein: enableFastFadein,
+    enableBlurhash: enableBlurhash,
     enableBackdrops: enableBackdrops,
     language: language,
     dateTimeLocale: dateTimeLocale,

src/strings/es.json

@@ -1458,13 +1458,8 @@
     "ButtonSplit": "Dividir",
     "HeaderNavigation": "Navegación",
     "MessageConfirmAppExit": "¿Quieres salir?",
-<<<<<<< HEAD
     "EnableFastImageFadeInHelp": "Las animaciones durarán menos tiempo",
     "EnableFastImageFadeIn": "Animaciones más rápidas",
-=======
-    "EnableFastImageFadeInHelp": "Mostrar carteles y otras imágenes con difuminado rápido cuando termine la carga.",
-    "EnableFastImageFadeIn": "Difuminado rápido de imágenes",
->>>>>>> upstream/master
     "CopyStreamURLError": "Ha habido un error copiando la dirección.",
     "AllowFfmpegThrottlingHelp": "Cuando una transcodificación o un remux se adelanta lo suficiente desde la posición de reproducción actual, pause el proceso para que consuma menos recursos. Esto es más útil cuando se reproduce de forma linear, sin saltar de posición de reproducción a menudo. Desactívelo si experimenta problemas de reproducción.",
     "PlaybackErrorNoCompatibleStream": "Este contenido no es compatible con este dispositivo y no se puede reproducir: No se puede obtener del servidor en un formato compatible.",