diff --git a/CHANGELOG.md b/CHANGELOG.md index 8cdc954..d9ed53c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## 4.9.18 - 2026-07-29 + +- 修复移动端播放器控制栏在窄屏下被裁切、最右侧“系统全屏”按钮不可见的问题(#224)。 +- 控制栏现在根据播放器自身宽度进入紧凑布局:隐藏窄屏音量入口、压缩间距,并在极窄播放器中只显示当前播放时间;画中画、AirPlay、Cast、网页全屏与系统全屏按钮继续保留。 +- 新增移动端播放器控制栏回归测试,锁定两个全屏入口在窄屏下不会再次被可选播放按钮挤出可视区。 + ## 4.9.17 - 2026-07-29 - 新增基于主内容时长残差的组合式 M3U8 插播检测;残差只作为辅助证据,单个 `.033/.333/.867` 等合法分片不再被直接删除。 diff --git a/app-release.json b/app-release.json index 19e40b1..5a6b90d 100644 --- a/app-release.json +++ b/app-release.json @@ -4,8 +4,18 @@ "name": "KVideo", "branch": "main" }, - "currentVersion": "4.9.17", + "currentVersion": "4.9.18", "releases": [ + { + "version": "4.9.18", + "publishedAt": "2026-07-29", + "title": "修复移动端系统全屏按钮", + "notes": [ + "修复移动端播放器控制栏在窄屏下被裁切、最右侧系统全屏按钮不可见的问题(#224)。", + "控制栏按播放器自身宽度切换紧凑布局,窄屏隐藏音量入口并压缩间距,极窄播放器只显示当前播放时间。", + "画中画、AirPlay、Cast、网页全屏与系统全屏按钮全部保留,并新增响应式控制栏回归测试。" + ] + }, { "version": "4.9.17", "publishedAt": "2026-07-29", diff --git a/app/styles/video-player.css b/app/styles/video-player.css index 16e5db2..c66958b 100644 --- a/app/styles/video-player.css +++ b/app/styles/video-player.css @@ -1,4 +1,8 @@ /* Video Player Components */ +.kvideo-container { + container-type: inline-size; +} + .spinner { width: 48px; height: 48px; @@ -435,3 +439,54 @@ cursor: pointer; touch-action: manipulation; } + +/* + * Keep fullscreen actions visible when the player itself becomes narrow. + * Container queries are used instead of viewport queries because the player + * can also be narrow inside the desktop player/sidebar grid. + */ +@container (max-width: 36rem) { + .kvideo-container .player-controls-bar { + padding: 0.5rem; + } + + .kvideo-container .player-controls-row { + gap: 0.25rem; + } + + .kvideo-container .player-controls-left { + gap: 0.375rem; + } + + .kvideo-container .player-volume-control { + display: none; + } + + .kvideo-container .player-controls-right { + flex: 0 0 auto; + gap: 0.25rem; + } + + .kvideo-container .player-time-display { + flex: 1 1 auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 0.75rem; + } +} + +@container (max-width: 24rem) { + .kvideo-container .player-controls-row { + gap: 0.125rem; + } + + .kvideo-container .player-controls-left, + .kvideo-container .player-controls-right { + gap: 0.25rem; + } + + .kvideo-container .player-duration-display { + display: none; + } +} diff --git a/components/player/desktop/DesktopControls.tsx b/components/player/desktop/DesktopControls.tsx index 3ffb46a..1474e57 100644 --- a/components/player/desktop/DesktopControls.tsx +++ b/components/player/desktop/DesktopControls.tsx @@ -73,8 +73,8 @@ export function DesktopControls(props: DesktopControlsProps) { /> {/* Controls Bar */} -