Update static/index.html

static/index.html

@@ -421,43 +421,55 @@
         const wrap = document.createElement('div');
         wrap.className = 'media';
 
-        if (it.type === 'video') {
-          wrap.setAttribute('data-kind','video'); // reserve space
-
-          const v = document.createElement('video');
-          // 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;
-            v.appendChild(srcEl);
-            v.load();
-            v.play().catch(()=>{});
-          }
-
-          v.addEventListener('loadedmetadata', () => {
-            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 {
+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