Add option to control how long the screensaver takes to start (#6165)

* Added option to control how long the screensaver takes to start

* ESLint fixes

* Requested pull request fixes

* Alphabetized the translation string placement

* Simplified getter

src/components/displaySettings/displaySettings.js

@@ -91,9 +91,11 @@ function loadForm(context, user, userSettings) {
     if (appHost.supports('screensaver')) {
         context.querySelector('.selectScreensaverContainer').classList.remove('hide');
         context.querySelector('.txtBackdropScreensaverIntervalContainer').classList.remove('hide');
+        context.querySelector('.txtScreensaverTimeContainer').classList.remove('hide');
     } else {
         context.querySelector('.selectScreensaverContainer').classList.add('hide');
         context.querySelector('.txtBackdropScreensaverIntervalContainer').classList.add('hide');
+        context.querySelector('.txtScreensaverTimeContainer').classList.add('hide');
     }
 
     if (datetime.supportsLocalization()) {
@@ -108,6 +110,7 @@ function loadForm(context, user, userSettings) {
     loadScreensavers(context, userSettings);
 
     context.querySelector('#txtBackdropScreensaverInterval').value = userSettings.backdropScreensaverInterval();
+    context.querySelector('#txtScreensaverTime').value = userSettings.screensaverTime();
 
     context.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false;
 
@@ -152,6 +155,7 @@ function saveUser(context, user, userSettingsInstance, apiClient) {
     userSettingsInstance.dashboardTheme(context.querySelector('#selectDashboardTheme').value);
     userSettingsInstance.screensaver(context.querySelector('.selectScreensaver').value);
     userSettingsInstance.backdropScreensaverInterval(context.querySelector('#txtBackdropScreensaverInterval').value);
+    userSettingsInstance.screensaverTime(context.querySelector('#txtScreensaverTime').value);
 
     userSettingsInstance.libraryPageSize(context.querySelector('#txtLibraryPageSize').value);
 

src/components/displaySettings/displaySettings.template.html

@@ -203,6 +203,12 @@
         <select is="emby-select" class="selectScreensaver" label="${LabelScreensaver}"></select>
     </div>
 
+    <div class="inputContainer hide txtScreensaverTimeContainer inputContainer-withDescription">
+        <input is="emby-input" type="number" id="txtScreensaverTime" pattern="[0-9]*" required="required" min="5" max="86400" step="1"
+            label="${LabelScreensaverTime}" />
+        <div class="fieldDescription">${LabelScreensaverTimeHelp}</div>
+    </div>
+
     <div class="inputContainer hide txtBackdropScreensaverIntervalContainer inputContainer-withDescription">
         <input is="emby-input" type="number" id="txtBackdropScreensaverInterval" pattern="[0-9]*" required="required" min="1" max="3600" step="1" label="${LabelBackdropScreensaverInterval}" />
         <div class="fieldDescription">${LabelBackdropScreensaverIntervalHelp}</div>

src/scripts/screensavermanager.js

@@ -11,7 +11,7 @@ import './screensavermanager.scss';
 function getMinIdleTime() {
     // Returns the minimum amount of idle time required before the screen saver can be displayed
     //time units used Millisecond
-    return 180000;
+    return userSettings.screensaverTime() * 1000;
 }
 
 let lastFunctionalEvent = 0;
@@ -129,7 +129,7 @@ function ScreenSaverManager() {
         this.show();
     };
 
-    setInterval(onInterval, 10000);
+    setInterval(onInterval, 5000);
 }
 
 export default new ScreenSaverManager;

src/scripts/settings/userSettings.js

@@ -431,6 +431,19 @@ export class UserSettings {
         return parseInt(this.get('backdropScreensaverInterval', false), 10) || 5;
     }
 
+    /**
+     * Get or set the amount of time it takes to activate the screensaver in seconds. Default 3 minutes.
+     * @param {number|undefined} [val] - The amount of time it takes to activate the screensaver in seconds.
+     * @return {number} The amount of time it takes to activate the screensaver in seconds.
+     */
+    screensaverTime(val) {
+        if (val !== undefined) {
+            return this.set('screensaverTime', val.toString(), false);
+        }
+
+        return parseInt(this.get('screensaverTime', false), 10) || 180;
+    }
+
     /**
      * Get or set library page size.
      * @param {number|undefined} [val] - Library page size.
@@ -650,6 +663,7 @@ export const skin = currentSettings.skin.bind(currentSettings);
 export const theme = currentSettings.theme.bind(currentSettings);
 export const screensaver = currentSettings.screensaver.bind(currentSettings);
 export const backdropScreensaverInterval = currentSettings.backdropScreensaverInterval.bind(currentSettings);
+export const screensaverTime = currentSettings.screensaverTime.bind(currentSettings);
 export const libraryPageSize = currentSettings.libraryPageSize.bind(currentSettings);
 export const maxDaysForNextUp = currentSettings.maxDaysForNextUp.bind(currentSettings);
 export const enableRewatchingInNextUp = currentSettings.enableRewatchingInNextUp.bind(currentSettings);

src/strings/en-us.json

@@ -861,6 +861,8 @@
     "LabelSaveTrickplayLocallyHelp": "Saving trickplay images into media folders will put them next to your media for easy migration and access.",
     "LabelScheduledTaskLastRan": "Last ran {0}, taking {1}.",
     "LabelScreensaver": "Screensaver",
+    "LabelScreensaverTime": "Screensaver Time",
+    "LabelScreensaverTimeHelp": "The amount of time in seconds of inactivity required to start the screensaver.",
     "LabelSeasonNumber": "Season number",
     "LabelSelectFolderGroups": "Automatically group content from the following folders into views such as 'Movies', 'Music' and 'TV'",
     "LabelSelectFolderGroupsHelp": "Folders that are unchecked will be displayed by themselves in their own view.",