feat(web): adds swipe support to panel carousel

Author: dvcol

src/components/views/panel/PanelContent.vue

@@ -30,7 +30,7 @@ const onTouchEnd = (e: TouchEvent) => {
     left: clientWidth ? Math.min(clientWidth / 2, 400) : 400,
     right: clientWidth ? Math.min(clientWidth / 2, 400) : 400,
   });
-  if (swipe === SwipeDirection.Right) emits('onBack', e);
+  if (swipe === SwipeDirection.Right) emits('onClose', e);
 };
 </script>
 

src/components/views/panel/PanelTrailers.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { NCarousel } from 'naive-ui';
-import { type PropType } from 'vue';
+import { type CarouselInst, NCarousel } from 'naive-ui';
+import { type PropType, ref } from 'vue';
 
 import type { YoutubePlayerProps } from '~/models/youtube-player.model';
 
 import YoutubePlayer from '~/components/common/video/YoutubePlayer.vue';
+import { handleSwipeLeftRight, SwipeDirection } from '~/utils/touch.utils';
 
 defineProps({
   trailers: {
@@ -17,18 +18,46 @@ defineProps({
     default: false,
   },
 });
+
+const carouselRef = ref<CarouselInst & InstanceType<typeof NCarousel>>();
+const touchStart = ref<TouchEvent>();
+
+const onTouchStart = (e: TouchEvent) => {
+  touchStart.value = e;
+};
+
+const onTouchEnd = (e: TouchEvent) => {
+  const _touchStart = touchStart.value?.targetTouches?.[0];
+  const _touchEnd = e.changedTouches?.[0];
+  if (!_touchStart) return;
+  touchStart.value = undefined;
+  const _ref = carouselRef.value;
+  if (!_ref) return;
+  const { clientWidth, clientHeight } = _ref.$el || {};
+  const swipe = handleSwipeLeftRight(_touchStart, _touchEnd, {
+    vertical: clientHeight ? Math.min(clientHeight / 2, 200) : 200,
+    left: clientWidth ? Math.min(clientWidth / 2, 100) : 100,
+    right: clientWidth ? Math.min(clientWidth / 2, 100) : 100,
+  });
+  if (!swipe) return;
+  if (swipe === SwipeDirection.Right) _ref.next();
+  if (swipe === SwipeDirection.Left) _ref.prev();
+};
 </script>
 
 <template>
   <NCarousel
     v-if="!disabled && trailers?.length"
+    ref="carouselRef"
     class="carousel"
     dot-type="line"
     effect="slide"
     centered-slides
     keyboard
     trigger="hover"
     :space-between="32"
+    @touchstart="onTouchStart"
+    @touchend="onTouchEnd"
   >
     <slot />
     <YoutubePlayer