From a2fef21af2e38645525bc3559d67decf0419056c Mon Sep 17 00:00:00 2001
From: Richard Nesnass <nesnass@gmail.com>
Date: Wed, 23 Jul 2025 01:01:12 +0200
Subject: [PATCH] New display setting to configure slideshow delay

---
 .../components/DisplayPreferences.tsx         | 24 +++++++++++++++++++
 .../preferences/hooks/useDisplaySettings.ts   |  1 +
 .../types/displaySettingsValues.ts            |  1 +
 .../displaySettings/displaySettings.js        |  3 +++
 .../displaySettings.template.html             |  5 ++++
 src/plugins/photoPlayer/plugin.js             |  5 +++-
 src/scripts/settings/userSettings.js          | 14 +++++++++++
 7 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/src/apps/experimental/features/preferences/components/DisplayPreferences.tsx b/src/apps/experimental/features/preferences/components/DisplayPreferences.tsx
index e5e940b7a..b26f21d11 100644
--- a/src/apps/experimental/features/preferences/components/DisplayPreferences.tsx
+++ b/src/apps/experimental/features/preferences/components/DisplayPreferences.tsx
@@ -169,6 +169,30 @@ export function DisplayPreferences({ onChange, values }: Readonly<DisplayPrefere
                 </Fragment>
             ) }
 
+            <FormControl fullWidth>
+                <TextField
+                    aria-describedby='display-settings-slideshow-interval-description'
+                    value={values.slideshowInterval}
+                    label={globalize.translate('LabelSlideshowInterval')}
+                    name='slideshowInterval'
+                    onChange={onChange}
+                    slotProps={{
+                        htmlInput: {
+                            inputMode: 'numeric',
+                            max: '3600',
+                            min: '1',
+                            pattern: '[0-9]',
+                            required: true,
+                            step: '1',
+                            type: 'number'
+                        }
+                    }}
+                />
+                <FormHelperText id='display-settings-slideshow-interval-description'>
+                    {globalize.translate('LabelSlideshowIntervalHelp')}
+                </FormHelperText>
+            </FormControl>
+
             <FormControl fullWidth>
                 <FormControlLabel
                     aria-describedby='display-settings-faster-animations-description'
diff --git a/src/apps/experimental/features/preferences/hooks/useDisplaySettings.ts b/src/apps/experimental/features/preferences/hooks/useDisplaySettings.ts
index ee44a80ac..99bd1a812 100644
--- a/src/apps/experimental/features/preferences/hooks/useDisplaySettings.ts
+++ b/src/apps/experimental/features/preferences/hooks/useDisplaySettings.ts
@@ -103,6 +103,7 @@ async function loadDisplaySettings({
         maxDaysForNextUp: settings.maxDaysForNextUp(),
         screensaver: settings.screensaver() || 'none',
         screensaverInterval: settings.backdropScreensaverInterval(),
+        slideshowInterval: settings.slideshowInterval(),
         theme: settings.theme() || defaultTheme?.id || FALLBACK_THEME_ID
     };
 
diff --git a/src/apps/experimental/features/preferences/types/displaySettingsValues.ts b/src/apps/experimental/features/preferences/types/displaySettingsValues.ts
index a5e08d2dd..1f5f9ba15 100644
--- a/src/apps/experimental/features/preferences/types/displaySettingsValues.ts
+++ b/src/apps/experimental/features/preferences/types/displaySettingsValues.ts
@@ -18,5 +18,6 @@ export interface DisplaySettingsValues {
     maxDaysForNextUp: number;
     screensaver: string;
     screensaverInterval: number;
+    slideshowInterval: number;
     theme: string;
 }
diff --git a/src/components/displaySettings/displaySettings.js b/src/components/displaySettings/displaySettings.js
index 7ca0e11b6..72b976c2a 100644
--- a/src/components/displaySettings/displaySettings.js
+++ b/src/components/displaySettings/displaySettings.js
@@ -89,6 +89,7 @@ function loadForm(context, user, userSettings) {
     }
 
     context.querySelector('.selectDashboardThemeContainer').classList.toggle('hide', !user.Policy.IsAdministrator);
+    context.querySelector('.txtSlideshowIntervalContainer').classList.remove('hide');
 
     if (appHost.supports(AppFeature.Screensaver)) {
         context.querySelector('.selectScreensaverContainer').classList.remove('hide');
@@ -112,6 +113,7 @@ function loadForm(context, user, userSettings) {
     loadScreensavers(context, userSettings);
 
     context.querySelector('#txtBackdropScreensaverInterval').value = userSettings.backdropScreensaverInterval();
+    context.querySelector('#txtSlideshowInterval').value = userSettings.slideshowInterval();
     context.querySelector('#txtScreensaverTime').value = userSettings.screensaverTime();
 
     context.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false;
@@ -157,6 +159,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.slideshowInterval(context.querySelector('#txtSlideshowInterval').value);
     userSettingsInstance.screensaverTime(context.querySelector('#txtScreensaverTime').value);
 
     userSettingsInstance.libraryPageSize(context.querySelector('#txtLibraryPageSize').value);
diff --git a/src/components/displaySettings/displaySettings.template.html b/src/components/displaySettings/displaySettings.template.html
index 1b5579b4c..6b219906c 100644
--- a/src/components/displaySettings/displaySettings.template.html
+++ b/src/components/displaySettings/displaySettings.template.html
@@ -214,6 +214,11 @@
         <div class="fieldDescription">${LabelBackdropScreensaverIntervalHelp}</div>
     </div>
 
+    <div class="inputContainer hide txtSlideshowIntervalContainer inputContainer-withDescription">
+        <input is="emby-input" type="number" id="txtSlideshowInterval" pattern="[0-9]*" required="required" min="1" max="3600" step="1" label="${LabelSlideshowInterval}" />
+        <div class="fieldDescription">${LabelSlideshowIntervalHelp}</div>
+    </div>
+
     <div class="checkboxContainer checkboxContainer-withDescription">
         <label>
             <input type="checkbox" is="emby-checkbox" id="chkFadein" />
diff --git a/src/plugins/photoPlayer/plugin.js b/src/plugins/photoPlayer/plugin.js
index 7fcec8294..aae01dd0e 100644
--- a/src/plugins/photoPlayer/plugin.js
+++ b/src/plugins/photoPlayer/plugin.js
@@ -1,4 +1,5 @@
 import { ServerConnections } from 'lib/jellyfin-apiclient';
+import * as userSettings from '../../scripts/settings/userSettings';
 import { PluginType } from 'types/plugin.ts';
 
 export default class PhotoPlayer {
@@ -24,7 +25,9 @@ export default class PhotoPlayer {
                         interval: 11000,
                         interactive: true,
                         // playbackManager.shuffle has no options. So treat 'shuffle' as a 'play' action
-                        autoplay: options.autoplay || options.shuffle,
+                        autoplay: {
+                            delay: userSettings.slideshowInterval() * 1000
+                        },
                         user: result
                     });
 
diff --git a/src/scripts/settings/userSettings.js b/src/scripts/settings/userSettings.js
index 439c1df87..7781ee0eb 100644
--- a/src/scripts/settings/userSettings.js
+++ b/src/scripts/settings/userSettings.js
@@ -464,6 +464,19 @@ export class UserSettings {
         return parseInt(this.get('backdropScreensaverInterval', false), 10) || 5;
     }
 
+    /**
+     * Get or set the interval between slides when using the slideshow.
+     * @param {number|undefined} [val] - The interval between slides in seconds.
+     * @return {number} The interval between slides in seconds.
+     */
+    slideshowInterval(val) {
+        if (val !== undefined) {
+            return this.set('slideshowInterval', val.toString(), false);
+        }
+
+        return parseInt(this.get('slideshowInterval', 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.
@@ -705,6 +718,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 slideshowInterval = currentSettings.slideshowInterval.bind(currentSettings);
 export const screensaverTime = currentSettings.screensaverTime.bind(currentSettings);
 export const libraryPageSize = currentSettings.libraryPageSize.bind(currentSettings);
 export const maxDaysForNextUp = currentSettings.maxDaysForNextUp.bind(currentSettings);