Music room: make the concert video visible — pull scene canvases down under a video backdrop + a yt-hero state where the fallback video dominates (TK-11178)

93937cc5e43e5f01128c2fbd0ddcbf61cf7e90f0 · 2026-09-03 10:46:15 -0700 · Steve (via Claude)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012XLgczMhQr91Ad5jL38JM4

Files touched

M room/index.html

Diff

commit 93937cc5e43e5f01128c2fbd0ddcbf61cf7e90f0
Author: Steve (via Claude) <steve@designerwallcoverings.com>
Date:   Thu Sep 3 10:46:15 2026 -0700

    Music room: make the concert video visible — pull scene canvases down under a video backdrop + a yt-hero state where the fallback video dominates (TK-11178)
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
    Claude-Session: https://claude.ai/code/session_012XLgczMhQr91Ad5jL38JM4
---
 room/index.html | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/room/index.html b/room/index.html
index 0b92e26..6326671 100644
--- a/room/index.html
+++ b/room/index.html
@@ -29,8 +29,12 @@
   #venueVideo iframe,#venueVideo>div{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.video-bg #venueVideo{opacity:1}
-  #stage.video-bg #sky{opacity:.20}
-  #stage.video-bg #scene{opacity:.66}
+  #stage.video-bg #sky{opacity:.12}
+  #stage.video-bg #scene{opacity:.42}
+  /* 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}
+  #stage.video-bg.yt-hero #orb{opacity:.5}
   .btn:disabled,button:disabled{opacity:.42;cursor:not-allowed}
   /* 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;
@@ -1704,7 +1708,7 @@ function pickVideoFor(s){
 const VB={ mode:'off', ready:false, player:null, curId:null, wantId:null, wantPlay:false, wantMuted:true, venueOn:true };
 const _stageEl=document.getElementById('stage');
 function _vbShow(){ if(VB.venueOn && VB.wantId) _stageEl.classList.add('video-bg'); }
-function _vbHide(){ _stageEl.classList.remove('video-bg'); }
+function _vbHide(){ _stageEl.classList.remove('video-bg'); _stageEl.classList.remove('yt-hero'); }
 function _loadYTApi(){
   if(window.YT && window.YT.Player){ VB.ready=true; _buildPlayer(); return; }
   if(!document.getElementById('yt-iframe-api')){
@@ -1778,6 +1782,7 @@ function _primeYTUnlock(){
 // archive mode: the real SBD tape plays from <audio>; the concert video is a MUTED visual backdrop.
 function enterArchiveMode(show){
   VB.mode='archive';
+  _stageEl.classList.remove('yt-hero');                   // scene is the star when the real SBD tape is the audio
   if(typeof reactBtn!=='undefined' && reactBtn){ reactBtn.disabled=false; reactBtn.removeAttribute('title'); }
   vbSetVideo(show,{play:true,muted:true});
 }
@@ -1789,6 +1794,7 @@ function enterYouTubeFallback(show, hadGesture){
   // Prefer the gesture captured BEFORE the metadata await (transient activation expires in ~5s); else read it live.
   const hasAct=(hadGesture!=null) ? !!hadGesture : !!(navigator.userActivation ? navigator.userActivation.isActive : false);
   vbSetVideo(show,{play:true,muted:!hasAct});                    // gesture → sound now; cold load → muted+visible
+  _stageEl.classList.add('yt-hero');                            // the concert video IS the show now → let it dominate the frame
   if(!hasAct) _primeYTUnlock();
   const v=MR_VIDEOS.find(x=>x.id===VB.wantId)||{};
   $('mrNow').textContent='▶ '+(v.title?('Grateful Dead — '+v.title):'Grateful Dead (YouTube)');

← 6b68f71 Add a standalone Videos section, independent of archive.org/ · back to Dead Agentabrams · Music room UI: collapse the sprawling controls into a hambur e9d46a6 →