Update static/index.html

static/index.html

@@ -31,23 +31,23 @@
     transition:transform .28s ease; box-shadow:var(--shadow); z-index:5;
     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 */
-}
+  #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 */
+  }
   #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="range"]{width:100%}
+  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}
   button{cursor:pointer; border:1px solid #2a3a63; background:#132042; color:#e8f0ff; padding:10px 12px; border-radius:12px; transition:filter .2s, transform .05s; font-weight:600}
@@ -71,38 +71,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) */
-/* Bigger, lighter pin with a guaranteed full hit area */
-.pin{
-  position:absolute;
-  left:0; top:0;
-  width:34px; height:34px;              /* bigger */
-  border-radius:50%;
-  border:2px solid rgba(255,255,255,.45);
-  background:rgba(255,255,255,.12);     /* more transparent */
-  box-shadow:0 2px 10px rgba(0,0,0,.45);
-  transform:translate(-50%, -50%);
-  z-index:3;
-  cursor:pointer;
-
-  /* kill any UA quirks if it’s a <button> */
-  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%;
-  /* no background needed; clicks will still land on .pin */
-}
-
+  .pin{
+    position:absolute;
+    left:0; top:0;
+    width:34px; height:34px;              /* bigger */
+    border-radius:50%;
+    border:2px solid rgba(255,255,255,.45);
+    background:rgba(255,255,255,.12);     /* more transparent */
+    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%;
+  }
   .pin:hover{background:rgba(255,255,255,.26)}
 
   /* Popups: centered exactly on the pin midpoint */
@@ -110,15 +106,8 @@
     position:absolute; z-index:4;
     transform: translate(-50%, -50%); /* center on pin */
     background:rgba(13,20,40,.92); border:1px solid #2a395f; border-radius:16px; box-shadow:var(--shadow);
-    padding:0; min-width:200px; max-width:min(40vw, 520px); backdrop-filter: blur(6px);
+    padding:0; min-width:120px; max-width:none; backdrop-filter: blur(6px);
   }
-  /* Make header overlay so media stays geometrically centered */
-  .popup header{
-    position:absolute; top:6px; right:6px; left:auto;
-    display:flex; align-items:center; gap:8px; margin:0; padding:0;
-  }
-  .popup h4{margin:0; font-size:.95rem; color:#d9e6ff; background:rgba(0,0,0,.35); padding:6px 10px; border-radius:10px}
-  .x{background:rgba(0,0,0,.35); border:1px solid #2a395f; color:#cfe0ff; font-size:16px; padding:6px 8px; border-radius:10px}
 
   .media{display:block; width:100%; height:auto; border-radius:16px; overflow:hidden; background:#000}
   .media video, .media img{display:block; width:100%; height:auto}
@@ -128,10 +117,6 @@
   .item .name{font-size:.9rem}
   .item .tiny{font-size:.75rem; color:#9fb0cf}
   .item .actions{display:flex; gap:6px}
-
-/* Hide the "Saved" badge when the sidebar is minimized */
-#panel.min ~ #saveState { display: none; }
-
 </style>
 </head>
 <body>
@@ -169,11 +154,19 @@
     <fieldset>
       <div class="row">
         <label>Type
-          <select id="itemType"><option value="image">Image</option><option value="video">Video</option></select>
-        </label>
-        <label>Size (% of viewport width)
-          <input type="range" id="itemSize" min="10" max="40" value="25" />
+          <select id="itemType">
+            <option value="image">Image</option>
+            <option value="video">Video</option>
+          </select>
         </label>
+        <label>Popup width</label>
+      </div>
+      <div class="row">
+        <input type="number" id="itemWidth" min="10" max="2000" value="25" />
+        <select id="itemWidthUnit">
+          <option value="vw" selected>vw (responsive)</option>
+          <option value="px">px (exact)</option>
+        </select>
       </div>
       <label>Title</label>
       <input type="text" id="itemTitle" placeholder="Short label" />
@@ -214,6 +207,9 @@
   <button id="saveState" class="btn-ghost">Saved</button>
 </div>
 
+<!-- HLS support for .m3u8 streams -->
+<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+
 <script>
 (() => {
   const $ = s => document.querySelector(s);
@@ -227,7 +223,7 @@
 
   const state = {
     background: null, // {type:'image'|'video', src:'data/http(s) URL', fit:'cover'|'contain'}
-    items: [],        // {id,type,title,src,x,y,widthPct,open:false}
+    items: [],        // {id,type,title,src,x,y,width,widthUnit,open:false}
     placingId: null
   };
   const uid = () => Math.random().toString(36).slice(2,9);
@@ -238,7 +234,6 @@
     };
   })();
 
-  // Panel toggle
   // Panel toggle
   const updateToggleIcon = () => {
     toggle.textContent = panel.classList.contains('min') ? '▶' : '◀';
@@ -247,12 +242,10 @@
     panel.classList.toggle('min');
     updateToggleIcon();
   });
-
   // start minimized on load
   panel.classList.add('min');
   updateToggleIcon();
 
-
   // Helpers
   function escapeHtml(s){return (s||'').replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));}
 
@@ -268,6 +261,22 @@
     });
   }
 
+  // Infer a video MIME type from URL (rough guess)
+  function guessVideoMime(src){
+    try{
+      if (src.startsWith('data:')) {
+        const m = src.slice(5, src.indexOf(';'));
+        if (m.startsWith('video/')) return m;
+      }
+      const u = new URL(src, window.location.href).pathname.toLowerCase();
+      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('.m3u8')) return 'application/vnd.apple.mpegurl';
+    }catch(e){}
+    return '';
+  }
+
   // Background
   $('#applyBg').addEventListener('click', async () => {
     const type = $('#bgType').value;
@@ -311,13 +320,14 @@
     const title = $('#itemTitle').value.trim();
     const url = $('#itemUrl').value.trim();
     const file = $('#itemFile').files[0];
-    const widthPct = Number($('#itemSize').value);
+    const width = Number($('#itemWidth').value);
+    const widthUnit = $('#itemWidthUnit').value; // 'vw' | 'px'
     let src = url;
 
     if (file){ src = await fileToDataURL(file); if (!src) return; }
     if (!src){ alert('Provide a media URL or choose a file.'); return; }
 
-    const it = { id: uid(), type, title, src, x:50, y:50, widthPct, open:false };
+    const it = { id: uid(), type, title, src, x:50, y:50, width, widthUnit, open:false };
     state.items.push(it);
     renderItems(); markDirty();
 
@@ -351,10 +361,10 @@
     stopPlacing();
   });
 
+  // Allow multiple popups to stay open; clicking pin toggles only that one
   function togglePopup(id){
     const it = state.items.find(x=>x.id===id);
     if (!it) return;
-    state.items.forEach(x=>{ if (x.id!==id) x.open=false; });
     it.open = !it.open;
     renderItems(); // visual only, don't mark dirty for open state
   }
@@ -373,66 +383,66 @@
   function renderItems(){
     $('#count').textContent = String(state.items.length);
     overlay.innerHTML = '';
+
     for (const it of state.items){
+      // PIN
       const pin = document.createElement('div');
-pin.className = 'pin';
-pin.setAttribute('role', 'button');
-pin.setAttribute('tabindex', '0');
-
-pin.style.left = it.x + '%';
-pin.style.top  = it.y + '%';
-pin.title = it.title || it.type;
-
-pin.addEventListener('click', (e) => {
-  e.stopPropagation();
-  togglePopup(it.id);
-});
-pin.addEventListener('keydown', (e) => {
-  if (e.key === 'Enter' || e.key === ' ') {
-    e.preventDefault();
-    togglePopup(it.id);
-  }
-});
-
-overlay.appendChild(pin);
-
-
-if (it.open){
-  const pop = document.createElement('div');
-  pop.className = 'popup';
-  pop.style.left = it.x + '%';
-  pop.style.top  = it.y + '%';
-  pop.style.width = it.widthPct + 'vw';
-
-  // Media wrapper — clicking anywhere on the small image/video closes it
-  const wrap = document.createElement('div');
-  wrap.className = 'media';
-  wrap.addEventListener('click', (e) => {
-    e.stopPropagation();
-    it.open = false;
-    renderItems();
-  });
-
-  if (it.type === 'video') {
-    const v = document.createElement('video');
-    v.src = it.src;
-    v.playsInline = true;
-    v.muted = true;          // no controls; click closes
-    v.autoplay = false;
-    v.loop = false;
-    wrap.appendChild(v);
-  } else {
-    const img = document.createElement('img');
-    img.src = it.src;
-    img.alt = it.title || '';
-    wrap.appendChild(img);
-  }
-
-  pop.appendChild(wrap);
-  overlay.appendChild(pop);
-  requestAnimationFrame(() => adjustPopupPosition(pop));
-}
-
+      pin.className = 'pin';
+      pin.setAttribute('role', 'button');
+      pin.setAttribute('tabindex', '0');
+      pin.style.left = it.x + '%';
+      pin.style.top  = it.y + '%';
+      pin.title = it.title || it.type;
+      pin.addEventListener('click', (e) => { e.stopPropagation(); togglePopup(it.id); });
+      pin.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); togglePopup(it.id); } });
+      overlay.appendChild(pin);
+
+      // POPUP
+      if (it.open){
+        const pop = document.createElement('div');
+        pop.className = 'popup';
+        pop.style.left = it.x + '%';
+        pop.style.top  = it.y + '%';
+        pop.style.width = (it.widthUnit === 'px' ? it.width + 'px' : it.width + 'vw');
+
+        const wrap = document.createElement('div');
+        wrap.className = 'media';
+
+        if (it.type === 'video') {
+          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
+          if (window.Hls && window.Hls.isSupported() && /\.m3u8($|\?)/i.test(it.src)) {
+            const hls = new Hls();
+            hls.loadSource(it.src);
+            hls.attachMedia(v);
+          } else {
+            const srcEl = document.createElement('source');
+            srcEl.src = it.src;
+            const mime = guessVideoMime(it.src);
+            if (mime) srcEl.type = mime;
+            v.appendChild(srcEl);
+          }
+          v.addEventListener('loadedmetadata', () => {
+            if (v.videoWidth && v.videoHeight) v.style.aspectRatio = (v.videoWidth / v.videoHeight).toString();
+          });
+          wrap.appendChild(v);
+        } else {
+          const img = document.createElement('img');
+          img.src = it.src;
+          img.alt = it.title || '';
+          wrap.appendChild(img);
+        }
+
+        pop.appendChild(wrap);
+        overlay.appendChild(pop);
+        requestAnimationFrame(() => adjustPopupPosition(pop));
+      }
     }
 
     // items list
@@ -442,7 +452,7 @@ if (it.open){
       const kind = document.createElement('div'); kind.className='badge'; kind.textContent = it.type.toUpperCase();
       const info = document.createElement('div');
       info.innerHTML = `<div class="name">${escapeHtml(it.title||'')}</div>
-                        <div class="tiny">${it.widthPct}% • (${it.x.toFixed(1)}%, ${it.y.toFixed(1)}%)</div>`;
+                        <div class="tiny">${it.width}${it.widthUnit} • (${it.x.toFixed(1)}%, ${it.y.toFixed(1)}%)</div>`;
       const actions = document.createElement('div'); actions.className='actions';
 
       const btnPlace = document.createElement('button'); btnPlace.textContent='Place';
@@ -451,13 +461,27 @@ if (it.open){
       const btnPreview = document.createElement('button'); btnPreview.textContent = it.open ? 'Hide' : 'Preview';
       btnPreview.addEventListener('click', ()=> togglePopup(it.id));
 
-      const sizeIn = document.createElement('input'); sizeIn.type='range'; sizeIn.min='10'; sizeIn.max='40'; sizeIn.value=String(it.widthPct);
-      sizeIn.addEventListener('input', ()=>{ it.widthPct=Number(sizeIn.value); renderItems(); markDirty(); });
+      const widthIn = document.createElement('input');
+      widthIn.type = 'number'; widthIn.min = '10'; widthIn.max = '2000';
+      widthIn.value = String(it.width ?? 25);
+
+      const unitSel = document.createElement('select');
+      unitSel.innerHTML = '<option value="vw">vw</option><option value="px">px</option>';
+      unitSel.value = it.widthUnit || 'vw';
+
+      widthIn.addEventListener('change', () => {
+        it.width = Number(widthIn.value) || (it.widthUnit === 'px' ? 320 : 25);
+        renderItems(); markDirty();
+      });
+      unitSel.addEventListener('change', () => {
+        it.widthUnit = unitSel.value;
+        renderItems(); markDirty();
+      });
 
       const btnDel = document.createElement('button'); btnDel.textContent='Delete'; btnDel.className='btn-danger';
       btnDel.addEventListener('click', ()=> removeItem(it.id));
 
-      actions.append(btnPlace, btnPreview, sizeIn, btnDel);
+      actions.append(btnPlace, btnPreview, widthIn, unitSel, btnDel);
       row.append(kind, info, actions); list.appendChild(row);
     }
   }
@@ -483,7 +507,14 @@ if (it.open){
       if (!res.ok) throw new Error('Load failed');
       const data = await res.json();
       state.background = data.background || null;
-      state.items = Array.isArray(data.items) ? data.items.map(x=>({open:false, ...x})) : [];
+      state.items = Array.isArray(data.items)
+        ? data.items.map(x => ({
+            open:false,
+            ...x,
+            width: (x.width != null) ? x.width : (x.widthPct != null ? x.widthPct : 25),
+            widthUnit: x.widthUnit || (x.widthPct != null ? 'vw' : 'vw')
+          }))
+        : [];
       renderBackground(); renderItems();
       saveBadge.textContent = 'Loaded'; setTimeout(()=> saveBadge.textContent='Saved', 700);
     }catch(e){