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

Conversation 5 Commits 1 Files Changed 1

+45

xiaoxia commented 2026-08-25 10:52:32 +08:00

Owner

Copy Link

Copy Source

问题

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

修复

在 video 元素之后、播放按钮之前加入绝对定位的标题 div，支持全部标题样式属性：

• position (top/center/bottom)
• size, font, color
• bold, italic
• stroke, shadow

改动文件

• apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx — 新增标题 CSS 叠加层

验收标准

• Step 4+ 右侧预览面板显示素材视频 + 标题叠加
• 修改标题文字/样式时实时变化
• 播放/暂停按钮、进度条、片段指示器正常
• TypeScript 检查通过

## 问题 FrontendPreviewPlayer 的 `useWebCodecs` 硬编码为 `false`，实际走 video fallback 路径。但该路径只渲染了 `<video>` 元素，没有渲染标题 CSS 叠加层，导致预览画面看不到标题。 ## 修复 在 video 元素之后、播放按钮之前加入绝对定位的标题 div，支持全部标题样式属性： - position (top/center/bottom) - size, font, color - bold, italic - stroke, shadow ## 改动文件 - `apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx` — 新增标题 CSS 叠加层 ## 验收标准 - [x] Step 4+ 右侧预览面板显示素材视频 + 标题叠加 - [x] 修改标题文字/样式时实时变化 - [x] 播放/暂停按钮、进度条、片段指示器正常 - [x] TypeScript 检查通过

xiaoxia added 1 commit 2026-08-25 10:52:32 +08:00

fix: video fallback 路径补充标题CSS叠加层 ... 9d073193d8

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

在 video 元素之后、播放按钮之前加入绝对定位的标题 div，
支持 position/size/font/color/bold/italic/stroke/shadow 全部样式。

gitea-actions bot commented 2026-08-25 10:54:38 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

项目	详情
PR号	#1491
预览链接	https://pr-1491.preview.xiaoxiajianji.com
API环境	staging

💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。

🔄 每次提交新代码后预览环境会自动更新。

🗑️ PR 关闭或合并后，预览环境会自动清理。

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1491 | | 预览链接 | [https://pr-1491.preview.xiaoxiajianji.com](https://pr-1491.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。

auto-approve-bot approved these changes 2026-08-25 10:55:34 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-08-25 10:55:34 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot commented 2026-08-25 10:57:06 +08:00

Collaborator

Copy Link

Copy Source

【阻塞级判定】

• 是否存在阻塞级问题：否
• 阻塞级问题数量：0 个

📊 审查概览

• 整体评价：通过
• 建议级问题数量：2 个

🔴 阻塞级问题（必须修复）

无

💡 改进建议（不阻塞合并）

1. [FrontendPreviewPlayer.tsx: 415-421] textShadow 逻辑可读性优化

   • 具体内容：当前使用数组 filter(Boolean) 再 join(", ") 的方式构建 textShadow 字符串虽然功能正确，但稍显冗长且每次渲染都会重新计算数组。建议提取为常量或使用简单的字符串拼接逻辑，以提高代码可读性和微小的性能优化。

2. [FrontendPreviewPlayer.tsx: 401-405] 硬编码魔法值提取

   • 具体内容：位置偏移量（如 10%、50%、15%）直接硬编码在 JSX 中。建议将这些数值提取为组件顶部的常量（如 TITLE_POSITION_OFFSETS），便于后续统一调整布局和维护。

✅ 良好实践

• 安全性：直接使用 JSX 插值 {titleSettings.title} 渲染文本，React 默认会进行转义，有效防止 XSS 攻击。
• 用户体验：添加了 pointerEvents: "none"，确保标题叠加层不会阻挡用户对下方视频元素的点击交互。
• 健壮性：使用了可选链 titleSettings?.title 和默认值（如 || "思源黑体"），有效避免了空指针引用导致的渲染崩溃。
• 样式处理：使用了 wordBreak: "break-word"，防止长标题溢出容器破坏布局。

---

✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-08-25 02:57:06 | 模型:}

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：通过 - 建议级问题数量：2 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 1. **[FrontendPreviewPlayer.tsx: 415-421] textShadow 逻辑可读性优化** - 具体内容：当前使用数组 `filter(Boolean)` 再 `join(", ")` 的方式构建 `textShadow` 字符串虽然功能正确，但稍显冗长且每次渲染都会重新计算数组。建议提取为常量或使用简单的字符串拼接逻辑，以提高代码可读性和微小的性能优化。 2. **[FrontendPreviewPlayer.tsx: 401-405] 硬编码魔法值提取** - 具体内容：位置偏移量（如 `10%`、`50%`、`15%`）直接硬编码在 JSX 中。建议将这些数值提取为组件顶部的常量（如 `TITLE_POSITION_OFFSETS`），便于后续统一调整布局和维护。 ### ✅ 良好实践 - **安全性**：直接使用 JSX 插值 `{titleSettings.title}` 渲染文本，React 默认会进行转义，有效防止 XSS 攻击。 - **用户体验**：添加了 `pointerEvents: "none"`，确保标题叠加层不会阻挡用户对下方视频元素的点击交互。 - **健壮性**：使用了可选链 `titleSettings?.title` 和默认值（如 `|| "思源黑体"`），有效避免了空指针引用导致的渲染崩溃。 - **样式处理**：使用了 `wordBreak: "break-word"`，防止长标题溢出容器破坏布局。 --- ✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-25 02:57:06 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

xiaoxia referenced this issue from a commit 2026-08-25 10:59:40 +08:00

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

auto-approve-bot merged commit 5f87bede1a into develop 2026-08-25 11:03:28 +08:00

auto-approve-bot deleted branch fix/title-overlay-video-fallback 2026-08-25 11:03:29 +08:00

gitea-actions bot commented 2026-08-25 11:05:03 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

PR #1491 已关闭或合并，对应的预览环境已被清理。

如有需要，可以重新打开 PR 来重新生成预览环境。

🗑️ **预览环境已清理** PR #1491 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。

Sign in to join this conversation.

Reviewers

No Reviewers

auto-approve-bot

Labels

Clear labels

P0

阻塞性，必须立即处理

P1

高优先级

P2

中优先级

P3

低优先级/后考虑

architecture

架构设计

backend

后端相关

blocked

阻塞中

bug

Bug修复

ci-bug

CI本身的bug

ci-optimization

CI优化类任务

ci-pipeline

CI流水线/workflow相关

cleanup

代码清理

devops

运维/部署/CI

documentation

文档相关

feature

新功能

frontend

前端相关

question

需要讨论确认

ready

PR CI通过，可合并

refactor

代码重构

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

auto-approve-bot xiaoxia

No Assignees

3 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1491