Make backdrop screensaver interval configurable

src/components/displaySettings/displaySettings.js

@@ -90,8 +90,10 @@ function loadForm(context, user, userSettings) {
 
     if (appHost.supports('screensaver')) {
         context.querySelector('.selectScreensaverContainer').classList.remove('hide');
+        context.querySelector('.txtBackdropScreensaverIntervalContainer').classList.remove('hide');
     } else {
         context.querySelector('.selectScreensaverContainer').classList.add('hide');
+        context.querySelector('.txtBackdropScreensaverIntervalContainer').classList.add('hide');
     }
 
     if (datetime.supportsLocalization()) {
@@ -105,6 +107,8 @@ function loadForm(context, user, userSettings) {
 
     loadScreensavers(context, userSettings);
 
+    context.querySelector('#txtBackdropScreensaverInterval').value = userSettings.backdropScreensaverInterval();
+
     context.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false;
 
     context.querySelector('#chkThemeSong').checked = userSettings.enableThemeSongs();
@@ -147,6 +151,7 @@ function saveUser(context, user, userSettingsInstance, apiClient) {
     userSettingsInstance.theme(context.querySelector('#selectTheme').value);
     userSettingsInstance.dashboardTheme(context.querySelector('#selectDashboardTheme').value);
     userSettingsInstance.screensaver(context.querySelector('.selectScreensaver').value);
+    userSettingsInstance.backdropScreensaverInterval(context.querySelector('#txtBackdropScreensaverInterval').value);
 
     userSettingsInstance.libraryPageSize(context.querySelector('#txtLibraryPageSize').value);
 

src/components/displaySettings/displaySettings.template.html

@@ -203,6 +203,11 @@
         <select is="emby-select" class="selectScreensaver" label="${LabelScreensaver}"></select>
     </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>
+    </div>
+
     <div class="checkboxContainer checkboxContainer-withDescription">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkFadein" />

src/components/slideshow/slideshow.js

@@ -352,7 +352,7 @@ export default function (options) {
                     minRatio: 1,
                     toggle: true
                 },
-                autoplay: !swiperOptions.interactive || !!swiperOptions.autoplay,
+                autoplay: swiperOptions.autoplay ?? !swiperOptions.interactive,
                 keyboard: {
                     enabled: true
                 },

src/plugins/backdropScreensaver/plugin.js

@@ -1,6 +1,7 @@
 
 import ServerConnections from '../../components/ServerConnections';
 import { PluginType } from '../../types/plugin.ts';
+import * as userSettings from '../../scripts/settings/userSettings';
 
 class BackdropScreensaver {
     constructor() {
@@ -29,7 +30,10 @@ class BackdropScreensaver {
                     const newSlideShow = new Slideshow({
                         showTitle: true,
                         cover: true,
-                        items: result.Items
+                        items: result.Items,
+                        autoplay: {
+                            delay: userSettings.backdropScreensaverInterval() * 1000
+                        }
                     });
 
                     newSlideShow.show();

src/scripts/settings/userSettings.js

@@ -429,6 +429,19 @@ export class UserSettings {
         return this.get('screensaver', false);
     }
 
+    /**
+     * Get or set the interval between backdrops when using the backdrop screensaver.
+     * @param {number|undefined} val - The interval between backdrops in milliseconds.
+     * @return {number} The interval between backdrops in milliseconds.
+     */
+    backdropScreensaverInterval(val) {
+        if (val !== undefined) {
+            return this.set('backdropScreensaverInterval', parseInt(val, 10), false);
+        }
+
+        return parseInt(this.get('backdropScreensaverInterval', false), 10) || 5;
+    }
+
     /**
      * Get or set library page size.
      * @param {number|undefined} val - Library page size.
@@ -624,6 +637,7 @@ export const dashboardTheme = currentSettings.dashboardTheme.bind(currentSetting
 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 libraryPageSize = currentSettings.libraryPageSize.bind(currentSettings);
 export const maxDaysForNextUp = currentSettings.maxDaysForNextUp.bind(currentSettings);
 export const enableRewatchingInNextUp = currentSettings.enableRewatchingInNextUp.bind(currentSettings);

src/strings/en-us.json

@@ -566,6 +566,8 @@
     "LabelAutomaticDiscoveryHelp": "Allow applications to automatically detect Jellyfin by using UDP port 7359.",
     "LabelBaseUrl": "Base URL",
     "LabelBaseUrlHelp": "Add a custom subdirectory to the server URL. For example: <code>http://example.com/<b>&lt;baseurl&gt;</b></code>",
+    "LabelBackdropScreensaverInterval": "Backdrop Screensaver Interval",
+    "LabelBackdropScreensaverIntervalHelp": "The time in seconds a between different backdrops when using the backdrop screensaver.",
     "LabelBindToLocalNetworkAddress": "Bind to local network address",
     "LabelBindToLocalNetworkAddressHelp": "Override the local IP address for the HTTP server. If left empty, the server will bind to all available addresses. Changing this value requires a restart.",
     "LabelBirthDate": "Birth date",