refactor: remove swiper

Signed-off-by: Innei <tukon479@gmail.com>

apps/renderer/package.json

@@ -49,6 +49,8 @@
     "dexie-export-import": "^4.1.2",
     "dnum": "^2.14.0",
     "electron-log": "5.2.0",
+    "embla-carousel-react": "8.3.1",
+    "embla-carousel-wheel-gestures": "8.0.1",
     "firebase": "10.14.1",
     "foxact": "0.2.41",
     "framer-motion": "11.11.11",
@@ -97,7 +99,6 @@
     "remark-rehype": "11.1.1",
     "shiki": "1.22.2",
     "sonner": "1.5.0",
-    "swiper": "11.1.14",
     "tldts": "6.1.58",
     "unified": "11.0.5",
     "unist-util-visit-parents": "^6.0.1",
@@ -114,6 +115,7 @@
     "@follow/components": "workspace:*",
     "@follow/constants": "workspace:*",
     "@follow/hooks": "workspace:*",
+    "@follow/logger": "workspace:*",
     "@follow/models": "workspace:*",
     "@follow/shared": "workspace:*",
     "@follow/types": "workspace:*",

apps/renderer/src/components/ui/media/SwipeMedia.tsx

@@ -1,88 +1,63 @@
-import "swiper/css"
-import "swiper/css/navigation"
-import "swiper/css/scrollbar"
-
 import type { MediaModel } from "@follow/shared/hono"
 import { cn } from "@follow/utils/utils"
-import { useHover } from "@use-gesture/react"
+import useEmblaCarousel from "embla-carousel-react"
+import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures"
 import { uniqBy } from "lodash-es"
-import { useRef, useState } from "react"
-import { Mousewheel, Navigation, Scrollbar } from "swiper/modules"
-import { Swiper, SwiperSlide } from "swiper/react"
+import { useCallback, useRef } from "react"
 
 import { Media } from "~/components/ui/media"
 
-import styles from "./index.module.css"
-
 const defaultProxySize = {
   width: 600,
   height: 0,
 }
+
 export function SwipeMedia({
   media,
-  uniqueKey,
   className,
   imgClassName,
   onPreview,
   proxySize = defaultProxySize,
-  forceSwiper,
 }: {
   media?: MediaModel[] | null
-  uniqueKey?: string
   className?: string
   imgClassName?: string
   onPreview?: (media: MediaModel[], index?: number) => void
   proxySize?: {
     width: number
     height: number
   }
-  forceSwiper?: boolean
 }) {
   const uniqMedia = uniqBy(media, "url")
 
   const hoverRef = useRef<HTMLDivElement>(null)
-  const [enableSwipe, setEnableSwipe] = useState(!!forceSwiper)
-  useHover(
-    (event) => {
-      if (event.active) {
-        setEnableSwipe(event.active)
-      }
-    },
-    {
-      target: hoverRef,
-      enabled: !forceSwiper,
-    },
-  )
+
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [WheelGesturesPlugin()])
+
+  const scrollPrev = useCallback(() => {
+    if (emblaApi) emblaApi.scrollPrev()
+  }, [emblaApi])
+
+  const scrollNext = useCallback(() => {
+    if (emblaApi) emblaApi.scrollNext()
+  }, [emblaApi])
 
   if (!media) return null
+
   return (
     <div
       ref={hoverRef}
       className={cn(
         "relative flex w-full items-center overflow-hidden",
-        styles["swipe-wrapper"],
+
         className,
       )}
     >
-      {enableSwipe && (uniqMedia?.length || 0) > 1 ? (
-        <>
-          <Swiper
-            loop
-            navigation={{
-              prevEl: `#swiper-button-prev-${uniqueKey}`,
-              nextEl: `#swiper-button-next-${uniqueKey}`,
-            }}
-            scrollbar={{
-              hide: true,
-            }}
-            mousewheel={{
-              forceToAxis: true,
-            }}
-            modules={[Navigation, Scrollbar, Mousewheel]}
-            className="size-full"
-          >
+      {uniqMedia?.length ? (
+        <div ref={emblaRef} className="w-full overflow-hidden">
+          <div className="flex">
             {uniqMedia?.slice(0, 5).map((med, i) => (
-              <SwiperSlide key={med.url}>
+              <div className="mr-2 w-full flex-none" key={med.url}>
                 <Media
                   className={cn(imgClassName, "size-full rounded-none")}
                   alt="cover"
@@ -100,44 +75,28 @@ export function SwipeMedia({
                   showFallback={true}
                   fitContent
                 />
-              </SwiperSlide>
+              </div>
             ))}
-          </Swiper>
-          <div
-            id={`swiper-button-prev-${uniqueKey}`}
-            className="swiper-button left-2"
-            onDoubleClick={(e) => e.stopPropagation()}
-          >
-            <i className="i-mgc-left-cute-fi" />
           </div>
-          <div
-            id={`swiper-button-next-${uniqueKey}`}
-            className="swiper-button right-2"
-            onDoubleClick={(e) => e.stopPropagation()}
-          >
-            <i className="i-mgc-right-cute-fi" />
-          </div>
-        </>
-      ) : uniqMedia?.length >= 1 ? (
-        <Media
-          onClick={(e) => {
-            e.stopPropagation()
-            onPreview?.(uniqMedia)
-          }}
-          cacheDimensions={uniqMedia[0].type === "photo"}
-          className="size-full rounded-none object-cover sm:transition-transform sm:duration-300 sm:ease-in-out sm:group-hover:scale-105"
-          alt="cover"
-          src={uniqMedia[0].url}
-          type={uniqMedia[0].type}
-          previewImageUrl={uniqMedia[0].preview_image_url}
-          loading="lazy"
-          proxy={proxySize}
-          showFallback={true}
-          height={uniqMedia[0].height}
-          width={uniqMedia[0].width}
-          blurhash={uniqMedia[0].blurhash}
-          fitContent
-        />
+          {emblaApi?.canScrollPrev() && (
+            <button
+              type="button"
+              className="center absolute left-2 top-1/2 size-6 -translate-y-1/2 rounded-full bg-gray-800 text-white opacity-0 duration-200 group-hover:opacity-100"
+              onClick={scrollPrev}
+            >
+              <i className="i-mingcute-arrow-left-line" />
+            </button>
+          )}
+          {emblaApi?.canScrollNext() && (
+            <button
+              type="button"
+              className="center absolute right-2 top-1/2 size-6 -translate-y-1/2 rounded-full bg-gray-800 text-white opacity-0 duration-200 group-hover:opacity-100"
+              onClick={scrollNext}
+            >
+              <i className="i-mingcute-arrow-right-line" />
+            </button>
+          )}
+        </div>
       ) : (
         <div className="relative flex aspect-video w-full items-center overflow-hidden rounded-t-2xl border-b">
           <div className="flex size-full items-center justify-center p-3 text-center sm:transition-transform sm:duration-500 sm:ease-in-out sm:group-hover:scale-105">

apps/renderer/src/components/ui/media/VideoPlayer.tsx

@@ -378,7 +378,7 @@ const PlayProgressBar = () => {
   })
   return (
     <Slider.Root
-      className="swiper-no-swiping relative z-[1] flex size-full items-center transition-all duration-200 ease-in-out"
+      className="relative z-[1] flex size-full items-center transition-all duration-200 ease-in-out"
       min={0}
       max={state.duration}
       step={0.01}