diff --git a/docs/superpowers/specs/2026-03-10-player-ui-redesign.md b/docs/superpowers/specs/2026-03-10-player-ui-redesign.md new file mode 100644 index 0000000..a8c81bd --- /dev/null +++ b/docs/superpowers/specs/2026-03-10-player-ui-redesign.md @@ -0,0 +1,90 @@ +# Player UI Redesign Spec + +## Goal +重写播放器 UI:统一自定义控制层(点击显示/3s 自动隐藏),将热度进度条和缩略图预览整合进播放器内部,删除播放器下方独立的 HeatProgressBar。 + +## Layout + +``` ++------------------------------------------+ +│ [pip] │ ← 顶部栏(半透明黑底渐变) +│ │ +│ [▶/⏸] │ ← 中心播放/暂停按钮 +│ │ +│ [缩略图 + 时间] │ ← 拖拽时浮出,紧贴进度条上方 +│ [00:12] [════════●═══] [10:23] [HD] [⛶] │ ← 底部栏(半透明黑底渐变) ++------------------------------------------+ +``` + +## Architecture + +### Files Changed + +| File | Action | Notes | +|---|---|---| +| `components/NativeVideoPlayer.tsx` | Rewrite | 全量自定义控制层,整合热度图逻辑 | +| `components/VideoPlayer.tsx` | Modify | 新增 bvid/cid props,向下透传 | +| `app/video/[bvid].tsx` | Modify | 删除 HeatProgressBar 及相关 state | +| `components/HeatProgressBar.tsx` | Delete | 逻辑搬入 NativeVideoPlayer | + +### NativeVideoPlayer Props + +```ts +interface Props { + playData: PlayUrlResponse | null; + qualities: { qn: number; desc: string }[]; + currentQn: number; + onQualityChange: (qn: number) => void; + onFullscreen: () => void; + onMiniPlayer?: () => void; + style?: object; + bvid?: string; // NEW: for heatmap + thumbnail + cid?: number; // NEW: for heatmap + thumbnail +} +``` + +`onProgress` / `seekTo` props 删除(进度状态内部管理) + +### Internal State + +| State | Type | Description | +|---|---|---| +| `resolvedUrl` | string? | async MPD/durl URI | +| `showControls` | boolean | 控制层可见性 | +| `paused` | boolean | 播放/暂停 | +| `currentTime` | number | 当前播放进度(秒) | +| `duration` | number | 视频总时长 | +| `isSeeking` | boolean | 是否正在拖拽进度条 | +| `touchX` | number? | 拖拽时的 x 坐标(相对进度条左端) | +| `heatSegments` | number[] | 热度图归一化数据 | +| `shots` | VideoShotData? | 缩略图雪碧图数据 | + +### Control Layer Behavior + +- **点击视频区域** → toggle `showControls`,重置 3s 隐藏定时器 +- **拖拽进度条** → `isSeeking=true`,暂停定时器;松手 → seek,`isSeeking=false`,重置定时器 +- **点击播放/暂停** → toggle `paused`,重置定时器 +- **切换清晰度** → Modal 显示时不自动隐藏控制层 + +### Progress Bar Layout (bottom bar) + +``` +[▶/⏸] [00:12] [track with heatmap + ball] [10:23] [HD] [⛶] +``` + +- 热度图色段 + 已播进度半透明遮罩(同 HeatProgressBar 现有实现) +- 拖拽时进度条 ball 放大至 16px,并在上方显示缩略图 + 时间 +- 底部栏背景:`linear-gradient(transparent → rgba(0,0,0,0.7))`(使用 expo-linear-gradient) + +### Thumbnail Preview + +- 触发:`isSeeking=true` 且 `shots` 数据已加载 +- 位置:进度条上方,左右不超出边界 +- 内容:雪碧图裁切(同 HeatProgressBar 现有实现)+ 时间文字 + +## Deleted + +- `components/HeatProgressBar.tsx` +- `[bvid].tsx` 中的 `currentTime`、`duration`、`seekCmd` state +- `[bvid].tsx` 中的 `` JSX 及 import +- `VideoPlayer.tsx` 中的 `onProgress`、`seekTo` props