From 812325a52cfc7978080bef18dc4ab7cd97d02dbb Mon Sep 17 00:00:00 2001
From: Markus Klein <klein.markus90@gmx.de>
Date: Thu, 21 Mar 2024 20:12:05 +0100
Subject: [PATCH 01/12] First version of video looping for the web

---
 .../asset-viewer/video-viewer.svelte          |  7 ++++++-
 .../user-settings-page/app-settings.svelte    | 20 ++++++++++++++++---
 web/src/lib/stores/preferences.store.ts       |  2 ++
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/video-viewer.svelte b/web/src/lib/components/asset-viewer/video-viewer.svelte
index f5ff5f0fc2ac4..480e7baac668e 100644
--- a/web/src/lib/components/asset-viewer/video-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/video-viewer.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { videoViewerVolume } from '$lib/stores/preferences.store';
+  import { loopVideo, videoViewerVolume } from '$lib/stores/preferences.store';
+  import { SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { getAssetFileUrl, getAssetThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { ThumbnailFormat } from '@immich/sdk';
@@ -9,8 +10,11 @@
 
   export let assetId: string;
 
+  const { slideshowState } = slideshowStore;
+
   let isVideoLoading = true;
   const dispatch = createEventDispatcher<{ onVideoEnded: void; onVideoStarted: void }>();
+  console.log($loopVideo, $slideshowState === SlideshowState.PlaySlideshow);
 
   const handleCanPlay = async (event: Event) => {
     try {
@@ -29,6 +33,7 @@
 
 <div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
   <video
+    loop={$loopVideo && $slideshowState !== SlideshowState.PlaySlideshow}
     autoplay
     playsinline
     controls
diff --git a/web/src/lib/components/user-settings-page/app-settings.svelte b/web/src/lib/components/user-settings-page/app-settings.svelte
index 1d14e5776c5c8..21356174d4a83 100644
--- a/web/src/lib/components/user-settings-page/app-settings.svelte
+++ b/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 { alwaysLoadOriginalFile, playVideoThumbnailOnHover, showDeleteModal } from '$lib/stores/preferences.store';
-  import { colorTheme, locale } from '$lib/stores/preferences.store';
+  import {
+    alwaysLoadOriginalFile,
+    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';
@@ -112,6 +118,14 @@
           on:toggle={() => ($playVideoThumbnailOnHover = !$playVideoThumbnailOnHover)}
         />
       </div>
+      <div class="ml-4">
+        <SettingSwitch
+          title="Loop videos"
+          subtitle="This will autoloop a video."
+          bind:checked={$loopVideo}
+          on:toggle={() => ($loopVideo = !$loopVideo)}
+        />
+      </div>
 
       <div class="ml-4">
         <SettingSwitch
diff --git a/web/src/lib/stores/preferences.store.ts b/web/src/lib/stores/preferences.store.ts
index ff158722e495e..75da206247462 100644
--- a/web/src/lib/stores/preferences.store.ts
+++ b/web/src/lib/stores/preferences.store.ts
@@ -98,3 +98,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, {});

From d147783a5d793689755c6d70b39429ff2acec428 Mon Sep 17 00:00:00 2001
From: Markus Klein <klein.markus90@gmx.de>
Date: Thu, 21 Mar 2024 20:20:39 +0100
Subject: [PATCH 02/12] Use prop for slideshow state

---
 web/src/lib/components/asset-viewer/asset-viewer.svelte | 3 +++
 web/src/lib/components/asset-viewer/video-viewer.svelte | 7 ++-----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index f9d2f787bb64f..92fd9f8ed8301 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -576,6 +576,7 @@
         {:else}
           <VideoViewer
             assetId={previewStackedAsset.id}
+            isSlideshowPlaying={$slideshowState === SlideshowState.PlaySlideshow}
             on:close={closeViewer}
             on:onVideoEnded={handleVideoEnded}
             on:onVideoStarted={handleVideoStarted}
@@ -596,6 +597,7 @@
           {#if shouldPlayMotionPhoto && asset.livePhotoVideoId}
             <VideoViewer
               assetId={asset.livePhotoVideoId}
+              isSlideshowPlaying={$slideshowState === SlideshowState.PlaySlideshow}
               on:close={closeViewer}
               on:onVideoEnded={() => (shouldPlayMotionPhoto = false)}
             />
@@ -609,6 +611,7 @@
         {:else}
           <VideoViewer
             assetId={asset.id}
+            isSlideshowPlaying={$slideshowState === SlideshowState.PlaySlideshow}
             on:close={closeViewer}
             on:onVideoEnded={handleVideoEnded}
             on:onVideoStarted={handleVideoStarted}
diff --git a/web/src/lib/components/asset-viewer/video-viewer.svelte b/web/src/lib/components/asset-viewer/video-viewer.svelte
index 480e7baac668e..72383d41e0fa2 100644
--- a/web/src/lib/components/asset-viewer/video-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/video-viewer.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { loopVideo, videoViewerVolume } from '$lib/stores/preferences.store';
-  import { SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { getAssetFileUrl, getAssetThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { ThumbnailFormat } from '@immich/sdk';
@@ -9,12 +8,10 @@
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
 
   export let assetId: string;
-
-  const { slideshowState } = slideshowStore;
+  export let isSlideshowPlaying: boolean;
 
   let isVideoLoading = true;
   const dispatch = createEventDispatcher<{ onVideoEnded: void; onVideoStarted: void }>();
-  console.log($loopVideo, $slideshowState === SlideshowState.PlaySlideshow);
 
   const handleCanPlay = async (event: Event) => {
     try {
@@ -33,7 +30,7 @@
 
 <div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
   <video
-    loop={$loopVideo && $slideshowState !== SlideshowState.PlaySlideshow}
+    loop={$loopVideo && !isSlideshowPlaying}
     autoplay
     playsinline
     controls

From 32764d724c292fbc005aba05e729f7945bb6c949 Mon Sep 17 00:00:00 2001
From: Markus Klein <klein.markus90@gmx.de>
Date: Fri, 29 Mar 2024 20:58:36 +0100
Subject: [PATCH 03/12] refactor asset settings and add autoloop video setting

---
 .../services/app_settings.service.dart        |  1 +
 .../asset_viewer_settings.dart                | 24 ++++++++++
 .../image_viewer_quality_setting.dart         | 47 +++++++++++++++++++
 .../video_viewer_settings.dart                | 33 +++++++++++++
 .../ui/image_viewer_quality_setting.dart      | 41 ----------------
 .../modules/settings/views/settings_page.dart |  4 +-
 mobile/lib/shared/models/store.dart           |  1 +
 7 files changed, 108 insertions(+), 43 deletions(-)
 create mode 100644 mobile/lib/modules/settings/ui/asset_viewer_settings/asset_viewer_settings.dart
 create mode 100644 mobile/lib/modules/settings/ui/asset_viewer_settings/image_viewer_quality_setting.dart
 create mode 100644 mobile/lib/modules/settings/ui/asset_viewer_settings/video_viewer_settings.dart
 delete mode 100644 mobile/lib/modules/settings/ui/image_viewer_quality_setting.dart

diff --git a/mobile/lib/modules/settings/services/app_settings.service.dart b/mobile/lib/modules/settings/services/app_settings.service.dart
index 5432215cc642f..d8435f600a4cb 100644
--- a/mobile/lib/modules/settings/services/app_settings.service.dart
+++ b/mobile/lib/modules/settings/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),
+  autoloopVideo<bool>(StoreKey.autoloopVideo, "autoloopVideo", true),
   mapThemeMode<int>(StoreKey.mapThemeMode, null, 0),
   mapShowFavoriteOnly<bool>(StoreKey.mapShowFavoriteOnly, null, false),
   mapIncludeArchived<bool>(StoreKey.mapIncludeArchived, null, false),
diff --git a/mobile/lib/modules/settings/ui/asset_viewer_settings/asset_viewer_settings.dart b/mobile/lib/modules/settings/ui/asset_viewer_settings/asset_viewer_settings.dart
new file mode 100644
index 0000000000000..a424d2a4eed9d
--- /dev/null
+++ b/mobile/lib/modules/settings/ui/asset_viewer_settings/asset_viewer_settings.dart
@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/settings/ui/asset_viewer_settings/image_viewer_quality_setting.dart';
+import 'package:immich_mobile/modules/settings/ui/settings_sub_page_scaffold.dart';
+import 'video_viewer_settings.dart';
+
+class AssetViewerSettings extends HookConsumerWidget {
+  const AssetViewerSettings({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final assetViewerSetting = [
+      const ImageViewerQualitySetting(),
+      const VideoViewerSettings(),
+    ];
+
+    return SettingsSubPageScaffold(
+      settings: assetViewerSetting,
+      showDivider: true,
+    );
+  }
+}
diff --git a/mobile/lib/modules/settings/ui/asset_viewer_settings/image_viewer_quality_setting.dart b/mobile/lib/modules/settings/ui/asset_viewer_settings/image_viewer_quality_setting.dart
new file mode 100644
index 0000000000000..427f24b3db08b
--- /dev/null
+++ b/mobile/lib/modules/settings/ui/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/modules/settings/providers/app_settings.provider.dart';
+import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';
+import 'package:immich_mobile/modules/settings/ui/settings_sub_title.dart';
+import 'package:immich_mobile/modules/settings/ui/settings_switch_list_tile.dart';
+import 'package:immich_mobile/modules/settings/utils/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: "Images".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),
+        ),
+      ],
+    );
+  }
+}
diff --git a/mobile/lib/modules/settings/ui/asset_viewer_settings/video_viewer_settings.dart b/mobile/lib/modules/settings/ui/asset_viewer_settings/video_viewer_settings.dart
new file mode 100644
index 0000000000000..fbaec27425608
--- /dev/null
+++ b/mobile/lib/modules/settings/ui/asset_viewer_settings/video_viewer_settings.dart
@@ -0,0 +1,33 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/settings/providers/app_settings.provider.dart';
+import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';
+import 'package:immich_mobile/modules/settings/ui/settings_sub_title.dart';
+import 'package:immich_mobile/modules/settings/ui/settings_switch_list_tile.dart';
+import 'package:immich_mobile/modules/settings/utils/app_settings_update_hook.dart';
+
+class VideoViewerSettings extends HookConsumerWidget {
+  const VideoViewerSettings({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final useAutoloopVideo = useAppSettingsState(AppSettingsEnum.autoloopVideo);
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        SettingsSubTitle(title: "Videos".tr()),
+        SettingsSwitchListTile(
+          valueNotifier: useAutoloopVideo,
+          title: "Autoloop".tr(),
+          subtitle:
+              "Enable to automatically loop videos in the detail viewer.".tr(),
+          onChanged: (_) => ref.invalidate(appSettingsServiceProvider),
+        ),
+      ],
+    );
+  }
+}
diff --git a/mobile/lib/modules/settings/ui/image_viewer_quality_setting.dart b/mobile/lib/modules/settings/ui/image_viewer_quality_setting.dart
deleted file mode 100644
index 21753ef544d03..0000000000000
--- a/mobile/lib/modules/settings/ui/image_viewer_quality_setting.dart
+++ /dev/null
@@ -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/modules/settings/services/app_settings.service.dart';
-import 'package:immich_mobile/modules/settings/ui/settings_sub_page_scaffold.dart';
-import 'package:immich_mobile/modules/settings/ui/settings_switch_list_tile.dart';
-import 'package:immich_mobile/modules/settings/utils/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);
-  }
-}
diff --git a/mobile/lib/modules/settings/views/settings_page.dart b/mobile/lib/modules/settings/views/settings_page.dart
index eeb4b379f25ad..009dd5965940c 100644
--- a/mobile/lib/modules/settings/views/settings_page.dart
+++ b/mobile/lib/modules/settings/views/settings_page.dart
@@ -6,7 +6,7 @@ import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/settings/ui/advanced_settings.dart';
 import 'package:immich_mobile/modules/settings/ui/asset_list_settings/asset_list_settings.dart';
 import 'package:immich_mobile/modules/settings/ui/backup_settings/backup_settings.dart';
-import 'package:immich_mobile/modules/settings/ui/image_viewer_quality_setting.dart';
+import 'package:immich_mobile/modules/settings/ui/asset_viewer_settings/asset_viewer_settings.dart';
 import 'package:immich_mobile/modules/settings/ui/notification_setting.dart';
 import 'package:immich_mobile/modules/settings/ui/preference_settings/preference_setting.dart';
 import 'package:immich_mobile/routing/router.dart';
@@ -30,7 +30,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(),
       };
 
diff --git a/mobile/lib/shared/models/store.dart b/mobile/lib/shared/models/store.dart
index f38345e5e5e8b..623fea820d653 100644
--- a/mobile/lib/shared/models/store.dart
+++ b/mobile/lib/shared/models/store.dart
@@ -182,6 +182,7 @@ enum StoreKey<T> {
   advancedTroubleshooting<bool>(114, type: bool),
   logLevel<int>(115, type: int),
   preferRemoteImage<bool>(116, type: bool),
+  autoloopVideo<bool>(117, type: bool),
   // map related settings
   mapShowFavoriteOnly<bool>(118, type: bool),
   mapRelativeDate<int>(119, type: int),

From 0ad7d482748eeb7fb60dc5ad340e65e81c1d3e75 Mon Sep 17 00:00:00 2001
From: Markus Klein <klein.markus90@gmx.de>
Date: Sat, 30 Mar 2024 14:03:50 +0100
Subject: [PATCH 04/12] rename variables and adjust description

---
 .../modules/settings/services/app_settings.service.dart   | 2 +-
 .../ui/asset_viewer_settings/video_viewer_settings.dart   | 8 ++++----
 mobile/lib/shared/models/store.dart                       | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/mobile/lib/modules/settings/services/app_settings.service.dart b/mobile/lib/modules/settings/services/app_settings.service.dart
index d8435f600a4cb..12046a3a6b87b 100644
--- a/mobile/lib/modules/settings/services/app_settings.service.dart
+++ b/mobile/lib/modules/settings/services/app_settings.service.dart
@@ -46,7 +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),
-  autoloopVideo<bool>(StoreKey.autoloopVideo, "autoloopVideo", true),
+  loopVideo<bool>(StoreKey.loopVideo, "loopVideo", true),
   mapThemeMode<int>(StoreKey.mapThemeMode, null, 0),
   mapShowFavoriteOnly<bool>(StoreKey.mapShowFavoriteOnly, null, false),
   mapIncludeArchived<bool>(StoreKey.mapIncludeArchived, null, false),
diff --git a/mobile/lib/modules/settings/ui/asset_viewer_settings/video_viewer_settings.dart b/mobile/lib/modules/settings/ui/asset_viewer_settings/video_viewer_settings.dart
index fbaec27425608..82de70ce7a9fa 100644
--- a/mobile/lib/modules/settings/ui/asset_viewer_settings/video_viewer_settings.dart
+++ b/mobile/lib/modules/settings/ui/asset_viewer_settings/video_viewer_settings.dart
@@ -14,17 +14,17 @@ class VideoViewerSettings extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final useAutoloopVideo = useAppSettingsState(AppSettingsEnum.autoloopVideo);
+    final useLoopVideo = useAppSettingsState(AppSettingsEnum.loopVideo);
 
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         SettingsSubTitle(title: "Videos".tr()),
         SettingsSwitchListTile(
-          valueNotifier: useAutoloopVideo,
-          title: "Autoloop".tr(),
+          valueNotifier: useLoopVideo,
+          title: "Looping".tr(),
           subtitle:
-              "Enable to automatically loop videos in the detail viewer.".tr(),
+              "Enable to automatically loop a video in the detail viewer.".tr(),
           onChanged: (_) => ref.invalidate(appSettingsServiceProvider),
         ),
       ],
diff --git a/mobile/lib/shared/models/store.dart b/mobile/lib/shared/models/store.dart
index 623fea820d653..8ffb0c48dfafc 100644
--- a/mobile/lib/shared/models/store.dart
+++ b/mobile/lib/shared/models/store.dart
@@ -182,7 +182,7 @@ enum StoreKey<T> {
   advancedTroubleshooting<bool>(114, type: bool),
   logLevel<int>(115, type: int),
   preferRemoteImage<bool>(116, type: bool),
-  autoloopVideo<bool>(117, type: bool),
+  loopVideo<bool>(117, type: bool),
   // map related settings
   mapShowFavoriteOnly<bool>(118, type: bool),
   mapRelativeDate<int>(119, type: int),

From 65aee63fb2e0e2a44657d1cbf1a1cb7f30d64eb0 Mon Sep 17 00:00:00 2001
From: Markus Klein <klein.markus90@gmx.de>
Date: Sat, 30 Mar 2024 17:18:07 +0100
Subject: [PATCH 05/12] loop videos based on user settings in gallery viewer

---
 .../modules/asset_viewer/hooks/chewiew_controller_hook.dart  | 5 +++++
 mobile/lib/modules/asset_viewer/ui/video_player.dart         | 3 +++
 mobile/lib/modules/asset_viewer/views/gallery_viewer.dart    | 4 ++++
 mobile/lib/modules/asset_viewer/views/video_viewer_page.dart | 3 +++
 4 files changed, 15 insertions(+)

diff --git a/mobile/lib/modules/asset_viewer/hooks/chewiew_controller_hook.dart b/mobile/lib/modules/asset_viewer/hooks/chewiew_controller_hook.dart
index 5daeb389ec44d..08c30b2770456 100644
--- a/mobile/lib/modules/asset_viewer/hooks/chewiew_controller_hook.dart
+++ b/mobile/lib/modules/asset_viewer/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,
diff --git a/mobile/lib/modules/asset_viewer/ui/video_player.dart b/mobile/lib/modules/asset_viewer/ui/video_player.dart
index 1f856e7d0f5c0..d1668df1e017b 100644
--- a/mobile/lib/modules/asset_viewer/ui/video_player.dart
+++ b/mobile/lib/modules/asset_viewer/ui/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(
diff --git a/mobile/lib/modules/asset_viewer/views/gallery_viewer.dart b/mobile/lib/modules/asset_viewer/views/gallery_viewer.dart
index 059c0c976dde5..73df5313f02c1 100644
--- a/mobile/lib/modules/asset_viewer/views/gallery_viewer.dart
+++ b/mobile/lib/modules/asset_viewer/views/gallery_viewer.dart
@@ -58,6 +58,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);
@@ -100,6 +101,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;
       },
       [],
@@ -362,6 +365,7 @@ class GalleryViewerPage extends HookConsumerWidget {
                       key: ValueKey(a),
                       asset: a,
                       isMotionVideo: a.livePhotoVideoId != null,
+                      loopVideo: shouldLoopVideo.value,
                       placeholder: Image(
                         image: provider,
                         fit: BoxFit.contain,
diff --git a/mobile/lib/modules/asset_viewer/views/video_viewer_page.dart b/mobile/lib/modules/asset_viewer/views/video_viewer_page.dart
index 22f00c001d67a..a3e0d69aa10e1 100644
--- a/mobile/lib/modules/asset_viewer/views/video_viewer_page.dart
+++ b/mobile/lib/modules/asset_viewer/views/video_viewer_page.dart
@@ -20,6 +20,7 @@ class VideoViewerPage extends HookConsumerWidget {
   final Duration hideControlsTimer;
   final bool showControls;
   final bool showDownloadingIndicator;
+  final bool loopVideo;
 
   const VideoViewerPage({
     super.key,
@@ -29,6 +30,7 @@ class VideoViewerPage extends HookConsumerWidget {
     this.showControls = true,
     this.hideControlsTimer = const Duration(seconds: 5),
     this.showDownloadingIndicator = true,
+    this.loopVideo = false,
   });
 
   @override
@@ -156,6 +158,7 @@ class VideoViewerPage extends HookConsumerWidget {
                   hideControlsTimer: hideControlsTimer,
                   showControls: showControls,
                   showDownloadingIndicator: showDownloadingIndicator,
+                  loopVideo: loopVideo,
                 ),
               ),
           ],

From 935dfe7641dc1f7d08311018d8d73770aefc5928 Mon Sep 17 00:00:00 2001
From: Markus Klein <klein.markus90@gmx.de>
Date: Sat, 30 Mar 2024 17:23:34 +0100
Subject: [PATCH 06/12] make asset viewer setting a stateless widget

---
 .../ui/asset_viewer_settings/asset_viewer_settings.dart      | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/mobile/lib/modules/settings/ui/asset_viewer_settings/asset_viewer_settings.dart b/mobile/lib/modules/settings/ui/asset_viewer_settings/asset_viewer_settings.dart
index a424d2a4eed9d..bd1a95707e77b 100644
--- a/mobile/lib/modules/settings/ui/asset_viewer_settings/asset_viewer_settings.dart
+++ b/mobile/lib/modules/settings/ui/asset_viewer_settings/asset_viewer_settings.dart
@@ -1,16 +1,15 @@
 import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/modules/settings/ui/asset_viewer_settings/image_viewer_quality_setting.dart';
 import 'package:immich_mobile/modules/settings/ui/settings_sub_page_scaffold.dart';
 import 'video_viewer_settings.dart';
 
-class AssetViewerSettings extends HookConsumerWidget {
+class AssetViewerSettings extends StatelessWidget {
   const AssetViewerSettings({
     super.key,
   });
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  Widget build(BuildContext context) {
     final assetViewerSetting = [
       const ImageViewerQualitySetting(),
       const VideoViewerSettings(),

From 1d8a8e1e021b5a8c6e702229647a272ce4a340ba Mon Sep 17 00:00:00 2001
From: Markus Klein <klein.markus90@gmx.de>
Date: Fri, 5 Apr 2024 19:59:59 +0200
Subject: [PATCH 07/12] do not update video playback value if looping is
 enabled

---
 mobile/lib/modules/asset_viewer/views/video_viewer_page.dart | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/mobile/lib/modules/asset_viewer/views/video_viewer_page.dart b/mobile/lib/modules/asset_viewer/views/video_viewer_page.dart
index a3e0d69aa10e1..070216cb35901 100644
--- a/mobile/lib/modules/asset_viewer/views/video_viewer_page.dart
+++ b/mobile/lib/modules/asset_viewer/views/video_viewer_page.dart
@@ -78,7 +78,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

From 06a8c429453b679c49e14977d910f3f28606bf29 Mon Sep 17 00:00:00 2001
From: Markus Klein <klein.markus90@gmx.de>
Date: Fri, 5 Apr 2024 20:12:06 +0200
Subject: [PATCH 08/12] add some translations

---
 mobile/assets/i18n/de-DE.json                              | 4 ++++
 mobile/assets/i18n/en-US.json                              | 4 ++++
 .../image_viewer_quality_setting.dart                      | 2 +-
 .../ui/asset_viewer_settings/video_viewer_settings.dart    | 7 +++----
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/mobile/assets/i18n/de-DE.json b/mobile/assets/i18n/de-DE.json
index 298847cd7ff3e..7d0050e6063e8 100644
--- a/mobile/assets/i18n/de-DE.json
+++ b/mobile/assets/i18n/de-DE.json
@@ -358,6 +358,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_notifications_notify_failures_grace_period": "Benachrichtigung über Fehler bei der Hintergrundsicherung: {}",
   "setting_notifications_notify_hours": "{} Stunden",
   "setting_notifications_notify_immediately": "sofort",
@@ -371,6 +372,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",
diff --git a/mobile/assets/i18n/en-US.json b/mobile/assets/i18n/en-US.json
index 3bebcb2b18f86..d3989dcc152e3 100644
--- a/mobile/assets/i18n/en-US.json
+++ b/mobile/assets/i18n/en-US.json
@@ -363,6 +363,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_notifications_notify_failures_grace_period": "Notify background backup failures: {}",
   "setting_notifications_notify_hours": "{} hours",
   "setting_notifications_notify_immediately": "immediately",
@@ -376,6 +377,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",
diff --git a/mobile/lib/modules/settings/ui/asset_viewer_settings/image_viewer_quality_setting.dart b/mobile/lib/modules/settings/ui/asset_viewer_settings/image_viewer_quality_setting.dart
index 427f24b3db08b..3b6e96e5c8ec2 100644
--- a/mobile/lib/modules/settings/ui/asset_viewer_settings/image_viewer_quality_setting.dart
+++ b/mobile/lib/modules/settings/ui/asset_viewer_settings/image_viewer_quality_setting.dart
@@ -21,7 +21,7 @@ class ImageViewerQualitySetting extends HookConsumerWidget {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        SettingsSubTitle(title: "Images".tr()),
+        SettingsSubTitle(title: "setting_image_viewer_title".tr()),
         ListTile(
           contentPadding: const EdgeInsets.symmetric(horizontal: 20),
           title: Text(
diff --git a/mobile/lib/modules/settings/ui/asset_viewer_settings/video_viewer_settings.dart b/mobile/lib/modules/settings/ui/asset_viewer_settings/video_viewer_settings.dart
index 82de70ce7a9fa..d2521cc52a0d7 100644
--- a/mobile/lib/modules/settings/ui/asset_viewer_settings/video_viewer_settings.dart
+++ b/mobile/lib/modules/settings/ui/asset_viewer_settings/video_viewer_settings.dart
@@ -19,12 +19,11 @@ class VideoViewerSettings extends HookConsumerWidget {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        SettingsSubTitle(title: "Videos".tr()),
+        SettingsSubTitle(title: "setting_video_viewer_title".tr()),
         SettingsSwitchListTile(
           valueNotifier: useLoopVideo,
-          title: "Looping".tr(),
-          subtitle:
-              "Enable to automatically loop a video in the detail viewer.".tr(),
+          title: "setting_video_viewer_looping_title".tr(),
+          subtitle: "setting_video_viewer_looping_subtitle".tr(),
           onChanged: (_) => ref.invalidate(appSettingsServiceProvider),
         ),
       ],

From 4baf7a70cd7d9a0a42aecc0f9bc8fb0811179c8a Mon Sep 17 00:00:00 2001
From: Markus Klein <klein.markus90@gmx.de>
Date: Fri, 5 Apr 2024 20:16:29 +0200
Subject: [PATCH 09/12] adjust description

---
 web/src/lib/components/user-settings-page/app-settings.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/lib/components/user-settings-page/app-settings.svelte b/web/src/lib/components/user-settings-page/app-settings.svelte
index a457bac8e8387..759d495b670cc 100644
--- a/web/src/lib/components/user-settings-page/app-settings.svelte
+++ b/web/src/lib/components/user-settings-page/app-settings.svelte
@@ -122,7 +122,7 @@
       <div class="ml-4">
         <SettingSwitch
           title="Loop videos"
-          subtitle="This will autoloop a video."
+          subtitle="Enable to automatically loop a video in the detail viewer."
           bind:checked={$loopVideo}
           on:toggle={() => ($loopVideo = !$loopVideo)}
         />

From ed60d4209382000b90ee75a4c83fa8137aeab2ea Mon Sep 17 00:00:00 2001
From: Markus Klein <klein.markus90@gmx.de>
Date: Mon, 8 Apr 2024 19:37:14 +0200
Subject: [PATCH 10/12] add missing id

---
 web/src/lib/components/user-settings-page/app-settings.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/lib/components/user-settings-page/app-settings.svelte b/web/src/lib/components/user-settings-page/app-settings.svelte
index 4caa2e7cce621..a9a1839cf67c1 100644
--- a/web/src/lib/components/user-settings-page/app-settings.svelte
+++ b/web/src/lib/components/user-settings-page/app-settings.svelte
@@ -125,6 +125,7 @@
       </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}

From 47571b5113f27986f8416ba094dc88a23b428d4d Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Mon, 13 May 2024 17:08:11 -0400
Subject: [PATCH 11/12] WIP

---
 web/src/lib/components/asset-viewer/asset-viewer.svelte     | 6 +++---
 .../lib/components/asset-viewer/video-native-viewer.svelte  | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index 5c2f9a294676b..c9925cd993169 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -634,7 +634,7 @@
             <VideoViewer
               assetId={previewStackedAsset.id}
               projectionType={previewStackedAsset.exifInfo?.projectionType}
-              isSlideshowPlaying={$slideshowState === SlideshowState.PlaySlideshow}
+              loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
               on:close={closeViewer}
               on:onVideoEnded={() => navigateAsset()}
               on:onVideoStarted={handleVideoStarted}
@@ -656,7 +656,7 @@
               <VideoViewer
                 assetId={asset.livePhotoVideoId}
                 projectionType={asset.exifInfo?.projectionType}
-                isSlideshowPlaying={$slideshowState === SlideshowState.PlaySlideshow}
+                loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
                 on:close={closeViewer}
                 on:onVideoEnded={() => (shouldPlayMotionPhoto = false)}
               />
@@ -671,7 +671,7 @@
             <VideoViewer
               assetId={asset.id}
               projectionType={asset.exifInfo?.projectionType}
-              isSlideshowPlaying={$slideshowState === SlideshowState.PlaySlideshow}
+              loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
               on:close={closeViewer}
               on:onVideoEnded={() => navigateAsset()}
               on:onVideoStarted={handleVideoStarted}
diff --git a/web/src/lib/components/asset-viewer/video-native-viewer.svelte b/web/src/lib/components/asset-viewer/video-native-viewer.svelte
index 03569c59e78b3..7863513bfb9be 100644
--- a/web/src/lib/components/asset-viewer/video-native-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/video-native-viewer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { loopVideo, 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,7 +8,7 @@
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
 
   export let assetId: string;
-  export let isSlideshowPlaying: boolean;
+  export let loopVideo: boolean;
 
   let element: HTMLVideoElement | undefined = undefined;
   let isVideoLoading = true;
@@ -35,7 +35,7 @@
 >
   <video
     bind:this={element}
-    loop={$loopVideo && !isSlideshowPlaying}
+    loop={$loopVideoPreference && loopVideo}
     autoplay
     playsinline
     controls

From c301ff4dba200f4da0de9e5c3fb7dbb30ac11d5a Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Mon, 13 May 2024 17:15:34 -0400
Subject: [PATCH 12/12] chore: clean up

---
 web/src/lib/components/asset-viewer/asset-viewer.svelte        | 2 +-
 .../lib/components/asset-viewer/video-wrapper-viewer.svelte    | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index c9925cd993169..23b62a4c6fb3d 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -634,7 +634,7 @@
             <VideoViewer
               assetId={previewStackedAsset.id}
               projectionType={previewStackedAsset.exifInfo?.projectionType}
-              loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
+              loopVideo={true}
               on:close={closeViewer}
               on:onVideoEnded={() => navigateAsset()}
               on:onVideoStarted={handleVideoStarted}
diff --git a/web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte b/web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte
index 59809caa25ab7..be4a9d5150776 100644
--- a/web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte
+++ b/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}