← Commit history

Dashboard 1.0.117: Watch the recording button and a fullscreen-capable lightbox player in the newbie panel

John Lauer ·ab553ca759 ·1mo ago ·parent b87c1d7
2 files changed +46−2
dashboard/ui/index.html+44
@@ -320,6 +320,15 @@ main a:hover{border-bottom-color:var(--accent)} .tdot.on{background:var(--green)} .note{font-size:12.5px;color:var(--text-2);margin:-6px 0 12px} .wins{font:12.5px 'JetBrains Mono',monospace;color:var(--text-2)}++/* ── recorded tour lightbox (John, 2026-09-05) ─────────────────────────── */+.anp-video{margin-left:8px;}+#vidBox{display:none;position:fixed;inset:0;z-index:9000;background:rgba(6,9,14,.94);flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;}+#vidBox .vb-bar{display:flex;align-items:center;gap:10px;width:min(96vw,1400px);color:#c9d3df;font-size:14px;}+#vidBox .vb-sp{flex:1;}+#vidBox .vb-bar button{background:#161b22;color:#e6edf3;border:1px solid #2a3341;border-radius:8px;padding:6px 10px;cursor:pointer;font-size:13px;}+#vidBox .vb-bar button:hover{border-color:#2dd4bf;}+#vidBox video{width:min(96vw,1400px);max-height:calc(100vh - 80px);background:#000;border-radius:10px;outline:none;} </style> </head> <body>@@ -631,7 +640,42 @@ function doMount(phrases){           onPlay:function(){ startDemo(); }},     phrases:phrases.slice(0,6)   });+  mountVideo();+}+// ── the recorded tour, right in the newbie panel (John, 2026-09-05) ─────────+// The recording starts at the Play click (the viewer is already in this+// dashboard, so no dock-bar or dashboard explanation). Plays in a lightbox that+// fills this webview; the fullscreen button asks the host for real fullscreen,+// which works when the hosting iframe allows it and otherwise keeps the lightbox.+const DEMO_VIDEO_URL='https://wiki.adom.inc/api/pages/adom/kicad-bridge/files/docs/videos/kicad-demo-tour.mp4';+function mountVideo(){+  const demoBtn=document.querySelector('#newbie .anp-demo'); if(!demoBtn||document.getElementById('btnVideo'))return;+  const b=document.createElement('button'); b.type='button'; b.id='btnVideo'; b.className='anp-demo anp-video';+  b.innerHTML='<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M10 9l5 3-5 3z"/></svg><span>Watch the recording</span>';+  b.title='The same six views, recorded on a real desktop (2 min 50 s)';+  b.addEventListener('click',openVideo);+  demoBtn.insertAdjacentElement('afterend',b);+}+function openVideo(){+  let box=document.getElementById('vidBox');+  if(!box){+    box=document.createElement('div'); box.id='vidBox';+    box.innerHTML='<div class="vb-bar"><span>KiCad Bridge demo, recorded</span><span class="vb-sp"></span>'++      '<button type="button" id="vbFull" title="Fullscreen">&#x26F6; Fullscreen</button><button type="button" id="vbClose" title="Close">&#x2715;</button></div>'++      '<video id="vbVideo" controls autoplay playsinline preload="metadata"></video>';+    document.body.appendChild(box);+    box.querySelector('#vbClose').addEventListener('click',closeVideo);+    box.addEventListener('click',e=>{ if(e.target===box) closeVideo(); });+    box.querySelector('#vbFull').addEventListener('click',async()=>{+      const v=box.querySelector('#vbVideo');+      try{ if(v.requestFullscreen) await v.requestFullscreen(); else if(v.webkitEnterFullscreen) v.webkitEnterFullscreen(); else throw new Error('no fullscreen api'); }+      catch(e){ toast('fullscreen is blocked by the host frame; the player already fills this pane','err'); }+    });+    document.addEventListener('keydown',e=>{ if(e.key==='Escape'&&box.style.display!=='none') closeVideo(); });+  }+  const v=box.querySelector('#vbVideo'); v.src=DEMO_VIDEO_URL; box.style.display='flex'; v.play().catch(()=>{}); }+function closeVideo(){ const box=document.getElementById('vidBox'); if(!box)return; const v=box.querySelector('#vbVideo'); v.pause(); v.removeAttribute('src'); v.load(); box.style.display='none'; } // Guided demo with a REAL progress bar + the stepShot stream (one screenshot per finished beat). async function startDemo(){   toast(demoMuted()?'starting the guided demo MUTED (narration off): click the speaker on the pill or the remote to unmute':'starting the guided demo');
package.json+2−2
@@ -1,6 +1,6 @@ {   "slug": "kicad-bridge",-  "version": "1.0.116",+  "version": "1.0.117",   "type": "app",   "description": "Skills for your container so your AI knows how to drive the KiCad bridge. The bridge runtime itself is the release zip; Adom Bridge loads that.",   "tags": [@@ -90,4 +90,4 @@       "prompt": "Open the KiCad dashboard and tell me if anything is red"     }   ]-}+}\ No newline at end of file