1 files changed, 107 insertions, 107 deletions

diff --git a/apps/web/src/components/ui/video-player.tsx b/apps/web/src/components/ui/video-player.tsx
index 29d82cdf..1a44ef76 100644
--- a/apps/web/src/components/ui/video-player.tsx
+++ b/apps/web/src/components/ui/video-player.tsx
@@ -4,128 +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, muted } = 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);
+		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]);
+		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;
+	// Sync playback state
+	useEffect(() => {
+		const video = videoRef.current;
+		if (!video) return;
 
-    if (isPlaying && isInClipRange) {
-      video.play().catch(() => {});
-    } else {
-      video.pause();
-    }
-  }, [isPlaying, isInClipRange]);
+		if (isPlaying && isInClipRange) {
+			video.play().catch(() => {});
+		} else {
+			video.pause();
+		}
+	}, [isPlaying, isInClipRange]);
 
-  // Sync volume and speed
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!video) return;
+	// Sync volume and speed
+	useEffect(() => {
+		const video = videoRef.current;
+		if (!video) return;
 
-    video.volume = volume;
-    video.muted = muted;
-    video.playbackRate = speed;
-  }, [volume, speed, muted]);
+		video.volume = volume;
+		video.muted = muted;
+		video.playbackRate = speed;
+	}, [volume, speed, muted]);
 
-  return (
-    <video
-      ref={videoRef}
-      src={src}
-      poster={poster}
-      className={`max-w-full max-h-full object-contain ${className}`}
-      playsInline
-      preload="auto"
-      controls={false}
-      disablePictureInPicture
-      disableRemotePlayback
-      style={{ pointerEvents: "none" }}
-      onContextMenu={(e) => e.preventDefault()}
-    />
-  );
+	return (
+		<video
+			ref={videoRef}
+			src={src}
+			poster={poster}
+			className={`max-w-full max-h-full object-contain ${className}`}
+			playsInline
+			preload="auto"
+			controls={false}
+			disablePictureInPicture
+			disableRemotePlayback
+			style={{ pointerEvents: "none" }}
+			onContextMenu={(e) => e.preventDefault()}
+		/>
+	);
 }