Add ui.rotate support to LiveCameraView single-camera view

- 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
This commit is contained in:
Claude 2026-03-21 07:32:14 +00:00
parent 28b5b17b58
commit ea9ca2f8d1
No known key found for this signature in database

View File

@ -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}