Update static/index.html

static/index.html

@@ -14,10 +14,9 @@
   *{box-sizing:border-box}
   html,body{height:100%; margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
 
-  /* App container just hosts overlays; stage lives full-screen behind */
   #app{position:relative; height:100vh; width:100vw; overflow:hidden}
 
-  /* Stage is full-viewport, underlays everything (so BG truly covers screen) */
+  /* Stage is full-viewport and underlays everything */
   #stage{position:fixed; inset:0; width:100vw; height:100vh; overflow:hidden; background:#000; user-select:none; z-index:0}
   .bgmedia{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
   #overlay{position:absolute; inset:0; z-index:2}
@@ -32,21 +31,18 @@
     transform:translateX(0);
   }
   #panel.min{
-    /* Fully off-canvas; no sliver */
     transform: translateX(-100%);
-    /* If you ever see a 0.5px hairline from subpixel rounding, use:
-       transform: translateX(calc(-100% - 1px)); */
     overflow: hidden;
     border-right: none;
-    background: transparent;  /* kill gradient tint */
-    box-shadow: none;          /* kill edge glow */
-    pointer-events: none;      /* panel won’t catch clicks while hidden */
+    background: transparent;
+    box-shadow: none;
+    pointer-events: none;
   }
   #panel h2{margin:.3rem 0 1rem; font-size:1.05rem; color:#cfe0ff}
   fieldset{border:1px solid #2a395f; border-radius:12px; padding:12px; margin:10px 0}
   legend{font-size:.9rem; color:#bcd0ff; padding:0 6px}
   label{display:block; font-size:.85rem; color:var(--muted); margin:8px 0 4px}
-  input[type="text"], input[type="url"], select{width:100%; padding:10px 12px; border-radius:10px; border:1px solid #26365a; background:#0c1430; color:#var(--text)}
+  input[type="text"], input[type="url"], select{width:100%; padding:10px 12px; border-radius:10px; border:1px solid #26365a; background:#0c1430; color:var(--text)}
   input[type="number"]{width:100%; padding:10px 12px; border-radius:10px; border:1px solid #26365a; background:#0c1430; color:#e6edf7}
   .row{display:flex; gap:8px}
   .row>*{flex:1}
@@ -60,7 +56,7 @@
   .badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:.75rem; background:#1b2b54; color:#cfe0ff}
   .hr{height:1px; background:#203059; margin:12px 0}
 
-  /* Panel toggle sits near the left edge whether expanded or collapsed */
+  /* Panel toggle */
   #toggle{
     position:fixed; top:12px; left:calc(var(--panelW) + 8px);
     z-index:6; width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
@@ -71,47 +67,34 @@
 
   #saveState{position:fixed; bottom:12px; left:calc(var(--panelW) + 12px); font-size:.8rem; border-radius:999px; padding:6px 10px; opacity:.9; z-index:4; transition:left .28s ease}
   #panel.min ~ #stage #saveState, #panel.min ~ #saveState { left:28px; }
-  /* Hide the "Saved" badge when the sidebar is minimized */
   #panel.min ~ #saveState { display: none; }
 
   /* Pins (bigger + more transparent) */
   .pin{
-    position:absolute;
-    left:0; top:0;
-    width:34px; height:34px;              /* bigger */
-    border-radius:50%;
+    position:absolute; left:0; top:0;
+    width:34px; height:34px; border-radius:50%;
     border:2px solid rgba(255,255,255,.45);
-    background:rgba(255,255,255,.12);     /* more transparent */
+    background:rgba(255,255,255,.12);
     box-shadow:0 2px 10px rgba(0,0,0,.45);
     transform:translate(-50%, -50%);
-    z-index:3;
-    cursor:pointer;
-    display:block;
-    padding:0;
-    line-height:0;
-    -webkit-appearance:none;
-    appearance:none;
-  }
-  /* Expand the clickable area beyond the visual circle (keeps look the same) */
-  .pin::before{
-    content:"";
-    position:absolute;
-    inset:-10px;            /* +10px all around = easier tapping */
-    border-radius:50%;
+    z-index:3; cursor:pointer; display:block; padding:0; line-height:0;
+    -webkit-appearance:none; appearance:none;
   }
+  .pin::before{content:""; position:absolute; inset:-10px; border-radius:50%;}
   .pin:hover{background:rgba(255,255,255,.26)}
 
-  /* Popups: centered exactly on the pin midpoint */
+  /* Popups centered on pin midpoint */
   .popup{
     position:absolute; z-index:4;
-    transform: translate(-50%, -50%); /* center on pin */
+    transform: translate(-50%, -50%);
     background:rgba(13,20,40,.92); border:1px solid #2a395f; border-radius:16px; box-shadow:var(--shadow);
     padding:0; min-width:120px; max-width:none; backdrop-filter: blur(6px);
   }
-
   .media{display:block; width:100%; height:auto; border-radius:16px; overflow:hidden; background:#000}
+  /* Reserve space so videos don't appear as a thin line pre-metadata */
+  .media[data-kind="video"]{ aspect-ratio:16/9; min-height:100px; }
   .media video, .media img{display:block; width:100%; height:auto}
-  
+
   /* Items list */
   .item{display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; padding:8px; border:1px solid #21345d; border-radius:10px; margin:8px 0; background:#0e1834}
   .item .name{font-size:.9rem}
@@ -199,7 +182,8 @@
 
   <main id="stage" aria-label="Stage">
     <img id="bgImg" class="bgmedia" alt="" style="display:none" />
-    <video id="bgVid" class="bgmedia" autoplay muted loop playsinline style="display:none"></video>
+    <!-- attrs for autoplay/loop/muted already present -->
+    <video id="bgVid" class="bgmedia" autoplay loop muted playsinline style="display:none"></video>
     <div id="overlay" title="Click to place when in placement mode"></div>
     <div id="stageMsg" style="display:none"></div>
   </main>
@@ -221,6 +205,8 @@
   const stageMsg = $('#stageMsg');
   const saveBadge = $('#saveState');
 
+  let hlsBg = null; // background HLS instance
+
   const state = {
     background: null, // {type:'image'|'video', src:'data/http(s) URL', fit:'cover'|'contain'}
     items: [],        // {id,type,title,src,x,y,width,widthUnit,open:false}
@@ -234,24 +220,15 @@
     };
   })();
 
-  // Panel toggle
-  const updateToggleIcon = () => {
-    toggle.textContent = panel.classList.contains('min') ? '▶' : '◀';
-  };
-  toggle.addEventListener('click', () => {
-    panel.classList.toggle('min');
-    updateToggleIcon();
-  });
-  // start minimized on load
-  panel.classList.add('min');
-  updateToggleIcon();
+  const updateToggleIcon = () => { toggle.textContent = panel.classList.contains('min') ? '▶' : '◀'; };
+  toggle.addEventListener('click', () => { panel.classList.toggle('min'); updateToggleIcon(); });
+  panel.classList.add('min'); updateToggleIcon();
 
-  // Helpers
   function escapeHtml(s){return (s||'').replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));}
 
   async function fileToDataURL(file){
     if (!file) return '';
-    const maxInlineMB = 40; // guardrail
+    const maxInlineMB = 40;
     if (file.size > maxInlineMB * 1024 * 1024) { alert(`File is larger than ${maxInlineMB} MB. Use a URL instead.`); return ''; }
     return new Promise((res,rej)=>{
       const r = new FileReader();
@@ -261,7 +238,6 @@
     });
   }
 
-  // Infer a video MIME type from URL (rough guess)
   function guessVideoMime(src){
     try{
       if (src.startsWith('data:')) {
@@ -272,12 +248,18 @@
       if (u.endsWith('.mp4')) return 'video/mp4';
       if (u.endsWith('.webm')) return 'video/webm';
       if (u.endsWith('.ogv') || u.endsWith('.ogg')) return 'video/ogg';
+      if (u.endsWith('.mov')) return 'video/quicktime';
       if (u.endsWith('.m3u8')) return 'application/vnd.apple.mpegurl';
     }catch(e){}
     return '';
   }
 
-  // Background
+  function showStageMessage(msg, ms=2500){
+    stageMsg.textContent = msg; stageMsg.style.display='block';
+    setTimeout(()=>stageMsg.style.display='none', ms);
+  }
+
+  // ---------- Background ----------
   $('#applyBg').addEventListener('click', async () => {
     const type = $('#bgType').value;
     const fit  = $('#bgFit').value;
@@ -301,17 +283,49 @@
     renderBackground(); markDirty();
   });
 
+  function cleanupHlsBg(){
+    if (hlsBg){ try{ hlsBg.destroy(); }catch(e){} hlsBg = null; }
+  }
+
   function renderBackground(){
-    if (!state.background){
-      bgImg.style.display='none'; bgVid.style.display='none'; return;
-    }
+    cleanupHlsBg();
+    bgImg.style.display='none'; bgVid.style.display='none';
+
+    // clear previous <source> tags
+    bgVid.removeAttribute('src');
+    while (bgVid.firstChild) bgVid.removeChild(bgVid.firstChild);
+
+    if (!state.background) return;
+
     const {type, src, fit} = state.background;
     bgImg.style.objectFit = fit; bgVid.style.objectFit = fit;
-    if (type === 'video'){ bgVid.src = src; bgVid.style.display='block'; bgImg.style.display='none'; }
-    else { bgImg.src = src; bgImg.style.display='block'; bgVid.style.display='none'; }
+
+    if (type === 'video'){
+      bgVid.autoplay = true; bgVid.loop = true; bgVid.muted = true; bgVid.playsInline = true;
+      bgVid.crossOrigin = 'anonymous';
+
+      if (window.Hls && window.Hls.isSupported() && /\.m3u8($|\?)/i.test(src)) {
+        hlsBg = new Hls();
+        hlsBg.loadSource(src);
+        hlsBg.attachMedia(bgVid);
+        hlsBg.on(Hls.Events.MANIFEST_PARSED, () => { const p = bgVid.play(); if (p && p.catch) p.catch(()=>{}); });
+      } else {
+        const s = document.createElement('source');
+        s.src = src; const mime=guessVideoMime(src); if (mime) s.type=mime;
+        bgVid.appendChild(s);
+        bgVid.load();
+        const p = bgVid.play(); if (p && p.catch) p.catch(()=>{});
+      }
+      bgVid.style.display='block';
+      bgVid.addEventListener('error', () => {
+        showStageMessage('Background video failed to load. Try MP4 (H.264/AAC), WEBM, or HLS .m3u8.');
+      }, {once:true});
+    } else {
+      bgImg.src = src; bgImg.style.display='block';
+    }
   }
 
-  // Items
+  // ---------- Items ----------
   $('#addItem').addEventListener('click', () => addOrPlace(false));
   $('#addAndPlace').addEventListener('click', () => addOrPlace(true));
 
@@ -321,7 +335,7 @@
     const url = $('#itemUrl').value.trim();
     const file = $('#itemFile').files[0];
     const width = Number($('#itemWidth').value);
-    const widthUnit = $('#itemWidthUnit').value; // 'vw' | 'px'
+    const widthUnit = $('#itemWidthUnit').value;
     let src = url;
 
     if (file){ src = await fileToDataURL(file); if (!src) return; }
@@ -361,16 +375,15 @@
     stopPlacing();
   });
 
-  // Allow multiple popups to stay open; clicking pin toggles only that one
+  // Keep multiple popups; toggling pin affects only that item
   function togglePopup(id){
     const it = state.items.find(x=>x.id===id);
     if (!it) return;
     it.open = !it.open;
-    renderItems(); // visual only, don't mark dirty for open state
+    renderItems();
   }
 
   function adjustPopupPosition(el){
-    // Keep centered popup fully within viewport by nudging
     const rect = el.getBoundingClientRect();
     const margin = 8; let dx=0, dy=0;
     if (rect.left < margin) dx = margin - rect.left;
@@ -409,33 +422,46 @@
         wrap.className = 'media';
 
         if (it.type === 'video') {
+          wrap.setAttribute('data-kind','video'); // reserve space
+
           const v = document.createElement('video');
-          v.controls = true;
-          v.preload = 'metadata';
-          v.playsInline = true;
-          v.style.width = '100%';
-          v.style.height = 'auto';
-          v.style.aspectRatio = '16/9'; // placeholder to avoid "thin line" before metadata
-          // HLS support
+          // No controls; looped; autoplay; muted for autoplay to work; inline for mobile
+          v.autoplay = true; v.loop = true; v.muted = true; v.playsInline = true;
+          v.crossOrigin = 'anonymous';
+          v.style.width = '100%'; v.style.height = 'auto';
+
           if (window.Hls && window.Hls.isSupported() && /\.m3u8($|\?)/i.test(it.src)) {
             const hls = new Hls();
             hls.loadSource(it.src);
             hls.attachMedia(v);
+            hls.on(Hls.Events.MANIFEST_PARSED, () => { v.play().catch(()=>{}); });
           } else {
             const srcEl = document.createElement('source');
             srcEl.src = it.src;
-            const mime = guessVideoMime(it.src);
-            if (mime) srcEl.type = mime;
+            const mime = guessVideoMime(it.src); if (mime) srcEl.type = mime;
             v.appendChild(srcEl);
+            v.load();
+            v.play().catch(()=>{});
           }
+
           v.addEventListener('loadedmetadata', () => {
-            if (v.videoWidth && v.videoHeight) v.style.aspectRatio = (v.videoWidth / v.videoHeight).toString();
+            if (v.videoWidth && v.videoHeight) wrap.style.aspectRatio = (v.videoWidth / v.videoHeight).toString();
           });
+          v.addEventListener('error', () => {
+            const note = document.createElement('div');
+            note.style.padding = '10px 12px';
+            note.style.color = '#ffd2d2';
+            note.textContent = 'Video failed to load. Use MP4 (H.264/AAC), WEBM, or HLS (.m3u8).';
+            wrap.innerHTML = ''; wrap.appendChild(note);
+          }, {once:true});
+
           wrap.appendChild(v);
+          // Clicking video should NOT close; user may tap it; it loops anyway.
         } else {
           const img = document.createElement('img');
-          img.src = it.src;
-          img.alt = it.title || '';
+          img.src = it.src; img.alt = it.title || '';
+          // Click image to close that popup
+          wrap.addEventListener('click', (e) => { e.stopPropagation(); it.open = false; renderItems(); });
           wrap.appendChild(img);
         }
 
@@ -540,7 +566,7 @@
     URL.revokeObjectURL(url);
   });
 
-  // Misc
+  // Close all popups when clicking empty stage area
   window.addEventListener('resize', ()=>{
     $$('.popup').forEach(el => {
       el.style.transform='translate(-50%, -50%)';
@@ -548,12 +574,11 @@
     });
   });
   stage.addEventListener('click', e => {
-    if (state.placingId) return; // placement handled on overlay
+    if (state.placingId) return;
     const inPopup = e.target.closest('.popup,.pin');
     if (!inPopup){ state.items.forEach(x=>x.open=false); renderItems(); }
   });
 
-  // Boot
   loadFromServer();
 })();
 </script>