Update static/index.html

static/index.html

@@ -206,6 +206,7 @@
   const saveBadge = $('#saveState');
 
   let hlsBg = null; // background HLS instance
+  const hlsMap = new Map(); // per-popup HLS instances
 
   const state = {
     background: null, // {type:'image'|'video', src:'data/http(s) URL', fit:'cover'|'contain'}
@@ -325,6 +326,101 @@
     }
   }
 
+  // ---------- Incremental DOM helpers for items ----------
+  const getPinEl   = (id) => overlay.querySelector(`.pin[data-id="${id}"]`);
+  const getPopupEl = (id) => overlay.querySelector(`.popup[data-id="${id}"]`);
+
+  function createPin(it){
+    const pin = document.createElement('div');
+    pin.className = 'pin';
+    pin.dataset.id = it.id;
+    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);
+  }
+
+  function createPopup(it){
+    if (getPopupEl(it.id)) return; // already open
+    const pop = document.createElement('div');
+    pop.className = 'popup';
+    pop.dataset.id = it.id;
+    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') {
+      wrap.setAttribute('data-kind','video'); // reserve space via CSS
+      const v = document.createElement('video');
+      v.autoplay = true; v.loop = true; v.muted = true; v.playsInline = true;
+      v.crossOrigin = 'anonymous';
+      v.style.width = '100%'; v.style.height = 'auto';
+
+      let hlsInst = null;
+      if (window.Hls && window.Hls.isSupported() && /\.m3u8($|\?)/i.test(it.src)) {
+        hlsInst = new Hls();
+        hlsInst.loadSource(it.src);
+        hlsInst.attachMedia(v);
+        hlsInst.on(Hls.Events.MANIFEST_PARSED, () => { v.play().catch(()=>{}); });
+        hlsMap.set(it.id, hlsInst);
+      } else {
+        const srcEl = document.createElement('source');
+        srcEl.src = it.src;
+        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) wrap.style.aspectRatio = (v.videoWidth / v.videoHeight).toString();
+      });
+
+      // Close THIS popup on click (don’t touch others)
+      const closeSelf = (e) => { e.stopPropagation(); removePopup(it.id); it.open = false; };
+      wrap.addEventListener('click', closeSelf);
+      v.addEventListener('click', closeSelf);
+
+      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);
+    } else {
+      const img = document.createElement('img');
+      img.src = it.src; img.alt = it.title || '';
+      // Close THIS popup on click
+      wrap.addEventListener('click', (e) => { e.stopPropagation(); removePopup(it.id); it.open = false; });
+      wrap.appendChild(img);
+    }
+
+    pop.appendChild(wrap);
+    overlay.appendChild(pop);
+    requestAnimationFrame(() => adjustPopupPosition(pop));
+  }
+
+  function removePopup(id){
+    const el = getPopupEl(id);
+    if (!el) return;
+    // stop video & destroy HLS if present
+    const v = el.querySelector('video');
+    if (v){ try{ v.pause(); }catch{} }
+    const hlsInst = hlsMap.get(id);
+    if (hlsInst){ try{ hlsInst.destroy(); }catch{} hlsMap.delete(id); }
+    el.remove();
+  }
+
   // ---------- Items ----------
   $('#addItem').addEventListener('click', () => addOrPlace(false));
   $('#addAndPlace').addEventListener('click', () => addOrPlace(true));
@@ -351,7 +447,14 @@
 
   function removeItem(id){
     const i = state.items.findIndex(x=>x.id===id);
-    if (i>=0){ state.items.splice(i,1); renderItems(); markDirty(); }
+    if (i>=0){
+      const it = state.items[i];
+      removePopup(id);
+      const pin = getPinEl(id); if (pin) pin.remove();
+      state.items.splice(i,1);
+      renderItemsList(); // refresh list & count only
+      markDirty();
+    }
   }
 
   function startPlacing(id){
@@ -370,7 +473,16 @@
     if (it){
       it.x = Math.max(0, Math.min(100, xPct));
       it.y = Math.max(0, Math.min(100, yPct));
-      renderItems(); markDirty();
+      // update only that pin/popup
+      const pinEl = getPinEl(it.id);
+      if (pinEl){ pinEl.style.left = it.x + '%'; pinEl.style.top = it.y + '%'; }
+      const popEl = getPopupEl(it.id);
+      if (popEl){
+        popEl.style.left = it.x + '%';
+        popEl.style.top  = it.y + '%';
+        requestAnimationFrame(()=>adjustPopupPosition(popEl));
+      }
+      markDirty();
     }
     stopPlacing();
   });
@@ -379,8 +491,9 @@
   function togglePopup(id){
     const it = state.items.find(x=>x.id===id);
     if (!it) return;
-    it.open = !it.open;
-    renderItems();
+    if (it.open){ removePopup(id); it.open = false; }
+    else { it.open = true; createPopup(it); }
+    // no global re-render here, so other videos keep playing
   }
 
   function adjustPopupPosition(el){
@@ -394,110 +507,34 @@
   }
 
   function renderItems(){
-    $('#count').textContent = String(state.items.length);
+    // Initial (or full) rebuild of pins/popups + list
     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);
-
-      // 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') {
-  wrap.setAttribute('data-kind','video'); // reserve space
-
-  const v = document.createElement('video');
-  v.autoplay = true; v.loop = true; v.muted = true; v.playsInline = true;
-  v.crossOrigin = 'anonymous';
-  v.style.width = '100%'; v.style.height = 'auto';
-
-  let hlsInst = null;
-  if (window.Hls && window.Hls.isSupported() && /\.m3u8($|\?)/i.test(it.src)) {
-    hlsInst = new Hls();
-    hlsInst.loadSource(it.src);
-    hlsInst.attachMedia(v);
-    hlsInst.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;
-    v.appendChild(srcEl);
-    v.load();
-    v.play().catch(()=>{});
-  }
-
-  v.addEventListener('loadedmetadata', () => {
-    if (v.videoWidth && v.videoHeight) wrap.style.aspectRatio = (v.videoWidth / v.videoHeight).toString();
-  });
-
-  // CLOSE THIS POPUP when user clicks the small video
-  const closeSelf = (e) => {
-    e.stopPropagation();
-    it.open = false;
-    try { v.pause(); } catch {}
-    if (hlsInst) { try { hlsInst.destroy(); } catch {} }
-    renderItems();
-  };
-  // Click anywhere on the video area to close
-  wrap.addEventListener('click', closeSelf);
-  v.addEventListener('click', closeSelf);
-
-  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);
-} else {
-          const img = document.createElement('img');
-          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);
-        }
-
-        pop.appendChild(wrap);
-        overlay.appendChild(pop);
-        requestAnimationFrame(() => adjustPopupPosition(pop));
-      }
+      createPin(it);
+      if (it.open) createPopup(it);
     }
+    renderItemsList();
+  }
 
-    // items list
+  function renderItemsList(){
+    $('#count').textContent = String(state.items.length);
     const list = $('#items'); list.innerHTML='';
     for (const it of state.items){
       const row = document.createElement('div'); row.className='item';
       const kind = document.createElement('div'); kind.className='badge'; kind.textContent = it.type.toUpperCase();
       const info = document.createElement('div');
+      const updateInfoTiny = () => info.querySelector('.tiny').textContent =
+        `${it.width}${it.widthUnit} • (${it.x.toFixed(1)}%, ${it.y.toFixed(1)}%)`;
       info.innerHTML = `<div class="name">${escapeHtml(it.title||'')}</div>
-                        <div class="tiny">${it.width}${it.widthUnit} • (${it.x.toFixed(1)}%, ${it.y.toFixed(1)}%)</div>`;
+                        <div class="tiny"></div>`;
       const actions = document.createElement('div'); actions.className='actions';
+      updateInfoTiny();
 
       const btnPlace = document.createElement('button'); btnPlace.textContent='Place';
       btnPlace.addEventListener('click', ()=> startPlacing(it.id));
 
       const btnPreview = document.createElement('button'); btnPreview.textContent = it.open ? 'Hide' : 'Preview';
-      btnPreview.addEventListener('click', ()=> togglePopup(it.id));
+      btnPreview.addEventListener('click', ()=> { togglePopup(it.id); btnPreview.textContent = it.open ? 'Hide' : 'Preview'; });
 
       const widthIn = document.createElement('input');
       widthIn.type = 'number'; widthIn.min = '10'; widthIn.max = '2000';
@@ -509,11 +546,21 @@ if (it.type === 'video') {
 
       widthIn.addEventListener('change', () => {
         it.width = Number(widthIn.value) || (it.widthUnit === 'px' ? 320 : 25);
-        renderItems(); markDirty();
+        const popEl = getPopupEl(it.id);
+        if (popEl){
+          popEl.style.width = (it.widthUnit === 'px' ? it.width + 'px' : it.width + 'vw');
+          requestAnimationFrame(()=>adjustPopupPosition(popEl));
+        }
+        updateInfoTiny(); markDirty();
       });
       unitSel.addEventListener('change', () => {
         it.widthUnit = unitSel.value;
-        renderItems(); markDirty();
+        const popEl = getPopupEl(it.id);
+        if (popEl){
+          popEl.style.width = (it.widthUnit === 'px' ? it.width + 'px' : it.width + 'vw');
+          requestAnimationFrame(()=>adjustPopupPosition(popEl));
+        }
+        updateInfoTiny(); markDirty();
       });
 
       const btnDel = document.createElement('button'); btnDel.textContent='Delete'; btnDel.className='btn-danger';
@@ -563,8 +610,13 @@ if (it.type === 'video') {
   // Clear / Download
   $('#clearAll').addEventListener('click', async () => {
     if (!confirm('Clear background and all items?')) return;
+    // close all popups, clean HLS
+    state.items.forEach(it => removePopup(it.id));
     state.background = null; state.items = [];
-    renderBackground(); renderItems(); markDirty();
+    overlay.innerHTML = '';
+    renderItemsList();
+    renderBackground();
+    markDirty();
   });
 
   $('#downloadJson').addEventListener('click', () => {
@@ -578,20 +630,17 @@ if (it.type === 'video') {
     URL.revokeObjectURL(url);
   });
 
-  // Close all popups when clicking empty stage area
+  // Outside click: do nothing (don’t close popups)
   window.addEventListener('resize', ()=>{
     $$('.popup').forEach(el => {
       el.style.transform='translate(-50%, -50%)';
       requestAnimationFrame(()=>adjustPopupPosition(el));
     });
   });
-// Do not close popups when clicking outside.
-// (Placement mode still works via #overlay click handler.)
-stage.addEventListener('click', e => {
-  if (state.placingId) return; // placement handled on overlay
-  // intentionally do nothing so outside clicks don't close anything
-});
-
+  stage.addEventListener('click', e => {
+    if (state.placingId) return; // placement handled on overlay
+    // intentionally no-op so outside clicks don't close anything
+  });
 
   loadFromServer();
 })();