update data video box

index.html

@@ -292,16 +292,48 @@ header {
 /* ── VIDEO PANEL ── */
 #videoPanel { display:none;padding:32px; }
 
-.video-layout { display:grid;grid-template-columns:1fr 320px;gap:20px; }
+.video-layout {
+  display:flex;
+  align-items:stretch;
+  gap:20px;
+  min-height:calc(100vh - 125px);
+}
+
+#view-video {
+  min-width:0;
+  flex:1;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  background:#030608;
+  overflow:hidden;
+  position:relative;
+  border:1px solid var(--border);
+  border-radius:6px;
+  min-height:420px;
+}
 
-.video-wrap { position:relative;background:#000;border-radius:6px;overflow:hidden;border:1px solid var(--border);width:100%;height:100%; }
 #videoEl { display:block;width:100%;height:100%;object-fit:contain; }
 #overlayCanvas {
   position:absolute;top:0;left:0;width:100%;height:100%;
   pointer-events:none;
 }
+#bufferInfo {
+  position:absolute;
+  right:12px;
+  bottom:12px;
+  z-index:2;
+  padding:4px 8px;
+  background:rgba(3,6,8,.72);
+  border:1px solid rgba(24,32,48,.9);
+  border-radius:3px;
+  color:var(--dim);
+  font-family:var(--mono);
+  font-size:10px;
+  letter-spacing:1px;
+}
 
-.video-sidebar { display:flex;flex-direction:column;gap:14px; }
+.video-sidebar { display:flex;flex:0 0 320px;flex-direction:column;gap:14px; }
 
 .vid-ctrl {
   background:var(--s1);border:1px solid var(--border);border-radius:6px;padding:18px;
@@ -355,11 +387,26 @@ header {
 
 .no-video {
   display:flex;flex-direction:column;align-items:center;justify-content:center;
-  min-height:360px;gap:12px;opacity:.35;
+  width:100%;min-height:360px;gap:12px;opacity:.35;
 }
 .no-video-icon { font-size:48px; }
 .no-video-txt  { font-family:var(--mono);font-size:12px;letter-spacing:2px; }
 
+@media (max-width: 900px) {
+  .video-layout {
+    flex-direction:column;
+    min-height:0;
+  }
+  #view-video {
+    flex:none;
+    min-height:320px;
+    aspect-ratio:16 / 9;
+  }
+  .video-sidebar {
+    flex:0 0 auto;
+  }
+}
+
 /* ── CANVAS CHARTS (timeline) ── */
 #timelineCanvas { width:100%;height:130px;display:block; }
 
@@ -535,8 +582,8 @@ header {
     <div class="video-layout">
 
       <div>
-        <div class="video-wrap" id="videoWrap">
-          <div class="no-video" id="noVideo">
+        <div class="video-wrap" id="view-video">
+          <div class="no-video no-signal" id="noSignal">
             <div class="no-video-icon">🎬</div>
             <div class="no-video-txt">NO VIDEO LOADED</div>
             <div style="font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:6px">
@@ -545,6 +592,7 @@ header {
           </div>
           <video id="videoEl" style="display:none" controls></video>
           <canvas id="overlayCanvas"></canvas>
+          <div id="bufferInfo">BUF: 0</div>
         </div>
       </div>
 
@@ -784,6 +832,11 @@ function classUniqueCounts(rows) {
   return Object.fromEntries(Object.entries(byClass).map(([cls, ids]) => [cls, ids.size]));
 }
 
+function uniqueClassCount(rows, keys) {
+  const wanted = new Set(keys);
+  return new Set(rows.filter(r => wanted.has(r.class_name)).map(objectKey)).size;
+}
+
 function annotateRows(rows, meta={}) {
   const key = sourceKeyFromMeta(meta);
   return rows.map(row => ({
@@ -1074,9 +1127,9 @@ function renderSceneTable() {
     const frames     = new Set(rows.map(r => r.frame)).size;
     const uniqueObjs = data.trackIds.size;
     const duration   = Math.max(...rows.map(r => parseFloat(r.timestamp_sec||0))).toFixed(1);
-    const cars    = new Set(rows.filter(r => r.class_name==='car').map(objectKey)).size;
-    const persons = new Set(rows.filter(r => r.class_name==='person').map(objectKey)).size;
-    const heavy   = new Set(rows.filter(r => r.class_name==='bus'||r.class_name==='truck').map(objectKey)).size;
+    const cars    = uniqueClassCount(rows, ['car']);
+    const persons = uniqueClassCount(rows, ['person']);
+    const heavy   = uniqueClassCount(rows, ['bus', 'truck']);
     const avgConf = (rows.reduce((s,r)=>s+parseFloat(r.confidence||0),0)/rows.length*100).toFixed(1);
     const down    = rows.filter(r => r.direction==='down').length;
     const up      = rows.filter(r => r.direction==='up').length;
@@ -1134,7 +1187,7 @@ function selectScene(sc, el) {
   const vid = document.getElementById('videoEl');
   vid.pause();
   vid.style.display = 'none';
-  document.getElementById('noVideo').style.display = 'flex';
+  document.getElementById('noSignal').style.display = 'flex';
   document.getElementById('vidName').textContent = '';
   document.getElementById('liveCounts').innerHTML =
     '<div style="font-family:var(--mono);font-size:10px;color:var(--dim);text-align:center;padding:8px">Choose a video for this scene</div>';
@@ -1205,18 +1258,19 @@ function loadRemoteVideo(file) {
   vid.pause();
   vid.src = file.url;
   vid.style.display = 'block';
-  document.getElementById('noVideo').style.display = 'none';
+  document.getElementById('noSignal').style.display = 'none';
   document.getElementById('vidName').textContent = `${file.name} (${file.repo}${file.folder ? ' / ' + file.folder : ''})`;
   document.getElementById('liveCounts').innerHTML =
     '<div style="font-family:var(--mono);font-size:10px;color:var(--dim);text-align:center;padding:8px">Play the selected video to see live counts</div>';
 
   vid.onloadedmetadata = () => {
-    const wrap = document.getElementById('videoWrap');
+    const wrap = document.getElementById('view-video');
     const canvas = document.getElementById('overlayCanvas');
     canvas.style.width = wrap.offsetWidth + 'px';
     canvas.style.height = wrap.offsetHeight + 'px';
     canvas.width = wrap.offsetWidth * window.devicePixelRatio;
     canvas.height = wrap.offsetHeight * window.devicePixelRatio;
+    updateBufferInfo();
   };
   vid.ontimeupdate = onVideoTimeUpdate;
 }
@@ -1234,11 +1288,11 @@ function loadVideo(input) {
   const vid = document.getElementById('videoEl');
   vid.src     = url;
   vid.style.display = 'block';
-  document.getElementById('noVideo').style.display = 'none';
+  document.getElementById('noSignal').style.display = 'none';
   document.getElementById('vidName').textContent = file.name;
 
   vid.onloadedmetadata = () => {
-    const wrap = document.getElementById('videoWrap');
+    const wrap = document.getElementById('view-video');
     const canvas = document.getElementById('overlayCanvas');
     
     // Match canvas display size to wrapper
@@ -1249,6 +1303,7 @@ function loadVideo(input) {
     canvas.width = wrap.offsetWidth * window.devicePixelRatio;
     canvas.height = wrap.offsetHeight * window.devicePixelRatio;
     
+    updateBufferInfo();
     toast(`Video loaded: ${vid.videoWidth}×${vid.videoHeight}`, 'ok');
   };
 
@@ -1257,9 +1312,22 @@ function loadVideo(input) {
 
 let lastDrawnFrame = -1;
 
+function updateBufferInfo() {
+  const vid = document.getElementById('videoEl');
+  const el = document.getElementById('bufferInfo');
+  if (!vid || !el || !vid.duration || !vid.buffered.length) {
+    if (el) el.textContent = 'BUF: 0';
+    return;
+  }
+  const end = vid.buffered.end(vid.buffered.length - 1);
+  const pct = Math.min(100, Math.round((end / vid.duration) * 100));
+  el.textContent = `BUF: ${pct}`;
+}
+
 function onVideoTimeUpdate() {
   if (!activeScene) return;
   const vid = document.getElementById('videoEl');
+  updateBufferInfo();
   const fps = detectFPS(activeScene);
   const frameNum = Math.round(vid.currentTime * fps);
   if (frameNum === lastDrawnFrame) return;
@@ -1281,7 +1349,7 @@ function drawOverlay(frameNum) {
   const canvas = document.getElementById('overlayCanvas');
   const ctx    = canvas.getContext('2d');
   const vid    = document.getElementById('videoEl');
-  const wrap   = document.getElementById('videoWrap');
+  const wrap   = document.getElementById('view-video');
 
   // Get actual display dimensions
   const displayWidth = wrap.offsetWidth;
@@ -1719,9 +1787,9 @@ function renderFilteredSceneTable() {
     const frames = new Set(sceneRows.map(r => r.frame)).size;
     const uniqueObjs = new Set(sceneRows.map(objectKey)).size;
     const duration = Math.max(...sceneRows.map(r => parseFloat(r.timestamp_sec||0))).toFixed(1);
-    const cars = new Set(sceneRows.filter(r => r.class_name==='car').map(objectKey)).size;
-    const persons = new Set(sceneRows.filter(r => r.class_name==='person').map(objectKey)).size;
-    const heavy = new Set(sceneRows.filter(r => r.class_name==='bus'||r.class_name==='truck').map(objectKey)).size;
+    const cars = uniqueClassCount(sceneRows, ['car']);
+    const persons = uniqueClassCount(sceneRows, ['person']);
+    const heavy = uniqueClassCount(sceneRows, ['bus', 'truck']);
     const avgConf = (sceneRows.reduce((s,r)=>s+parseFloat(r.confidence||0),0)/sceneRows.length*100).toFixed(1);
     const down = sceneRows.filter(r => r.direction==='down').length;
     const up = sceneRows.filter(r => r.direction==='up').length;