From 71aa88913391d7f8cce9151d47fabbb27ad821ac Mon Sep 17 00:00:00 2001
From: Daniel Slay <danielslay86@gmail.com>
Date: Sun, 13 Sep 2026 23:21:33 +0000
Subject: [PATCH] =?UTF-8?q?cctv:=20live-video=20panel=20card=20=E2=80=94?=
 =?UTF-8?q?=20canvas=20painted=20from=20the=20active=20camera's=20video=20?=
 =?UTF-8?q?element,=2016:9=20wrap,=20gated=20against=20the=20still-image?=
 =?UTF-8?q?=20path?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layers/cctv/presentation.js    |  1 +
 src/ui/applicationShell.js         |  1 +
 src/ui/cctvPresentation.js         | 43 +++++++++++++++++++++++++++++-
 src/ui/shellElements.js            |  1 +
 src/ui/styles/cctv.css             | 18 +++++++++++++
 src/ui/templates/layer-panels.html |  1 +
 6 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/src/layers/cctv/presentation.js b/src/layers/cctv/presentation.js
index 742869877..13fa751bd 100644
--- a/src/layers/cctv/presentation.js
+++ b/src/layers/cctv/presentation.js
@@ -83,6 +83,7 @@ export function createPresentation({
       mountHeightM: camera.mountHeightM,
       active: isActive,
       feedType: camera.feedType,
+      isVideo: parts.model.isVideoFeedType(camera.feedType),
       sourceKind:
         health?.sourceKind ||
         camera.sourceKind ||
diff --git a/src/ui/applicationShell.js b/src/ui/applicationShell.js
index e54b7bf25..10695cf92 100644
--- a/src/ui/applicationShell.js
+++ b/src/ui/applicationShell.js
@@ -2618,6 +2618,7 @@ export class StyleManager {
         _cctvFocusBtn: this._cctvFocusBtn,
         _cctvFrame: this._cctvFrame,
         _cctvFrameWrap: this._cctvFrameWrap,
+        _cctvVideo: this._cctvVideo,
         _cctvMeta: this._cctvMeta,
         _cctvNearestBtn: this._cctvNearestBtn,
         _cctvNextBtn: this._cctvNextBtn,
diff --git a/src/ui/cctvPresentation.js b/src/ui/cctvPresentation.js
index a6db6893e..6ea2aa318 100644
--- a/src/ui/cctvPresentation.js
+++ b/src/ui/cctvPresentation.js
@@ -164,7 +164,46 @@ export function _renderCctvState(state) {
     }
   }
 
-  if (this._cctvFrame) {
+  // Live video: for HLS cameras, paint the active camera's decoded <video>
+  // element onto a canvas each frame (one decoder, two surfaces — the plane
+  // reads the same element). The loop rides through hls.js pipeline resets
+  // (a null element or unchanged currentTime is a skipped frame, not an exit)
+  // and self-stops when the card hides or the feed goes away. The still-image
+  // path below is suppressed while a live feed is showing.
+  const liveIntent = enabled && !!activeCamera?.isVideo;
+  if (this._cctvVideo) {
+    this._cctvVideo.hidden = !liveIntent;
+    if (this._cctvFrame) this._cctvFrame.hidden = liveIntent;
+    this._cctvVideoActive = liveIntent;
+    if (liveIntent && !this._cctvVideoRaf) {
+      const canvas = this._cctvVideo;
+      const ctx = canvas.getContext('2d');
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      let lastTime = -1;
+      const paint = () => {
+        if (this.destroyed || !this._cctvVideoActive) {
+          this._cctvVideoRaf = 0;
+          return;
+        }
+        const v = this.cctv.getActiveVideoElement();
+        if (v && v.currentTime !== lastTime) {
+          lastTime = v.currentTime;
+          if (
+            canvas.width !== v.videoWidth ||
+            canvas.height !== v.videoHeight
+          ) {
+            canvas.width = v.videoWidth;
+            canvas.height = v.videoHeight;
+          }
+          ctx.drawImage(v, 0, 0);
+        }
+        this._cctvVideoRaf = requestAnimationFrame(paint);
+      };
+      this._cctvVideoRaf = requestAnimationFrame(paint);
+    }
+  }
+
+  if (this._cctvFrame && !liveIntent) {
     const nextSrc = enabled ? activeCamera?.frameUrl : null;
     const nextCameraId = enabled ? activeCamera?.id || '' : '';
     const cameraChanged = this._cctvFrame.dataset.cameraId !== nextCameraId;
@@ -183,6 +222,8 @@ export function _renderCctvState(state) {
     if (!nextSrc) {
       this._clearCctvFrame();
     }
+  } else if (liveIntent) {
+    this._clearCctvFrame();
   }
 
   this._syncCctvSourceBadge(activeCamera, enabled);
diff --git a/src/ui/shellElements.js b/src/ui/shellElements.js
index f87d5304f..e7050f1c2 100644
--- a/src/ui/shellElements.js
+++ b/src/ui/shellElements.js
@@ -142,6 +142,7 @@ export function readShellElements(document = globalThis.document) {
     _cctvCalibResetBtn: document.getElementById('cctv-calib-reset-btn'),
     _cctvFrame: document.getElementById('cctv-frame'),
     _cctvFrameWrap: document.getElementById('cctv-frame-wrap'),
+    _cctvVideo: document.getElementById('cctv-video'),
     _cctvSourceBadge: document.getElementById('cctv-source-badge'),
     _cctvMeta: document.getElementById('cctv-meta'),
     _cctvSummary: document.getElementById('cctv-summary'),
diff --git a/src/ui/styles/cctv.css b/src/ui/styles/cctv.css
index 08b620c4e..09bae8527 100644
--- a/src/ui/styles/cctv.css
+++ b/src/ui/styles/cctv.css
@@ -234,6 +234,8 @@
      image inside is taller — and the wrap is overflow:hidden, which clipped
      the bottom of the frame right back off. Never shrink the preview. */
   flex-shrink: 0;
+  aspect-ratio: 16/9;
+  min-height: 0;
 }
 
 /* Lightweight loading shimmer while the active frame is fetching */
@@ -298,10 +300,26 @@
   transition: opacity 180ms ease;
 }
 
+#cctv-video {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: contain;
+}
+
 #cctv-frame.active {
   opacity: 1;
 }
 
+#cctv-video:not([hidden]) {
+  opacity: 1;
+}
+
+#cctv-frame[hidden],
+#cctv-video[hidden] {
+  display: none;
+}
+
 #cctv-meta {
   font-family: var(--font-mono);
   font-size: 9px;
diff --git a/src/ui/templates/layer-panels.html b/src/ui/templates/layer-panels.html
index 4f41b2452..887da5ac3 100644
--- a/src/ui/templates/layer-panels.html
+++ b/src/ui/templates/layer-panels.html
@@ -23,6 +23,7 @@
       </div>
       <div id="cctv-frame-wrap" class="cctv-frame-wrap">
         <img id="cctv-frame" alt="CCTV feed frame" />
+        <canvas id="cctv-video" class="cctv-frame" hidden></canvas>
       </div>
       <div id="cctv-source-badge" role="status" aria-live="polite">SOURCE · UNKNOWN</div>
       <div id="cctv-meta">Enable CCTV to load camera intersections</div>