administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-18 22:28:23 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Revert "Fix dashboard live rendering and rotated cover fitting"

Browse Source
This commit is contained in:
ibs0d 2026-03-08 16:48:17 +11:00 committed by GitHub
parent 123d8b484a
commit d6fced5e56
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
web/src/components/player/LivePlayer.tsx
View File

@ -94,7 +94,6 @@ export default function LivePlayer({
const shouldRotateClockwise = applyDashboardTransforms && rotateClockwise;
const mediaViewportRef = useRef<HTMLDivElement | null>(null);
const mediaContentRef = useRef<HTMLDivElement | null>(null);
const [{ width: viewportWidth, height: viewportHeight }] =
useResizeObserver(mediaViewportRef);
@ -105,54 +104,17 @@ export default function LivePlayer({
transforms.push("rotate(90deg)");
}
if (!shouldRotateClockwise || !viewportWidth || !viewportHeight) {
return {
transform: transforms.join(" "),
width: "100%",
height: "100%",
};
}
const sourceWidth = cameraConfig.detect.width || 1;
const sourceHeight = cameraConfig.detect.height || 1;
const rotatedAspect = sourceHeight / sourceWidth;
const containerAspect = viewportWidth / viewportHeight;
let renderedWidth = viewportWidth;
let renderedHeight = viewportHeight;
if (shouldFillContainer) {
if (rotatedAspect > containerAspect) {
renderedHeight = viewportHeight;
renderedWidth = renderedHeight * rotatedAspect;
} else {
renderedWidth = viewportWidth;
renderedHeight = renderedWidth / rotatedAspect;
}
} else if (rotatedAspect > containerAspect) {
renderedWidth = viewportWidth;
renderedHeight = renderedWidth / rotatedAspect;
} else {
renderedHeight = viewportHeight;
renderedWidth = renderedHeight * rotatedAspect;
}
const rotatedWidth = `${Math.ceil(renderedHeight)}px`;
const rotatedHeight = `${Math.ceil(renderedWidth)}px`;
// For a 90° rotation, the media box must use swapped viewport dimensions
// before rotating, otherwise the rotated content can under-fill one axis.
const rotatedWidth = viewportHeight ? `${viewportHeight}px` : "100%";
const rotatedHeight = viewportWidth ? `${viewportWidth}px` : "100%";
return {
transform: transforms.join(" "),
width: shouldRotateClockwise ? rotatedWidth : "100%",
height: shouldRotateClockwise ? rotatedHeight : "100%",
};
}, [
cameraConfig.detect.height,
cameraConfig.detect.width,
shouldFillContainer,
shouldRotateClockwise,
viewportHeight,
viewportWidth,
]);
}, [shouldRotateClockwise, viewportHeight, viewportWidth]);
// stats
const [stats, setStats] = useState<PlayerStatsType>({
@ -348,7 +310,7 @@ export default function LivePlayer({
className={cn(
"size-full rounded-lg md:rounded-2xl",
shouldFillContainer && "object-cover",
liveReady ? "opacity-100" : "opacity-0",
liveReady ? "" : "hidden",
)}
camera={streamName}
playbackEnabled={cameraActive || liveReady}
@ -371,7 +333,7 @@ export default function LivePlayer({
className={cn(
"size-full rounded-lg md:rounded-2xl",
shouldFillContainer && "object-cover",
liveReady ? "opacity-100" : "opacity-0",
liveReady ? "" : "hidden",
)}
camera={streamName}
playbackEnabled={cameraActive || liveReady}
@ -411,11 +373,7 @@ export default function LivePlayer({
}
useWebGL={useWebGL}
setStats={setStats}
containerRef={
applyDashboardTransforms
? mediaContentRef
: (containerRef ?? internalContainerRef)
}
containerRef={containerRef ?? internalContainerRef}
onPlaying={playerIsPlaying}
fit={shouldFillContainer ? "cover" : "contain"}
/>
@ -463,7 +421,6 @@ export default function LivePlayer({
)}
>
<div
ref={mediaContentRef}
className="absolute left-1/2 top-1/2"
style={mediaTransformStyle}
>