feat(web): improvements to slideshow

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

@@ -71,6 +71,7 @@
     stopProgress: stopSlideshowProgress,
     slideshowNavigation,
     slideshowState,
+    slideshowPlaying,
   } = slideshowStore;
 
   const dispatch = createEventDispatcher<{
@@ -97,6 +98,7 @@
   let isShowActivity = false;
   let isLiked: ActivityResponseDto | null = null;
   let numberOfComments: number;
+  let isFullScreen = false;
 
   $: {
     if (asset.stackCount && asset.stack) {
@@ -188,7 +190,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 +233,7 @@
   });
 
   onDestroy(() => {
+    document.removeEventListener('fullscreenchange', handleFullScreenChange);
     if (slideshowStateUnsubscribe) {
       slideshowStateUnsubscribe();
     }
@@ -456,6 +464,7 @@
       await assetViewerHtmlElement.requestFullscreen();
     } catch (error) {
       console.error('Error entering fullscreen', error);
+      $slideshowPlaying = false;
       $slideshowState = SlideshowState.StopSlideshow;
     }
   };
@@ -469,6 +478,7 @@
       console.error('Error exiting fullscreen', error);
     } finally {
       $stopSlideshowProgress = true;
+      $slideshowPlaying = false;
       $slideshowState = SlideshowState.None;
     }
   };
@@ -496,6 +506,11 @@
       handleError(error, `Unable to unstack`);
     }
   };
+
+  const handleStartSlideshow = () => {
+    $slideshowPlaying = true;
+    $slideshowState = SlideshowState.PlaySlideshow;
+  };
 </script>
 
 <svelte:window
@@ -542,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)}
       />
@@ -562,9 +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}
@@ -575,6 +593,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 +614,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 +628,7 @@
           {/if}
         {:else}
           <VideoViewer
+            controls={$slideshowState === SlideshowState.PlaySlideshow && !isFullScreen}
             assetId={asset.id}
             on:close={closeViewer}
             on:onVideoEnded={handleVideoEnded}

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

@@ -3,25 +3,52 @@
   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 { 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;
   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) {
+        $slideshowPlaying = true;
         progressBar.restart(value);
       }
     });
@@ -50,21 +77,52 @@
     }
     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>
 
-<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={$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" />
+    <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}
@@ -73,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,15 +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) => {
@@ -18,6 +33,7 @@
       video.muted = true;
       await video.play();
       video.muted = false;
+      $slideshowPlaying = true;
       dispatch('onVideoStarted');
     } catch (error) {
       handleError(error, 'Unable to play video');
@@ -29,9 +45,10 @@
 
 <div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
   <video
+    bind:this={element}
     autoplay
     playsinline
-    controls
+    {controls}
     class="h-full object-contain"
     on:canplay={handleCanPlay}
     on:ended={() => dispatch('onVideoEnded')}

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;
     }
   };