Stream State across browser

templates/recounting.html

@@ -434,11 +434,56 @@ let streamUrl = '';
 document.addEventListener('DOMContentLoaded', () => {
   loadRecountProgress();
   loadFiles();
+  syncState();
 
   setInterval(loadRecountProgress, 500);
   setInterval(loadFiles, 30000);
+  setInterval(syncState, 1000);
 });
 
+async function syncState() {
+  try {
+    const res = await fetch('/api/state');
+    const data = await res.json();
+    applyState(data);
+  } catch (err) {}
+}
+
+function applyState(data) {
+  if (!data) return;
+
+  if (data.file) {
+    selectedFile = data.file;
+    document.getElementById('btn-start').disabled = data.streaming;
+    document.getElementById('btn-download').disabled = false;
+  }
+
+  if (data.streaming && data.file) {
+    streaming = true;
+    streamUrl = data.stream_url;
+    const img = document.getElementById('stream-img');
+    const placeholder = document.getElementById('video-placeholder');
+    if (img.src.indexOf(streamUrl) === -1) {
+      img.src = streamUrl + '?' + Date.now();
+      img.style.display = 'block';
+      if (placeholder) placeholder.style.display = 'none';
+    }
+    document.getElementById('btn-stop').disabled = false;
+    document.getElementById('btn-start').disabled = true;
+    document.getElementById('btn-start').textContent = 'STREAMING';
+    document.getElementById('btn-start').classList.add('btn-ghost');
+    document.getElementById('video-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> streaming ' + (data.file_name || '');
+    document.getElementById('video-status').className = 'video-status connected';
+
+    loadBatchResult(data.file);
+  } else if (!data.streaming && data.file) {
+    loadBatchResult(data.file);
+  }
+
+  loadFiles();
+}
+
 // --- File list ---
 
 async function loadFiles() {
@@ -485,8 +530,8 @@ function selectFile(path, name) {
     return;
   }
   selectedFile = path;
-  document.getElementById('btn-start').disabled = false;
   document.getElementById('btn-download').disabled = false;
+  if (!streaming) document.getElementById('btn-start').disabled = false;
   loadFiles();
   loadBatchResult(path);
 }
@@ -557,7 +602,6 @@ function downloadFile() {
 async function startRecount() {
   if (!selectedFile) return;
   const btnStart = document.getElementById('btn-start');
-  const btnStop = document.getElementById('btn-stop');
   btnStart.disabled = true;
   btnStart.textContent = 'CONNECTING...';
 
@@ -576,6 +620,7 @@ async function startRecount() {
     }
     streamUrl = data.stream_url;
     streaming = true;
+    selectedFile = data.path;
 
     const img = document.getElementById('stream-img');
     const placeholder = document.getElementById('video-placeholder');
@@ -583,15 +628,9 @@ async function startRecount() {
     img.style.display = 'block';
     if (placeholder) placeholder.style.display = 'none';
 
-    btnStop.disabled = false;
+    document.getElementById('btn-stop').disabled = false;
     btnStart.textContent = 'STREAMING';
     btnStart.classList.add('btn-ghost');
-
-    document.getElementById('video-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> streaming ' + data.file;
-    document.getElementById('video-status').className = 'video-status connected';
-
-    loadFiles();
   } catch (err) {
     alert('Error: ' + err.message);
     btnStart.disabled = false;
@@ -605,6 +644,8 @@ async function stopRecount() {
   } catch (err) {}
   streaming = false;
   streamUrl = '';
+  selectedFile = null;
+  batchResultLoaded = false;
 
   const img = document.getElementById('stream-img');
   const placeholder = document.getElementById('video-placeholder');
@@ -614,7 +655,7 @@ async function stopRecount() {
 
   const btnStart = document.getElementById('btn-start');
   const btnStop = document.getElementById('btn-stop');
-  btnStart.disabled = selectedFile ? false : true;
+  btnStart.disabled = true;
   btnStart.textContent = '▶ START RECOUNT';
   btnStart.classList.remove('btn-ghost');
   btnStop.disabled = true;
@@ -623,6 +664,14 @@ async function stopRecount() {
     '<span style="width:6px;height:6px;border-radius:50%;background:var(--text-secondary);"></span> stopped';
   document.getElementById('video-status').className = 'video-status stopped';
 
+  document.getElementById('live-title').innerHTML = '&#9673; Live Counter';
+  document.getElementById('live-count').textContent = '--';
+  document.getElementById('live-label').textContent = 'Objects Counted';
+  document.getElementById('live-batch').textContent = '--';
+  document.getElementById('live-time').textContent = '--';
+  document.getElementById('live-status').textContent = 'no file selected';
+  document.getElementById('live-status').className = 'counter-status disconnected';
+
   loadFiles();
 }