Files
party-player/public/player/index.html
T
simonandClaude Opus 5 cc6ea58c7c Make screen capture work in Firefox
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
2026-08-10 21:36:58 +02:00

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>