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>

i18n/en.json

@@ -1807,6 +1807,8 @@
   "setting_notifications_subtitle": "Adjust your notification preferences",
   "setting_notifications_total_progress_subtitle": "Overall upload progress (done/total assets)",
   "setting_notifications_total_progress_title": "Show background backup total progress",
+  "setting_video_viewer_auto_play_subtitle": "Automatically start playing videos when they are opened",
+  "setting_video_viewer_auto_play_title": "Auto play videos",
   "setting_video_viewer_looping_title": "Looping",
   "setting_video_viewer_original_video_subtitle": "When streaming a video from the server, play the original even when a transcode is available. May lead to buffering. Videos available locally are played in original quality regardless of this setting.",
   "setting_video_viewer_original_video_title": "Force original video",

mobile/lib/domain/models/setting.model.dart

@@ -6,6 +6,7 @@ enum Setting<T> {
   showStorageIndicator<bool>(StoreKey.storageIndicator, true),
   loadOriginal<bool>(StoreKey.loadOriginal, false),
   loadOriginalVideo<bool>(StoreKey.loadOriginalVideo, false),
+  autoPlayVideo<bool>(StoreKey.autoPlayVideo, true),
   preferRemoteImage<bool>(StoreKey.preferRemoteImage, false),
   advancedTroubleshooting<bool>(StoreKey.advancedTroubleshooting, false),
   enableBackup<bool>(StoreKey.enableBackup, false);

mobile/lib/domain/models/store.model.dart

@@ -70,6 +70,8 @@ enum StoreKey<T> {
   // Read-only Mode settings
   readonlyModeEnabled<bool>._(138),
 
+  autoPlayVideo<bool>._(139),
+
   // Experimental stuff
   photoManagerCustomFilter<bool>._(1000),
   betaPromptShown<bool>._(1001),

mobile/lib/pages/common/native_video_viewer.page.dart

@@ -190,7 +190,10 @@ class NativeVideoViewerPage extends HookConsumerWidget {
       isVideoReady.value = true;
 
       try {
+        final autoPlayVideo = ref.read(appSettingsServiceProvider).getSetting<bool>(AppSettingsEnum.autoPlayVideo);
+        if (autoPlayVideo) {
           await videoController.play();
+        }
         await videoController.setVolume(0.9);
       } catch (error) {
         log.severe('Error playing video: $error');

mobile/lib/presentation/widgets/asset_viewer/video_viewer.widget.dart

@@ -7,6 +7,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
 import 'package:immich_mobile/domain/models/setting.model.dart';
 import 'package:immich_mobile/domain/models/store.model.dart';
+import 'package:immich_mobile/domain/services/setting.service.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/infrastructure/repositories/storage.repository.dart';
 import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
@@ -218,7 +219,10 @@ class NativeVideoViewer extends HookConsumerWidget {
       }
 
       try {
+        final autoPlayVideo = AppSetting.get(Setting.autoPlayVideo);
+        if (autoPlayVideo) {
           await videoController.play();
+        }
         await videoController.setVolume(0.9);
       } catch (error) {
         log.severe('Error playing video: $error');

mobile/lib/services/app_settings.service.dart

@@ -34,6 +34,7 @@ enum AppSettingsEnum<T> {
   preferRemoteImage<bool>(StoreKey.preferRemoteImage, null, false),
   loopVideo<bool>(StoreKey.loopVideo, "loopVideo", true),
   loadOriginalVideo<bool>(StoreKey.loadOriginalVideo, "loadOriginalVideo", false),
+  autoPlayVideo<bool>(StoreKey.autoPlayVideo, "autoPlayVideo", true),
   mapThemeMode<int>(StoreKey.mapThemeMode, null, 0),
   mapShowFavoriteOnly<bool>(StoreKey.mapShowFavoriteOnly, null, false),
   mapIncludeArchived<bool>(StoreKey.mapIncludeArchived, null, false),

mobile/lib/widgets/settings/asset_viewer_settings/video_viewer_settings.dart

@@ -14,11 +14,18 @@ class VideoViewerSettings extends HookConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final useLoopVideo = useAppSettingsState(AppSettingsEnum.loopVideo);
     final useOriginalVideo = useAppSettingsState(AppSettingsEnum.loadOriginalVideo);
+    final useAutoPlayVideo = useAppSettingsState(AppSettingsEnum.autoPlayVideo);
 
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         SettingsSubTitle(title: "videos".tr()),
+        SettingsSwitchListTile(
+          valueNotifier: useAutoPlayVideo,
+          title: "setting_video_viewer_auto_play_title".tr(),
+          subtitle: "setting_video_viewer_auto_play_subtitle".tr(),
+          onChanged: (_) => ref.invalidate(appSettingsServiceProvider),
+        ),
         SettingsSwitchListTile(
           valueNotifier: useLoopVideo,
           title: "setting_video_viewer_looping_title".tr(),

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, {});