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 + Stats layout */
.charts-row { .charts-row {
display: grid; display: grid;
grid-template-columns: 2fr 1fr; grid-template-columns: 1fr 1fr;
gap: 20px; gap: 20px;
margin-bottom: 24px; margin-bottom: 24px;
} }
@@ -615,26 +615,34 @@
<span id="best-date">--</span> <span id="best-date">--</span>
</div> </div>
<!-- Live Video Feed --> <!-- Live Video + Recent Activity -->
<div class="video-panel" id="video-panel"> <div class="charts-row">
<div class="video-header"> <div class="video-panel" id="video-panel" style="margin-bottom:0;">
<span class="section-title" style="margin-bottom:0;">&#9673; Live Camera Feed</span> <div class="video-header">
<div style="display:flex;align-items:center;gap:10px;"> <span class="section-title" style="margin-bottom:0;">&#9673; Live Camera Feed</span>
<span class="video-status waiting" id="video-status"> <div style="display:flex;align-items:center;gap:10px;">
<span style="width:6px;height:6px;border-radius:50%;background:var(--text-secondary);"></span> <span class="video-status waiting" id="video-status">
waiting... <span style="width:6px;height:6px;border-radius:50%;background:var(--text-secondary);"></span>
</span> waiting...
<button class="video-toggle" id="videoToggle" onclick="toggleVideo()">STREAM OFF</button> </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> </div>
<div class="video-container" id="video-container"> <div class="panel">
<div class="video-placeholder" id="video-placeholder"> <span class="section-title">&#9673; Recent Activity</span>
<div class="vp-icon">&#9638;</div> <div style="margin-top:16px;" id="recent-batches">
<div class="vp-text">Live Feed Unavailable</div> <!-- Populated by JS -->
<div class="vp-hint">Enable <code>LIVE_STREAM_ENABLED=true</code> in counter .env</div>
</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> </div>
@@ -687,13 +695,6 @@
<span class="qs-val" id="avg-per-batch">--</span> <span class="qs-val" id="avg-per-batch">--</span>
</div> </div>
</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>
</div> </div>