From c49f632f62cda4144b1597aa0ad09f7f6f54a133 Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Sun, 26 Jan 2020 15:32:13 +0100
Subject: [PATCH] Add Display setting for fast image fade-in

---
 src/components/displaysettings/displaysettings.js    |  2 ++
 .../displaysettings/displaysettings.template.html    | 12 ++++++++++++
 src/components/images/imageLoader.js                 | 11 ++++++-----
 src/components/usersettings/usersettingsbuilder.js   |  9 +++++++++
 src/strings/en-gb.json                               |  2 ++
 src/strings/en-us.json                               |  2 ++
 6 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/components/displaysettings/displaysettings.js b/src/components/displaysettings/displaysettings.js
index fea7d9bd3e..da407c11f1 100644
--- a/src/components/displaysettings/displaysettings.js
+++ b/src/components/displaysettings/displaysettings.js
@@ -180,6 +180,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('#chkBackdrops').checked = userSettings.enableBackdrops();
 
         context.querySelector('#selectLanguage').value = userSettings.language() || '';
@@ -216,6 +217,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', '
 
         userSettingsInstance.skin(context.querySelector('.selectSkin').value);
 
+        userSettingsInstance.enableFastFadein(context.querySelector('#chkFadein').checked);
         userSettingsInstance.enableBackdrops(context.querySelector('#chkBackdrops').checked);
 
         if (user.Id === apiClient.getCurrentUserId()) {
diff --git a/src/components/displaysettings/displaysettings.template.html b/src/components/displaysettings/displaysettings.template.html
index f469d8d5ce..16bbf0dd8a 100644
--- a/src/components/displaysettings/displaysettings.template.html
+++ b/src/components/displaysettings/displaysettings.template.html
@@ -3,6 +3,7 @@
     <h2 class="sectionTitle">
         ${Display}
     </h2>
+
     <div class="selectContainer languageSection hide">
         <select id="selectLanguage" is="emby-select" label="${LabelDisplayLanguage}">
             <option value="">${Auto}</option>
@@ -133,6 +134,7 @@
     <div class="selectContainer selectDashboardThemeContainer hide">
         <select id="selectDashboardTheme" is="emby-select" label="${LabelDashboardTheme}"></select>
     </div>
+
     <div class="selectContainer hide selectScreensaverContainer">
         <select is="emby-select" class="selectScreensaver" label="${LabelScreensaver}"></select>
     </div>
@@ -141,6 +143,14 @@
         <select is="emby-select" class="selectSoundEffects" label="${LabelSoundEffects}"></select>
     </div>
 
+    <div class="checkboxContainer checkboxContainer-withDescription fldFadein">
+        <label>
+            <input type="checkbox" is="emby-checkbox" id="chkFadein" />
+            <span>${EnableFastImageFadeIn}</span>
+        </label>
+        <div class="fieldDescription checkboxFieldDescription">${EnableFastImageFadeInHelp}</div>
+    </div>
+
     <div class="checkboxContainer checkboxContainer-withDescription fldBackdrops hide">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkBackdrops" />
@@ -148,6 +158,7 @@
         </label>
         <div class="fieldDescription checkboxFieldDescription">${EnableBackdropsHelp}</div>
     </div>
+
     <div class="checkboxContainer checkboxContainer-withDescription fldThemeSong hide">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkThemeSong" />
@@ -155,6 +166,7 @@
         </label>
         <div class="fieldDescription checkboxFieldDescription">${EnableThemeSongsHelp}</div>
     </div>
+
     <div class="checkboxContainer checkboxContainer-withDescription fldThemeVideo hide">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkThemeVideo" />
diff --git a/src/components/images/imageLoader.js b/src/components/images/imageLoader.js
index 17af296af4..80fcbbd3f4 100644
--- a/src/components/images/imageLoader.js
+++ b/src/components/images/imageLoader.js
@@ -1,4 +1,4 @@
-define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings', 'require', 'css!./style'], function (lazyLoader, imageFetcher, layoutManager, browser, appSettings, require) {
+define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings', 'userSettings', 'require', 'css!./style'], function (lazyLoader, imageFetcher, layoutManager, browser, appSettings, userSettings, require) {
     'use strict';
 
     var requestIdleCallback = window.requestIdleCallback || function (fn) {
@@ -36,10 +36,11 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
     }
 
     function fadeIn(elem) {
-
-        var cssClass = 'lazy-image-fadein';
-
-        elem.classList.add(cssClass);
+        if (userSettings.enableFastFadein()) {
+            elem.classList.add('lazy-image-fadein-fast');
+        } else {
+            elem.classList.add('lazy-image-fadein');
+        }
     }
 
     function lazyChildren(elem) {
diff --git a/src/components/usersettings/usersettingsbuilder.js b/src/components/usersettings/usersettingsbuilder.js
index f852dacc43..1a35434c6d 100644
--- a/src/components/usersettings/usersettingsbuilder.js
+++ b/src/components/usersettings/usersettingsbuilder.js
@@ -120,6 +120,15 @@ define(['appSettings', 'events'], function (appSettings, events) {
         return val !== 'false';
     };
 
+    UserSettings.prototype.enableFastFadein = function (val) {
+        if (val != null) {
+            return this.set('fastFadein', val.toString(), false);
+        }
+
+        val = this.get('fastFadein', false);
+        return val !== 'false';
+    };
+
     UserSettings.prototype.enableBackdrops = function (val) {
         if (val != null) {
             return this.set('enableBackdrops', val.toString(), false);
diff --git a/src/strings/en-gb.json b/src/strings/en-gb.json
index 1093463258..734fc3bfb5 100644
--- a/src/strings/en-gb.json
+++ b/src/strings/en-gb.json
@@ -836,6 +836,8 @@
     "LabelSecureConnectionsMode": "Secure connection mode:",
     "LabelSeasonNumber": "Season number:",
     "LabelScreensaver": "Screensaver:",
+    "EnableFastImageFadeIn": "Fast image fade-in",
+    "EnableFastImageFadeInHelp": "Enable faster fade-in animation for loaded images",
     "LabelScheduledTaskLastRan": "Last ran {0}, taking {1}.",
     "LabelSaveLocalMetadataHelp": "Saving artwork into media folders will put them in a place where they can be easily edited.",
     "LabelRuntimeMinutes": "Run time (minutes):",
diff --git a/src/strings/en-us.json b/src/strings/en-us.json
index c9c00f0da4..1c80745987 100644
--- a/src/strings/en-us.json
+++ b/src/strings/en-us.json
@@ -793,6 +793,8 @@
     "LabelSaveLocalMetadataHelp": "Saving artwork into media folders will put them in a place where they can be easily edited.",
     "LabelScheduledTaskLastRan": "Last ran {0}, taking {1}.",
     "LabelScreensaver": "Screensaver:",
+    "EnableFastImageFadeIn": "Fast image fade-in",
+    "EnableFastImageFadeInHelp": "Enable faster fade-in animation for loaded images",
     "LabelSeasonNumber": "Season number:",
     "LabelSecureConnectionsMode": "Secure connection mode:",
     "LabelSelectFolderGroups": "Automatically group content from the following folders into views such as Movies, Music and TV:",