From 0d3c3e81acade4f2474af813fcc8ff99e478cfe5 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 6 Aug 2026 17:21:36 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E5=A4=9A=E5=AE=9E=E4=BE=8B=E6=92=AD=E6=94=BE=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?+ref=E5=9B=9E=E8=B0=83=E6=94=B9=E4=B8=BAposter=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 activeVideoRef 追踪当前播放视频，播放新视频前暂停其他视频
- 移除内联 ref 回调，改用 poster 属性直接设置封面
- mouseLeave 时同步清理 activeVideoRef
---
 .../material/ManualMaterialList.tsx           | 91 ++++++++++++++-----
 1 file changed, 68 insertions(+), 23 deletions(-)

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<ManualMaterialListProps> = ({
   selectedMaterials,
   onToggle,
 }) => {
-  const handleVideoMouseEnter = useCallback((e: React.MouseEvent<HTMLVideoElement>) => {
-    e.currentTarget.play().catch(() => {})
-  }, [])
+  // 追踪当前正在播放的视频元素，确保同时只有一个视频播放
+  const activeVideoRef = useRef<HTMLVideoElement | null>(null)
 
-  const handleVideoMouseLeave = useCallback((e: React.MouseEvent<HTMLVideoElement>) => {
-    const video = e.currentTarget
-    video.pause()
-    video.currentTime = 0
-  }, [])
+  const handleVideoMouseEnter = useCallback(
+    (e: React.MouseEvent<HTMLVideoElement>) => {
+      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<HTMLVideoElement>) => {
+      const video = e.currentTarget
+      video.pause()
+      video.currentTime = 0
+      if (activeVideoRef.current === video) {
+        activeVideoRef.current = null
+      }
+    },
+    [],
+  )
 
   return (
     <div style={{ marginTop: 14 }}>
       {materialsLoading ? (
-        <Text style={{ color: "var(--text-secondary)", padding: "16px 0" }}>加载素材中…</Text>
-      ) : materials.items.length === 0 ? (
         <Text style={{ color: "var(--text-secondary)", padding: "16px 0" }}>
+          加载素材中…
+        </Text>
+      ) : materials.items.length === 0 ? (
+        <Text
+          style={{ color: "var(--text-secondary)", padding: "16px 0" }}
+        >
           暂无素材，请先在视频库中上传
         </Text>
       ) : (
@@ -43,7 +66,6 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
           {materials.items.map((m) => {
             const checked = selectedMaterials.includes(m.id)
             const isVideo = m.mime_type?.startsWith("video/") ?? false
-            // thumbnail_url 是静态截图，可直接用于 <img>
             const thumbSrc = m.thumbnail_url || undefined
             return (
               <label
@@ -53,7 +75,9 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
                   alignItems: "center",
                   gap: 10,
                   padding: "8px 12px",
-                  background: checked ? "var(--primary-soft, #eef2ff)" : "#f8fafc",
+                  background: checked
+                    ? "var(--primary-soft, #eef2ff)"
+                    : "#f8fafc",
                   borderRadius: 10,
                   cursor: "pointer",
                   border: checked
@@ -66,7 +90,10 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
                   type="checkbox"
                   checked={checked}
                   onChange={() => onToggle(m.id)}
-                  style={{ accentColor: "var(--primary-color, #4f46e5)", flexShrink: 0 }}
+                  style={{
+                    accentColor: "var(--primary-color, #4f46e5)",
+                    flexShrink: 0,
+                  }}
                 />
                 {/* 缩略图预览 48×48 */}
                 <div
@@ -84,13 +111,8 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
                 >
                   {isVideo && m.file_url ? (
                     <video
-                      ref={(el) => {
-                        if (el && m.thumbnail_url) {
-                          // 显示封面帧作为初始画面
-                          el.poster = m.thumbnail_url
-                        }
-                      }}
                       src={m.file_url}
+                      poster={m.thumbnail_url || undefined}
                       muted
                       loop
                       playsInline
@@ -116,20 +138,43 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
                       onError={(e) => {
                         const target = e.target as HTMLImageElement
                         target.style.display = "none"
-                        const fallback = target.nextElementSibling as HTMLElement | null
+                        const fallback =
+                          target.nextElementSibling as HTMLElement | null
                         if (fallback) fallback.style.display = "flex"
                       }}
                     />
                   ) : null}
                   {!thumbSrc && !isVideo && (
-                    <span style={{ fontSize: 20, opacity: 0.5, display: "flex" }}>🎵</span>
+                    <span
+                      style={{
+                        fontSize: 20,
+                        opacity: 0.5,
+                        display: "flex",
+                      }}
+                    >
+                      🎵
+                    </span>
                   )}
                   {!thumbSrc && isVideo && !m.file_url && (
-                    <span style={{ fontSize: 20, opacity: 0.5, display: "flex" }}>🎬</span>
+                    <span
+                      style={{
+                        fontSize: 20,
+                        opacity: 0.5,
+                        display: "flex",
+                      }}
+                    >
+                      🎬
+                    </span>
                   )}
                   {/* img onError 时显示的 fallback（初始隐藏） */}
                   {thumbSrc && !(isVideo && m.file_url) && (
-                    <span style={{ fontSize: 20, opacity: 0.5, display: "none" }}>
+                    <span
+                      style={{
+                        fontSize: 20,
+                        opacity: 0.5,
+                        display: "none",
+                      }}
+                    >
                       {isVideo ? "🎬" : "🎵"}
                     </span>
                   )}