feat: add video playback control in preview media (#4531)

* feat: add video playback control in preview media

* update

* clean in unmount

apps/desktop/layer/renderer/src/components/ui/media/PreviewMediaContent.tsx

@@ -21,6 +21,7 @@ import { ipcServices } from "~/lib/client"
 import { replaceImgUrlIfNeed } from "~/lib/img-proxy"
 
 import { useCurrentModal } from "../modal/stacked/hooks"
+import type { VideoPlayerRef } from "./VideoPlayer"
 import { VideoPlayer } from "./VideoPlayer"
 
 // Calculate the dynamic scale value and offset
@@ -264,6 +265,7 @@ export const PreviewMediaContent: FC<{
   children?: React.ReactNode
   onZoomChange?: (isZoomed: boolean) => void
 }> = ({ media, initialIndex = 0, children, onZoomChange }) => {
+  const videoRefs = useRef<(VideoPlayerRef | null)[]>([])
   const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, startIndex: initialIndex }, [
     WheelGesturesPlugin(),
   ])
@@ -297,6 +299,22 @@ export const PreviewMediaContent: FC<{
     return () => $container.removeEventListener("keydown", handleKeyDown)
   }, [emblaApi, ref])
 
+  const setVideoRef = useCallback((el: VideoPlayerRef | null, index: number) => {
+    videoRefs.current[index] = el
+  }, [])
+
+  // Pause all videos when slide change
+  // And play the current video if it's a video
+  useEffect(() => {
+    videoRefs.current.forEach((video) => {
+      video?.controls.pause()
+    })
+    const currentVideo = videoRefs.current[currentSlideIndex]
+    if (currentVideo) {
+      currentVideo.controls.play()
+    }
+  }, [currentSlideIndex])
+
   if (media.length === 0) return null
   if (media.length === 1) {
     const src = media[0]!.url!
@@ -338,12 +356,12 @@ export const PreviewMediaContent: FC<{
       {(handleZoomChange) => [
         <div key={"left"} className="group size-full overflow-hidden" ref={emblaRef}>
           <div className="flex size-full">
-            {media.map((med) => (
+            {media.map((med, i) => (
               <div className="mr-2 flex w-full flex-none items-center justify-center" key={med.url}>
                 {med.type === "video" ? (
                   <VideoPlayer
+                    ref={(el) => setVideoRef(el, i)}
                     src={med.url}
-                    autoPlay
                     muted
                     controls
                     className="size-full object-contain"