From b2f3bf707920fbab2eb3ec20689edd396ff8b0d3 Mon Sep 17 00:00:00 2001
From: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
Date: Mon, 22 Sep 2025 04:03:06 +0200
Subject: [PATCH] chore: bump svelte gestures (#22263)

---
 pnpm-lock.yaml                                       | 10 +++++-----
 web/package.json                                     |  2 +-
 .../lib/components/asset-viewer/photo-viewer.svelte  |  5 ++---
 .../lib/components/asset-viewer/slideshow-bar.svelte | 12 ++++++++++--
 .../asset-viewer/video-native-viewer.svelte          |  6 ++----
 5 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4e2361bfd0..7032720c81 100644
--- a/pnpm-lock.yaml
+++ b/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:
diff --git a/web/package.json b/web/package.json
index a82d6165f2..7e7fd376d2 100644
--- a/web/package.json
+++ b/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",
diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/web/src/lib/components/asset-viewer/photo-viewer.svelte
index 2a4061049e..7f4c254a59 100644
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/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 }}
     >
diff --git a/web/src/lib/components/asset-viewer/slideshow-bar.svelte b/web/src/lib/components/asset-viewer/slideshow-bar.svelte
index c2b2a63586..52160af69e 100644
--- a/web/src/lib/components/asset-viewer/slideshow-bar.svelte
+++ b/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
diff --git a/web/src/lib/components/asset-viewer/video-native-viewer.svelte b/web/src/lib/components/asset-viewer/video-native-viewer.svelte
index 8cdacc5c54..e2dae3d195 100644
--- a/web/src/lib/components/asset-viewer/video-native-viewer.svelte
+++ b/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)}