From c411b732bda434e15d06cb756399ced4c192232b Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 6 Aug 2026 17:11:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A7=86=E9=A2=91=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E7=BC=A9=E7=95=A5=E5=9B=BE=E6=94=B9=E4=B8=BA=E5=8F=AF=E6=92=AD?=
 =?UTF-8?q?=E6=94=BEvideo=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 视频素材(isVideo+file_url)使用video标签自动循环播放
- 无file_url时fallback到thumbnail_url静态图
- 非视频素材保持原有img/fallback逻辑
---
 .../material/ManualMaterialList.tsx           | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
index 3fa20a904..af82ee7ea 100644
--- a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
+++ b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
@@ -34,7 +34,6 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
             const checked = selectedMaterials.includes(m.id)
             const isVideo = m.mime_type?.startsWith("video/") ?? false
             // thumbnail_url 是静态截图，可直接用于 <img>
-            // file_url 是视频/音频文件本身，<img> 无法渲染，不能作为 src 回退
             const thumbSrc = m.thumbnail_url || undefined
             return (
               <label
@@ -73,7 +72,20 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
                     justifyContent: "center",
                   }}
                 >
-                  {thumbSrc ? (
+                  {isVideo && m.file_url ? (
+                    <video
+                      src={m.file_url}
+                      muted
+                      loop
+                      playsInline
+                      autoPlay
+                      style={{
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "cover",
+                      }}
+                    />
+                  ) : thumbSrc ? (
                     <img
                       src={thumbSrc}
                       alt={m.name}
@@ -90,13 +102,14 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
                       }}
                     />
                   ) : null}
-                  {!thumbSrc && (
-                    <span style={{ fontSize: 20, opacity: 0.5, display: "flex" }}>
-                      {isVideo ? "🎬" : "🎵"}
-                    </span>
+                  {!thumbSrc && !isVideo && (
+                    <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>
                   )}
                   {/* img onError 时显示的 fallback（初始隐藏） */}
-                  {thumbSrc && (
+                  {thumbSrc && !(isVideo && m.file_url) && (
                     <span style={{ fontSize: 20, opacity: 0.5, display: "none" }}>
                       {isVideo ? "🎬" : "🎵"}
                     </span>