From dfbdd890863933affc677eafa566d460e19dac39 Mon Sep 17 00:00:00 2001
From: martabal <74269598+martabal@users.noreply.github.com>
Date: Sun, 17 Mar 2024 23:17:35 +0100
Subject: [PATCH 1/7] feat: improvements to slideshow

---
 .../asset-viewer/asset-viewer.svelte          | 12 ++++
 .../asset-viewer/slideshow-bar.svelte         | 66 +++++++++++++++----
 .../asset-viewer/video-viewer.svelte          |  4 +-
 3 files changed, 68 insertions(+), 14 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..cd11db5e2e110 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -97,6 +97,7 @@
   let isShowActivity = false;
   let isLiked: ActivityResponseDto | null = null;
   let numberOfComments: number;
+  let isFullScreen = false;
 
   $: {
     if (asset.stackCount && asset.stack) {
@@ -188,7 +189,12 @@
     }
   }
 
+  const handleFullScreenChange = () => {
+    isFullScreen = document.fullscreenElement !== null;
+  };
+
   onMount(async () => {
+    document.addEventListener('fullscreenchange', handleFullScreenChange);
     slideshowStateUnsubscribe = slideshowState.subscribe((value) => {
       if (value === SlideshowState.PlaySlideshow) {
         slideshowHistory.reset();
@@ -226,6 +232,7 @@
   });
 
   onDestroy(() => {
+    document.removeEventListener('fullscreenchange', handleFullScreenChange);
     if (slideshowStateUnsubscribe) {
       slideshowStateUnsubscribe();
     }
@@ -562,6 +569,8 @@
     {#if $slideshowState != SlideshowState.None}
       <div class="z-[1000] absolute w-full flex">
         <SlideshowBar
+          {isFullScreen}
+          onSetToFullScreen={() => assetViewerHtmlElement.requestFullscreen()}
           onPrevious={() => navigateAsset('previous')}
           onNext={() => navigateAsset('next')}
           onClose={() => ($slideshowState = SlideshowState.StopSlideshow)}
@@ -575,6 +584,7 @@
           <PhotoViewer asset={previewStackedAsset} {preloadAssets} on:close={closeViewer} haveFadeTransition={false} />
         {:else}
           <VideoViewer
+            controls={$slideshowState === SlideshowState.PlaySlideshow && !isFullScreen}
             assetId={previewStackedAsset.id}
             on:close={closeViewer}
             on:onVideoEnded={handleVideoEnded}
@@ -595,6 +605,7 @@
         {:else if asset.type === AssetTypeEnum.Image}
           {#if shouldPlayMotionPhoto && asset.livePhotoVideoId}
             <VideoViewer
+              controls={$slideshowState === SlideshowState.PlaySlideshow && !isFullScreen}
               assetId={asset.livePhotoVideoId}
               on:close={closeViewer}
               on:onVideoEnded={() => (shouldPlayMotionPhoto = false)}
@@ -608,6 +619,7 @@
           {/if}
         {:else}
           <VideoViewer
+            controls={$slideshowState === SlideshowState.PlaySlideshow && !isFullScreen}
             assetId={asset.id}
             on:close={closeViewer}
             on:onVideoEnded={handleVideoEnded}
diff --git a/web/src/lib/components/asset-viewer/slideshow-bar.svelte b/web/src/lib/components/asset-viewer/slideshow-bar.svelte
index 37cd7f70122cb..8f7ddb7cc056e 100644
--- a/web/src/lib/components/asset-viewer/slideshow-bar.svelte
+++ b/web/src/lib/components/asset-viewer/slideshow-bar.svelte
@@ -3,23 +3,46 @@
   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 { mdiChevronLeft, mdiChevronRight, mdiClose, mdiCog, mdiPause, mdiPlay } from '@mdi/js';
+  import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiCog, mdiFullscreen, mdiPause, mdiPlay } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
+  import { fly } from 'svelte/transition';
 
+  export let isFullScreen: boolean;
   export let onNext = () => {};
   export let onPrevious = () => {};
   export let onClose = () => {};
+  export let onSetToFullScreen = () => {};
 
   const { restartProgress, stopProgress, slideshowDelay, showProgressBar, slideshowNavigation } = slideshowStore;
 
   let progressBarStatus: ProgressBarStatus;
   let progressBar: ProgressBar;
   let showSettings = false;
+  let showControls = true;
+  let timer: NodeJS.Timeout;
+  let isOverControls = false;
 
   let unsubscribeRestart: () => void;
   let unsubscribeStop: () => void;
 
+  const resetTimer = () => {
+    clearTimeout(timer);
+    document.body.style.cursor = '';
+    showControls = true;
+    startTimer();
+  };
+
+  const startTimer = () => {
+    timer = setTimeout(() => {
+      if (!isOverControls) {
+        showControls = false;
+        document.body.style.cursor = 'none';
+      }
+    }, 10_000);
+  };
+
   onMount(() => {
+    startTimer();
     unsubscribeRestart = restartProgress.subscribe((value) => {
       if (value) {
         progressBar.restart(value);
@@ -52,19 +75,36 @@
   };
 </script>
 
-<div class="m-4 flex gap-2">
-  <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'}
-  />
-  <CircleIconButton buttonSize="50" icon={mdiChevronLeft} on:click={onPrevious} title="Previous" />
-  <CircleIconButton buttonSize="50" icon={mdiChevronRight} on:click={onNext} title="Next" />
-  <CircleIconButton buttonSize="50" icon={mdiCog} on:click={() => (showSettings = !showSettings)} title="Next" />
-</div>
+<svelte:window on:mousemove={resetTimer} />
 
+{#if showControls}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="m-4 flex gap-2"
+    on:mouseenter={() => (isOverControls = true)}
+    on:mouseleave={() => (isOverControls = false)}
+    transition:fly={{ duration: 150 }}
+  >
+    <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'}
+    />
+    <CircleIconButton buttonSize="50" icon={mdiChevronLeft} on:click={onPrevious} title="Previous" />
+    <CircleIconButton buttonSize="50" icon={mdiChevronRight} on:click={onNext} title="Next" />
+    <CircleIconButton buttonSize="50" icon={mdiCog} on:click={() => (showSettings = !showSettings)} title="Next" />
+    {#if !isFullScreen}
+      <CircleIconButton
+        buttonSize="50"
+        icon={mdiFullscreen}
+        on:click={onSetToFullScreen}
+        title="Set Slideshow to fullscreen"
+      />
+    {/if}
+  </div>
+{/if}
 {#if showSettings}
   <SlideshowSettings onClose={() => (showSettings = false)} />
 {/if}
diff --git a/web/src/lib/components/asset-viewer/video-viewer.svelte b/web/src/lib/components/asset-viewer/video-viewer.svelte
index f5ff5f0fc2ac4..328a0a5f5d26a 100644
--- a/web/src/lib/components/asset-viewer/video-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/video-viewer.svelte
@@ -8,8 +8,10 @@
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
 
   export let assetId: string;
+  export let controls: boolean;
 
   let isVideoLoading = true;
+
   const dispatch = createEventDispatcher<{ onVideoEnded: void; onVideoStarted: void }>();
 
   const handleCanPlay = async (event: Event) => {
@@ -31,7 +33,7 @@
   <video
     autoplay
     playsinline
-    controls
+    {controls}
     class="h-full object-contain"
     on:canplay={handleCanPlay}
     on:ended={() => dispatch('onVideoEnded')}

From 8348c86d4cc7e2bb2ff98d5bd78abe3a5b299bd3 Mon Sep 17 00:00:00 2001
From: martabal <74269598+martabal@users.noreply.github.com>
Date: Mon, 18 Mar 2024 22:05:10 +0100
Subject: [PATCH 2/7] feat: pause video with slideshow bar

---
 .../asset-viewer/asset-viewer.svelte          | 13 +++++++--
 .../asset-viewer/slideshow-bar.svelte         | 27 ++++++++++++++++---
 .../asset-viewer/video-viewer.svelte          | 17 +++++++++++-
 .../progress-bar/progress-bar.svelte          |  4 +++
 web/src/lib/stores/slideshow.store.ts         |  3 ++-
 .../(user)/albums/[albumId]/+page.svelte      |  3 ++-
 6 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index cd11db5e2e110..c525938a3dbc7 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/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}
diff --git a/web/src/lib/components/asset-viewer/slideshow-bar.svelte b/web/src/lib/components/asset-viewer/slideshow-bar.svelte
index 8f7ddb7cc056e..9d623b72a3b77 100644
--- a/web/src/lib/components/asset-viewer/slideshow-bar.svelte
+++ b/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}
diff --git a/web/src/lib/components/asset-viewer/video-viewer.svelte b/web/src/lib/components/asset-viewer/video-viewer.svelte
index 328a0a5f5d26a..96e692c88bb33 100644
--- a/web/src/lib/components/asset-viewer/video-viewer.svelte
+++ b/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}
diff --git a/web/src/lib/components/shared-components/progress-bar/progress-bar.svelte b/web/src/lib/components/shared-components/progress-bar/progress-bar.svelte
index ab247042b644f..12cdf8cd83cd4 100644
--- a/web/src/lib/components/shared-components/progress-bar/progress-bar.svelte
+++ b/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);
   };
diff --git a/web/src/lib/stores/slideshow.store.ts b/web/src/lib/stores/slideshow.store.ts
index acb78d0b0a067..30edf18efb599 100644
--- a/web/src/lib/stores/slideshow.store.ts
+++ b/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,
   };
 }
 
diff --git a/web/src/routes/(user)/albums/[albumId]/+page.svelte b/web/src/routes/(user)/albums/[albumId]/+page.svelte
index 0d171d5a45816..acf105b38ca49 100644
--- a/web/src/routes/(user)/albums/[albumId]/+page.svelte
+++ b/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;
     }
   };

From 18fa2c4261091b4d7b7df936ff87c5a5a07f302c Mon Sep 17 00:00:00 2001
From: martabal <74269598+martabal@users.noreply.github.com>
Date: Mon, 18 Mar 2024 22:14:06 +0100
Subject: [PATCH 3/7] pr feedback

---
 .../lib/components/asset-viewer/asset-viewer.svelte  | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index c525938a3dbc7..f827bb612c62f 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -98,7 +98,9 @@
   let isShowActivity = false;
   let isLiked: ActivityResponseDto | null = null;
   let numberOfComments: number;
-  let isFullScreen = false;
+  let fullscreenElement: Element;
+
+  $: isFullScreen = fullscreenElement !== null;
 
   $: {
     if (asset.stackCount && asset.stack) {
@@ -190,12 +192,7 @@
     }
   }
 
-  const handleFullScreenChange = () => {
-    isFullScreen = document.fullscreenElement !== null;
-  };
-
   onMount(async () => {
-    document.addEventListener('fullscreenchange', handleFullScreenChange);
     slideshowStateUnsubscribe = slideshowState.subscribe((value) => {
       if (value === SlideshowState.PlaySlideshow) {
         slideshowHistory.reset();
@@ -233,7 +230,6 @@
   });
 
   onDestroy(() => {
-    document.removeEventListener('fullscreenchange', handleFullScreenChange);
     if (slideshowStateUnsubscribe) {
       slideshowStateUnsubscribe();
     }
@@ -527,6 +523,8 @@
   ]}
 />
 
+<svelte:document bind:fullscreenElement />
+
 <section
   id="immich-asset-viewer"
   class="fixed left-0 top-0 z-[1001] grid h-screen w-screen grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"

From e3a3a854f95239f25d6c890636f0bf94b22d8246 Mon Sep 17 00:00:00 2001
From: martabal <74269598+martabal@users.noreply.github.com>
Date: Tue, 19 Mar 2024 18:32:47 +0100
Subject: [PATCH 4/7] fix: remove dispatch

---
 .../asset-viewer/slideshow-bar.svelte         |  5 +++--
 .../progress-bar/progress-bar.svelte          | 20 +++++++------------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/slideshow-bar.svelte b/web/src/lib/components/asset-viewer/slideshow-bar.svelte
index 9d623b72a3b77..43d1ee93baf73 100644
--- a/web/src/lib/components/asset-viewer/slideshow-bar.svelte
+++ b/web/src/lib/components/asset-viewer/slideshow-bar.svelte
@@ -131,8 +131,9 @@
   autoplay
   hidden={!$showProgressBar}
   duration={$slideshowDelay}
-  bind:isPlaying={$slideshowPlaying}
   bind:this={progressBar}
   bind:status={progressBarStatus}
-  on:done={handleDone}
+  onDone={handleDone}
+  onPlaying={() => ($slideshowPlaying = true)}
+  onPaused={() => ($slideshowPlaying = false)}
 />
diff --git a/web/src/lib/components/shared-components/progress-bar/progress-bar.svelte b/web/src/lib/components/shared-components/progress-bar/progress-bar.svelte
index 12cdf8cd83cd4..ef2f23e77f516 100644
--- a/web/src/lib/components/shared-components/progress-bar/progress-bar.svelte
+++ b/web/src/lib/components/shared-components/progress-bar/progress-bar.svelte
@@ -8,7 +8,7 @@
 <script lang="ts">
   import { handlePromiseError } from '$lib/utils';
 
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { onMount } from 'svelte';
   import { tweened } from 'svelte/motion';
 
   /**
@@ -26,7 +26,9 @@
 
   export let duration = 5;
 
-  export let isPlaying: boolean;
+  export let onDone: () => void;
+  export let onPlaying: (() => void) | undefined = undefined;
+  export let onPaused: (() => void) | undefined = undefined;
 
   const onChange = async () => {
     progress = setDuration(duration);
@@ -39,16 +41,10 @@
 
   $: {
     if ($progress === 1) {
-      dispatch('done');
+      onDone();
     }
   }
 
-  const dispatch = createEventDispatcher<{
-    done: void;
-    playing: void;
-    paused: void;
-  }>();
-
   onMount(async () => {
     if (autoplay) {
       await play();
@@ -57,15 +53,13 @@
 
   export const play = async () => {
     status = ProgressBarStatus.Playing;
-    isPlaying = true;
-    dispatch('playing');
+    onPlaying && onPlaying();
     await progress.set(1);
   };
 
   export const pause = async () => {
     status = ProgressBarStatus.Paused;
-    isPlaying = false;
-    dispatch('paused');
+    onPaused && onPaused();
     await progress.set($progress);
   };
 

From 62484fa399d67223956f710a65e97445e93a1258 Mon Sep 17 00:00:00 2001
From: martabal <74269598+martabal@users.noreply.github.com>
Date: Tue, 19 Mar 2024 18:44:19 +0100
Subject: [PATCH 5/7] fix: simplify

---
 .../asset-viewer/slideshow-bar.svelte         | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/slideshow-bar.svelte b/web/src/lib/components/asset-viewer/slideshow-bar.svelte
index 43d1ee93baf73..16363e6c18f27 100644
--- a/web/src/lib/components/asset-viewer/slideshow-bar.svelte
+++ b/web/src/lib/components/asset-viewer/slideshow-bar.svelte
@@ -25,6 +25,16 @@
   let timer: NodeJS.Timeout;
   let isOverControls = false;
 
+  $: {
+    if (progressBar && asset.type === AssetTypeEnum.Image) {
+      if ($slideshowPlaying) {
+        progressBar.play();
+      } else {
+        progressBar.pause();
+      }
+    }
+  }
+
   let unsubscribeRestart: () => void;
   let unsubscribeStop: () => void;
 
@@ -77,20 +87,6 @@
     }
     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} />
@@ -107,7 +103,7 @@
     <CircleIconButton
       buttonSize="50"
       icon={$slideshowPlaying ? mdiPause : mdiPlay}
-      on:click={handlePlaySlideshow}
+      on:click={() => ($slideshowPlaying ? ($slideshowPlaying = false) : ($slideshowPlaying = true))}
       title={$slideshowPlaying ? 'Pause' : 'Play'}
     />
     <CircleIconButton buttonSize="50" icon={mdiChevronLeft} on:click={onPrevious} title="Previous" />

From 4d9a8acacce8296b413debdac392b222b382f025 Mon Sep 17 00:00:00 2001
From: martabal <74269598+martabal@users.noreply.github.com>
Date: Thu, 21 Mar 2024 20:18:39 +0100
Subject: [PATCH 6/7] pr feedback

---
 .../asset-viewer/asset-viewer.svelte          | 14 +----------
 .../asset-viewer/slideshow-bar.svelte         | 25 ++++---------------
 .../asset-viewer/video-viewer.svelte          | 18 ++-----------
 web/src/lib/stores/slideshow.store.ts         |  2 --
 .../(user)/albums/[albumId]/+page.svelte      |  3 +--
 5 files changed, 9 insertions(+), 53 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index f827bb612c62f..e0613358616d2 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -71,7 +71,6 @@
     stopProgress: stopSlideshowProgress,
     slideshowNavigation,
     slideshowState,
-    slideshowPlaying,
   } = slideshowStore;
 
   const dispatch = createEventDispatcher<{
@@ -460,7 +459,6 @@
       await assetViewerHtmlElement.requestFullscreen();
     } catch (error) {
       console.error('Error entering fullscreen', error);
-      $slideshowPlaying = false;
       $slideshowState = SlideshowState.StopSlideshow;
     }
   };
@@ -474,7 +472,6 @@
       console.error('Error exiting fullscreen', error);
     } finally {
       $stopSlideshowProgress = true;
-      $slideshowPlaying = false;
       $slideshowState = SlideshowState.None;
     }
   };
@@ -502,11 +499,6 @@
       handleError(error, `Unable to unstack`);
     }
   };
-
-  const handleStartSlideshow = () => {
-    $slideshowPlaying = true;
-    $slideshowState = SlideshowState.PlaySlideshow;
-  };
 </script>
 
 <svelte:window
@@ -555,7 +547,7 @@
         on:toggleArchive={toggleArchive}
         on:asProfileImage={() => (isShowProfileImageCrop = true)}
         on:runJob={({ detail: job }) => handleRunJob(job)}
-        on:playSlideShow={handleStartSlideshow}
+        on:playSlideShow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
         on:unstack={handleUnstack}
         on:showShareModal={() => (isShowShareModal = true)}
       />
@@ -575,7 +567,6 @@
     {#if $slideshowState != SlideshowState.None}
       <div class="z-[1000] absolute w-full flex">
         <SlideshowBar
-          {asset}
           {isFullScreen}
           onSetToFullScreen={() => assetViewerHtmlElement.requestFullscreen()}
           onPrevious={() => navigateAsset('previous')}
@@ -591,7 +582,6 @@
           <PhotoViewer asset={previewStackedAsset} {preloadAssets} on:close={closeViewer} haveFadeTransition={false} />
         {:else}
           <VideoViewer
-            controls={$slideshowState === SlideshowState.PlaySlideshow && !isFullScreen}
             assetId={previewStackedAsset.id}
             on:close={closeViewer}
             on:onVideoEnded={handleVideoEnded}
@@ -612,7 +602,6 @@
         {:else if asset.type === AssetTypeEnum.Image}
           {#if shouldPlayMotionPhoto && asset.livePhotoVideoId}
             <VideoViewer
-              controls={$slideshowState === SlideshowState.PlaySlideshow && !isFullScreen}
               assetId={asset.livePhotoVideoId}
               on:close={closeViewer}
               on:onVideoEnded={() => (shouldPlayMotionPhoto = false)}
@@ -626,7 +615,6 @@
           {/if}
         {:else}
           <VideoViewer
-            controls={$slideshowState === SlideshowState.PlaySlideshow && !isFullScreen}
             assetId={asset.id}
             on:close={closeViewer}
             on:onVideoEnded={handleVideoEnded}
diff --git a/web/src/lib/components/asset-viewer/slideshow-bar.svelte b/web/src/lib/components/asset-viewer/slideshow-bar.svelte
index 16363e6c18f27..fff01c4783a20 100644
--- a/web/src/lib/components/asset-viewer/slideshow-bar.svelte
+++ b/web/src/lib/components/asset-viewer/slideshow-bar.svelte
@@ -3,20 +3,17 @@
   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, slideshowPlaying } =
-    slideshowStore;
+  const { restartProgress, stopProgress, slideshowDelay, showProgressBar, slideshowNavigation } = slideshowStore;
 
   let progressBarStatus: ProgressBarStatus;
   let progressBar: ProgressBar;
@@ -25,16 +22,6 @@
   let timer: NodeJS.Timeout;
   let isOverControls = false;
 
-  $: {
-    if (progressBar && asset.type === AssetTypeEnum.Image) {
-      if ($slideshowPlaying) {
-        progressBar.play();
-      } else {
-        progressBar.pause();
-      }
-    }
-  }
-
   let unsubscribeRestart: () => void;
   let unsubscribeStop: () => void;
 
@@ -58,7 +45,6 @@
     startTimer();
     unsubscribeRestart = restartProgress.subscribe((value) => {
       if (value) {
-        $slideshowPlaying = true;
         progressBar.restart(value);
       }
     });
@@ -100,11 +86,12 @@
     transition:fly={{ duration: 150 }}
   >
     <CircleIconButton buttonSize="50" icon={mdiClose} on:click={onClose} title="Exit Slideshow" />
+
     <CircleIconButton
       buttonSize="50"
-      icon={$slideshowPlaying ? mdiPause : mdiPlay}
-      on:click={() => ($slideshowPlaying ? ($slideshowPlaying = false) : ($slideshowPlaying = true))}
-      title={$slideshowPlaying ? 'Pause' : 'Play'}
+      icon={progressBarStatus === ProgressBarStatus.Paused ? mdiPlay : mdiPause}
+      on:click={() => (progressBarStatus === ProgressBarStatus.Paused ? progressBar.play() : progressBar.pause())}
+      title={progressBarStatus === ProgressBarStatus.Paused ? 'Play' : 'Pause'}
     />
     <CircleIconButton buttonSize="50" icon={mdiChevronLeft} on:click={onPrevious} title="Previous" />
     <CircleIconButton buttonSize="50" icon={mdiChevronRight} on:click={onNext} title="Next" />
@@ -130,6 +117,4 @@
   bind:this={progressBar}
   bind:status={progressBarStatus}
   onDone={handleDone}
-  onPlaying={() => ($slideshowPlaying = true)}
-  onPaused={() => ($slideshowPlaying = false)}
 />
diff --git a/web/src/lib/components/asset-viewer/video-viewer.svelte b/web/src/lib/components/asset-viewer/video-viewer.svelte
index 96e692c88bb33..c53fcf600896c 100644
--- a/web/src/lib/components/asset-viewer/video-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/video-viewer.svelte
@@ -1,30 +1,17 @@
 <script lang="ts">
   import { videoViewerVolume } from '$lib/stores/preferences.store';
-  import { getAssetFileUrl, getAssetThumbnailUrl, handlePromiseError } from '$lib/utils';
+  import { getAssetFileUrl, getAssetThumbnailUrl } 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) => {
@@ -33,7 +20,6 @@
       video.muted = true;
       await video.play();
       video.muted = false;
-      $slideshowPlaying = true;
       dispatch('onVideoStarted');
     } catch (error) {
       handleError(error, 'Unable to play video');
@@ -48,7 +34,7 @@
     bind:this={element}
     autoplay
     playsinline
-    {controls}
+    controls
     class="h-full object-contain"
     on:canplay={handleCanPlay}
     on:ended={() => dispatch('onVideoEnded')}
diff --git a/web/src/lib/stores/slideshow.store.ts b/web/src/lib/stores/slideshow.store.ts
index 30edf18efb599..f4c8149be89b9 100644
--- a/web/src/lib/stores/slideshow.store.ts
+++ b/web/src/lib/stores/slideshow.store.ts
@@ -22,7 +22,6 @@ 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,7 +52,6 @@ function createSlideshowStore() {
     slideshowState,
     slideshowDelay,
     showProgressBar,
-    slideshowPlaying,
   };
 }
 
diff --git a/web/src/routes/(user)/albums/[albumId]/+page.svelte b/web/src/routes/(user)/albums/[albumId]/+page.svelte
index ecb0f545c1e19..23e6a1b2eef03 100644
--- a/web/src/routes/(user)/albums/[albumId]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId]/+page.svelte
@@ -83,7 +83,7 @@
   export let data: PageData;
 
   let { isViewing: showAssetViewer, setAssetId } = assetViewingStore;
-  let { slideshowState, slideshowNavigation, slideshowPlaying } = slideshowStore;
+  let { slideshowState, slideshowNavigation } = slideshowStore;
 
   $: album = data.album;
   $: albumId = album.id;
@@ -232,7 +232,6 @@
       $slideshowNavigation === SlideshowNavigation.Shuffle ? await assetStore.getRandomAsset() : assetStore.assets[0];
     if (asset) {
       await setAssetId(asset.id);
-      $slideshowPlaying = true;
       $slideshowState = SlideshowState.PlaySlideshow;
     }
   };

From 520f4fce119d0be0674dd449f263cee08e309687 Mon Sep 17 00:00:00 2001
From: martabal <74269598+martabal@users.noreply.github.com>
Date: Thu, 21 Mar 2024 20:23:34 +0100
Subject: [PATCH 7/7] pr feedback

---
 .../asset-viewer/asset-viewer.svelte           |  2 +-
 .../asset-viewer/slideshow-bar.svelte          |  2 +-
 .../progress-bar/progress-bar.svelte           | 18 ++++++++++--------
 web/src/lib/stores/slideshow.store.ts          |  1 +
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index e0613358616d2..51da304114465 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -571,7 +571,7 @@
           onSetToFullScreen={() => assetViewerHtmlElement.requestFullscreen()}
           onPrevious={() => navigateAsset('previous')}
           onNext={() => navigateAsset('next')}
-          onClose={handleStopSlideshow}
+          onClose={() => ($slideshowState = SlideshowState.StopSlideshow)}
         />
       </div>
     {/if}
diff --git a/web/src/lib/components/asset-viewer/slideshow-bar.svelte b/web/src/lib/components/asset-viewer/slideshow-bar.svelte
index fff01c4783a20..03e8c9df4176f 100644
--- a/web/src/lib/components/asset-viewer/slideshow-bar.svelte
+++ b/web/src/lib/components/asset-viewer/slideshow-bar.svelte
@@ -116,5 +116,5 @@
   duration={$slideshowDelay}
   bind:this={progressBar}
   bind:status={progressBarStatus}
-  onDone={handleDone}
+  on:done={handleDone}
 />
diff --git a/web/src/lib/components/shared-components/progress-bar/progress-bar.svelte b/web/src/lib/components/shared-components/progress-bar/progress-bar.svelte
index ef2f23e77f516..ab247042b644f 100644
--- a/web/src/lib/components/shared-components/progress-bar/progress-bar.svelte
+++ b/web/src/lib/components/shared-components/progress-bar/progress-bar.svelte
@@ -8,7 +8,7 @@
 <script lang="ts">
   import { handlePromiseError } from '$lib/utils';
 
-  import { onMount } from 'svelte';
+  import { createEventDispatcher, onMount } from 'svelte';
   import { tweened } from 'svelte/motion';
 
   /**
@@ -26,10 +26,6 @@
 
   export let duration = 5;
 
-  export let onDone: () => void;
-  export let onPlaying: (() => void) | undefined = undefined;
-  export let onPaused: (() => void) | undefined = undefined;
-
   const onChange = async () => {
     progress = setDuration(duration);
     await play();
@@ -41,10 +37,16 @@
 
   $: {
     if ($progress === 1) {
-      onDone();
+      dispatch('done');
     }
   }
 
+  const dispatch = createEventDispatcher<{
+    done: void;
+    playing: void;
+    paused: void;
+  }>();
+
   onMount(async () => {
     if (autoplay) {
       await play();
@@ -53,13 +55,13 @@
 
   export const play = async () => {
     status = ProgressBarStatus.Playing;
-    onPlaying && onPlaying();
+    dispatch('playing');
     await progress.set(1);
   };
 
   export const pause = async () => {
     status = ProgressBarStatus.Paused;
-    onPaused && onPaused();
+    dispatch('paused');
     await progress.set($progress);
   };
 
diff --git a/web/src/lib/stores/slideshow.store.ts b/web/src/lib/stores/slideshow.store.ts
index f4c8149be89b9..acb78d0b0a067 100644
--- a/web/src/lib/stores/slideshow.store.ts
+++ b/web/src/lib/stores/slideshow.store.ts
@@ -22,6 +22,7 @@ function createSlideshowStore() {
     SlideshowNavigation.DescendingOrder,
   );
   const slideshowState = writable<SlideshowState>(SlideshowState.None);
+
   const showProgressBar = persisted<boolean>('slideshow-show-progressbar', true);
   const slideshowDelay = persisted<number>('slideshow-delay', 5, {});