← back to Dead Agentabrams
Music room: concert plays on a movie SCREEN on the stage, orb removed (Steve)
650582d07de8e098bc06b2401888b6eaaddaf6c3 · 2026-09-03 12:24:48 -0700 · Steve Abrams
Steve: 'it's a movie screen!' + 'remove the orb, onload no orb' + 'music from youtube
can start right away and play' + 'wait to hear music then dance'.
- Disabled the WebGL AI-VJ orb entirely (ORB_ENABLED=false) — no orb on load or ever.
- A picked concert now plays on a framed MOVIE SCREEN mounted center-stage (.movie-on:
golden proscenium frame + glow, z-index below the dancer canvas so the bears dance in
FRONT of it), WITH SOUND (the vr-row click is a gesture → unmuted autoplay allowed).
- onStateChange PLAYING kicks the dancers into motion ('wait to hear music then dance').
- Removed the now-dead Backdrop LEFT/TOP/WIDTH/HEIGHT sliders from the Videos panel
(they controlled the retired small backdrop box) — panel is header + hint + year list.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Files touched
Diff
commit 650582d07de8e098bc06b2401888b6eaaddaf6c3
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu Sep 3 12:24:48 2026 -0700
Music room: concert plays on a movie SCREEN on the stage, orb removed (Steve)
Steve: 'it's a movie screen!' + 'remove the orb, onload no orb' + 'music from youtube
can start right away and play' + 'wait to hear music then dance'.
- Disabled the WebGL AI-VJ orb entirely (ORB_ENABLED=false) — no orb on load or ever.
- A picked concert now plays on a framed MOVIE SCREEN mounted center-stage (.movie-on:
golden proscenium frame + glow, z-index below the dancer canvas so the bears dance in
FRONT of it), WITH SOUND (the vr-row click is a gesture → unmuted autoplay allowed).
- onStateChange PLAYING kicks the dancers into motion ('wait to hear music then dance').
- Removed the now-dead Backdrop LEFT/TOP/WIDTH/HEIGHT sliders from the Videos panel
(they controlled the retired small backdrop box) — panel is header + hint + year list.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
room/index.html | 96 +++++++++++++++++++++++----------------------------------
1 file changed, 38 insertions(+), 58 deletions(-)
diff --git a/room/index.html b/room/index.html
index ba9860e..55bc4cd 100644
--- a/room/index.html
+++ b/room/index.html
@@ -43,6 +43,20 @@
#stage.video-bg.yt-hero #sky{opacity:.04}
#stage.video-bg.yt-hero #scene{opacity:.16}
#stage.video-bg.yt-hero #orb{opacity:.5}
+ /* ---- Movie screen (Steve: "it's a movie screen!") — the concert plays on a framed
+ screen mounted on the stage; the dancers dance in FRONT of it (scene paints above
+ #venueVideo). Shown ONLY while a video is playing (.movie-on). ---- */
+ #stage.movie-on #venueVideo{
+ opacity:1; z-index:1;
+ left:50%; top:33%; transform:translate(-50%,-50%);
+ width:min(54vw,760px); height:auto; aspect-ratio:16/9;
+ background:#000; border-radius:4px; border:2px solid #0a0304;
+ box-shadow:0 0 0 8px #17070a, 0 0 0 10px rgba(242,182,74,.45),
+ 0 30px 90px rgba(0,0,0,.75), 0 0 70px rgba(242,182,74,.18);
+ }
+ #stage.movie-on #sky{opacity:.5}
+ #stage.movie-on #scene{opacity:1}
+ @media (max-width:820px){ #stage.movie-on #venueVideo{width:86vw;top:30%} }
.btn:disabled,button:disabled{opacity:.42;cursor:not-allowed}
/* ---- Controls in a collapsed RIGHT drawer, opened by the top-right hamburger (TK-11178 UI) ---- */
#dock{
@@ -1700,57 +1714,9 @@ const MR_VIDEOS=[
vrToggle.addEventListener('keydown', e => {
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); vrToggle.click(); }
});
- // Backdrop position + size — dials the ONE #venueVideo box (--vr-bd-x/-y/-w/-h) so Steve can
- // drag it right onto "the area in back of where singers would sing" himself, live.
- const POS_KEY = 'vr-bd-pos';
- function readJSON(k){ try{ return JSON.parse(localStorage.getItem(k)); }catch(e){ return null; } }
- function writeJSON(k,v){ try{ localStorage.setItem(k, JSON.stringify(v)); }catch(e){} }
- const DEFAULT_POS = { x:48, y:43, w:18, h:32 }; // %,%,vw,vh — Steve's locked-in setting, dialed live in the browser 2026-09-03
- const pos = Object.assign({}, DEFAULT_POS, readJSON(POS_KEY) || {});
- function applyPos(){
- const root = document.documentElement.style;
- root.setProperty('--vr-bd-x', pos.x + '%');
- root.setProperty('--vr-bd-y', pos.y + '%');
- root.setProperty('--vr-bd-w', pos.w + 'vw');
- root.setProperty('--vr-bd-h', pos.h + 'vh');
- }
- applyPos();
- const posWrap = document.createElement('div');
- posWrap.className = 'vr-size';
- posWrap.innerHTML = [
- ['x','Left','%',5,95,DEFAULT_POS.x],
- ['y','Top','%',5,95,DEFAULT_POS.y],
- ['w','Width','vw',8,100,DEFAULT_POS.w],
- ['h','Height','vh',6,100,DEFAULT_POS.h],
- ].map(([k,label,unit])=>
- `<label for="vrBd_${k}">Backdrop ${label} <span class="val" id="vrBd_${k}V">${pos[k]}${unit}</span></label>
- <input type="range" id="vrBd_${k}" min="${k==='x'||k==='y'?5:(k==='w'?8:6)}" max="${k==='x'||k==='y'?95:100}" step="1" value="${pos[k]}" aria-label="Backdrop ${label}">`
- ).join('');
- vrList.insertAdjacentElement('beforebegin', posWrap);
- ['x','y','w','h'].forEach(k=>{
- const input = posWrap.querySelector(`#vrBd_${k}`);
- const val = posWrap.querySelector(`#vrBd_${k}V`);
- const unit = (k==='x'||k==='y') ? '%' : (k==='w' ? 'vw' : 'vh');
- input.addEventListener('input', () => {
- pos[k] = +input.value;
- val.textContent = pos[k] + unit;
- applyPos();
- writeJSON(POS_KEY, pos);
- });
- });
- const resetBtn = document.createElement('button');
- resetBtn.type = 'button'; resetBtn.className = 'vr-bd-toggle'; resetBtn.textContent = '↺ Reset backdrop position';
- resetBtn.addEventListener('click', () => {
- Object.assign(pos, DEFAULT_POS);
- ['x','y','w','h'].forEach(k=>{
- const unit = (k==='x'||k==='y') ? '%' : (k==='w' ? 'vw' : 'vh');
- posWrap.querySelector(`#vrBd_${k}`).value = pos[k];
- posWrap.querySelector(`#vrBd_${k}V`).textContent = pos[k] + unit;
- });
- applyPos();
- writeJSON(POS_KEY, pos);
- });
- posWrap.insertAdjacentElement('afterend', resetBtn);
+ // Steve: "it's a movie screen!" — the concert plays on a FIXED movie screen on the stage
+ // (.movie-on in CSS), so the old backdrop position/size sliders are gone (they controlled
+ // the retired small #venueVideo box and now do nothing). Panel = header + hint + year list.
MR_VIDEOS.forEach(v => {
const row = document.createElement('button');
row.type = 'button';
@@ -1805,8 +1771,15 @@ function _buildPlayer(){
});
}
function _onPlayerState(e){
+ if(!window.YT) return;
+ // Steve: "wait to hear music then dance" — kick the dancers into motion once the film
+ // actually rolls, and make sure the movie screen is showing.
+ if(e.data===YT.PlayerState.PLAYING){
+ try{ setPlay(true); }catch(_){}
+ if(VB.mode==='youtube') _stageEl.classList.add('movie-on');
+ }
// loop the backdrop so the visuals (and, in fallback, the audio) persist for the whole show
- if(window.YT && e.data===YT.PlayerState.ENDED){ try{ VB.player.seekTo(0); VB.player.playVideo(); }catch(_){} }
+ if(e.data===YT.PlayerState.ENDED){ try{ VB.player.seekTo(0); VB.player.playVideo(); }catch(_){} }
}
function _onPlayerError(e){
// Only hop for GENUINE unavailability — 100 (removed/private), 101/150 (embedding disabled).
@@ -1893,18 +1866,22 @@ function enterYouTubeFallback(show, hadGesture){
// NOT the full-screen yt-hero "now watching" mode — that stays reserved for the real
// archive.org-is-down fallback (enterYouTubeFallback), where the video IS the whole show.
function playConcertManual(id, title){
- VB.mode='youtube'; VB.forceMuted=true; // silent decoration — never let the archive-fallback's stray tap-to-unmute listener touch this
+ // Steve: "it's a movie screen!" — a picked concert plays WITH SOUND on the stage movie
+ // screen (the vr-row click is a user gesture, so unmuted autoplay is allowed), and the
+ // dancers dance in front. No orb.
+ VB.mode='youtube'; VB.forceMuted=false;
try{ audio.pause(); }catch(e){}
try{ audio.removeAttribute('src'); audio.load(); }catch(e){} // one audio owner — kill archive audio
- VB.wantId=id; VB.wantPlay=true; VB.wantMuted=true; VB._tried=new Set(); VB._hops=0;
+ VB.wantId=id; VB.wantPlay=true; VB.wantMuted=false; VB._tried=new Set(); VB._hops=0;
_loadYTApi();
if(VB.player && VB.player.loadVideoById) _applyVideo();
- _vbShow(); _stageEl.classList.remove('yt-hero');
+ _stageEl.classList.add('movie-on');
+ _stageEl.classList.remove('yt-hero','video-bg');
$('mrNow').textContent='▶ Grateful Dead — '+(title||'concert');
- $('mrSub').textContent='Playing your pick from the Videos panel — official concert footage on YouTube.';
+ $('mrSub').textContent='Now playing on the stage screen — official concert footage on YouTube.';
const msg=$('mrMsg'); if(msg){ msg.hidden=false;
- msg.innerHTML='Now showing behind the stage (muted).'+
- ' <a href="https://www.youtube.com/watch?v='+id+'" target="_blank" rel="noopener noreferrer">Watch with sound on YouTube ↗</a>'; }
+ msg.innerHTML='Playing on the stage movie screen.'+
+ ' <a href="https://www.youtube.com/watch?v='+id+'" target="_blank" rel="noopener noreferrer">Watch on YouTube ↗</a>'; }
setPlay(true);
if(typeof reactBtn!=='undefined' && reactBtn){ reactBtn.disabled=true; reactBtn.title='Live audio analysis isn’t available on the YouTube stream.'; }
saveResume();
@@ -2372,6 +2349,9 @@ if(_p.endsWith('/room') || /dead\.agentabrams/i.test(location.hostname)){
<script>
(function(){
if(!window.THREE) return;
+ // Steve: "remove the orb. onload no orb." — the WebGL AI-VJ orb is disabled; the concert
+ // now plays on a movie screen on the stage instead. Flip ORB_ENABLED to restore it.
+ const ORB_ENABLED=false; if(!ORB_ENABLED) return;
const canvas=document.getElementById('orb'); if(!canvas) return;
let W=innerWidth,H=innerHeight;
const renderer=new THREE.WebGLRenderer({canvas,alpha:true,antialias:true});
← 559b69a Fix stray sound leak on manual video picks + reduce backdrop
·
back to Dead Agentabrams
·
Music room: adjustable movie screen (drag+scale) + optional a7cda26 →