No Auto Stream

templates/recounting.html

@@ -226,6 +226,16 @@
   .video-status.stopped {
     color: var(--text-secondary); background: var(--cell-bg);
   }
+  .video-toggle {
+    background: none; border: 1px solid var(--cell-border);
+    border-radius: 8px; padding: 6px 14px; cursor: pointer;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px; letter-spacing: 1px;
+    color: var(--text-secondary);
+    transition: border-color 0.3s, color 0.3s;
+  }
+  .video-toggle:hover { border-color: var(--accent); color: var(--text-primary); }
+  .video-toggle.active { border-color: var(--accent4); color: var(--accent4); }
 
   /* File browser panel */
   .file-panel {
@@ -385,6 +395,7 @@
             <span style="width:6px;height:6px;border-radius:50%;background:var(--text-secondary);"></span>
             stopped
           </span>
+          <button class="video-toggle" id="videoToggle" onclick="togglePreview()">STREAM OFF</button>
         </div>
       </div>
       <div class="video-container" id="video-container">
@@ -461,13 +472,6 @@ function applyState(data) {
   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';
@@ -622,15 +626,12 @@ async function startRecount() {
     streaming = true;
     selectedFile = data.path;
 
-    const img = document.getElementById('stream-img');
-    const placeholder = document.getElementById('video-placeholder');
-    img.src = streamUrl + '?' + Date.now();
-    img.style.display = 'block';
-    if (placeholder) placeholder.style.display = 'none';
-
     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';
   } catch (err) {
     alert('Error: ' + err.message);
     btnStart.disabled = false;
@@ -672,9 +673,44 @@ async function stopRecount() {
   document.getElementById('live-status').textContent = 'no file selected';
   document.getElementById('live-status').className = 'counter-status disconnected';
 
+  resetVideoToggle();
+
   loadFiles();
 }
 
+function togglePreview() {
+  const btn = document.getElementById('videoToggle');
+  const img = document.getElementById('stream-img');
+  const placeholder = document.getElementById('video-placeholder');
+
+  if (!streamUrl) return;
+
+  if (img.style.display === 'block') {
+    img.src = '';
+    img.style.display = 'none';
+    if (placeholder) placeholder.style.display = '';
+    btn.textContent = 'STREAM OFF';
+    btn.classList.remove('active');
+  } else {
+    img.src = streamUrl + '?' + Date.now();
+    img.style.display = 'block';
+    if (placeholder) placeholder.style.display = 'none';
+    btn.textContent = 'STREAM ON';
+    btn.classList.add('active');
+  }
+}
+
+function resetVideoToggle() {
+  const btn = document.getElementById('videoToggle');
+  const img = document.getElementById('stream-img');
+  const placeholder = document.getElementById('video-placeholder');
+  img.src = '';
+  img.style.display = 'none';
+  if (placeholder) placeholder.style.display = '';
+  btn.textContent = 'STREAM OFF';
+  btn.classList.remove('active');
+}
+
 // --- Recount counter ---
 
 async function loadRecountProgress() {