From 5d561ff06f19f1ac835275f30aef594ce16d66de Mon Sep 17 00:00:00 2001
From: AP Solanki <88495030+ateendra24@users.noreply.github.com>
Date: Sun, 22 Mar 2026 14:17:44 +0530
Subject: [PATCH] feat: add fullscreen video player

---
 .../video-editor/PlaybackControls.tsx         | 21 +++++++++++++-
 src/components/video-editor/VideoEditor.tsx   | 29 ++++++++++++++++++-
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/src/components/video-editor/PlaybackControls.tsx b/src/components/video-editor/PlaybackControls.tsx
index d6403fe..5b5217e 100644
--- a/src/components/video-editor/PlaybackControls.tsx
+++ b/src/components/video-editor/PlaybackControls.tsx
@@ -1,4 +1,4 @@
-import { Pause, Play } from "lucide-react";
+import { Maximize, Minimize, Pause, Play } from "lucide-react";
 import { useScopedT } from "@/contexts/I18nContext";
 import { cn } from "@/lib/utils";
 import { Button } from "../ui/button";
@@ -7,6 +7,8 @@ interface PlaybackControlsProps {
 	isPlaying: boolean;
 	currentTime: number;
 	duration: number;
+	isFullscreen?: boolean;
+	onToggleFullscreen?: () => void;
 	onTogglePlayPause: () => void;
 	onSeek: (time: number) => void;
 }
@@ -15,6 +17,8 @@ export default function PlaybackControls({
 	isPlaying,
 	currentTime,
 	duration,
+	isFullscreen = false,
+	onToggleFullscreen,
 	onTogglePlayPause,
 	onSeek,
 }: PlaybackControlsProps) {
@@ -87,6 +91,21 @@ export default function PlaybackControls({
 			<span className="text-[9px] font-medium text-slate-500 tabular-nums w-[30px]">
 				{formatTime(duration)}
 			</span>
+
+			{onToggleFullscreen && (
+				<Button
+					onClick={onToggleFullscreen}
+					size="icon"
+					className="w-7 h-7 rounded-full transition-all duration-200 border border-transparent hover:bg-white/10 text-white hover:border-white/10 shrink-0 shadow-none ml-0.5"
+					aria-label={isFullscreen ? t("playback.exitFullscreen") : t("playback.fullscreen")}
+				>
+					{isFullscreen ? (
+						<Minimize className="w-3.5 h-3.5 fill-current" />
+					) : (
+						<Maximize className="w-3.5 h-3.5 fill-current" />
+					)}
+				</Button>
+			)}
 		</div>
 	);
 }
diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index bb12e30..304d10f 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -119,8 +119,11 @@ export default function VideoEditor() {
 		fileName: string;
 		format: string;
 	} | null>(null);
+	const [isFullscreen, setIsFullscreen] = useState(false);
 
+	const playerContainerRef = useRef<HTMLDivElement>(null);
 	const videoPlaybackRef = useRef<VideoPlaybackRef>(null);
+
 	const nextZoomIdRef = useRef(1);
 	const nextTrimIdRef = useRef(1);
 	const nextSpeedIdRef = useRef(1);
@@ -539,6 +542,21 @@ export default function VideoEditor() {
 		}
 	}
 
+	const toggleFullscreen = useCallback(() => {
+		setIsFullscreen((prev) => !prev);
+	}, []);
+
+	useEffect(() => {
+		if (!isFullscreen) return;
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				setIsFullscreen(false);
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [isFullscreen]);
+
 	function handleSeek(time: number) {
 		const video = videoPlaybackRef.current?.video;
 		if (!video) return;
@@ -1425,7 +1443,14 @@ export default function VideoEditor() {
 					<PanelGroup direction="vertical" className="gap-3">
 						{/* Top section: video preview and controls */}
 						<Panel defaultSize={70} maxSize={70} minSize={40}>
-							<div className="w-full h-full flex flex-col items-center justify-center bg-black/40 rounded-2xl border border-white/5 shadow-2xl overflow-hidden">
+							<div
+								ref={playerContainerRef}
+								className={
+									isFullscreen
+										? "fixed inset-0 z-[99999] w-full h-full flex flex-col items-center justify-center bg-[#09090b]"
+										: "w-full h-full flex flex-col items-center justify-center bg-black/40 rounded-2xl border border-white/5 shadow-2xl overflow-hidden relative"
+								}
+							>
 								{/* Video preview */}
 								<div className="w-full flex justify-center items-center flex-auto mt-1.5">
 									<div
@@ -1487,6 +1512,8 @@ export default function VideoEditor() {
 											isPlaying={isPlaying}
 											currentTime={currentTime}
 											duration={duration}
+											isFullscreen={isFullscreen}
+											onToggleFullscreen={toggleFullscreen}
 											onTogglePlayPause={togglePlayPause}
 											onSeek={handleSeek}
 										/>