feat(web): improve slideshow quality of life (#18778)

* Add a new setting to toggle autoplay when showing the slideshow.
* Fix an issue where the slideshow would restart automatically when
navigating after it was paused.
* Add a keyboard shortcut 's' to start the slideshow from the asset
viewer.
* Add a keyboard shortcut ' ' to toggle the slideshow play/paused.
* Change the timeout for hiding the slideshow controls from 10 to 2.5
seconds.
* Add English translation for the 'autoplay_slideshow' setting.

Co-authored-by: Alex <alex.tran1502@gmail.com>

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

@@ -352,7 +352,9 @@
   const handleUpdateSelectedEditType = (type: string) => {
     selectedEditType = type;
   };
+
   let isFullScreen = $derived(fullscreenElement !== null);
+
   $effect(() => {
     if (asset) {
       previewStackedAsset = undefined;

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

@@ -113,6 +113,8 @@
     });
   };
 
+  const onPlaySlideshow = () => ($slideshowState = SlideshowState.PlaySlideshow);
+
   $effect(() => {
     if (isFaceEditMode.value && $photoZoomState.currentZoom > 1) {
       zoomToggle();
@@ -206,6 +208,8 @@
 
 <svelte:document
   use:shortcuts={[
+    { shortcut: { key: 'z' }, onShortcut: zoomToggle, preventDefault: true },
+    { shortcut: { key: 's' }, onShortcut: onPlaySlideshow, preventDefault: true },
     { shortcut: { key: 'c', ctrl: true }, onShortcut: onCopyShortcut, preventDefault: false },
     { shortcut: { key: 'c', meta: true }, onShortcut: onCopyShortcut, preventDefault: false },
     { shortcut: { key: 'z' }, onShortcut: zoomToggle, preventDefault: false },

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

@@ -28,7 +28,8 @@
     onSetToFullScreen = () => {},
   }: Props = $props();
 
-  const { restartProgress, stopProgress, slideshowDelay, showProgressBar, slideshowNavigation } = slideshowStore;
+  const { restartProgress, stopProgress, slideshowDelay, showProgressBar, slideshowNavigation, slideshowAutoplay } =
+    slideshowStore;
 
   let progressBarStatus: ProgressBarStatus | undefined = $state();
   let progressBar = $state<ReturnType<typeof ProgressBar>>();
@@ -60,20 +61,20 @@
         showControls = false;
         setCursorStyle('none');
       }
-    }, 10_000);
+    }, 2500);
   };
 
   onMount(() => {
     hideControlsAfterDelay();
     unsubscribeRestart = restartProgress.subscribe((value) => {
       if (value) {
-        progressBar?.restart(value);
+        progressBar?.restart();
       }
     });
 
     unsubscribeStop = stopProgress.subscribe((value) => {
       if (value) {
-        progressBar?.restart(false);
+        progressBar?.restart();
         stopControlsHideTimer();
       }
     });
@@ -90,7 +91,7 @@
   });
 
   const handleDone = async () => {
-    await progressBar?.reset();
+    await progressBar?.resetProgress();
 
     if ($slideshowNavigation === SlideshowNavigation.AscendingOrder) {
       onPrevious();
@@ -113,6 +114,17 @@
     { shortcut: { key: 'Escape' }, onShortcut: onClose },
     { shortcut: { key: 'ArrowLeft' }, onShortcut: onPrevious },
     { shortcut: { key: 'ArrowRight' }, onShortcut: onNext },
+    {
+      shortcut: { key: ' ' },
+      onShortcut: () => {
+        if (progressBarStatus === ProgressBarStatus.Paused) {
+          progressBar?.play();
+        } else {
+          progressBar?.pause();
+        }
+      },
+      preventDefault: true,
+    },
   ]}
 />
 
@@ -187,7 +199,7 @@
 {/if}
 
 <ProgressBar
-  autoplay
+  autoplay={$slideshowAutoplay}
   hidden={!$showProgressBar}
   duration={$slideshowDelay}
   bind:this={progressBar}