refactor(products): VideoPlayer 改用 useVideoPlayer Hook 消除重复代码（199→123行, -38%） #1163

Merged

xiaoxia merged 3 commits from refactor/video-player-hook into develop 2026-07-30 00:25:18 +08:00

Conversation 5 Commits 3 Files Changed 2

+17 -50

xiaoxia commented 2026-07-29 22:05:14 +08:00

Owner

Copy Link

Copy Source

重构内容

将 VideoPlayer 组件中重复的播放控制逻辑，替换为已有的 useVideoPlayer Hook，消除代码重复。

变更

• VideoPlayer.tsx: 199行 → 123行 (-38%)
• 移除组件内自建的播放状态、事件监听、进度控制逻辑
• 改用 useVideoPlayer Hook 统一管理播放逻辑
• 保留 ESC 关闭等组件级交互

收益

• 消除重复代码，播放逻辑统一维护
• VideoPlayer 组件更聚焦于 UI 渲染
• 后续播放器能力增强（音量、全屏等）可直接复用 Hook

## 重构内容 将 `VideoPlayer` 组件中重复的播放控制逻辑，替换为已有的 `useVideoPlayer` Hook，消除代码重复。 ### 变更 - **VideoPlayer.tsx**: 199行 → 123行 (-38%) - 移除组件内自建的播放状态、事件监听、进度控制逻辑 - 改用 `useVideoPlayer` Hook 统一管理播放逻辑 - 保留 ESC 关闭等组件级交互 ### 收益 - 消除重复代码，播放逻辑统一维护 - VideoPlayer 组件更聚焦于 UI 渲染 - 后续播放器能力增强（音量、全屏等）可直接复用 Hook

xiaoxia added 2 commits 2026-07-29 22:05:14 +08:00

refactor(products): VideoPlayer 改用 useVideoPlayer Hook 消除重复代码 1cc091e8d8

test(products): 补充 useVideoPlayer smoke test effd1dfdd9

gitea-actions bot commented 2026-07-29 22:12:28 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

xiaoxia added 1 commit 2026-07-29 22:30:13 +08:00

fix(lint): Prettier format VideoPlayer 65a80f2b01

auto-approve-bot commented 2026-07-29 22:33:04 +08:00

Collaborator

Copy Link

Copy Source

代码审查结果 - PR #1163

⚠️ 问题（1个需要修改）

1. apps/web/src/pages/products/components/VideoPlayer.tsx 第31行：useVideoPlayer Hook 调用缺少参数，导致状态与 Props 不同步。
   • 问题描述：组件从 product prop 中获取 videoUrl 和 duration，但 useVideoPlayer Hook 在调用时未接收任何参数。Hook 内部管理的 duration、currentTime、isPlaying 等状态依赖于视频源。当父组件传入不同的 product 时，由于 Hook 未接收到新的参数，它无法感知到视频源的变化，从而不会重置或更新内部状态。
   • 后果：当用户切换查看不同产品时，播放器可能会保留上一个视频的播放状态（如进度条、播放/暂停状态），甚至出现播放错误视频的情况，导致严重的逻辑错误和用户体验问题。
   • 修改建议：将 product 或必要的属性（如 videoUrl 和 product.duration）作为参数传递给 useVideoPlayer，例如：useVideoPlayer({ videoUrl: product.videoUrl, initialDuration: product.duration })，并在 Hook 内部依据这些参数的变化重置状态。

💡 建议（1个可选）

1. apps/web/src/pages/products/components/VideoPlayer.tsx 第40行：建议确认 formatTime 对边界值的处理。
   • 具体内容：代码使用了 duration || product.duration 作为兜底逻辑。如果 duration 为 0（例如视频正在加载中但元数据尚未就绪，且 product.duration 也为 0），formatTime 应该能正确处理 0 或 NaN 的情况，避免显示 "NaN:NaN" 或崩溃。

---

✅ 格式检查通过 | ❌ 逻辑审查需修改 | ✅ 性能无明显问题

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-07-29 14:33:04 | 模型:}

## 代码审查结果 - PR #1163 ### ⚠️ 问题（1个需要修改） 1. **apps/web/src/pages/products/components/VideoPlayer.tsx 第31行**：`useVideoPlayer` Hook 调用缺少参数，导致状态与 Props 不同步。 - **问题描述**：组件从 `product` prop 中获取 `videoUrl` 和 `duration`，但 `useVideoPlayer` Hook 在调用时未接收任何参数。Hook 内部管理的 `duration`、`currentTime`、`isPlaying` 等状态依赖于视频源。当父组件传入不同的 `product` 时，由于 Hook 未接收到新的参数，它无法感知到视频源的变化，从而不会重置或更新内部状态。 - **后果**：当用户切换查看不同产品时，播放器可能会保留上一个视频的播放状态（如进度条、播放/暂停状态），甚至出现播放错误视频的情况，导致严重的逻辑错误和用户体验问题。 - **修改建议**：将 `product` 或必要的属性（如 `videoUrl` 和 `product.duration`）作为参数传递给 `useVideoPlayer`，例如：`useVideoPlayer({ videoUrl: product.videoUrl, initialDuration: product.duration })`，并在 Hook 内部依据这些参数的变化重置状态。 ### 💡 建议（1个可选） 1. **apps/web/src/pages/products/components/VideoPlayer.tsx 第40行**：建议确认 `formatTime` 对边界值的处理。 - **具体内容**：代码使用了 `duration || product.duration` 作为兜底逻辑。如果 `duration` 为 0（例如视频正在加载中但元数据尚未就绪，且 `product.duration` 也为 0），`formatTime` 应该能正确处理 0 或 NaN 的情况，避免显示 "NaN:NaN" 或崩溃。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ✅ 性能无明显问题 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-07-29 14:33:04 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

auto-approve-bot approved these changes 2026-07-29 22:33:16 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-07-29 22:33:16 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

xiaoxia merged commit 696cdda87b into develop 2026-07-30 00:25:18 +08:00

gitea-actions bot commented 2026-07-30 00:27:40 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1163 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 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#1163