diff --git a/docs/guide/troubleshooting.md b/docs/guide/troubleshooting.md index 76f675e..1ad6276 100644 --- a/docs/guide/troubleshooting.md +++ b/docs/guide/troubleshooting.md @@ -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. diff --git a/docs/guide/troubleshooting.zh-CN.md b/docs/guide/troubleshooting.zh-CN.md index 00d803b..f782a6f 100644 --- a/docs/guide/troubleshooting.zh-CN.md +++ b/docs/guide/troubleshooting.zh-CN.md @@ -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 版本上， diff --git a/docs/standards/presentation-lifecycle.md b/docs/standards/presentation-lifecycle.md index 678fc57..2dee695 100644 --- a/docs/standards/presentation-lifecycle.md +++ b/docs/standards/presentation-lifecycle.md @@ -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 diff --git a/src/client/components/living/playback-controls.css b/src/client/components/living/playback-controls.css index bdeb629..dab5070 100644 --- a/src/client/components/living/playback-controls.css +++ b/src/client/components/living/playback-controls.css @@ -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; }