diff --git a/src/components/video-editor/PlaybackControls.tsx b/src/components/video-editor/PlaybackControls.tsx index d6403fe1..061ae5c5 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 bb12e30e..304d10f4 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 */}
diff --git a/src/i18n/locales/en/common.json b/src/i18n/locales/en/common.json index b59f24d2..fdc65e6a 100644 --- a/src/i18n/locales/en/common.json +++ b/src/i18n/locales/en/common.json @@ -18,7 +18,9 @@ }, "playback": { "play": "Play", - "pause": "Pause" + "pause": "Pause", + "fullscreen": "Fullscreen", + "exitFullscreen": "Exit Fullscreen" }, "locale": { "name": "English", diff --git a/src/i18n/locales/es/common.json b/src/i18n/locales/es/common.json index cfc771f8..a6f61e7c 100644 --- a/src/i18n/locales/es/common.json +++ b/src/i18n/locales/es/common.json @@ -18,7 +18,9 @@ }, "playback": { "play": "Reproducir", - "pause": "Pausar" + "pause": "Pausar", + "fullscreen": "Pantalla completa", + "exitFullscreen": "Salir de pantalla completa" }, "locale": { "name": "Español", diff --git a/src/i18n/locales/zh-CN/common.json b/src/i18n/locales/zh-CN/common.json index f3aa8b69..9a3cc1c3 100644 --- a/src/i18n/locales/zh-CN/common.json +++ b/src/i18n/locales/zh-CN/common.json @@ -18,7 +18,9 @@ }, "playback": { "play": "播放", - "pause": "暂停" + "pause": "暂停", + "fullscreen": "全屏", + "exitFullscreen": "退出全屏" }, "locale": { "name": "中文",