fix(ui): prevent playback controls overlapping in narrow windows
## Problem and outcome At 260–300px viewport widths, the playback audio group could shrink below its controls and overlap the window buttons. The shared flex layout now respects each group's minimum content width and wraps only when the groups cannot fit. Ordinary phone layouts remain on one row. The change also removes the unnecessary macOS-specific troubleshooting section added in v1.5.4 and updates the playback layout contract. ## Validation - `npm run check`: TypeScript, 71 test files / 1003 tests, and the production Web build passed with the interaction prototype excluded. - Documentation checks, repository hygiene and the complete website/documentation build passed. - Browser geometry checks at 260, 300, 320, 375, 440, 480, 768 and 1280px found no overlapping or clipped controls. Viewports from 320px retained one row. ## Release notes ### 中文 这是一个小修复版本，解决极窄窗口中播放控件重叠、容易误触的问题。 #### 修复 - 播控优先保持单行，音量滑条随可用空间缩短；空间不足时，音量与窗口操作分组换行，保留全部控件。 - 精简排查文档，移除上版多余的 macOS 音频专项说明，保留通用排查入口。 #### 更新说明 更新 App 或已部署站点后刷新页面即可。通信协议、配置和存储格式保持兼容。 ### English This small maintenance update fixes overlapping playback controls in very narrow windows. #### Fixes - Playback controls prefer one row and shorten the volume slider to fit. When space runs out, the audio and window controls wrap as separate groups, keeping every control accessible. - Removed the unnecessary macOS-specific audio troubleshooting section added in the previous release; general troubleshooting remains available. #### Updating Update the App or your deployed site, then refresh the page. Wire protocols, configuration and storage formats remain compatible.
This commit is contained in:
4 files changed
+7
-45
No files matched your search
@@ -10,7 +10,6 @@ collect a diagnostic report if the problem persists.
|
||||
| What you see | Try this |
|
||||
| --- | --- |
|
||||
| Picture but no sound | Unmute the video. The host should choose a source with shareable audio; if sound was disabled, stop and start sharing with it enabled. App window/screen capture keeps that setting when switching sources. |
|
||||
| No audio option on a Mac | Check whether you are using the browser picker or App capture. See [macOS audio options](#no-audio-option-on-macos). |
|
||||
| No screen picker | Allow the browser or App to record the screen when the OS asks. Browser capture needs HTTPS or `localhost`; try sharing from a desktop computer. |
|
||||
| No App windows or screens listed | Check the message in the source picker, then follow [App source troubleshooting](#app-windows-or-screens-are-missing). **Browser** → **Browser picker** also offers browser capture. |
|
||||
| Yellow outline around the shared window or screen | This is Windows' capture indicator. See [capture borders](#yellow-capture-border-on-windows) for Windows 11 controls and an optional Windows 10 workaround. |
|
||||
@@ -45,28 +44,6 @@ Local-network permission lets the page contact the App. It is separate from
|
||||
the WebRTC media settings described below. An unreachable App alone does not
|
||||
prove that permission was denied.
|
||||
|
||||
## No audio option on macOS
|
||||
|
||||
**Browser capture:** try an up-to-date Chrome, select a **Chrome tab**, and enable
|
||||
**Share tab audio**. Window and entire-screen audio need newer platform support:
|
||||
Google documents **macOS 14.2 or later and Chrome 142 or later** for that feature.
|
||||
Safari and Firefox currently do not provide screen-share audio through the
|
||||
browser picker. See [Google's requirements](https://workspaceupdates.googleblog.com/2025/12/share-devices-audio-when-presenting.html)
|
||||
and [browser audio support](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#browser_compatibility).
|
||||
|
||||
**App capture:** keep Piik App running and open the site through it. Choose an
|
||||
application/window or screen in Piik's source picker; **Application sound** or
|
||||
**System sound** appears below a loaded source list. The **Browser** tab instead
|
||||
leaves audio selection to the browser's own dialog. For an unavailable App or
|
||||
empty list, follow [App source troubleshooting](#app-windows-or-screens-are-missing).
|
||||
The Mac App includes native audio capture, but physical Mac testing is still pending.
|
||||
|
||||
In **System Settings → Privacy & Security → Screen & System Audio Recording**,
|
||||
allow the browser or capture app named by the system prompt. Follow any request
|
||||
to quit and reopen it, then share again. Older macOS versions may call this
|
||||
**Screen Recording**. [Apple's permission guide](https://support.apple.com/guide/mac-help/mchld6aa7d23/mac)
|
||||
explains these settings.
|
||||
|
||||
## Yellow capture border on Windows
|
||||
|
||||
Windows draws this outline to identify the window or display being captured.
|
||||
|
||||
@@ -10,7 +10,6 @@
|
||||
| 你遇到的情况 | 可以先试什么 |
|
||||
| --- | --- |
|
||||
| 有画面，没声音 | 先取消视频静音。房主应选择支持分享声音的来源；如果开始时关闭了声音，请停止后重新开始并打开声音。通过 App 采集窗口或屏幕时，切换来源会保留原来的声音设置。 |
|
||||
| Mac 上没有声音选项 | 先区分浏览器选择器与 App 采集，查看 [macOS 声音选项](#macos-没有声音选项)。 |
|
||||
| 没有屏幕选择弹窗 | 按系统提示允许浏览器或 App 录制屏幕。浏览器采集需要 HTTPS 或 `localhost`，请在电脑上尝试分享。 |
|
||||
| App 的窗口或屏幕列表为空 | 先查看选源器中的提示，再按 [App 来源排查](#app-找不到窗口或屏幕) 操作；也可以选 **浏览器** → **浏览器选择器** 使用浏览器采集。 |
|
||||
| 分享的窗口或屏幕周围出现黄框 | 这是 Windows 的采集提示。查看[采集边框说明](#windows-分享时出现黄框)，了解 Windows 11 的开关和 Windows 10 的可选处理方法。 |
|
||||
@@ -42,23 +41,6 @@
|
||||
本地网络权限用于让网页连接 App，与下文的 WebRTC 媒体设置不同。
|
||||
仅凭 App 未连接，不能确定是权限被拒绝。
|
||||
|
||||
## macOS 没有声音选项
|
||||
|
||||
**浏览器采集：** 可以先用最新版 Chrome 选择 **Chrome 标签页**，并打开 **分享标签页音频**。
|
||||
窗口和整个屏幕的声音需要较新的平台支持：Google 公布的条件是 **macOS 14.2 及以上、
|
||||
Chrome 142 及以上**。Safari 和 Firefox 目前不提供浏览器屏幕共享音频。
|
||||
详见 [Google 的版本要求](https://workspaceupdates.googleblog.com/2025/12/share-devices-audio-when-presenting.html)
|
||||
和 [浏览器音频支持情况](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#browser_compatibility)（英文）。
|
||||
|
||||
**App 采集：** 保持 Piik App 运行，并通过它打开站点。在 Piik 选源器中选择应用／窗口或屏幕，
|
||||
来源列表加载后，底部会出现 **应用声音** 或 **系统声音** 开关。选 **浏览器** 分类时，
|
||||
声音由浏览器自己的弹窗选择。若 App 不可用或列表为空，先按 [App 来源排查](#app-找不到窗口或屏幕) 处理。
|
||||
Mac App 已有原生音频采集实现，实机测试仍待完成。
|
||||
|
||||
在 **系统设置 → 隐私与安全性 → 屏幕与系统音频录制** 中，允许系统提示所指的浏览器或采集程序。
|
||||
如果系统要求退出并重新打开程序，照提示完成后再分享。旧版 macOS 的选项可能叫 **屏幕录制**。
|
||||
具体操作见 [Apple 权限说明](https://support.apple.com/zh-cn/guide/mac-help/mchld6aa7d23/mac)。
|
||||
|
||||
## Windows 分享时出现黄框
|
||||
|
||||
Windows 用黄色边框标出正在采集的窗口或屏幕。在支持的 Windows 版本上，
|
||||
|
||||
@@ -110,9 +110,11 @@ no separate remembered playback intent for source changes or reconnects.
|
||||
Adding, replacing or removing audio on the same video binding updates only its
|
||||
audio consumer; it preserves current-frame proof and Viewer-local playback.
|
||||
|
||||
The bar spans the screen's lower edge in one row. Narrow screens shorten the
|
||||
volume slider and compact horizontal spacing and button widths, retaining 44px
|
||||
control height and all actions; the percentage readout hides on narrow screens. Playing video hides the bar
|
||||
The bar spans the screen's lower edge, preferring one row. Narrow screens shorten
|
||||
the volume slider and compact horizontal spacing and button widths, retaining
|
||||
44px control height and all actions; the percentage readout hides on narrow
|
||||
screens. If the control groups cannot fit, they wrap without overlapping.
|
||||
Playing video hides the bar
|
||||
after two idle seconds, following [Media Chrome's default](https://github.com/muxinc/media-chrome/blob/main/docs/src/pages/docs/en/components/media-controller.md#autohide).
|
||||
Pause or unavailable playback keeps it visible. Control hover, keyboard focus,
|
||||
dragging and an open tooltip hold it open; mouse movement reveals it, and a
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
inset: auto 0 0;
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px max(6px, env(safe-area-inset-bottom));
|
||||
@@ -27,7 +28,7 @@
|
||||
.lr-playback .lr-btn:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) { transform: translateY(-2px); background: var(--wall-2); }
|
||||
.lr-playback .lr-btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(2px) scale(.95); transition-duration: 80ms; }
|
||||
.lr-playback .lr-btn[aria-pressed="true"] { background: var(--wall-2); }
|
||||
.lr-playback-audio { display: flex; align-items: center; flex: 1; gap: 8px; min-width: 0; }
|
||||
.lr-playback-audio { display: flex; align-items: center; flex: 1; gap: 8px; min-width: min-content; }
|
||||
.lr-playback-separator { flex: none; width: 1px; height: 20px; background: currentColor; opacity: .22; }
|
||||
.lr-playback-volume { flex: 0 1 144px; min-width: 32px; }
|
||||
.lr-playback-volume input { width: 100%; min-width: 0; height: 44px; padding: 0; margin: 0; accent-color: var(--action); cursor: pointer; }
|
||||
|
||||
Reference in new issue
Block a user