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() {