← back to Dead Agentabrams

Add a standalone Videos section, independent of archive.org/Music Room

6b68f7197091b14653b42255656755eb2e83180c · 2026-09-03 10:16:39 -0700 · Steve Abrams

Steve, after seeing archive.org's outage take out audio AND the
video backdrop with it: "offer videos only sections." New 🎬 Videos
panel lists all 18 MR_VIDEOS shows; clicking one embeds a plain
YouTube iframe directly, bypassing the archive-audio pipeline and
the VB failover machinery entirely, so it works even when
archive.org is down. Verified over local HTTP (file:// gives a
false Error 153 — origin restriction on the YouTube embed, not a
real bug): 18 rows list correctly, click-to-play works, video plays.

Files touched

• M room/index.html

Diff

commit 6b68f7197091b14653b42255656755eb2e83180c
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Sep 3 10:16:39 2026 -0700

    Add a standalone Videos section, independent of archive.org/Music Room
    
    Steve, after seeing archive.org's outage take out audio AND the
    video backdrop with it: "offer videos only sections." New 🎬 Videos
    panel lists all 18 MR_VIDEOS shows; clicking one embeds a plain
    YouTube iframe directly, bypassing the archive-audio pipeline and
    the VB failover machinery entirely, so it works even when
    archive.org is down. Verified over local HTTP (file:// gives a
    false Error 153 — origin restriction on the YouTube embed, not a
    real bug): 18 rows list correctly, click-to-play works, video plays.
---
 room/index.html | 47 ++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

diff --git a/room/index.html b/room/index.html
index 2749d0e..0b92e26 100644
--- a/room/index.html
+++ b/room/index.html
@@ -272,7 +272,8 @@
   #stage.hide-chrome .chapters,
   #stage.hide-chrome .musicroom,
   #stage.hide-chrome .label-toggle,
-  #stage.hide-chrome .museum{display:none!important}
+  #stage.hide-chrome .museum,
+  #stage.hide-chrome .videoroom{display:none!important}
 
   :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
   .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@@ -350,6 +351,17 @@
     <audio id="mrAudio" preload="none"></audio>
   </section>
 
+  <section class="videoroom" id="videoroom" data-open="false" aria-label="Videos — official Grateful Dead concert footage on YouTube">
+    <header id="vrToggle" role="button" tabindex="0" aria-expanded="false" aria-controls="vrbody">
+      <span>🎬 Videos</span>
+      <span class="chev" aria-hidden="true">▾</span>
+    </header>
+    <div class="vrbody" id="vrbody">
+      <div class="vr-embed" id="vrEmbed"></div>
+      <div class="vr-list" id="vrList" role="list" aria-label="Concert videos"></div>
+    </div>
+  </section>
+
   <button class="btn chrome-toggle" id="chromeBtn" aria-pressed="false">☰ Controls</button>
 
   <nav class="chapters" aria-label="Chapters">
@@ -1641,6 +1653,39 @@ const MR_VIDEOS=[
   {id:'YDgqP_4Q_fM',year:1993,title:'Buckeye Lake · 6/11/93'},
   {id:'sSPyP9qwkpA',year:1995,title:'Soldier Field · 1995 (final era)'}
 ];
+
+// ---------- Standalone Videos panel — browse + watch the concert-video library
+// directly. Deliberately independent of archive.org/VB/Music Room: a plain
+// YouTube iframe embed, so it still works when the archive-audio pipeline is down. ----------
+(function(){
+  const vr = document.getElementById('videoroom');
+  const vrToggle = document.getElementById('vrToggle');
+  const vrList = document.getElementById('vrList');
+  const vrEmbed = document.getElementById('vrEmbed');
+  if (!vr || !vrToggle || !vrList || !vrEmbed) return;
+  function setOpen(open){
+    vr.dataset.open = open ? 'true' : 'false';
+    vrToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+  }
+  vrToggle.addEventListener('click', () => setOpen(vr.dataset.open !== 'true'));
+  vrToggle.addEventListener('keydown', e => {
+    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); vrToggle.click(); }
+  });
+  MR_VIDEOS.forEach(v => {
+    const row = document.createElement('button');
+    row.type = 'button';
+    row.className = 'vr-row';
+    row.setAttribute('role', 'listitem');
+    row.innerHTML = `<span class="ry">${v.year}</span><span class="rt">${v.title}</span>`;
+    row.addEventListener('click', () => {
+      vrList.querySelectorAll('.vr-row.on').forEach(r => r.classList.remove('on'));
+      row.classList.add('on');
+      vrEmbed.innerHTML = `<iframe src="https://www.youtube-nocookie.com/embed/${v.id}?autoplay=1&rel=0" title="${v.title.replace(/"/g,'&quot;')}" allow="accelerometer;autoplay;clipboard-write;encrypted-media;gyroscope;picture-in-picture" allowfullscreen loading="lazy"></iframe>`;
+    });
+    vrList.appendChild(row);
+  });
+})();
+
 function _yearOf(s){
   const m=String((s&&s.date)||'').match(/\b(19\d{2})\b/); if(m) return +m[1];
   const m2=String((s&&s.id)||'').match(/gd(\d{2,4})/i);

← 9ae8b46 Music room: fix contrarian findings — showIdx assignment (re  ·  back to Dead Agentabrams  ·  Music room: make the concert video visible — pull scene canv 93937cc →