mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-04-05 22:57:40 +03:00
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:
parent
54b3717a60
commit
25a869eb43
@ -360,11 +360,13 @@ export default function LiveCameraView({
|
|||||||
}, [windowAspectRatio, containerRef]);
|
}, [windowAspectRatio, containerRef]);
|
||||||
|
|
||||||
const cameraAspectRatio = useMemo(() => {
|
const cameraAspectRatio = useMemo(() => {
|
||||||
|
let ratio;
|
||||||
if (fullResolution.width && fullResolution.height) {
|
if (fullResolution.width && fullResolution.height) {
|
||||||
return fullResolution.width / fullResolution.height;
|
ratio = fullResolution.width / fullResolution.height;
|
||||||
} else {
|
} else {
|
||||||
return camera.detect.width / camera.detect.height;
|
ratio = camera.detect.width / camera.detect.height;
|
||||||
}
|
}
|
||||||
|
return camera.ui?.rotate ? 1 / ratio : ratio;
|
||||||
}, [camera, fullResolution]);
|
}, [camera, fullResolution]);
|
||||||
|
|
||||||
const constrainedAspectRatio = useMemo<number>(() => {
|
const constrainedAspectRatio = useMemo<number>(() => {
|
||||||
@ -651,7 +653,7 @@ export default function LiveCameraView({
|
|||||||
className={cn(
|
className={cn(
|
||||||
fullscreen ? "*:rounded-none" : "",
|
fullscreen ? "*:rounded-none" : "",
|
||||||
camera.ui?.rotate &&
|
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
|
windowVisible
|
||||||
showStillWithoutActivity={false}
|
showStillWithoutActivity={false}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user