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

fix: 标题字号px计算+配音同步+片段切换可靠性 #1432

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

修复

  1. 标题 fontSize：用 ResizeObserver 获取容器实际高度，px 单位计算。修复百分比 fontSize 基于 36px 父元素导致字号≈1.4px 不可见
  2. 配音同步：片段切换时（currentSegmentIndex 变化）同步 audio.currentTime 到视频全局时间
  3. 片段切换：switchToSegment readyState 阈值从 1 提升到 2 (HAVE_CURRENT_DATA)，确保有帧数据再播放

修改文件

  • PreviewVideoPanel.tsx — ResizeObserver + px fontSize
  • FrontendPreviewPlayer.tsx — audio sync on segment change
  • useSegmentScheduler.ts — readyState >= 2
## 修复 1. **标题 fontSize**：用 ResizeObserver 获取容器实际高度，px 单位计算。修复百分比 fontSize 基于 36px 父元素导致字号≈1.4px 不可见 2. **配音同步**：片段切换时（currentSegmentIndex 变化）同步 audio.currentTime 到视频全局时间 3. **片段切换**：switchToSegment readyState 阈值从 1 提升到 2 (HAVE_CURRENT_DATA)，确保有帧数据再播放 ## 修改文件 - PreviewVideoPanel.tsx — ResizeObserver + px fontSize - FrontendPreviewPlayer.tsx — audio sync on segment change - useSegmentScheduler.ts — readyState >= 2
xiaoxia added 1 commit 2026-08-18 22:44:50 +08:00
fix: 修复标题字号(px计算)+配音同步+片段切换可靠性
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 / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
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 / Check if frontend-only change (pull_request) Successful in 1m3s
Details
AI Code Review / AI Code Review (pull_request) Failing after 2m10s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 2m24s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 2m50s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 2m58s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 3m31s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 4m22s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m24s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 2m2s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 4m18s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 10m55s
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 / 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
CI/CD Pipeline / CI Gate (pull_request) Failing after 7s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m2s
Details
b2d5f1ba69 
1. 标题 fontSize 改用 ResizeObserver 获取容器实际高度，px 单位计算
   修复百分比 fontSize 基于 36px 父元素导致字号≈1.4px 不可见的问题
2. 片段切换时同步 audio.currentTime 到视频全局时间
3. switchToSegment readyState 阈值提升到 2 (HAVE_CURRENT_DATA)
auto-approve-bot commented 2026-08-18 22:46:54 +08:00
Collaborator
Copy Link
Copy Source

【阻塞级判定】

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

📊 审查概览

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

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

  1. [FrontendPreviewPlayer.tsx: 138-143] React Hooks 依赖缺失导致闭包陷阱
    • 问题类型：逻辑bug
    • 问题描述：新增的 useEffect 依赖数组仅包含 [currentSegmentIndex]，但在 Effect 内部读取了 currentTime 和 isPlaying。
      • currentTime 问题：当 currentSegmentIndex 变化触发 Effect 时，currentTime 的值是闭包中捕获的旧值。如果父组件更新 currentSegmentIndex 的速度先于更新 currentTime，或者渲染时机存在差异，Effect 会将音频时间设置为上一个片段的时间，导致片段切换时音频回跳或不同步。
      • isPlaying 问题：Effect 内部通过 !isPlaying 判断是否执行，但 isPlaying 不在依赖项中。如果在 Effect 运行时 isPlaying 实际已为 false，但闭包中捕获的值为 true，会导致错误的执行逻辑。
    • 修改建议：由于该 Effect 意在“片段切换时”执行，不应依赖 currentTime 或 isPlaying 的变化来触发。建议使用 useRef 来保存最新的 currentTime 和 isPlaying，在 Effect 中读取 ref.current，从而既能响应 currentSegmentIndex 变化，又能获取到最新的状态值，避免闭包陷阱。

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

  1. [PreviewVideoPanel.tsx: 125] ResizeObserver 高频触发重渲染
    • 具体内容：ResizeObserver 的回调函数中直接调用了 setContainerHeight。在用户拖拽改变窗口大小时，ResizeObserver 会以极高频率触发，导致 setContainerHeight 频繁调用，进而引发 React 组件不必要的多次重渲染，可能造成页面卡顿。
    • 建议：对 setContainerHeight 的调用增加防抖或节流逻辑，或者仅在高度值发生显著变化（例如变化超过 1px）时才更新状态。

✅ 良好实践

  • [useSegmentScheduler.ts] 将 video.readyState 的判断条件从 >= 1 (HAVE_METADATA) 提升为 >= 2 (HAVE_CURRENT_DATA) 是一个非常稳健的改进。在仅拥有元数据（状态 1）时设置 currentTime 在某些浏览器中可能无效，等待当前帧数据可用（状态 2）后再设置时间能有效避免同步失败。

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

### 【阻塞级判定】 - 是否存在阻塞级问题：是 - 阻塞级问题数量：1 个 ### 📊 审查概览 - 整体评价：需修改 - 建议级问题数量：1 个 ### 🔴 阻塞级问题（必须修复） 1. **[FrontendPreviewPlayer.tsx: 138-143] React Hooks 依赖缺失导致闭包陷阱** - 问题类型：逻辑bug - 问题描述：新增的 `useEffect` 依赖数组仅包含 `[currentSegmentIndex]`，但在 Effect 内部读取了 `currentTime` 和 `isPlaying`。 - **`currentTime` 问题**：当 `currentSegmentIndex` 变化触发 Effect 时，`currentTime` 的值是闭包中捕获的旧值。如果父组件更新 `currentSegmentIndex` 的速度先于更新 `currentTime`，或者渲染时机存在差异，Effect 会将音频时间设置为**上一个片段**的时间，导致片段切换时音频回跳或不同步。 - **`isPlaying` 问题**：Effect 内部通过 `!isPlaying` 判断是否执行，但 `isPlaying` 不在依赖项中。如果在 Effect 运行时 `isPlaying` 实际已为 `false`，但闭包中捕获的值为 `true`，会导致错误的执行逻辑。 - 修改建议：由于该 Effect 意在“片段切换时”执行，不应依赖 `currentTime` 或 `isPlaying` 的变化来触发。建议使用 `useRef` 来保存最新的 `currentTime` 和 `isPlaying`，在 Effect 中读取 `ref.current`，从而既能响应 `currentSegmentIndex` 变化，又能获取到最新的状态值，避免闭包陷阱。 ### 💡 改进建议（不阻塞合并） 1. **[PreviewVideoPanel.tsx: 125] ResizeObserver 高频触发重渲染** - 具体内容：`ResizeObserver` 的回调函数中直接调用了 `setContainerHeight`。在用户拖拽改变窗口大小时，`ResizeObserver` 会以极高频率触发，导致 `setContainerHeight` 频繁调用，进而引发 React 组件不必要的多次重渲染，可能造成页面卡顿。 - 建议：对 `setContainerHeight` 的调用增加防抖或节流逻辑，或者仅在高度值发生显著变化（例如变化超过 1px）时才更新状态。 ### ✅ 良好实践 - **[useSegmentScheduler.ts]** 将 `video.readyState` 的判断条件从 `>= 1` (HAVE_METADATA) 提升为 `>= 2` (HAVE_CURRENT_DATA) 是一个非常稳健的改进。在仅拥有元数据（状态 1）时设置 `currentTime` 在某些浏览器中可能无效，等待当前帧数据可用（状态 2）后再设置时间能有效避免同步失败。 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-08-18 14:46:54 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
gitea-actions bot commented 2026-08-18 22:49:05 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1432 | | 预览链接 | [https://pr-1432.preview.xiaoxiajianji.com](https://pr-1432.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
xiaoxia closed this pull request 2026-08-19 20:48:08 +08:00
gitea-actions bot commented 2026-08-19 20:49:09 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1432 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 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 / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
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 / Check if frontend-only change (pull_request) Successful in 1m3s
Details
AI Code Review / AI Code Review (pull_request) Failing after 2m10s
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 2m24s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 2m50s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 2m58s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 3m31s
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 4m22s
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m24s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Failing after 2m2s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 4m18s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 10m55s
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 / 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
CI/CD Pipeline / CI Gate (pull_request) Failing after 7s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Has been cancelled
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 1m2s
Details

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No Reviewers
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#1432
Delete Branch "fix/preview-player-v5"

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?