diff --git a/components/pages/style/work-flow.css b/components/pages/style/work-flow.css index 51b343c..c39a07c 100644 --- a/components/pages/style/work-flow.css +++ b/components/pages/style/work-flow.css @@ -153,7 +153,7 @@ min-height: 0; } .videoContainer-qteKNi { - flex: 1; + /* flex: 1; */ min-height: 0; display: flex; position: relative; diff --git a/components/pages/work-flow/media-viewer.tsx b/components/pages/work-flow/media-viewer.tsx index 3263086..4724150 100644 --- a/components/pages/work-flow/media-viewer.tsx +++ b/components/pages/work-flow/media-viewer.tsx @@ -2,7 +2,7 @@ import React, { useRef, useEffect, useState } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; -import { Edit3, Play, Pause, Volume2, VolumeX } from 'lucide-react'; +import { Edit3, Play, Pause, Volume2, VolumeX, Maximize, Minimize } from 'lucide-react'; import { ProgressiveReveal, presets } from '@/components/ui/progressive-reveal'; import { GlassIconButton } from '@/components/ui/glass-icon-button'; @@ -45,6 +45,10 @@ export function MediaViewer({ // 音量控制状态 const [isMuted, setIsMuted] = useState(false); const [volume, setVolume] = useState(0.8); + + // 最终视频控制状态 + const [isFinalVideoPlaying, setIsFinalVideoPlaying] = useState(true); + const [isFullscreen, setIsFullscreen] = useState(false); // 音量控制函数 const toggleMute = () => { @@ -75,6 +79,37 @@ export function MediaViewer({ } }; + // 最终视频播放控制 + const toggleFinalVideoPlay = () => { + if (finalVideoRef.current) { + if (isFinalVideoPlaying) { + finalVideoRef.current.pause(); + } else { + finalVideoRef.current.play(); + } + setIsFinalVideoPlaying(!isFinalVideoPlaying); + } + }; + + // 全屏控制 + const toggleFullscreen = () => { + if (!document.fullscreenElement) { + // 进入全屏 + if (finalVideoRef.current) { + finalVideoRef.current.requestFullscreen?.() || + (finalVideoRef.current as any).webkitRequestFullscreen?.() || + (finalVideoRef.current as any).msRequestFullscreen?.(); + setIsFullscreen(true); + } + } else { + // 退出全屏 + document.exitFullscreen?.() || + (document as any).webkitExitFullscreen?.() || + (document as any).msExitFullscreen?.(); + setIsFullscreen(false); + } + }; + // 视频播放控制 useEffect(() => { if (mainVideoRef.current) { @@ -112,6 +147,23 @@ export function MediaViewer({ } }, [volume, isMuted]); + // 监听全屏状态变化 + useEffect(() => { + const handleFullscreenChange = () => { + setIsFullscreen(!!document.fullscreenElement); + }; + + document.addEventListener('fullscreenchange', handleFullscreenChange); + document.addEventListener('webkitfullscreenchange', handleFullscreenChange); + document.addEventListener('msfullscreenchange', handleFullscreenChange); + + return () => { + document.removeEventListener('fullscreenchange', handleFullscreenChange); + document.removeEventListener('webkitfullscreenchange', handleFullscreenChange); + document.removeEventListener('msfullscreenchange', handleFullscreenChange); + }; + }, []); + // 渲染音量控制组件 const renderVolumeControls = () => (