simonandClaude Opus 5
e031ebda1a
Waiting for the shuffle bag to land on the animation you are working on makes testing one of them tedious. The queue page now carries an Animation row next to Background: Auto keeps the per-track cycle, any other button pins the player to that animation until the mode changes again. The animation names live in config.js alongside their labels, so the server can validate them and the queue page can label its buttons; motion.js keys its registry by the same names. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Tg15tLAuT6NrCE1ZxKVgDB
55 lines
1.3 KiB
HTML
55 lines
1.3 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 — Queue</title>
|
|
<link rel="stylesheet" href="/queue/queue.css" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Queue</h1>
|
|
<div id="status" class="offline">offline</div>
|
|
</header>
|
|
|
|
<form id="add-form" autocomplete="off">
|
|
<input
|
|
id="url"
|
|
type="text"
|
|
placeholder="Paste a YouTube URL…"
|
|
aria-label="YouTube URL"
|
|
required
|
|
/>
|
|
<button type="submit">Add</button>
|
|
</form>
|
|
<p id="error" hidden></p>
|
|
|
|
<div id="totals">
|
|
<div class="total">
|
|
<span class="label">Remaining</span>
|
|
<span class="value" id="remaining">0:00</span>
|
|
</div>
|
|
<div class="total">
|
|
<span class="label">Total</span>
|
|
<span class="value" id="total">0:00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<ol id="list"></ol>
|
|
<p id="empty">Nothing queued yet.</p>
|
|
|
|
<footer>
|
|
<div class="switcher">
|
|
<span class="label">Background</span>
|
|
<div id="backgrounds"></div>
|
|
</div>
|
|
<div class="switcher">
|
|
<span class="label">Animation</span>
|
|
<div id="animations"></div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script type="module" src="/queue/queue.js"></script>
|
|
</body>
|
|
</html>
|