Live Camera with Recent Activity

This commit is contained in:
proitlab committed 2026-08-01 18:58:48 +07:00
1 parent e6d66db84b
commit 8fcc9305e3
1 file changed
+26 -25
+26 -25
View File
@@ -283,7 +283,7 @@
/* Charts + Stats layout */
.charts-row {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 24px;
}
@@ -615,26 +615,34 @@
<span id="best-date">--</span>
</div>
<!-- Live Video Feed -->
<div class="video-panel" id="video-panel">
<div class="video-header">
<span class="section-title" style="margin-bottom:0;">&#9673; Live Camera Feed</span>
<div style="display:flex;align-items:center;gap:10px;">
<span class="video-status waiting" id="video-status">
<span style="width:6px;height:6px;border-radius:50%;background:var(--text-secondary);"></span>
waiting...
</span>
<button class="video-toggle" id="videoToggle" onclick="toggleVideo()">STREAM OFF</button>
<!-- Live Video + Recent Activity -->
<div class="charts-row">
<div class="video-panel" id="video-panel" style="margin-bottom:0;">
<div class="video-header">
<span class="section-title" style="margin-bottom:0;">&#9673; Live Camera Feed</span>
<div style="display:flex;align-items:center;gap:10px;">
<span class="video-status waiting" id="video-status">
<span style="width:6px;height:6px;border-radius:50%;background:var(--text-secondary);"></span>
waiting...
</span>
<button class="video-toggle" id="videoToggle" onclick="toggleVideo()">STREAM OFF</button>
</div>
</div>
<div class="video-container" id="video-container">
<div class="video-placeholder" id="video-placeholder">
<div class="vp-icon">&#9638;</div>
<div class="vp-text">Live Feed Unavailable</div>
<div class="vp-hint">Enable <code>LIVE_STREAM_ENABLED=true</code> in counter .env</div>
</div>
<img id="live-video-img" alt="Live Feed" style="display:none;" onerror="onVideoError()" onload="onVideoLoad()" />
<div class="video-error-overlay" id="video-error-overlay">Connection lost — retrying...</div>
</div>
</div>
<div class="video-container" id="video-container">
<div class="video-placeholder" id="video-placeholder">
<div class="vp-icon">&#9638;</div>
<div class="vp-text">Live Feed Unavailable</div>
<div class="vp-hint">Enable <code>LIVE_STREAM_ENABLED=true</code> in counter .env</div>
<div class="panel">
<span class="section-title">&#9673; Recent Activity</span>
<div style="margin-top:16px;" id="recent-batches">
<!-- Populated by JS -->
</div>
<img id="live-video-img" alt="Live Feed" style="display:none;" onerror="onVideoError()" onload="onVideoLoad()" />
<div class="video-error-overlay" id="video-error-overlay">Connection lost — retrying...</div>
</div>
</div>
@@ -687,13 +695,6 @@
<span class="qs-val" id="avg-per-batch">--</span>
</div>
</div>
<div class="recent-section">
<div class="rs-title">&#9673; Recent Activity</div>
<div id="recent-batches">
<!-- Populated by JS -->
</div>
</div>
</div>
</div>