From 0b5dc7d88e7f0484f9c14a8e7716022b8df7e5c1 Mon Sep 17 00:00:00 2001
From: cclohmar <claus.lohmar@lohmar.co.uk>
Date: Wed, 5 Aug 2026 13:59:03 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20grid=20tiles=20open=20go2rtc=20WebRTC=20?=
 =?UTF-8?q?player=20directly=20=E2=80=94=20real=20live=20stream?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/app.js | 25 +++++++++----------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/public/app.js b/public/app.js
index 8735625..cfeab26 100644
--- a/public/app.js
+++ b/public/app.js
@@ -84,7 +84,9 @@ function renderLiveGrid() {
                 const img = tile.querySelector('img');
                 if (img) img.src = `/recordings/${cam.name || cam.id}/latest.jpg?t=${Date.now()}`;
             }, 3000);
-            tile.addEventListener('click', () => openFocus(cam));
+            tile.addEventListener('click', () => {
+                window.open(`http://${location.hostname}:1984/?src=${cam.id}_sub`, '_blank');
+            });
         } else {
             tile.innerHTML = '<span class="tile-placeholder">No Camera</span>';
         }
@@ -96,25 +98,16 @@ function renderLiveGrid() {
 let focusIdx = -1;
 function openFocus(cam) {
     focusIdx = cameras.indexOf(cam);
-    const overlay = document.getElementById('focus-overlay');
-    overlay.classList.remove('hidden');
-    // Remove any previous iframe.
-    const oldFrame = overlay.querySelector('iframe.go2rtc');
-    if (oldFrame) oldFrame.remove();
-    // Create go2rtc WebRTC player iframe — real live video.
-    const container = document.getElementById('focus-video').parentElement;
-    const iframe = document.createElement('iframe');
-    iframe.className = 'go2rtc';
-    iframe.allow = 'autoplay';
-    iframe.style.cssText = 'width:100%;height:100%;border:none;flex:1';
-    iframe.src = `http://${location.hostname}:1984/stream.html?src=${cam.id}_sub&mode=webrtc,mse,mp4`;
-    container.insertBefore(iframe, document.getElementById('focus-video'));
-    document.getElementById('focus-video').style.display = 'none';
+    // Open go2rtc's built-in WebRTC player in a new tab.
+    // The player provides full live video with sub-second latency.
+    const url = `http://${location.hostname}:1984/?src=${cam.id}_sub`;
+    window.open(url, '_blank');
+    // Also update the overlay for keyboard nav.
     document.getElementById('focus-title').textContent = cam.name;
-    document.getElementById('focus-time').textContent = new Date().toLocaleTimeString() + ' live';
     renderThumbs();
 }
 function updateFocus() {}
+function updateFocus() {}
 function renderThumbs() {
     const strip = document.getElementById('focus-thumbs');
     strip.innerHTML = '';