Fix ui.rotate: broken CSS height chain causing blank video

Root cause: LivePlayer's outer div has no explicit height (only w-full),
so when MsePlayer reads containerSize.height via ResizeObserver it gets 0.
With isRotatedGrid=true, MsePlayer sets the inner div width:
containerSize.height → width: 0 → video invisible.

Fix:
- Add size-full to LivePlayer className when camera.ui?.rotate, ensuring
  height: 100% propagates through the chain so MsePlayer gets real dims
- Re-add cameraAspectRatio inversion (1/ratio) for portrait container
  layout; now that the height chain is intact this works correctly:
  portrait container → LivePlayer size-full → MsePlayer real dims → swap+rotate

https://claude.ai/code/session_01CDLHQPGpf8w44jpsG8g8nM
This commit is contained in:
Claude 2026-03-21 08:17:40 +00:00
parent 54b3717a60
commit 25a869eb43
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>(() => {
@ -651,7 +653,7 @@ export default function LiveCameraView({
className={cn(
fullscreen ? "*:rounded-none" : "",
camera.ui?.rotate &&
"[--frigate-mse-grid-rotated:1] [--frigate-mse-grid-rotation:rotate(90deg)]",
"size-full [--frigate-mse-grid-rotated:1] [--frigate-mse-grid-rotation:rotate(90deg)]",
)}
windowVisible
showStillWithoutActivity={false}