fix(web): let slideshow videos play (#19601) (#24914)

Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>

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

@@ -451,6 +451,7 @@
     <div class="absolute w-full flex">
       <SlideshowBar
         {isFullScreen}
+        assetType={previewStackedAsset?.type ?? asset.type}
         onSetToFullScreen={() => assetViewerHtmlElement?.requestFullscreen?.()}
         onPrevious={() => navigateAsset('previous')}
         onNext={() => navigateAsset('next')}

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

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { shortcuts } from '$lib/actions/shortcut';
+  import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
   import ProgressBar from '$lib/components/shared-components/progress-bar/progress-bar.svelte';
   import { ProgressBarStatus } from '$lib/constants';
   import SlideshowSettingsModal from '$lib/modals/SlideshowSettingsModal.svelte';
   import { SlideshowNavigation, slideshowStore } from '$lib/stores/slideshow.store';
+  import { AssetTypeEnum } from '@immich/sdk';
   import { IconButton, modalManager } from '@immich/ui';
   import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiCog, mdiFullscreen, mdiPause, mdiPlay } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
@@ -13,6 +14,7 @@
 
   interface Props {
     isFullScreen: boolean;
+    assetType: AssetTypeEnum;
     onNext?: () => void;
     onPrevious?: () => void;
     onClose?: () => void;
@@ -21,6 +23,7 @@
 
   let {
     isFullScreen,
+    assetType,
     onNext = () => {},
     onPrevious = () => {},
     onClose = () => {},
@@ -35,6 +38,7 @@
   let showControls = $state(true);
   let timer: NodeJS.Timeout;
   let isOverControls = $state(false);
+  const isVideoSlide = $derived(assetType === AssetTypeEnum.Video);
 
   let unsubscribeRestart: () => void;
   let unsubscribeStop: () => void;
@@ -132,15 +136,17 @@
     { onswipedown: showControlBar },
     true,
   );
-</script>
 
-<svelte:document
+  const shortcutBindings = $derived.by((): ShortcutOptions[] => {
-  onmousemove={showControlBar}
+    const bindings: ShortcutOptions[] = [
-  use:shortcuts={[
       { shortcut: { key: 'Escape' }, onShortcut: onClose },
       { shortcut: { key: 'ArrowLeft' }, onShortcut: onPrevious },
       { shortcut: { key: 'ArrowRight' }, onShortcut: onNext },
-    {
+    ];
+
+    // For videos, allow the native HTML5 element to handle space for play/pause
+    if (!isVideoSlide) {
+      bindings.push({
         shortcut: { key: ' ' },
         onShortcut: () => {
           if (progressBarStatus === ProgressBarStatus.Paused) {
@@ -150,9 +156,14 @@
           }
         },
         preventDefault: true,
-    },
+      });
-  ]}
+    }
-/>
+
+    return bindings;
+  });
+</script>
+
+<svelte:document onmousemove={showControlBar} use:shortcuts={shortcutBindings} />
 
 {/* @ts-expect-error https://github.com/Rezi/svelte-gestures/issues/38#issuecomment-3315953573 */ null}
 <svelte:body {@attach swipe} {onswipe} {onswipedown} />
@@ -174,6 +185,7 @@
       aria-label={$t('exit_slideshow')}
     />
 
+    {#if !isVideoSlide}
       <IconButton
         variant="ghost"
         shape="round"
@@ -182,6 +194,7 @@
         onclick={() => (progressBarStatus === ProgressBarStatus.Paused ? progressBar?.play() : progressBar?.pause())}
         aria-label={progressBarStatus === ProgressBarStatus.Paused ? $t('play') : $t('pause')}
       />
+    {/if}
     <IconButton
       variant="ghost"
       shape="round"
@@ -219,6 +232,7 @@
   </div>
 {/if}
 
+{#if !isVideoSlide}
   <ProgressBar
     autoplay={$slideshowAutoplay}
     hidden={!$showProgressBar}
@@ -227,3 +241,4 @@
     bind:status={progressBarStatus}
     onDone={handleDone}
   />
+{/if}