✨ Add swipe gesture on photo Viewer

src/routes/[country]/[location]/[photo].svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
     import { browser } from '$app/env'
     import { page } from '$app/stores'
-    import dayjs from 'dayjs'
-    import advancedFormat from 'dayjs/plugin/advancedFormat.js'
     import { getAssetUrlKey } from '$utils/helpers'
     import { throttle } from '$utils/functions'
+    import { swipe } from '$utils/interactions/swipe'
+    import dayjs from 'dayjs'
+    import advancedFormat from 'dayjs/plugin/advancedFormat.js'
     // Components
     import Metas from '$components/Metas.svelte'
     import Image from '$components/atoms/Image.svelte'
@@ -23,6 +24,7 @@
 
     enum directions { PREV, NEXT }
 
+    let innerWidth: number
     let globalOffset = offset
     let isLoading = false
     let hasNext = offset + limit < countPhotos
@@ -74,6 +76,24 @@
         }
     }
 
+    // Enable swipe gestures
+    const handleSwipe = ({ detail }: CustomEvent<string>) => {
+        // Swipe up and down on mobile/small screens
+        if (innerWidth < 992) {
+            switch (detail) {
+                case '-y': goToNext(); break;
+                case 'y': goToPrevious(); break;
+            }
+        }
+        // Swipe left and right on larger screens
+        else {
+            switch (detail) {
+                case '-x': goToNext(); break;
+                case 'x': goToPrevious(); break;
+            }
+        }
+    }
+
 
     /**
      * Load photos
@@ -152,7 +172,10 @@
     }
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window
+    bind:innerWidth
+    on:keydown={handleKeydown}
+/>
 
 {#if currentPhoto}
 <Metas
@@ -166,7 +189,7 @@
 <main class="viewer-photo">
     <div class="container grid">
         <div class="viewer-photo__carousel">
-            <div class="viewer-photo__images">
+            <div class="viewer-photo__images" use:swipe on:swipe={handleSwipe}>
                 {#each visiblePhotos as photo, index (photo.id)}
                     <Image
                         class="photo photo--{currentIndex === 0 ? index + 1 : index}"