"), or "".
+// How a live stream is doing: frames shown, Mac-to-headset delay, bitrate, and
+// whether the network made it step down (fewer frames, then fewer pixels).
+function mvHealth(st) {
+ if (!st) return "";
+ const x = st.stats || {}, c = st.controller || {}, bits = [];
+ if (x.fps) bits.push(`${Math.round(x.fps)} fps`);
+ if (x.total && x.total.p50 != null) bits.push(`${Math.round(x.total.p50)} ms`);
+ if (x.mbps) bits.push(`${x.mbps} Mbit/s`);
+ if (c.tier > 0) bits.push(`weak link: ${c.fps} fps${c.scale < 1 ? `, ${Math.round(c.scale * 100)}% size` : ""}`);
+ return bits.length ? " · " + esc(bits.join(" · ")) : "";
+}
+function mvRow(src, title, sub, w, h, streaming, st) {
return `${esc(title)}
-
${esc(sub)}${streaming ? ' · in the headset' : ""}
- ${streaming ? `
`
+
${esc(sub)}${streaming ? ' · in the headset' + mvHealth(st) : ""}
Then press Refresh. macOS may ask you to reopen Frame Control.
`;
+ const liveAs = src => live.has(src) ? src : src.startsWith("window:") && live.has("separate:" + src.slice(7)) ? "separate:" + src.slice(7) : "";
$("mvDisplays").innerHTML = (s.displays || []).map(d =>
- mvRow(d.src, `Whole screen: ${d.name}`, `${d.w}×${d.h}${d.main ? " · main display" : ""}`, d.w, d.h, live.has(d.src))).join("");
+ mvRow(d.src, `Whole screen: ${d.name}`, `${d.w}×${d.h}${d.main ? " · main display" : ""}`, d.w, d.h, liveAs(d.src), byStream(liveAs(d.src)))).join("");
const wins = s.windows || [];
$("mvWinCount").textContent = wins.length ? `${wins.length}` : "";
$("mvWindows").innerHTML = !s.screen ? `Windows appear here once Screen Recording is allowed.
`
- : wins.length ? wins.map(w => mvRow(w.src, w.title || w.app, `${w.title ? w.app + " · " : ""}${w.w}×${w.h}`, w.w, w.h, live.has(w.src))).join("")
+ : wins.length ? wins.map(w => mvRow(w.src, w.title || w.app, `${w.title ? w.app + " · " : ""}${w.w}×${w.h}`, w.w, w.h, liveAs(w.src), byStream(liveAs(w.src)))).join("")
: `No windows open on this Mac's current desktop.
`;
+ // Keep the numbers fresh while something is in the headset and the card is on screen.
+ clearTimeout(mvTimer);
+ const tick = () => { mvTimer = document.hidden || !box.offsetParent ? setTimeout(tick, 3000) : (loadMacView(), 0); };
+ if (live.size) mvTimer = setTimeout(tick, 3000);
}
$("mvRefresh").onclick = () => loadMacView(true);
+$("mvSeparate").checked = localStorage.getItem("mvSeparate") !== "0";
+$("mvSeparate").onchange = e => localStorage.setItem("mvSeparate", e.target.checked ? "1" : "0");
$("macview").onclick = async e => {
const b = e.target.closest("[data-mv]"); if (!b) return;
const src = b.dataset.src;
if (b.dataset.mv === "show") {
+ const as = $("mvSeparate").checked && src.startsWith("window:") ? "separate:" + src.slice(7) : src;
await act(`Show ${b.dataset.title} in the headset`, async () => {
- const r = await api("/api/macview", { action: "show", src, quality: $("mvQuality").value,
+ const r = await api("/api/macview", { action: "show", src: as, quality: $("mvQuality").value,
w: +b.dataset.w || undefined, h: +b.dataset.h || undefined });
return { message: `${b.dataset.title} is a panel in the headset now. Float it with the SteamVR dashboard.`, ...r };
}, b);
diff --git a/ui/mac-view.html b/ui/mac-view.html
index d56ecf9..4d639f4 100644
--- a/ui/mac-view.html
+++ b/ui/mac-view.html
@@ -16,11 +16,14 @@
font: 15px/1.4 system-ui, sans-serif; color: #eee; background: rgba(20,22,26,.88);
padding: 8px 14px; border-radius: 10px; pointer-events: none; transition: opacity .4s; }
#note[hidden] { display: block; opacity: 0; }
+ #hud { position: fixed; left: 8px; top: 8px; font: 12px/1.35 ui-monospace, monospace; color: #dfe;
+ background: rgba(0,0,0,.72); padding: 6px 9px; border-radius: 6px; pointer-events: none; white-space: pre; }
Connecting to the Mac…
+