feat(video-player): enhance video player with mute functionality and improved event handling

apps/web/src/components/ui/video-player.tsx

@@ -4,108 +4,128 @@ import { useRef, useEffect } from "react";
 import { usePlaybackStore } from "@/stores/playback-store";
 
 interface VideoPlayerProps {
-    src: string;
-    poster?: string;
-    className?: string;
-    clipStartTime: number;
-    trimStart: number;
-    trimEnd: number;
-    clipDuration: number;
+  src: string;
+  poster?: string;
+  className?: string;
+  clipStartTime: number;
+  trimStart: number;
+  trimEnd: number;
+  clipDuration: number;
 }
 
 export function VideoPlayer({
-    src,
-    poster,
-    className = "",
-    clipStartTime,
-    trimStart,
-    trimEnd,
-    clipDuration
+  src,
+  poster,
+  className = "",
+  clipStartTime,
+  trimStart,
+  trimEnd,
+  clipDuration,
 }: VideoPlayerProps) {
-    const videoRef = useRef<HTMLVideoElement>(null);
-    const { isPlaying, currentTime, volume, speed } = usePlaybackStore();
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const { isPlaying, currentTime, volume, speed, muted } = usePlaybackStore();
 
-    // Calculate if we're within this clip's timeline range
-    const clipEndTime = clipStartTime + (clipDuration - trimStart - trimEnd);
-    const isInClipRange = currentTime >= clipStartTime && currentTime < clipEndTime;
+  // Calculate if we're within this clip's timeline range
+  const clipEndTime = clipStartTime + (clipDuration - trimStart - trimEnd);
+  const isInClipRange =
+    currentTime >= clipStartTime && currentTime < clipEndTime;
 
-    // Sync playback events
-    useEffect(() => {
-        const video = videoRef.current;
-        if (!video || !isInClipRange) return;
+  // Sync playback events
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !isInClipRange) return;
 
-        const handleSeekEvent = (e: CustomEvent) => {
-            // Always update video time, even if outside clip range
-            const timelineTime = e.detail.time;
-            const videoTime = Math.max(trimStart, Math.min(
-                clipDuration - trimEnd,
-                timelineTime - clipStartTime + trimStart
-            ));
-            video.currentTime = videoTime;
-        };
+    const handleSeekEvent = (e: CustomEvent) => {
+      // Always update video time, even if outside clip range
+      const timelineTime = e.detail.time;
+      const videoTime = Math.max(
+        trimStart,
+        Math.min(
+          clipDuration - trimEnd,
+          timelineTime - clipStartTime + trimStart
+        )
+      );
+      video.currentTime = videoTime;
+    };
 
-        const handleUpdateEvent = (e: CustomEvent) => {
-            // Always update video time, even if outside clip range
-            const timelineTime = e.detail.time;
-            const targetTime = Math.max(trimStart, Math.min(
-                clipDuration - trimEnd,
-                timelineTime - clipStartTime + trimStart
-            ));
+    const handleUpdateEvent = (e: CustomEvent) => {
+      // Always update video time, even if outside clip range
+      const timelineTime = e.detail.time;
+      const targetTime = Math.max(
+        trimStart,
+        Math.min(
+          clipDuration - trimEnd,
+          timelineTime - clipStartTime + trimStart
+        )
+      );
 
-            if (Math.abs(video.currentTime - targetTime) > 0.5) {
-                video.currentTime = targetTime;
-            }
-        };
+      if (Math.abs(video.currentTime - targetTime) > 0.5) {
+        video.currentTime = targetTime;
+      }
+    };
 
-        const handleSpeed = (e: CustomEvent) => {
-            video.playbackRate = e.detail.speed;
-        };
+    const handleSpeed = (e: CustomEvent) => {
+      video.playbackRate = e.detail.speed;
+    };
 
-        window.addEventListener("playback-seek", handleSeekEvent as EventListener);
-        window.addEventListener("playback-update", handleUpdateEvent as EventListener);
-        window.addEventListener("playback-speed", handleSpeed as EventListener);
-
-        return () => {
-            window.removeEventListener("playback-seek", handleSeekEvent as EventListener);
-            window.removeEventListener("playback-update", handleUpdateEvent as EventListener);
-            window.removeEventListener("playback-speed", handleSpeed as EventListener);
-        };
-    }, [clipStartTime, trimStart, trimEnd, clipDuration, isInClipRange]);
-
-    // Sync playback state
-    useEffect(() => {
-        const video = videoRef.current;
-        if (!video) return;
-
-        if (isPlaying && isInClipRange) {
-            video.play().catch(() => { });
-        } else {
-            video.pause();
-        }
-    }, [isPlaying, isInClipRange]);
-
-    // Sync volume and speed
-    useEffect(() => {
-        const video = videoRef.current;
-        if (!video) return;
-
-        video.volume = volume;
-        video.playbackRate = speed;
-    }, [volume, speed]);
-
-    return (
-        <video
-            ref={videoRef}
-            src={src}
-            poster={poster}
-            className={`w-full h-full object-cover ${className}`}
-            playsInline
-            preload="auto"
-            controls={false}
-            disablePictureInPicture
-            disableRemotePlayback
-            style={{ pointerEvents: 'none' }}
-            onContextMenu={(e) => e.preventDefault()}
-        />
+    window.addEventListener("playback-seek", handleSeekEvent as EventListener);
+    window.addEventListener(
+      "playback-update",
+      handleUpdateEvent as EventListener
     );
-} 
+    window.addEventListener("playback-speed", handleSpeed as EventListener);
+
+    return () => {
+      window.removeEventListener(
+        "playback-seek",
+        handleSeekEvent as EventListener
+      );
+      window.removeEventListener(
+        "playback-update",
+        handleUpdateEvent as EventListener
+      );
+      window.removeEventListener(
+        "playback-speed",
+        handleSpeed as EventListener
+      );
+    };
+  }, [clipStartTime, trimStart, trimEnd, clipDuration, isInClipRange]);
+
+  // Sync playback state
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    if (isPlaying && isInClipRange) {
+      video.play().catch(() => {});
+    } else {
+      video.pause();
+    }
+  }, [isPlaying, isInClipRange]);
+
+  // Sync volume and speed
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    video.volume = volume;
+    video.muted = muted;
+    video.playbackRate = speed;
+  }, [volume, speed, muted]);
+
+  return (
+    <video
+      ref={videoRef}
+      src={src}
+      poster={poster}
+      className={`w-full h-full object-cover ${className}`}
+      playsInline
+      preload="auto"
+      controls={false}
+      disablePictureInPicture
+      disableRemotePlayback
+      style={{ pointerEvents: "none" }}
+      onContextMenu={(e) => e.preventDefault()}
+    />
+  );
+}