Add Display setting for fast image fade-in

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()) {

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" />

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) {
-
+        if (userSettings.enableFastFadein()) {
-        var cssClass = 'lazy-image-fadein';
+            elem.classList.add('lazy-image-fadein-fast');
-
+        } else {
-        elem.classList.add(cssClass);
+            elem.classList.add('lazy-image-fadein');
+        }
     }
 
     function lazyChildren(elem) {

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);

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):",

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:",