Files

TerryM 9821f03929 feat(video): add inline volume control to MessageInlineVideo

- Add mute toggle button (Volume2/VolumeX icons) to the custom control bar.
- Add an always-visible inline straight-line volume slider on desktop;
  mobile keeps mute toggle only and relies on system volume keys.
- Slider at 0 auto-mutes; unmuting from zero restores volume to 1.
- Sync isMuted/volume state via the video volumechange event.

Verified in browser at /browse?type=video: drag slider updates
video.volume, mute toggle preserves volume across on/off.

2026-06-07 19:53:49 +08:00

2.2 KiB

Raw Blame History

title, type, date

title	type	date
影片播放音量调整按钮 — Quick Fix	quick-fix	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: 以上显示），移动端通过按钮 + 系统音量键操作，避免在小气泡里拥挤。

2.2 KiB Raw Blame History Unescape Escape