fix: FrontendPreviewPlayer video fallback 路径补充标题叠加层 #1491

Merged
auto-approve-bot merged 1 commits from fix/title-overlay-video-fallback into develop 2026-08-25 11:03:28 +08:00
@@ -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