feat(web): navigate assets with gestures (next/prev) (#11888)

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

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

@@ -5,12 +5,16 @@
   import { handleError } from '$lib/utils/handle-error';
   import { AssetMediaSize } from '@immich/sdk';
   import { createEventDispatcher, tick } from 'svelte';
+  import { swipe } from 'svelte-gestures';
+  import type { SwipeCustomEvent } from 'svelte-gestures';
   import { fade } from 'svelte/transition';
   import { t } from 'svelte-i18n';
 
   export let assetId: string;
   export let loopVideo: boolean;
   export let checksum: string;
+  export let onPreviousAsset: () => void;
+  export let onNextAsset: () => void;
 
   let element: HTMLVideoElement | undefined = undefined;
   let isVideoLoading = true;
@@ -49,6 +53,15 @@
       handleError(error, $t('errors.unable_to_play_video'));
     }
   };
+
+  const onSwipe = (event: SwipeCustomEvent) => {
+    if (event.detail.direction === 'left') {
+      onNextAsset();
+    }
+    if (event.detail.direction === 'right') {
+      onPreviousAsset();
+    }
+  };
 </script>
 
 <div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
@@ -59,6 +72,8 @@
     playsinline
     controls
     class="h-full object-contain"
+    use:swipe
+    on:swipe={onSwipe}
     on:canplay={(e) => handleCanPlay(e.currentTarget)}
     on:ended={() => dispatch('onVideoEnded')}
     on:volumechange={(e) => {