From 9d073193d841d642a0d5f4ea73156172b3a21132 Mon Sep 17 00:00:00 2001
From: xiaoxia <xiaoxia@xiaoxiajianji.com>
Date: Tue, 25 Aug 2026 10:52:20 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20video=20fallback=20=E8=B7=AF=E5=BE=84?=
 =?UTF-8?q?=E8=A1=A5=E5=85=85=E6=A0=87=E9=A2=98CSS=E5=8F=A0=E5=8A=A0?=
 =?UTF-8?q?=E5=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

FrontendPreviewPlayer 的 useWebCodecs 硬编码为 false，实际走 video
fallback 路径，但该路径只渲染了 video 元素，没有渲染标题叠加层，
导致预览画面看不到标题。

在 video 元素之后、播放按钮之前加入绝对定位的标题 div，
支持 position/size/font/color/bold/italic/stroke/shadow 全部样式。
---
 .../components/FrontendPreviewPlayer.tsx      | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx b/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
index 3637af79c..bf0aa141b 100644
--- a/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
+++ b/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
@@ -392,6 +392,51 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
           />
         ))}
 
+      {/* 标题CSS叠加层 — video fallback 路径也要渲染 */}
+      {titleSettings?.title && (
+        <div
+          style={{
+            position: "absolute",
+            left: 0,
+            right: 0,
+            zIndex: 5,
+            display: "flex",
+            justifyContent: "center",
+            pointerEvents: "none",
+            ...(titleSettings.position === "top"
+              ? { top: "10%" }
+              : titleSettings.position === "center"
+                ? { top: "50%", transform: "translateY(-50%)" }
+                : { bottom: "15%" }),
+          }}
+        >
+          <span
+            style={{
+              fontSize: titleSettings.size,
+              fontFamily: titleSettings.font || "思源黑体",
+              color: titleSettings.color || "#ffffff",
+              fontWeight: titleSettings.bold ? 700 : 400,
+              fontStyle: titleSettings.italic ? "italic" : "normal",
+              textShadow: [
+                titleSettings.shadow ? "0 2px 8px rgba(0,0,0,0.7)" : undefined,
+                titleSettings.stroke
+                  ? "1px 1px 0 rgba(0,0,0,0.5), -1px -1px 0 rgba(0,0,0,0.5), 1px -1px 0 rgba(0,0,0,0.5), -1px 1px 0 rgba(0,0,0,0.5)"
+                  : undefined,
+                "0 1px 3px rgba(0,0,0,0.4)",
+              ]
+                .filter(Boolean)
+                .join(", "),
+              maxWidth: "90%",
+              textAlign: "center",
+              lineHeight: 1.3,
+              wordBreak: "break-word",
+            }}
+          >
+            {titleSettings.title}
+          </span>
+        </div>
+      )}
+
       {/* 播放按钮 */}
       {!isPlaying && (
         <button
-- 
2.54.0