From ea9ca2f8d13df0770d6471d8c2d02356d3adb86f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 21 Mar 2026 07:32:14 +0000
Subject: [PATCH] Add ui.rotate support to LiveCameraView single-camera view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Invert cameraAspectRatio when camera.ui?.rotate is true so the
  container dimensions match the rotated video (width↔height swap)
- Pass CSS variables --frigate-mse-grid-rotated and
  --frigate-mse-grid-rotation to LivePlayer, enabling the existing
  MsePlayer rotation/swap logic for single-camera view
- Fullscreen orientation lock works automatically: an inverted ratio
  < 1 causes portrait lock for a normally-landscape camera

https://claude.ai/code/session_01CDLHQPGpf8w44jpsG8g8nM
---
 web/src/views/live/LiveCameraView.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 5addc59f8..741f7a919 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -360,11 +360,13 @@ export default function LiveCameraView({
   }, [windowAspectRatio, containerRef]);
 
   const cameraAspectRatio = useMemo(() => {
+    let ratio;
     if (fullResolution.width && fullResolution.height) {
-      return fullResolution.width / fullResolution.height;
+      ratio = fullResolution.width / fullResolution.height;
     } else {
-      return camera.detect.width / camera.detect.height;
+      ratio = camera.detect.width / camera.detect.height;
     }
+    return camera.ui?.rotate ? 1 / ratio : ratio;
   }, [camera, fullResolution]);
 
   const constrainedAspectRatio = useMemo<number>(() => {
@@ -648,7 +650,11 @@ export default function LiveCameraView({
               >
                 <LivePlayer
                   key={camera.name}
-                  className={`${fullscreen ? "*:rounded-none" : ""}`}
+                  className={cn(
+                    fullscreen ? "*:rounded-none" : "",
+                    camera.ui?.rotate &&
+                      "[--frigate-mse-grid-rotated:1] [--frigate-mse-grid-rotation:rotate(90deg)]",
+                  )}
                   windowVisible
                   showStillWithoutActivity={false}
                   showMotionDot={false}