feat: make memories slideshow duration configurable (#22783)

web/src/lib/components/memory-page/memory-viewer.svelte

@@ -102,7 +102,7 @@
       });
     } else {
       progressBarController = new Tween<number>(0, {
-        duration: (from: number, to: number) => (to ? 5000 * (to - from) : 0),
+        duration: (from: number, to: number) => (to ? $preferences.memories.duration * 1000 * (to - from) : 0),
       });
     }
   };

web/src/lib/components/user-settings-page/feature-settings.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import { SettingInputFieldType } from '$lib/constants';
   import { preferences } from '$lib/stores/user.store';
   import { handleError } from '$lib/utils/handle-error';
   import { AssetOrder, updateMyPreferences } from '@immich/sdk';
@@ -18,6 +20,7 @@
 
   // Memories
   let memoriesEnabled = $state($preferences?.memories?.enabled ?? true);
+  let memoriesDuration = $state($preferences?.memories?.duration ?? 5);
 
   // People
   let peopleEnabled = $state($preferences?.people?.enabled ?? false);
@@ -43,7 +46,7 @@
         userPreferencesUpdateDto: {
           albums: { defaultAssetOrder },
           folders: { enabled: foldersEnabled, sidebarWeb: foldersSidebar },
-          memories: { enabled: memoriesEnabled },
+          memories: { enabled: memoriesEnabled, duration: memoriesDuration },
           people: { enabled: peopleEnabled, sidebarWeb: peopleSidebar },
           ratings: { enabled: ratingsEnabled },
           sharedLinks: { enabled: sharedLinksEnabled, sidebarWeb: sharedLinkSidebar },
@@ -103,6 +106,14 @@
           <div class="ms-4 mt-6">
             <SettingSwitch title={$t('enable')} bind:checked={memoriesEnabled} />
           </div>
+          <div class="ms-4 mt-6">
+            <SettingInputField
+              inputType={SettingInputFieldType.NUMBER}
+              label={$t('duration')}
+              description={$t('time_based_memories_duration')}
+              bind:value={memoriesDuration}
+            />
+          </div>
         </SettingAccordion>
 
         <SettingAccordion key="people" title={$t('people')} subtitle={$t('people_feature_description')}>