feat: add video auto play setting (#20416)

* feat: add auto play setting to mobile

* feat: add auto play video setting to web

* address review comments

* fix setting id

---------

Co-authored-by: Saschl <noreply@saschl.com>

web/src/lib/components/asset-viewer/video-native-viewer.svelte

@@ -4,7 +4,12 @@
   import { assetViewerFadeDuration } from '$lib/constants';
   import { castManager } from '$lib/managers/cast-manager.svelte';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
-  import { loopVideo as loopVideoPreference, videoViewerMuted, videoViewerVolume } from '$lib/stores/preferences.store';
+  import {
+    autoPlayVideo,
+    loopVideo as loopVideoPreference,
+    videoViewerMuted,
+    videoViewerVolume,
+  } from '$lib/stores/preferences.store';
   import { getAssetPlaybackUrl, getAssetThumbnailUrl } from '$lib/utils';
   import { AssetMediaSize } from '@immich/sdk';
   import { LoadingSpinner } from '@immich/ui';
@@ -125,7 +130,7 @@
       <video
         bind:this={videoPlayer}
         loop={$loopVideoPreference && loopVideo}
-        autoplay
+        autoplay={$autoPlayVideo}
         playsinline
         controls
         class="h-full object-contain"

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { assetViewerFadeDuration } from '$lib/constants';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import { autoPlayVideo } from '$lib/stores/preferences.store';
   import { getAssetPlaybackUrl, getAssetThumbnailUrl } from '$lib/utils';
   import { AssetMediaSize } from '@immich/sdk';
   import { onMount } from 'svelte';
@@ -27,7 +28,7 @@
   <div class="h-full w-full bg-pink-9000" transition:fade={{ duration: assetViewerFadeDuration }}>
     <video
       bind:this={videoPlayer}
-      autoplay
+      autoplay={$autoPlayVideo}
       playsinline
       class="h-full w-full rounded-2xl object-contain transition-all"
       src={getAssetPlaybackUrl({ id: asset.id })}

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

@@ -7,6 +7,7 @@
   import { themeManager } from '$lib/managers/theme-manager.svelte';
   import {
     alwaysLoadOriginalFile,
+    autoPlayVideo,
     locale,
     loopVideo,
     playVideoThumbnailOnHover,
@@ -108,6 +109,13 @@
           bind:checked={$playVideoThumbnailOnHover}
         />
       </div>
+      <div class="ms-4">
+        <SettingSwitch
+          title={$t('setting_video_viewer_auto_play_title')}
+          subtitle={$t('setting_video_viewer_auto_play_subtitle')}
+          bind:checked={$autoPlayVideo}
+        />
+      </div>
       <div class="ms-4">
         <SettingSwitch title={$t('loop_videos')} subtitle={$t('loop_videos_description')} bind:checked={$loopVideo} />
       </div>

web/src/lib/stores/preferences.store.ts

@@ -146,4 +146,6 @@ export const playVideoThumbnailOnHover = persisted<boolean>('play-video-thumbnai
 
 export const loopVideo = persisted<boolean>('loop-video', true, {});
 
+export const autoPlayVideo = persisted<boolean>('auto-play-video', true, {});
+
 export const recentAlbumsDropdown = persisted<boolean>('recent-albums-open', true, {});