Merge 47eec95952 into 652ef8a427

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

@@ -99,6 +99,8 @@
     slideshowNavigation,
     slideshowState,
     slideshowRepeat,
+    slideshowPaused,
+    slideshowAutoplay,
   } = slideshowStore;
   const stackThumbnailSize = 60;
   const stackSelectedThumbnailSize = 65;
@@ -210,7 +212,7 @@
   const tracker = new InvocationTracker();
   const navigateAsset = (order?: 'previous' | 'next') => {
     if (!order) {
-      if ($slideshowState === SlideshowState.PlaySlideshow) {
+      if ($slideshowState === SlideshowState.PlaySlideshow && !$slideshowPaused) {
         order = $slideshowNavigation === SlideshowNavigation.AscendingOrder ? 'previous' : 'next';
       } else {
         return;
@@ -296,6 +298,7 @@
 
   const handlePlaySlideshow = async () => {
     slideshowStartAssetId = asset.id;
+    $slideshowPaused = !$slideshowAutoplay;
     try {
       await assetViewerHtmlElement?.requestFullscreen?.();
     } catch (error) {
@@ -314,6 +317,7 @@
     } finally {
       $stopSlideshowProgress = true;
       $slideshowState = SlideshowState.None;
+      $slideshowPaused = false;
     }
   };
 

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

@@ -31,7 +31,7 @@
     onSetToFullScreen = () => {},
   }: Props = $props();
 
-  const { restartProgress, stopProgress, slideshowDelay, showProgressBar, slideshowNavigation, slideshowAutoplay } =
+  const { restartProgress, stopProgress, slideshowDelay, showProgressBar, slideshowNavigation, slideshowPaused } =
     slideshowStore;
 
   let progressBarStatus: ProgressBarStatus | undefined = $state();
@@ -143,6 +143,16 @@
     true,
   );
 
+  const togglePause = () => {
+    if (progressBarStatus === ProgressBarStatus.Paused) {
+      $slideshowPaused = false;
+      progressBar?.play();
+    } else {
+      $slideshowPaused = true;
+      progressBar?.pause();
+    }
+  };
+
   const shortcutBindings = $derived.by((): ShortcutOptions[] => {
     const bindings: ShortcutOptions[] = [
       { shortcut: { key: 'Escape' }, onShortcut: onClose },
@@ -154,13 +164,7 @@
     if (!isVideoSlide) {
       bindings.push({
         shortcut: { key: ' ' },
-        onShortcut: () => {
-          if (progressBarStatus === ProgressBarStatus.Paused) {
-            progressBar?.play();
-          } else {
-            progressBar?.pause();
-          }
-        },
+        onShortcut: togglePause,
         preventDefault: true,
       });
     }
@@ -197,7 +201,7 @@
         shape="round"
         color="secondary"
         icon={progressBarStatus === ProgressBarStatus.Paused ? mdiPlay : mdiPause}
-        onclick={() => (progressBarStatus === ProgressBarStatus.Paused ? progressBar?.play() : progressBar?.pause())}
+        onclick={togglePause}
         aria-label={progressBarStatus === ProgressBarStatus.Paused ? $t('play') : $t('pause')}
       />
     {/if}
@@ -240,7 +244,7 @@
 
 {#if !isVideoSlide}
   <ProgressBar
-    autoplay={$slideshowAutoplay}
+    autoplay={!$slideshowPaused}
     hidden={!$showProgressBar}
     duration={$slideshowDelay}
     bind:this={progressBar}

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

@@ -52,7 +52,10 @@ function createSlideshowStore() {
     SlideshowMetadataOverlayMode.Full,
   );
 
+  const slideshowPaused = writable<boolean>(false);
+
   return {
+    slideshowPaused,
     restartProgress: {
       subscribe: restartState.subscribe,
       set: (value: boolean) => {