feat: pause video with slideshow bar

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

@@ -71,6 +71,7 @@
     stopProgress: stopSlideshowProgress,
     slideshowNavigation,
     slideshowState,
+    slideshowPlaying,
   } = slideshowStore;
 
   const dispatch = createEventDispatcher<{
@@ -463,6 +464,7 @@
       await assetViewerHtmlElement.requestFullscreen();
     } catch (error) {
       console.error('Error entering fullscreen', error);
+      $slideshowPlaying = false;
       $slideshowState = SlideshowState.StopSlideshow;
     }
   };
@@ -476,6 +478,7 @@
       console.error('Error exiting fullscreen', error);
     } finally {
       $stopSlideshowProgress = true;
+      $slideshowPlaying = false;
       $slideshowState = SlideshowState.None;
     }
   };
@@ -503,6 +506,11 @@
       handleError(error, `Unable to unstack`);
     }
   };
+
+  const handleStartSlideshow = () => {
+    $slideshowPlaying = true;
+    $slideshowState = SlideshowState.PlaySlideshow;
+  };
 </script>
 
 <svelte:window
@@ -549,7 +557,7 @@
         on:toggleArchive={toggleArchive}
         on:asProfileImage={() => (isShowProfileImageCrop = true)}
         on:runJob={({ detail: job }) => handleRunJob(job)}
-        on:playSlideShow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
+        on:playSlideShow={handleStartSlideshow}
         on:unstack={handleUnstack}
         on:showShareModal={() => (isShowShareModal = true)}
       />
@@ -569,11 +577,12 @@
     {#if $slideshowState != SlideshowState.None}
       <div class="z-[1000] absolute w-full flex">
         <SlideshowBar
+          {asset}
           {isFullScreen}
           onSetToFullScreen={() => assetViewerHtmlElement.requestFullscreen()}
           onPrevious={() => navigateAsset('previous')}
           onNext={() => navigateAsset('next')}
-          onClose={() => ($slideshowState = SlideshowState.StopSlideshow)}
+          onClose={handleStopSlideshow}
         />
       </div>
     {/if}

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

@@ -3,17 +3,20 @@
   import ProgressBar, { ProgressBarStatus } from '$lib/components/shared-components/progress-bar/progress-bar.svelte';
   import SlideshowSettings from '$lib/components/slideshow-settings.svelte';
   import { SlideshowNavigation, slideshowStore } from '$lib/stores/slideshow.store';
+  import { AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
   import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiCog, mdiFullscreen, mdiPause, mdiPlay } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
   import { fly } from 'svelte/transition';
 
+  export let asset: AssetResponseDto;
   export let isFullScreen: boolean;
   export let onNext = () => {};
   export let onPrevious = () => {};
   export let onClose = () => {};
   export let onSetToFullScreen = () => {};
 
-  const { restartProgress, stopProgress, slideshowDelay, showProgressBar, slideshowNavigation } = slideshowStore;
+  const { restartProgress, stopProgress, slideshowDelay, showProgressBar, slideshowNavigation, slideshowPlaying } =
+    slideshowStore;
 
   let progressBarStatus: ProgressBarStatus;
   let progressBar: ProgressBar;
@@ -45,6 +48,7 @@
     startTimer();
     unsubscribeRestart = restartProgress.subscribe((value) => {
       if (value) {
+        $slideshowPlaying = true;
         progressBar.restart(value);
       }
     });
@@ -73,6 +77,20 @@
     }
     onNext();
   };
+
+  const handlePlaySlideshow = () => {
+    if ($slideshowPlaying) {
+      if (asset.type === AssetTypeEnum.Image) {
+        progressBar.pause();
+      }
+      $slideshowPlaying = false;
+    } else {
+      if (asset.type === AssetTypeEnum.Image) {
+        progressBar.play();
+      }
+      $slideshowPlaying = true;
+    }
+  };
 </script>
 
 <svelte:window on:mousemove={resetTimer} />
@@ -88,9 +106,9 @@
     <CircleIconButton buttonSize="50" icon={mdiClose} on:click={onClose} title="Exit Slideshow" />
     <CircleIconButton
       buttonSize="50"
-      icon={progressBarStatus === ProgressBarStatus.Paused ? mdiPlay : mdiPause}
-      on:click={() => (progressBarStatus === ProgressBarStatus.Paused ? progressBar.play() : progressBar.pause())}
-      title={progressBarStatus === ProgressBarStatus.Paused ? 'Play' : 'Pause'}
+      icon={$slideshowPlaying ? mdiPause : mdiPlay}
+      on:click={handlePlaySlideshow}
+      title={$slideshowPlaying ? 'Pause' : 'Play'}
     />
     <CircleIconButton buttonSize="50" icon={mdiChevronLeft} on:click={onPrevious} title="Previous" />
     <CircleIconButton buttonSize="50" icon={mdiChevronRight} on:click={onNext} title="Next" />
@@ -113,6 +131,7 @@
   autoplay
   hidden={!$showProgressBar}
   duration={$slideshowDelay}
+  bind:isPlaying={$slideshowPlaying}
   bind:this={progressBar}
   bind:status={progressBarStatus}
   on:done={handleDone}

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

@@ -1,17 +1,30 @@
 <script lang="ts">
   import { videoViewerVolume } from '$lib/stores/preferences.store';
-  import { getAssetFileUrl, getAssetThumbnailUrl } from '$lib/utils';
+  import { getAssetFileUrl, getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { ThumbnailFormat } from '@immich/sdk';
   import { createEventDispatcher } from 'svelte';
   import { fade } from 'svelte/transition';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+  import { slideshowStore } from '$lib/stores/slideshow.store';
+
+  const { slideshowPlaying } = slideshowStore;
 
   export let assetId: string;
   export let controls: boolean;
 
+  let element: HTMLVideoElement | undefined = undefined;
   let isVideoLoading = true;
 
+  $: {
+    if ($slideshowPlaying && element) {
+      handlePromiseError(element.play());
+    }
+    if (!$slideshowPlaying && element) {
+      element.pause();
+    }
+  }
+
   const dispatch = createEventDispatcher<{ onVideoEnded: void; onVideoStarted: void }>();
 
   const handleCanPlay = async (event: Event) => {
@@ -20,6 +33,7 @@
       video.muted = true;
       await video.play();
       video.muted = false;
+      $slideshowPlaying = true;
       dispatch('onVideoStarted');
     } catch (error) {
       handleError(error, 'Unable to play video');
@@ -31,6 +45,7 @@
 
 <div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
   <video
+    bind:this={element}
     autoplay
     playsinline
     {controls}

web/src/lib/components/shared-components/progress-bar/progress-bar.svelte

@@ -26,6 +26,8 @@
 
   export let duration = 5;
 
+  export let isPlaying: boolean;
+
   const onChange = async () => {
     progress = setDuration(duration);
     await play();
@@ -55,12 +57,14 @@
 
   export const play = async () => {
     status = ProgressBarStatus.Playing;
+    isPlaying = true;
     dispatch('playing');
     await progress.set(1);
   };
 
   export const pause = async () => {
     status = ProgressBarStatus.Paused;
+    isPlaying = false;
     dispatch('paused');
     await progress.set($progress);
   };

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

@@ -22,7 +22,7 @@ function createSlideshowStore() {
     SlideshowNavigation.DescendingOrder,
   );
   const slideshowState = writable<SlideshowState>(SlideshowState.None);
-
+  const slideshowPlaying = writable<boolean>(false);
   const showProgressBar = persisted<boolean>('slideshow-show-progressbar', true);
   const slideshowDelay = persisted<number>('slideshow-delay', 5, {});
 
@@ -53,6 +53,7 @@ function createSlideshowStore() {
     slideshowState,
     slideshowDelay,
     showProgressBar,
+    slideshowPlaying,
   };
 }
 

web/src/routes/(user)/albums/[albumId]/+page.svelte

@@ -80,7 +80,7 @@
   export let data: PageData;
 
   let { isViewing: showAssetViewer, setAssetId } = assetViewingStore;
-  let { slideshowState, slideshowNavigation } = slideshowStore;
+  let { slideshowState, slideshowNavigation, slideshowPlaying } = slideshowStore;
 
   $: album = data.album;
   $: albumId = album.id;
@@ -229,6 +229,7 @@
       $slideshowNavigation === SlideshowNavigation.Shuffle ? await assetStore.getRandomAsset() : assetStore.assets[0];
     if (asset) {
       await setAssetId(asset.id);
+      $slideshowPlaying = true;
       $slideshowState = SlideshowState.PlaySlideshow;
     }
   };