41 lines
2.2 KiB
Markdown
41 lines
2.2 KiB
Markdown
|
---
|
|||
|
|
title: "影片播放音量调整按钮 — Quick Fix"
|
|||
|
|
type: quick-fix
|
|||
|
|
date: 2026-06-07
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 影片播放音量调整按钮 — Quick Fix
|
|||
|
|
|
|||
|
|
## Bug
|
|||
|
|
`MessageInlineVideo` 的自定义控制条只有播放/暂停、进度条、全屏按钮，缺少音量控制。用户无法在播放器内静音或调节音量。
|
|||
|
|
|
|||
|
|
## Root Cause
|
|||
|
|
功能缺失。原生 `<video>` 控件被关闭以统一 iOS Safari 体验，但替代实现没有补回音量控制。
|
|||
|
|
|
|||
|
|
## Fix
|
|||
|
|
在底部控制条「剩余时间」与「全屏按钮」之间加入音量控制：
|
|||
|
|
|
|||
|
|
- 静音切换按钮（`Volume2` / `VolumeX`），点击直接 toggle `video.muted`，桌面、移动均可用。
|
|||
|
|
- 桌面端始终可见的内联直线音量滑块（`<input type="range">`，0~1，step 0.05），紧贴喇叭按钮右侧；不再用 hover 弹出，调音量像 YouTube 一样直接拖一条直线。
|
|||
|
|
- 滑到 0 自动静音；从 0 解除静音时自动恢复到 1，避免「点开还是没声音」的体验。
|
|||
|
|
- 新增 `isMuted` / `volume` state，监听 `volumechange` 与初始挂载同步，确保按钮图标与滑块位置始终一致。
|
|||
|
|
- 移动端只显示静音按钮，音量大小让系统音量键负责。
|
|||
|
|
|
|||
|
|
### Files Modified
|
|||
|
|
- `src/components/messageStream/MessageInlineVideo.tsx` — 引入 `Volume2/VolumeX` 图标、新增音量 state / `volumechange` 监听 / `toggleMute` / `handleVolumeChange`，在控制条加入音量按钮 + hover 音量滑块。
|
|||
|
|
|
|||
|
|
## Verification
|
|||
|
|
- `npx tsc --noEmit` 通过（严格模式 + 未使用变量检查）。
|
|||
|
|
- `npm run format` 通过。
|
|||
|
|
- `npm test` 全部 49 测试通过。
|
|||
|
|
- 浏览器实测 `/browse?type=video`：
|
|||
|
|
- 拖滑块 0.3：`video.volume=0.3`，slider 同步 0.3 ✓
|
|||
|
|
- 点喇叭按钮：`muted=true`，slider 显示 0 ✓
|
|||
|
|
- 再点：`muted=false`，volume 保留 0.3 ✓
|
|||
|
|
- 滑块拖到 0：`muted=true`、`volume=0` ✓
|
|||
|
|
|
|||
|
|
## Notes
|
|||
|
|
- 仅修改 `MessageInlineVideo`，全屏播放器 `VideoPlayer.tsx` 复用同一组件，因此全屏模式同时获得音量控制。
|
|||
|
|
- 没有改变 `autoPlay` 默认行为；如未来 iOS autoplay 受限，可考虑默认 `muted` 起播再由用户点按钮解除。
|
|||
|
|
- 滑块在移动端隐藏（仅 `md:` 以上显示），移动端通过按钮 + 系统音量键操作，避免在小气泡里拥挤。
|