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>

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 { 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';
@@ -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