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({ {formatTime(duration)} + + {onToggleFullscreen && ( + + )} ); } 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(null); const videoPlaybackRef = useRef(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() { {/* Top section: video preview and controls */} -
+
{/* Video preview */}