chore: bump svelte gestures (#22263)

pnpm-lock.yaml

@@ -765,8 +765,8 @@ importers:
         specifier: ~4.8.0
         version: 4.8.1
       svelte-gestures:
-        specifier: 5.1.4
-        version: 5.1.4
+        specifier: ^5.2.2
+        version: 5.2.2
       svelte-i18n:
         specifier: ^4.0.1
         version: 4.0.1(svelte@5.38.10)
@@ -10581,8 +10581,8 @@ packages:
       svelte:
         optional: true
 
-  svelte-gestures@5.1.4:
-    resolution: {integrity: sha512-gfSO/GqWLu9nRMCz12jqdyA0+NTsojYcIBcRqZjwWrpQbqMXr0zWPFpZBtzfYbRHtuFxZImMZp9MrVaFCYbhDg==}
+  svelte-gestures@5.2.2:
+    resolution: {integrity: sha512-Y+chXPaSx8OsPoFppUwPk8PJzgrZ7xoDJKXeiEc7JBqyKKzXer9hlf8F9O34eFuAWB4/WQEvccACvyBplESL7A==}
 
   svelte-i18n@4.0.1:
     resolution: {integrity: sha512-jaykGlGT5PUaaq04JWbJREvivlCnALtT+m87Kbm0fxyYHynkQaxQMnIKHLm2WeIuBRoljzwgyvz0Z6/CMwfdmQ==}
@@ -23862,7 +23862,7 @@ snapshots:
     optionalDependencies:
       svelte: 5.38.10
 
-  svelte-gestures@5.1.4: {}
+  svelte-gestures@5.2.2: {}
 
   svelte-i18n@4.0.1(svelte@5.38.10):
     dependencies:

web/package.json

@@ -55,7 +55,7 @@
     "qrcode": "^1.5.4",
     "simple-icons": "^15.15.0",
     "socket.io-client": "~4.8.0",
-    "svelte-gestures": "5.1.4",
+    "svelte-gestures": "^5.2.2",
     "svelte-i18n": "^4.0.1",
     "svelte-maplibre": "^1.2.0",
     "svelte-persisted-store": "^0.12.0",

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

@@ -22,7 +22,7 @@
   import { AssetMediaSize, type AssetResponseDto, type SharedLinkResponseDto } from '@immich/sdk';
   import { LoadingSpinner } from '@immich/ui';
   import { onDestroy, onMount } from 'svelte';
-  import { swipe, type SwipeCustomEvent } from 'svelte-gestures';
+  import { useSwipe, type SwipeCustomEvent } from 'svelte-gestures';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
@@ -234,8 +234,7 @@
   {:else if !imageError}
     <div
       use:zoomImageAction
-      use:swipe={() => ({})}
-      onswipe={onSwipe}
+      {...useSwipe(onSwipe)}
       class="h-full w-full"
       transition:fade={{ duration: haveFadeTransition ? assetViewerFadeDuration : 0 }}
     >

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

@@ -7,7 +7,7 @@
   import { IconButton, modalManager } from '@immich/ui';
   import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiCog, mdiFullscreen, mdiPause, mdiPlay } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
-  import { swipe } from 'svelte-gestures';
+  import { useSwipe } from 'svelte-gestures';
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
 
@@ -131,6 +131,13 @@
       document.removeEventListener('webkitfullscreenchange', exitFullscreenHandler);
     };
   });
+
+  const { swipe, onswipe, onswipedown } = useSwipe(
+    () => {},
+    () => ({ touchAction: 'pan-x' }),
+    { onswipedown: showControlBar },
+    true,
+  );
 </script>
 
 <svelte:document
@@ -153,7 +160,8 @@
   ]}
 />
 
-<svelte:body use:swipe={() => ({ touchAction: 'pan-x' })} onswipedown={showControlBar} />
+{/* @ts-expect-error https://github.com/Rezi/svelte-gestures/issues/38#issuecomment-3315953573 */ null}
+<svelte:body {@attach swipe} {onswipe} {onswipedown} />
 
 {#if showControls}
   <div

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

@@ -9,8 +9,7 @@
   import { AssetMediaSize } from '@immich/sdk';
   import { LoadingSpinner } from '@immich/ui';
   import { onDestroy, onMount } from 'svelte';
-  import type { SwipeCustomEvent } from 'svelte-gestures';
-  import { swipe } from 'svelte-gestures';
+  import { useSwipe, type SwipeCustomEvent } from 'svelte-gestures';
   import { fade } from 'svelte/transition';
 
   interface Props {
@@ -130,8 +129,7 @@
         playsinline
         controls
         class="h-full object-contain"
-        use:swipe={() => ({})}
-        onswipe={onSwipe}
+        {...useSwipe(onSwipe)}
         oncanplay={(e) => handleCanPlay(e.currentTarget)}
         onended={onVideoEnded}
         onvolumechange={(e) => ($videoViewerMuted = e.currentTarget.muted)}