diff --git a/templates/recounting.html b/templates/recounting.html
index e88f512..ac23e04 100644
--- a/templates/recounting.html
+++ b/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 @@
stopped
+
@@ -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 =
+ ' 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() {