feat(web,mobile) Allow videos to be looped in the detail viewer (#8615)

* First version of video looping for the web

* Use prop for slideshow state

* refactor asset settings and add autoloop video setting

* rename variables and adjust description

* loop videos based on user settings in gallery viewer

* make asset viewer setting a stateless widget

* do not update video playback value if looping is enabled

* add some translations

* adjust description

* add missing id

* WIP

* chore: clean up

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

mobile/assets/i18n/de-DE.json

@@ -391,6 +391,7 @@
   "setting_image_viewer_original_title": "Original laden",
   "setting_image_viewer_preview_subtitle": "Aktivieren, um ein Bild mit mittlerer Auflösung zu laden. Deaktivieren, um entweder das Original direkt zu laden oder nur die Miniaturansicht zu verwenden.",
   "setting_image_viewer_preview_title": "Vorschaubild laden",
+  "setting_image_viewer_title": "Bilder",
   "setting_languages_apply": "Anwenden",
   "setting_languages_title": "Sprachen",
   "setting_notifications_notify_failures_grace_period": "Benachrichtigung über Fehler bei der Hintergrundsicherung: {}",
@@ -406,6 +407,9 @@
   "setting_notifications_total_progress_subtitle": "Gesamter Upload-Fortschritt (abgeschlossen/Anzahl Elemente)",
   "setting_notifications_total_progress_title": "Zeige Gesamtfortschritt bei der Hintergrundsicherung",
   "setting_pages_app_bar_settings": "Einstellungen",
+  "setting_video_viewer_looping_subtitle": "Aktivieren, damit sich ein Video in der Detailansicht automatisch wiederholt.",
+  "setting_video_viewer_looping_title": "Wiederholen",
+  "setting_video_viewer_title": "Videos",
   "settings_require_restart": "Bitte starte Immich neu, um diese Einstellung anzuwenden.",
   "share_add": "Hinzufügen",
   "share_add_photos": "Fotos hinzufügen",

mobile/assets/i18n/en-US.json

@@ -391,6 +391,7 @@
   "setting_image_viewer_original_title": "Load original image",
   "setting_image_viewer_preview_subtitle": "Enable to load a medium-resolution image. Disable to either directly load the original or only use the thumbnail.",
   "setting_image_viewer_preview_title": "Load preview image",
+  "setting_image_viewer_title": "Images",
   "setting_languages_apply": "Apply",
   "setting_languages_title": "Languages",
   "setting_notifications_notify_failures_grace_period": "Notify background backup failures: {}",
@@ -406,6 +407,9 @@
   "setting_notifications_total_progress_subtitle": "Overall upload progress (done/total assets)",
   "setting_notifications_total_progress_title": "Show background backup total progress",
   "setting_pages_app_bar_settings": "Settings",
+  "setting_video_viewer_looping_subtitle": "Enable to automatically loop a video in the detail viewer.",
+  "setting_video_viewer_looping_title": "Looping",
+  "setting_video_viewer_title": "Videos",
   "settings_require_restart": "Please restart Immich to apply this setting",
   "share_add": "Add",
   "share_add_photos": "Add photos",

mobile/lib/entities/store.entity.dart

@@ -182,6 +182,7 @@ enum StoreKey<T> {
   advancedTroubleshooting<bool>(114, type: bool),
   logLevel<int>(115, type: int),
   preferRemoteImage<bool>(116, type: bool),
+  loopVideo<bool>(117, type: bool),
   // map related settings
   mapShowFavoriteOnly<bool>(118, type: bool),
   mapRelativeDate<int>(119, type: int),

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

@@ -60,6 +60,7 @@ class GalleryViewerPage extends HookConsumerWidget {
     final settings = ref.watch(appSettingsServiceProvider);
     final isLoadPreview = useState(AppSettingsEnum.loadPreview.defaultValue);
     final isLoadOriginal = useState(AppSettingsEnum.loadOriginal.defaultValue);
+    final shouldLoopVideo = useState(AppSettingsEnum.loopVideo.defaultValue);
     final isZoomed = useState(false);
     final isPlayingVideo = useState(false);
     final localPosition = useState<Offset?>(null);
@@ -102,6 +103,8 @@ class GalleryViewerPage extends HookConsumerWidget {
             settings.getSetting<bool>(AppSettingsEnum.loadPreview);
         isLoadOriginal.value =
             settings.getSetting<bool>(AppSettingsEnum.loadOriginal);
+        shouldLoopVideo.value =
+            settings.getSetting<bool>(AppSettingsEnum.loopVideo);
         return null;
       },
       [],
@@ -368,6 +371,7 @@ class GalleryViewerPage extends HookConsumerWidget {
                       key: ValueKey(a),
                       asset: a,
                       isMotionVideo: a.livePhotoVideoId != null,
+                      loopVideo: shouldLoopVideo.value,
                       placeholder: Image(
                         image: provider,
                         fit: BoxFit.contain,

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

@@ -5,8 +5,8 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/widgets/settings/advanced_settings.dart';
 import 'package:immich_mobile/widgets/settings/asset_list_settings/asset_list_settings.dart';
+import 'package:immich_mobile/widgets/settings/asset_viewer_settings/asset_viewer_settings.dart';
 import 'package:immich_mobile/widgets/settings/backup_settings/backup_settings.dart';
-import 'package:immich_mobile/widgets/settings/image_viewer_quality_setting.dart';
 import 'package:immich_mobile/widgets/settings/language_settings.dart';
 import 'package:immich_mobile/widgets/settings/notification_setting.dart';
 import 'package:immich_mobile/widgets/settings/preference_settings/preference_setting.dart';
@@ -33,7 +33,7 @@ enum SettingSection {
         SettingSection.preferences => const PreferenceSetting(),
         SettingSection.backup => const BackupSettings(),
         SettingSection.timeline => const AssetListSettings(),
-        SettingSection.viewer => const ImageViewerQualitySetting(),
+        SettingSection.viewer => const AssetViewerSettings(),
         SettingSection.advanced => const AdvancedSettings(),
       };
 

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

@@ -17,6 +17,7 @@ class VideoViewerPage extends HookConsumerWidget {
   final Duration hideControlsTimer;
   final bool showControls;
   final bool showDownloadingIndicator;
+  final bool loopVideo;
 
   const VideoViewerPage({
     super.key,
@@ -26,6 +27,7 @@ class VideoViewerPage extends HookConsumerWidget {
     this.showControls = true,
     this.hideControlsTimer = const Duration(seconds: 5),
     this.showDownloadingIndicator = true,
+    this.loopVideo = false,
   });
 
   @override
@@ -73,7 +75,9 @@ class VideoViewerPage extends HookConsumerWidget {
     // Also sets the error if there is an error in the playback
     void updateVideoPlayback() {
       final videoPlayback = VideoPlaybackValue.fromController(controller);
-      ref.read(videoPlaybackValueProvider.notifier).value = videoPlayback;
+      if (!loopVideo) {
+        ref.read(videoPlaybackValueProvider.notifier).value = videoPlayback;
+      }
       final state = videoPlayback.state;
 
       // Enable the WakeLock while the video is playing
@@ -153,6 +157,7 @@ class VideoViewerPage extends HookConsumerWidget {
                   hideControlsTimer: hideControlsTimer,
                   showControls: showControls,
                   showDownloadingIndicator: showDownloadingIndicator,
+                  loopVideo: loopVideo,
                 ),
               ),
           ],

mobile/lib/services/app_settings.service.dart

@@ -46,6 +46,7 @@ enum AppSettingsEnum<T> {
   advancedTroubleshooting<bool>(StoreKey.advancedTroubleshooting, null, false),
   logLevel<int>(StoreKey.logLevel, null, 5), // Level.INFO = 5
   preferRemoteImage<bool>(StoreKey.preferRemoteImage, null, false),
+  loopVideo<bool>(StoreKey.loopVideo, "loopVideo", true),
   mapThemeMode<int>(StoreKey.mapThemeMode, null, 0),
   mapShowFavoriteOnly<bool>(StoreKey.mapShowFavoriteOnly, null, false),
   mapIncludeArchived<bool>(StoreKey.mapIncludeArchived, null, false),

mobile/lib/utils/hooks/chewiew_controller_hook.dart

@@ -17,6 +17,7 @@ ChewieController useChewieController({
   bool allowFullScreen = false,
   bool allowedScreenSleep = false,
   bool showControls = true,
+  bool loopVideo = false,
   Widget? customControls,
   Widget? placeholder,
   Duration hideControlsTimer = const Duration(seconds: 1),
@@ -36,6 +37,7 @@ ChewieController useChewieController({
       hideControlsTimer: hideControlsTimer,
       showControlsOnInitialize: showControlsOnInitialize,
       showControls: showControls,
+      loopVideo: loopVideo,
       allowedScreenSleep: allowedScreenSleep,
       onPlaying: onPlaying,
       onPaused: onPaused,
@@ -53,6 +55,7 @@ class _ChewieControllerHook extends Hook<ChewieController> {
   final bool allowFullScreen;
   final bool allowedScreenSleep;
   final bool showControls;
+  final bool loopVideo;
   final Widget? customControls;
   final Widget? placeholder;
   final Duration hideControlsTimer;
@@ -71,6 +74,7 @@ class _ChewieControllerHook extends Hook<ChewieController> {
     this.allowFullScreen = false,
     this.allowedScreenSleep = false,
     this.showControls = true,
+    this.loopVideo = false,
     this.customControls,
     this.placeholder,
     this.hideControlsTimer = const Duration(seconds: 3),
@@ -94,6 +98,7 @@ class _ChewieControllerHookState
     allowFullScreen: hook.allowFullScreen,
     allowedScreenSleep: hook.allowedScreenSleep,
     showControls: hook.showControls,
+    looping: hook.loopVideo,
     customControls: hook.customControls,
     placeholder: hook.placeholder,
     hideControlsTimer: hook.hideControlsTimer,

mobile/lib/widgets/asset_viewer/video_player.dart

@@ -12,6 +12,7 @@ class VideoPlayerViewer extends HookConsumerWidget {
   final Duration hideControlsTimer;
   final bool showControls;
   final bool showDownloadingIndicator;
+  final bool loopVideo;
 
   const VideoPlayerViewer({
     super.key,
@@ -21,6 +22,7 @@ class VideoPlayerViewer extends HookConsumerWidget {
     required this.hideControlsTimer,
     required this.showControls,
     required this.showDownloadingIndicator,
+    required this.loopVideo,
   });
 
   @override
@@ -36,6 +38,7 @@ class VideoPlayerViewer extends HookConsumerWidget {
       ),
       showControls: showControls && !isMotionVideo,
       hideControlsTimer: hideControlsTimer,
+      loopVideo: loopVideo,
     );
 
     return Chewie(

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

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/widgets/settings/asset_viewer_settings/image_viewer_quality_setting.dart';
+import 'package:immich_mobile/widgets/settings/settings_sub_page_scaffold.dart';
+import 'video_viewer_settings.dart';
+
+class AssetViewerSettings extends StatelessWidget {
+  const AssetViewerSettings({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final assetViewerSetting = [
+      const ImageViewerQualitySetting(),
+      const VideoViewerSettings(),
+    ];
+
+    return SettingsSubPageScaffold(
+      settings: assetViewerSetting,
+      showDivider: true,
+    );
+  }
+}

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

@@ -0,0 +1,47 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/providers/app_settings.provider.dart';
+import 'package:immich_mobile/services/app_settings.service.dart';
+import 'package:immich_mobile/widgets/settings/settings_sub_title.dart';
+import 'package:immich_mobile/widgets/settings/settings_switch_list_tile.dart';
+import 'package:immich_mobile/utils/hooks/app_settings_update_hook.dart';
+
+class ImageViewerQualitySetting extends HookConsumerWidget {
+  const ImageViewerQualitySetting({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isPreview = useAppSettingsState(AppSettingsEnum.loadPreview);
+    final isOriginal = useAppSettingsState(AppSettingsEnum.loadOriginal);
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        SettingsSubTitle(title: "setting_image_viewer_title".tr()),
+        ListTile(
+          contentPadding: const EdgeInsets.symmetric(horizontal: 20),
+          title: Text(
+            'setting_image_viewer_help',
+            style: context.textTheme.bodyMedium,
+          ).tr(),
+        ),
+        SettingsSwitchListTile(
+          valueNotifier: isPreview,
+          title: "setting_image_viewer_preview_title".tr(),
+          subtitle: "setting_image_viewer_preview_subtitle".tr(),
+          onChanged: (_) => ref.invalidate(appSettingsServiceProvider),
+        ),
+        SettingsSwitchListTile(
+          valueNotifier: isOriginal,
+          title: "setting_image_viewer_original_title".tr(),
+          subtitle: "setting_image_viewer_original_subtitle".tr(),
+          onChanged: (_) => ref.invalidate(appSettingsServiceProvider),
+        ),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,32 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/providers/app_settings.provider.dart';
+import 'package:immich_mobile/services/app_settings.service.dart';
+import 'package:immich_mobile/widgets/settings/settings_sub_title.dart';
+import 'package:immich_mobile/widgets/settings/settings_switch_list_tile.dart';
+import 'package:immich_mobile/utils/hooks/app_settings_update_hook.dart';
+
+class VideoViewerSettings extends HookConsumerWidget {
+  const VideoViewerSettings({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final useLoopVideo = useAppSettingsState(AppSettingsEnum.loopVideo);
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        SettingsSubTitle(title: "setting_video_viewer_title".tr()),
+        SettingsSwitchListTile(
+          valueNotifier: useLoopVideo,
+          title: "setting_video_viewer_looping_title".tr(),
+          subtitle: "setting_video_viewer_looping_subtitle".tr(),
+          onChanged: (_) => ref.invalidate(appSettingsServiceProvider),
+        ),
+      ],
+    );
+  }
+}

mobile/lib/widgets/settings/image_viewer_quality_setting.dart

@@ -1,41 +0,0 @@
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/services/app_settings.service.dart';
-import 'package:immich_mobile/widgets/settings/settings_sub_page_scaffold.dart';
-import 'package:immich_mobile/widgets/settings/settings_switch_list_tile.dart';
-import 'package:immich_mobile/utils/hooks/app_settings_update_hook.dart';
-
-class ImageViewerQualitySetting extends HookWidget {
-  const ImageViewerQualitySetting({
-    super.key,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    final isPreview = useAppSettingsState(AppSettingsEnum.loadPreview);
-    final isOriginal = useAppSettingsState(AppSettingsEnum.loadOriginal);
-
-    final viewerSettings = [
-      ListTile(
-        title: Text(
-          'setting_image_viewer_help',
-          style: context.textTheme.bodyMedium,
-        ).tr(),
-      ),
-      SettingsSwitchListTile(
-        valueNotifier: isPreview,
-        title: "setting_image_viewer_preview_title".tr(),
-        subtitle: "setting_image_viewer_preview_subtitle".tr(),
-      ),
-      SettingsSwitchListTile(
-        valueNotifier: isOriginal,
-        title: "setting_image_viewer_original_title".tr(),
-        subtitle: "setting_image_viewer_original_subtitle".tr(),
-      ),
-    ];
-
-    return SettingsSubPageScaffold(settings: viewerSettings);
-  }
-}

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

@@ -634,6 +634,7 @@
             <VideoViewer
               assetId={previewStackedAsset.id}
               projectionType={previewStackedAsset.exifInfo?.projectionType}
+              loopVideo={true}
               on:close={closeViewer}
               on:onVideoEnded={() => navigateAsset()}
               on:onVideoStarted={handleVideoStarted}
@@ -655,6 +656,7 @@
               <VideoViewer
                 assetId={asset.livePhotoVideoId}
                 projectionType={asset.exifInfo?.projectionType}
+                loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
                 on:close={closeViewer}
                 on:onVideoEnded={() => (shouldPlayMotionPhoto = false)}
               />
@@ -669,6 +671,7 @@
             <VideoViewer
               assetId={asset.id}
               projectionType={asset.exifInfo?.projectionType}
+              loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
               on:close={closeViewer}
               on:onVideoEnded={() => navigateAsset()}
               on:onVideoStarted={handleVideoStarted}

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { videoViewerVolume, videoViewerMuted } from '$lib/stores/preferences.store';
+  import { loopVideo as loopVideoPreference, videoViewerVolume, videoViewerMuted } from '$lib/stores/preferences.store';
   import { getAssetFileUrl, getAssetThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { ThumbnailFormat } from '@immich/sdk';
@@ -8,6 +8,7 @@
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
 
   export let assetId: string;
+  export let loopVideo: boolean;
 
   let element: HTMLVideoElement | undefined = undefined;
   let isVideoLoading = true;
@@ -34,6 +35,7 @@
 >
   <video
     bind:this={element}
+    loop={$loopVideoPreference && loopVideo}
     autoplay
     playsinline
     controls

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

@@ -6,10 +6,11 @@
 
   export let assetId: string;
   export let projectionType: string | null | undefined;
+  export let loopVideo: boolean;
 </script>
 
 {#if projectionType === ProjectionType.EQUIRECTANGULAR}
   <PanoramaViewer asset={{ id: assetId, type: AssetTypeEnum.Video }} />
 {:else}
-  <VideoNativeViewer {assetId} on:onVideoEnded on:onVideoStarted />
+  <VideoNativeViewer {loopVideo} {assetId} on:onVideoEnded on:onVideoStarted />
 {/if}

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

@@ -3,9 +3,15 @@
   import SettingCombobox from '$lib/components/shared-components/settings/setting-combobox.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { fallbackLocale, locales } from '$lib/constants';
-  import { sidebarSettings } from '$lib/stores/preferences.store';
+  import {
-  import { alwaysLoadOriginalFile, playVideoThumbnailOnHover, showDeleteModal } from '$lib/stores/preferences.store';
+    alwaysLoadOriginalFile,
-  import { colorTheme, locale } from '$lib/stores/preferences.store';
+    colorTheme,
+    locale,
+    loopVideo,
+    playVideoThumbnailOnHover,
+    showDeleteModal,
+    sidebarSettings,
+  } from '$lib/stores/preferences.store';
   import { findLocale } from '$lib/utils';
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
@@ -117,6 +123,15 @@
           on:toggle={() => ($playVideoThumbnailOnHover = !$playVideoThumbnailOnHover)}
         />
       </div>
+      <div class="ml-4">
+        <SettingSwitch
+          id="loop-video"
+          title="Loop videos"
+          subtitle="Enable to automatically loop a video in the detail viewer."
+          bind:checked={$loopVideo}
+          on:toggle={() => ($loopVideo = !$loopVideo)}
+        />
+      </div>
 
       <div class="ml-4">
         <SettingSwitch

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

@@ -138,3 +138,5 @@ export const showDeleteModal = persisted<boolean>('delete-confirm-dialog', true,
 export const alwaysLoadOriginalFile = persisted<boolean>('always-load-original-file', false, {});
 
 export const playVideoThumbnailOnHover = persisted<boolean>('play-video-thumbnail-on-hover', true, {});
+
+export const loopVideo = persisted<boolean>('loop-video', true, {});