← back to Dead Agentabrams
Music room UI: tuck chapters, camera views + Museum Label into the controls drawer too — maximally clean default stage (TK-11178)
ecd6824b954c85d031928e7d796ef6816ae90882 · 2026-09-03 11:05:08 -0700 · Steve (via Claude)
Default stage is now just: title + collapsed Music Room bar (top-left), collapsed Videos bar + hamburger (top-right), and the scene/video. Everything else lives in the right drawer: chapters -> cameras -> playback/mode toggles -> sliders -> Museum Label. Verified via Playwright (drawer children order + slide-in).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012XLgczMhQr91Ad5jL38JM4
Files touched
Diff
commit ecd6824b954c85d031928e7d796ef6816ae90882
Author: Steve (via Claude) <steve@designerwallcoverings.com>
Date: Thu Sep 3 11:05:08 2026 -0700
Music room UI: tuck chapters, camera views + Museum Label into the controls drawer too — maximally clean default stage (TK-11178)
Default stage is now just: title + collapsed Music Room bar (top-left), collapsed Videos bar + hamburger (top-right), and the scene/video. Everything else lives in the right drawer: chapters -> cameras -> playback/mode toggles -> sliders -> Museum Label. Verified via Playwright (drawer children order + slide-in).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012XLgczMhQr91Ad5jL38JM4
---
room/index.html | 68 +++++++++++++++++++++++++++++++++++++++++++++------------
1 file changed, 54 insertions(+), 14 deletions(-)
diff --git a/room/index.html b/room/index.html
index 385f8c7..e659ab5 100644
--- a/room/index.html
+++ b/room/index.html
@@ -34,6 +34,15 @@
/* YouTube fallback = the video IS the show → let the concert footage dominate the frame */
#stage.video-bg.yt-hero #sky{opacity:.04}
#stage.video-bg.yt-hero #scene{opacity:.16}
+ /* ---- Videos-panel backdrop — a SEPARATE layer from #venueVideo/TK-11178's
+ archive-tied backdrop, so picking a video in the standalone Videos panel
+ never touches that system's state. Muted (the panel's own iframe carries sound). ---- */
+ #vrBackdrop{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;background:#000;opacity:0;transition:opacity 1.4s ease}
+ #vrBackdrop iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
+ width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;border:0;pointer-events:none}
+ #stage.vr-bg #vrBackdrop{opacity:1}
+ #stage.vr-bg #sky{opacity:.12}
+ #stage.vr-bg #scene{opacity:.42}
#stage.video-bg.yt-hero #orb{opacity:.5}
.btn:disabled,button:disabled{opacity:.42;cursor:not-allowed}
/* ---- Controls in a collapsed RIGHT drawer, opened by the top-right hamburger (TK-11178 UI) ---- */
@@ -50,6 +59,11 @@
#dock .group.pillrow .toggle{flex-direction:column; align-items:stretch; gap:8px}
#dock .toggle .btn{justify-content:flex-start}
#stage.controls-open #dock{transform:translateX(0)}
+ /* chapters + cams + museum label now live INSIDE the drawer → make them flow as groups */
+ #dock .chapters, #dock .cams{position:static;left:auto;right:auto;top:auto;bottom:auto;transform:none;
+ display:flex;flex-direction:column;gap:8px;z-index:auto;backdrop-filter:none;max-width:none}
+ #dock .chapters button, #dock .cams button, #dock .label-toggle{width:100%;justify-content:flex-start}
+ #dock .label-toggle{position:static;left:auto;right:auto;top:auto;bottom:auto;margin-top:2px}
/* construction-paper grain — the cutout/South-Park texture over the whole scene */
.grain{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.10;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@@ -272,6 +286,10 @@
.vr-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vr-embed:empty::after{content:'Pick a show below';display:flex;align-items:center;justify-content:center;
height:100%;color:var(--ink-dim);font-style:italic;font-size:11.5px}
+ .vr-bd-toggle{display:block;width:100%;background:rgba(40,12,16,.7);color:var(--ink-dim);
+ border:1px solid var(--panel-edge);border-radius:9px;padding:6px 10px;font-family:var(--sans);
+ font-size:11px;cursor:pointer;margin-bottom:8px}
+ .vr-bd-toggle[aria-pressed="true"]{color:var(--gold);border-color:rgba(242,182,74,.5)}
.vr-list{max-height:220px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.vr-row{display:flex;gap:9px;align-items:baseline;width:100%;text-align:left;background:none;border:0;
color:var(--ink-dim);font-family:var(--sans);font-size:11.5px;padding:6px 6px;cursor:pointer;border-radius:6px}
@@ -326,6 +344,7 @@
<!-- role removed from <main>: role="application" suppressed normal screen-reader navigation over the native controls + prose -->
<div id="venueVideo" aria-hidden="true"><div id="ytHost"></div></div>
+ <div id="vrBackdrop" aria-hidden="true"></div>
<canvas id="sky" aria-hidden="true"></canvas>
<canvas id="scene" aria-hidden="true"></canvas>
<canvas id="orb" aria-hidden="true"></canvas>
@@ -382,19 +401,17 @@
<button class="btn chrome-toggle" id="chromeBtn" aria-pressed="false">☰ Controls</button>
- <nav class="chapters" aria-label="Chapters">
- <button data-chapter="0" aria-current="true"><span class="dot" aria-hidden="true"></span>I · Departure</button>
- <button data-chapter="1"><span class="dot" aria-hidden="true"></span>II · Moon Bend</button>
- <button data-chapter="2"><span class="dot" aria-hidden="true"></span>III · Dawn Landing</button>
- </nav>
-
- <div class="cams" role="group" aria-label="Camera view">
- <button class="btn" data-cam="wide" aria-pressed="true">◈ Wide River</button>
- <button class="btn" data-cam="deck" aria-pressed="false">◈ Deck</button>
- <button class="btn" data-cam="over" aria-pressed="false">◈ Overhead</button>
- </div>
-
<div class="dock" id="dock" role="group" aria-label="Visual controls">
+ <nav class="chapters group" aria-label="Chapters">
+ <button data-chapter="0" aria-current="true"><span class="dot" aria-hidden="true"></span>I · Departure</button>
+ <button data-chapter="1"><span class="dot" aria-hidden="true"></span>II · Moon Bend</button>
+ <button data-chapter="2"><span class="dot" aria-hidden="true"></span>III · Dawn Landing</button>
+ </nav>
+ <div class="cams group" role="group" aria-label="Camera view">
+ <button class="btn" data-cam="wide" aria-pressed="true">◈ Wide River</button>
+ <button class="btn" data-cam="deck" aria-pressed="false">◈ Deck</button>
+ <button class="btn" data-cam="over" aria-pressed="false">◈ Overhead</button>
+ </div>
<div class="group pillrow">
<div class="toggle">
<button class="btn" id="playBtn" aria-pressed="true">❚❚ Pause</button>
@@ -430,9 +447,9 @@
<input type="range" id="bears" min="1" max="10" value="3" step="1" aria-valuetext="3">
</div>
</div>
+ <button class="btn label-toggle" id="labelBtn" aria-expanded="false" aria-controls="museum">🏷 Museum Label</button>
</div>
- <button class="btn label-toggle" id="labelBtn" aria-expanded="false" aria-controls="museum">🏷 Museum Label</button>
<aside class="museum" id="museum" hidden aria-label="Museum label">
<h2>Scarlet Riverboat Masquerade</h2>
<div class="meta">Generative Canvas · Live Music Archive · Authored Visual Rhythm</div>
@@ -1680,7 +1697,9 @@ const MR_VIDEOS=[
const vrToggle = document.getElementById('vrToggle');
const vrList = document.getElementById('vrList');
const vrEmbed = document.getElementById('vrEmbed');
- if (!vr || !vrToggle || !vrList || !vrEmbed) return;
+ const vrBackdrop = document.getElementById('vrBackdrop');
+ const stageEl = document.getElementById('stage');
+ if (!vr || !vrToggle || !vrList || !vrEmbed || !vrBackdrop || !stageEl) return;
function setOpen(open){
vr.dataset.open = open ? 'true' : 'false';
vrToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
@@ -1689,6 +1708,25 @@ const MR_VIDEOS=[
vrToggle.addEventListener('keydown', e => {
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); vrToggle.click(); }
});
+ function hideBackdrop(){
+ stageEl.classList.remove('vr-bg');
+ vrBackdrop.innerHTML = '';
+ }
+ function showBackdrop(v){
+ // muted — the panel's own iframe below carries the sound; this is a silent visual layer
+ vrBackdrop.innerHTML = `<iframe src="https://www.youtube-nocookie.com/embed/${v.id}?autoplay=1&mute=1&loop=1&playlist=${v.id}&controls=0&rel=0" title="" tabindex="-1" allow="autoplay" loading="lazy"></iframe>`;
+ stageEl.classList.add('vr-bg');
+ }
+ const bdToggle = document.createElement('button');
+ bdToggle.type = 'button'; bdToggle.className = 'vr-bd-toggle'; bdToggle.setAttribute('aria-pressed', 'true');
+ bdToggle.textContent = '🖼 Behind the art: on';
+ bdToggle.addEventListener('click', () => {
+ const on = bdToggle.getAttribute('aria-pressed') === 'true';
+ bdToggle.setAttribute('aria-pressed', on ? 'false' : 'true');
+ bdToggle.textContent = on ? '🖼 Behind the art: off' : '🖼 Behind the art: on';
+ if (on) hideBackdrop(); else if (vr.dataset.curId) showBackdrop({ id: vr.dataset.curId });
+ });
+ vrEmbed.insertAdjacentElement('beforebegin', bdToggle);
MR_VIDEOS.forEach(v => {
const row = document.createElement('button');
row.type = 'button';
@@ -1698,7 +1736,9 @@ const MR_VIDEOS=[
row.addEventListener('click', () => {
vrList.querySelectorAll('.vr-row.on').forEach(r => r.classList.remove('on'));
row.classList.add('on');
+ vr.dataset.curId = v.id;
vrEmbed.innerHTML = `<iframe src="https://www.youtube-nocookie.com/embed/${v.id}?autoplay=1&rel=0" title="${v.title.replace(/"/g,'"')}" allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen loading="lazy"></iframe>`;
+ if (bdToggle.getAttribute('aria-pressed') === 'true') showBackdrop(v);
});
vrList.appendChild(row);
});
← e9d46a6 Music room UI: collapse the sprawling controls into a hambur
·
back to Dead Agentabrams
·
Videos backdrop: dim it behind the graphics + let Steve cont afdb60f →