From 25a869eb43c29ea9bce6592d03cfa8551ea6d70f Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 21 Mar 2026 08:17:40 +0000 Subject: [PATCH] Fix ui.rotate: broken CSS height chain causing blank video MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- web/src/views/live/LiveCameraView.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx index 7eb76141d..fc1b339d6 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(() => { @@ -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}