Firefox has no tab capture, so preferCurrentTab is silently dropped and the operator can only share a window or a screen. Neither maps onto the viewport the way the crop assumes, so screenshots came out offset by the browser chrome — and every failure was swallowed by a bare catch, leaving no way to tell why. Check the shared surface and only crop when the viewport covers it: exact for Chrome's tab capture, true for a screen while the page is fullscreen. Test that by dimensions rather than document.fullscreenElement, which F11 leaves null. Start now requests fullscreen, after getDisplayMedia so the click's transient activation goes to the fragile call. Reasons surface in a corner notice and the console, and the check reruns per grab so leaving fullscreen says so. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01H9v2Xoa6eoeGYpK6gp95k9
44 lines
1.4 KiB
HTML
44 lines
1.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Party Player</title>
|
|
<link rel="stylesheet" href="/player/player.css" />
|
|
</head>
|
|
<body>
|
|
<div id="backgrounds"></div>
|
|
|
|
<!-- Frozen screenshots of the frame. A sibling, not a child, of #frameMover:
|
|
these are positioned against the screen, not the moving frame. -->
|
|
<div id="stills"></div>
|
|
|
|
<!-- #frameMover owns the motion transform and nothing else, so future
|
|
animations can nest their own transform layers without conflict. -->
|
|
<div id="frameMover">
|
|
<div id="frameSkin">
|
|
<div class="deck" data-deck="a"><div id="deck-a"></div></div>
|
|
<div class="deck" data-deck="b"><div id="deck-b"></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Offscreen, muted, 1x1: cues queued videos purely to read their length. -->
|
|
<div id="probe"><div id="probe-player"></div></div>
|
|
|
|
<div id="gate">
|
|
<div class="gate-inner">
|
|
<h1>Party Player</h1>
|
|
<p id="gate-hint">Loading queue…</p>
|
|
<button id="start" type="button" disabled>Start</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="status" hidden>reconnecting…</div>
|
|
|
|
<!-- Why screenshots are missing or misaligned. Set by the capture layer. -->
|
|
<div id="notice" hidden></div>
|
|
|
|
<script type="module" src="/player/player.js"></script>
|
|
</body>
|
|
</html>
|