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 @@ <h2 class="sectionTitle">
  <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,14 +429,27 @@ 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 seconds.
+ * @return {number} The interval between backdrops in seconds.
+ */
+ backdropScreensaverInterval(val) {
+ if (val !== undefined) {
+ return this.set('backdropScreensaverInterval', val.toString(), false);
+ }
+
+ return parseInt(this.get('backdropScreensaverInterval', false), 10) || 5;
+ }
+
  /**
  * Get or set library page size.
  * @param {number|undefined} val - Library page size.
  * @return {number} Library page size.
  */
  libraryPageSize(val) {
  if (val !== undefined) {
- return this.set('libraryPageSize', parseInt(val, 10), false);
+ return this.set('libraryPageSize', val.toString(), false);
  }
 
  const libraryPageSize = parseInt(this.get('libraryPageSize', false), 10);
@@ -455,7 +468,7 @@ export class UserSettings {
  */
  maxDaysForNextUp(val) {
  if (val !== undefined) {
- return this.set('maxDaysForNextUp', parseInt(val, 10), false);
+ return this.set('maxDaysForNextUp', val.toString(), false);
  }
 
  const maxDaysForNextUp = parseInt(this.get('maxDaysForNextUp', false), 10);
@@ -474,7 +487,7 @@ export class UserSettings {
  */
  enableRewatchingInNextUp(val) {
  if (val !== undefined) {
- return this.set('enableRewatchingInNextUp', val, false);
+ return this.set('enableRewatchingInNextUp', val.toString(), false);
  }
 
  return toBoolean(this.get('enableRewatchingInNextUp', false), false);
@@ -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 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",