From 5e7af98b76b7e2b37c00a4754f70b68c9d87e7df Mon Sep 17 00:00:00 2001
From: priyanshuANDcoad <priyanshu23154050@akgec.ac.in>
Date: Mon, 27 Jul 2026 20:18:12 +0530
Subject: [PATCH 1/3] fix(web): preserve slideshow pause state when viewing
 video slides

---
 .../components/asset-viewer/AssetViewer.svelte   |  6 +++++-
 .../components/asset-viewer/SlideshowBar.svelte  | 16 +++++++++++++---
 web/src/lib/stores/slideshow.store.ts            |  3 +++
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/AssetViewer.svelte b/web/src/lib/components/asset-viewer/AssetViewer.svelte
index 8f58dc97b9..58c04d8051 100644
--- a/web/src/lib/components/asset-viewer/AssetViewer.svelte
+++ b/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;
     }
   };
 
diff --git a/web/src/lib/components/asset-viewer/SlideshowBar.svelte b/web/src/lib/components/asset-viewer/SlideshowBar.svelte
index 0ec5fe7dc0..b2758d5d59 100644
--- a/web/src/lib/components/asset-viewer/SlideshowBar.svelte
+++ b/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, slideshowAutoplay, slideshowPaused } =
     slideshowStore;
 
   let progressBarStatus: ProgressBarStatus | undefined = $state();
@@ -156,8 +156,10 @@
         shortcut: { key: ' ' },
         onShortcut: () => {
           if (progressBarStatus === ProgressBarStatus.Paused) {
+            $slideshowPaused = false;
             progressBar?.play();
           } else {
+            $slideshowPaused = true;
             progressBar?.pause();
           }
         },
@@ -197,7 +199,15 @@
         shape="round"
         color="secondary"
         icon={progressBarStatus === ProgressBarStatus.Paused ? mdiPlay : mdiPause}
-        onclick={() => (progressBarStatus === ProgressBarStatus.Paused ? progressBar?.play() : progressBar?.pause())}
+        onclick={() => {
+          if (progressBarStatus === ProgressBarStatus.Paused) {
+            $slideshowPaused = false;
+            progressBar?.play();
+          } else {
+            $slideshowPaused = true;
+            progressBar?.pause();
+          }
+        }}
         aria-label={progressBarStatus === ProgressBarStatus.Paused ? $t('play') : $t('pause')}
       />
     {/if}
@@ -240,7 +250,7 @@
 
 {#if !isVideoSlide}
   <ProgressBar
-    autoplay={$slideshowAutoplay}
+    autoplay={!$slideshowPaused}
     hidden={!$showProgressBar}
     duration={$slideshowDelay}
     bind:this={progressBar}
diff --git a/web/src/lib/stores/slideshow.store.ts b/web/src/lib/stores/slideshow.store.ts
index 17ba266ee1..0a8e1ae191 100644
--- a/web/src/lib/stores/slideshow.store.ts
+++ b/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) => {

From 74263f7a91190f454e56fde739aeada157319dce Mon Sep 17 00:00:00 2001
From: priyanshuANDcoad <priyanshu23154050@akgec.ac.in>
Date: Mon, 27 Jul 2026 20:23:47 +0530
Subject: [PATCH 2/3] refactor(web): extract togglePause helper in SlideshowBar

---
 .../asset-viewer/SlideshowBar.svelte          | 30 ++++++++-----------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/SlideshowBar.svelte b/web/src/lib/components/asset-viewer/SlideshowBar.svelte
index b2758d5d59..7730c5b4e3 100644
--- a/web/src/lib/components/asset-viewer/SlideshowBar.svelte
+++ b/web/src/lib/components/asset-viewer/SlideshowBar.svelte
@@ -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,15 +164,7 @@
     if (!isVideoSlide) {
       bindings.push({
         shortcut: { key: ' ' },
-        onShortcut: () => {
-          if (progressBarStatus === ProgressBarStatus.Paused) {
-            $slideshowPaused = false;
-            progressBar?.play();
-          } else {
-            $slideshowPaused = true;
-            progressBar?.pause();
-          }
-        },
+        onShortcut: togglePause,
         preventDefault: true,
       });
     }
@@ -199,15 +201,7 @@
         shape="round"
         color="secondary"
         icon={progressBarStatus === ProgressBarStatus.Paused ? mdiPlay : mdiPause}
-        onclick={() => {
-          if (progressBarStatus === ProgressBarStatus.Paused) {
-            $slideshowPaused = false;
-            progressBar?.play();
-          } else {
-            $slideshowPaused = true;
-            progressBar?.pause();
-          }
-        }}
+        onclick={togglePause}
         aria-label={progressBarStatus === ProgressBarStatus.Paused ? $t('play') : $t('pause')}
       />
     {/if}

From 5cb5cd18d4ed8ecc5d721d2cdfb93a86a8d92062 Mon Sep 17 00:00:00 2001
From: priyanshuANDcoad <priyanshu23154050@akgec.ac.in>
Date: Mon, 27 Jul 2026 20:32:11 +0530
Subject: [PATCH 3/3] fix(web): remove unused slideshowAutoplay and apply
 formatting

---
 web/src/lib/components/asset-viewer/SlideshowBar.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/lib/components/asset-viewer/SlideshowBar.svelte b/web/src/lib/components/asset-viewer/SlideshowBar.svelte
index 7730c5b4e3..656812b08b 100644
--- a/web/src/lib/components/asset-viewer/SlideshowBar.svelte
+++ b/web/src/lib/components/asset-viewer/SlideshowBar.svelte
@@ -31,7 +31,7 @@
     onSetToFullScreen = () => {},
   }: Props = $props();
 
-  const { restartProgress, stopProgress, slideshowDelay, showProgressBar, slideshowNavigation, slideshowAutoplay, slideshowPaused } =
+  const { restartProgress, stopProgress, slideshowDelay, showProgressBar, slideshowNavigation, slideshowPaused } =
     slideshowStore;
 
   let progressBarStatus: ProgressBarStatus | undefined = $state();