diff --git a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx index 3b07fa05c..4823fbdb3 100644 --- a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx +++ b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx @@ -20,22 +20,45 @@ const ManualMaterialList: React.FC = ({ selectedMaterials, onToggle, }) => { - const handleVideoMouseEnter = useCallback((e: React.MouseEvent) => { - e.currentTarget.play().catch(() => {}) - }, []) + // 追踪当前正在播放的视频元素,确保同时只有一个视频播放 + const activeVideoRef = useRef(null) - const handleVideoMouseLeave = useCallback((e: React.MouseEvent) => { - const video = e.currentTarget - video.pause() - video.currentTime = 0 - }, []) + const handleVideoMouseEnter = useCallback( + (e: React.MouseEvent) => { + const video = e.currentTarget + // 暂停之前正在播放的视频 + if (activeVideoRef.current && activeVideoRef.current !== video) { + activeVideoRef.current.pause() + activeVideoRef.current.currentTime = 0 + } + activeVideoRef.current = video + video.play().catch(() => {}) + }, + [], + ) + + const handleVideoMouseLeave = useCallback( + (e: React.MouseEvent) => { + const video = e.currentTarget + video.pause() + video.currentTime = 0 + if (activeVideoRef.current === video) { + activeVideoRef.current = null + } + }, + [], + ) return (
{materialsLoading ? ( - 加载素材中… - ) : materials.items.length === 0 ? ( + 加载素材中… + + ) : materials.items.length === 0 ? ( + 暂无素材,请先在视频库中上传 ) : ( @@ -43,7 +66,6 @@ const ManualMaterialList: React.FC = ({ {materials.items.map((m) => { const checked = selectedMaterials.includes(m.id) const isVideo = m.mime_type?.startsWith("video/") ?? false - // thumbnail_url 是静态截图,可直接用于 const thumbSrc = m.thumbnail_url || undefined return (