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

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

@@ -20,14 +20,15 @@ export function VideoPlayer({
   clipStartTime,
   trimStart,
   trimEnd,
-    clipDuration
+  clipDuration,
 }: VideoPlayerProps) {
   const videoRef = useRef<HTMLVideoElement>(null);
-    const { isPlaying, currentTime, volume, speed } = usePlaybackStore();
+  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;
+  const isInClipRange =
+    currentTime >= clipStartTime && currentTime < clipEndTime;
 
   // Sync playback events
   useEffect(() => {
@@ -37,20 +38,26 @@ export function VideoPlayer({
     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(
+      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(
+      const targetTime = Math.max(
+        trimStart,
+        Math.min(
           clipDuration - trimEnd,
           timelineTime - clipStartTime + trimStart
-            ));
+        )
+      );
 
       if (Math.abs(video.currentTime - targetTime) > 0.5) {
         video.currentTime = targetTime;
@@ -62,13 +69,25 @@ export function VideoPlayer({
     };
 
     window.addEventListener("playback-seek", handleSeekEvent as EventListener);
-        window.addEventListener("playback-update", handleUpdateEvent 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(
-            window.removeEventListener("playback-update", handleUpdateEvent as EventListener);
+        "playback-seek",
-            window.removeEventListener("playback-speed", handleSpeed as EventListener);
+        handleSeekEvent as EventListener
+      );
+      window.removeEventListener(
+        "playback-update",
+        handleUpdateEvent as EventListener
+      );
+      window.removeEventListener(
+        "playback-speed",
+        handleSpeed as EventListener
+      );
     };
   }, [clipStartTime, trimStart, trimEnd, clipDuration, isInClipRange]);
 
@@ -78,7 +97,7 @@ export function VideoPlayer({
     if (!video) return;
 
     if (isPlaying && isInClipRange) {
-            video.play().catch(() => { });
+      video.play().catch(() => {});
     } else {
       video.pause();
     }
@@ -90,8 +109,9 @@ export function VideoPlayer({
     if (!video) return;
 
     video.volume = volume;
+    video.muted = muted;
     video.playbackRate = speed;
-    }, [volume, speed]);
+  }, [volume, speed, muted]);
 
   return (
     <video
@@ -104,7 +124,7 @@ export function VideoPlayer({
       controls={false}
       disablePictureInPicture
       disableRemotePlayback
-            style={{ pointerEvents: 'none' }}
+      style={{ pointerEvents: "none" }}
       onContextMenu={(e) => e.preventDefault()}
     />
   );