feat(products): 成片库视频内联播放，去掉弹窗 + 自适应比例 #1576

Merged

xiaoxia merged 1 commits from feat/product-inline-player into develop 2026-08-31 16:55:15 +08:00

Conversation 2 Commits 1 Files Changed 3

+118 -46

xiaoxia commented 2026-08-31 16:40:33 +08:00

Owner

Copy Link

Copy Source

改动内容

去掉弹窗播放，改为内联播放

• ProductCard.tsx：缩略图区域从 <img> + 播放按钮覆盖层改为 <video> 元素
  • 点击播放按钮 → 内联播放，显示原生 controls
  • 再次点击暂停，onEnded 回到缩略图状态
  • videoUrl 加载失败自动降级为缩略图
• ProductLibrary.tsx：移除 playingProduct 状态和 VideoPlayer 弹窗组件引用

消除视频空白

• products.css：.xx-product-thumb 去掉固定 aspect-ratio: 9/16 和 max-height: 220px
• 视频比例通过 onLoadedMetadata 动态获取 videoWidth/videoHeight，设置容器 aspect-ratio
• 获取不到实际比例时默认 16:9（横屏）
• 新增 .xx-product-thumb-video 样式：object-fit: contain，确保不裁剪
• 卡片网格保持 4 列不变，卡片高度自适应视频内容

未改动

• 后端接口
• 批量操作、筛选、下载、分享、删除等功能
• VideoPlayer.tsx 文件保留（详情页 DetailVideoPlayer 仍在使用）

## 改动内容 ### 去掉弹窗播放，改为内联播放 - **ProductCard.tsx**：缩略图区域从 `<img>` + 播放按钮覆盖层改为 `<video>` 元素 - 点击播放按钮 → 内联播放，显示原生 `controls` - 再次点击暂停，`onEnded` 回到缩略图状态 - `videoUrl` 加载失败自动降级为缩略图 - **ProductLibrary.tsx**：移除 `playingProduct` 状态和 `VideoPlayer` 弹窗组件引用 ### 消除视频空白 - **products.css**：`.xx-product-thumb` 去掉固定 `aspect-ratio: 9/16` 和 `max-height: 220px` - 视频比例通过 `onLoadedMetadata` 动态获取 `videoWidth/videoHeight`，设置容器 `aspect-ratio` - 获取不到实际比例时默认 `16:9`（横屏） - 新增 `.xx-product-thumb-video` 样式：`object-fit: contain`，确保不裁剪 - 卡片网格保持 4 列不变，卡片高度自适应视频内容 ### 未改动 - 后端接口 - 批量操作、筛选、下载、分享、删除等功能 - VideoPlayer.tsx 文件保留（详情页 DetailVideoPlayer 仍在使用）

xiaoxia added 1 commit 2026-08-31 16:40:33 +08:00

feat(products): 成片库视频内联播放，去掉弹窗 + 自适应比例 ... 8437d4060b

- ProductCard: 缩略图区域改为 <video> 内联播放，点击播放按钮原生 controls
- 视频比例通过 onLoadedMetadata 动态获取，获取不到时默认 16:9
- ProductLibrary: 移除 playingProduct 状态和 VideoPlayer 弹窗组件
- products.css: .xx-product-thumb 去掉固定 9:16 aspect-ratio，
  新增 .xx-product-thumb-video 样式（object-fit: contain）
- 卡片网格保持 4 列，卡片高度自适应视频内容

gitea-actions bot commented 2026-08-31 16:44:39 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

xiaoxia merged commit 42939a557f into develop 2026-08-31 16:55:15 +08:00

gitea-actions bot commented 2026-08-31 16:59:15 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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

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

2 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1576