xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 11 Pull Requests 2 Actions 2 Packages Projects Releases 7 Wiki Activity

fix: 预览播放器三修 - 素材静音+自动连播+标题显示 #1431

Closed
xiaoxia wants to merge 1 commits from fix/preview-player-v4 into develop
pull from: fix/preview-player-v4
merge into: xiaoxia:develop
Conversation 5 Commits 1 Files Changed 3
+10 -3
xiaoxia commented 2026-08-18 22:00:29 +08:00
Owner
Copy Link
Copy Source

修复

  1. 素材原声静音 — video 标签添加 muted 属性，只播放配音音频
  2. 片段自动连播 — switchToSegment 完成后自动调用 video.play()，无需用户再次点击
  3. 标题显示 — 移除 .xx-preview-video 的 display: grid; place-items: center，消除堆叠上下文冲突，添加 isolation: isolate

修改文件

  • FrontendPreviewPlayer.tsx — muted
  • useSegmentScheduler.ts — auto-play after switch
  • generate.css — remove grid, add isolation
## 修复 1. **素材原声静音** — video 标签添加 muted 属性，只播放配音音频 2. **片段自动连播** — switchToSegment 完成后自动调用 video.play()，无需用户再次点击 3. **标题显示** — 移除 `.xx-preview-video` 的 `display: grid; place-items: center`，消除堆叠上下文冲突，添加 `isolation: isolate` ## 修改文件 - FrontendPreviewPlayer.tsx — muted - useSegmentScheduler.ts — auto-play after switch - generate.css — remove grid, add isolation
xiaoxia added 1 commit 2026-08-18 22:00:29 +08:00
fix: 修复预览播放器三个问题 - 素材静音+自动连播+标题显示
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 33s
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m18s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m32s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m45s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m56s
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 2m26s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 44s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 2m41s
Details
AI Code Review / AI Code Review (pull_request) Failing after 2m28s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m5s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 7m26s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 15s
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m0s
Details
66eaacbf5f 
1. 素材原声静音：video 标签添加 muted 属性，只播放配音音频
2. 片段自动连播：switchToSegment 后自动调用 video.play()
3. 标题显示：移除 display:grid 避免堆叠上下文冲突，添加 isolation:isolate
gitea-actions bot commented 2026-08-18 22:02:47 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1431 | | 预览链接 | [https://pr-1431.preview.xiaoxiajianji.com](https://pr-1431.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
auto-approve-bot approved these changes 2026-08-18 22:02:51 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot approved these changes 2026-08-18 22:02:52 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot commented 2026-08-18 22:03:14 +08:00
Collaborator
Copy Link
Copy Source

【阻塞级判定】

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

📊 审查概览

  • 整体评价：需修改
  • 建议级问题数量：2 个

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

  1. [apps/web/src/pages/generate/hooks/useSegmentScheduler.ts] 切换片段逻辑存在竞态条件
    • 问题类型：逻辑bug
    • 问题描述：switchToSegment 被改为异步调用（.then），但在其 Promise 完成之前，currentSegmentIndex 状态尚未更新。由于 video.currentTime 此时依然满足 >= seg.endTime - 0.15 的条件（视频仍在播放或未跳转），该代码块极有可能在下一帧被再次触发，导致 switchToSegment 被重复调用。这会引发状态混乱、重复请求资源或播放器卡顿。
    • 修改建议：在调用 switchToSegment 之前，应立即更新状态或设置一个“正在切换”的锁标志位，防止在异步操作完成前重复进入该逻辑。或者确保 switchToSegment 内部同步更新索引，并在外部判断 nextIndex !== currentSegmentIndex。

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

  1. [apps/web/src/pages/generate/generate.css] 布局变更可能导致样式错乱
    • 具体内容：移除 .xx-preview-video 的 display: grid 和 place-items: center 会改变其内部子元素的默认布局行为。如果父容器或子元素没有显式处理居中，视频元素可能会不再居中。建议确认 UI 效果是否符合预期。
  2. [apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx] 静音属性硬编码
    • 具体内容：直接添加 muted 属性虽然解决了自动播放限制，但也强制禁用了声音。如果用户期望在预览时听到声音，这会降低体验。建议将其作为 props 传入，或者根据用户交互状态动态控制，除非业务需求明确要求预览时必须静音。

✅ 良好实践

  • 在 useSegmentScheduler.ts 中为 v.play() 添加了 .catch 错误处理，避免了未捕获的 Promise 异常，这是一个很好的防御性编程实践。
  • CSS 中添加 isolation: isolate 创建新的层叠上下文，有助于管理复杂的 z-index 层级关系。

🤖 由 AI 代码审查机器人自动生成 | 2026-08-18 14:03:14 | 模型:

### 【阻塞级判定】 - 是否存在阻塞级问题：是 - 阻塞级问题数量：1 个 ### 📊 审查概览 - 整体评价：需修改 - 建议级问题数量：2 个 ### 🔴 阻塞级问题（必须修复） 1. **[apps/web/src/pages/generate/hooks/useSegmentScheduler.ts] 切换片段逻辑存在竞态条件** - 问题类型：逻辑bug - 问题描述：`switchToSegment` 被改为异步调用（`.then`），但在其 Promise 完成之前，`currentSegmentIndex` 状态尚未更新。由于 `video.currentTime` 此时依然满足 `>= seg.endTime - 0.15` 的条件（视频仍在播放或未跳转），该代码块极有可能在下一帧被再次触发，导致 `switchToSegment` 被重复调用。这会引发状态混乱、重复请求资源或播放器卡顿。 - 修改建议：在调用 `switchToSegment` 之前，应立即更新状态或设置一个“正在切换”的锁标志位，防止在异步操作完成前重复进入该逻辑。或者确保 `switchToSegment` 内部同步更新索引，并在外部判断 `nextIndex !== currentSegmentIndex`。 ### 💡 改进建议（不阻塞合并） 1. **[apps/web/src/pages/generate/generate.css] 布局变更可能导致样式错乱** - 具体内容：移除 `.xx-preview-video` 的 `display: grid` 和 `place-items: center` 会改变其内部子元素的默认布局行为。如果父容器或子元素没有显式处理居中，视频元素可能会不再居中。建议确认 UI 效果是否符合预期。 2. **[apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx] 静音属性硬编码** - 具体内容：直接添加 `muted` 属性虽然解决了自动播放限制，但也强制禁用了声音。如果用户期望在预览时听到声音，这会降低体验。建议将其作为 `props` 传入，或者根据用户交互状态动态控制，除非业务需求明确要求预览时必须静音。 ### ✅ 良好实践 - 在 `useSegmentScheduler.ts` 中为 `v.play()` 添加了 `.catch` 错误处理，避免了未捕获的 Promise 异常，这是一个很好的防御性编程实践。 - CSS 中添加 `isolation: isolate` 创建新的层叠上下文，有助于管理复杂的 z-index 层级关系。 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-08-18 14:03:14 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
xiaoxia closed this pull request 2026-08-19 20:48:08 +08:00
gitea-actions bot commented 2026-08-19 20:49:06 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1431 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Some checks are pending
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 33s
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m18s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 1m32s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m45s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m56s
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 2m26s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 44s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 2m41s
Details
AI Code Review / AI Code Review (pull_request) Failing after 2m28s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 2m5s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 7m26s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 15s
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m0s
Details

Pull request closed

Please reopen this pull request to perform a merge.
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
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1431
Delete Branch "fix/preview-player-v4"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?