fix : live view buffering

templates/dashboard.html

@@ -811,6 +811,9 @@ function updateToggleIcon() {
 let mainChart = null;
 let videoActive = false;
 let videoErrorTimer = null;
+let videoWatchdogTimer = null;
+let lastVideoFrameAt = 0;
+const VIDEO_STALL_MS = 8000;
 
 document.addEventListener('DOMContentLoaded', () => {
   loadSummary();
@@ -1083,6 +1086,32 @@ document.addEventListener('keydown', (e) => {
 
 // --- Live Video Feed ---
 
+function reconnectVideo() {
+  if (!videoActive) return;
+  const img = document.getElementById('live-video-img');
+  if (!img) return;
+  lastVideoFrameAt = Date.now();
+  img.src = '/api/live-video?' + Date.now();
+}
+
+function startVideoWatchdog() {
+  stopVideoWatchdog();
+  lastVideoFrameAt = Date.now();
+  videoWatchdogTimer = setInterval(() => {
+    if (!videoActive) return;
+    if (Date.now() - lastVideoFrameAt > VIDEO_STALL_MS) {
+      reconnectVideo();
+    }
+  }, 2000);
+}
+
+function stopVideoWatchdog() {
+  if (videoWatchdogTimer) {
+    clearInterval(videoWatchdogTimer);
+    videoWatchdogTimer = null;
+  }
+}
+
 function toggleVideo() {
   const btn = document.getElementById('videoToggle');
   const img = document.getElementById('live-video-img');
@@ -1093,14 +1122,16 @@ function toggleVideo() {
 
   if (videoActive) {
     resetFilter();
-    img.src = '/api/live-video?' + Date.now();
     img.style.display = 'block';
     if (placeholder) placeholder.style.display = 'none';
     btn.textContent = 'STREAM ON';
     btn.classList.add('active');
     status.innerHTML = '<span style="width:6px;height:6px;border-radius:50%;background:var(--accent4);animation:blink 1.5s ease-in-out infinite;"></span> connecting...';
     status.className = 'video-status waiting';
+    reconnectVideo();
+    startVideoWatchdog();
   } else {
+    stopVideoWatchdog();
     img.src = '';
     img.style.display = 'none';
     if (placeholder) placeholder.style.display = '';
@@ -1113,6 +1144,7 @@ function toggleVideo() {
 }
 
 function onVideoLoad() {
+  lastVideoFrameAt = Date.now();
   const status = document.getElementById('video-status');
   status.innerHTML = '<span style="width:6px;height:6px;border-radius:50%;background:var(--accent4);box-shadow:0 0 6px var(--accent4);animation:blink 1.5s ease-in-out infinite;"></span> live';
   status.className = 'video-status connected';
@@ -1124,10 +1156,7 @@ function onVideoError() {
   if (overlay) overlay.classList.add('visible');
   if (videoErrorTimer) clearTimeout(videoErrorTimer);
   videoErrorTimer = setTimeout(() => {
-    if (videoActive) {
-      const img = document.getElementById('live-video-img');
-      img.src = '/api/live-video?' + Date.now();
-    }
+    reconnectVideo();
   }, 2000);
 }