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

Merge pull request #17 from ibs0d/revert-16-codex/fix-grid/dashboard-video-rendering-issues

Browse Source 
Revert "Fix dashboard live rendering and rotated cover fitting"
This commit is contained in:
ibs0d 2026-03-08 16:48:36 +11:00 committed by GitHub
commit bb7cd76c80
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 shouldRotateClockwise = applyDashboardTransforms && rotateClockwise;
const mediaViewportRef = useRef<HTMLDivElement | null>(null); const mediaViewportRef = useRef<HTMLDivElement | null>(null);
const mediaContentRef = useRef<HTMLDivElement | null>(null);
const [{ width: viewportWidth, height: viewportHeight }] = const [{ width: viewportWidth, height: viewportHeight }] =
useResizeObserver(mediaViewportRef); useResizeObserver(mediaViewportRef);
@ -105,54 +104,17 @@ export default function LivePlayer({
transforms.push("rotate(90deg)"); transforms.push("rotate(90deg)");
} }
if (!shouldRotateClockwise || !viewportWidth || !viewportHeight) { // For a 90° rotation, the media box must use swapped viewport dimensions
return { // before rotating, otherwise the rotated content can under-fill one axis.
transform: transforms.join(" "), const rotatedWidth = viewportHeight ? `${viewportHeight}px` : "100%";
width: "100%", const rotatedHeight = viewportWidth ? `${viewportWidth}px` : "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`;
return { return {
transform: transforms.join(" "), transform: transforms.join(" "),
width: shouldRotateClockwise ? rotatedWidth : "100%", width: shouldRotateClockwise ? rotatedWidth : "100%",
height: shouldRotateClockwise ? rotatedHeight : "100%", height: shouldRotateClockwise ? rotatedHeight : "100%",
}; };
}, [ }, [shouldRotateClockwise, viewportHeight, viewportWidth]);
cameraConfig.detect.height,
cameraConfig.detect.width,
shouldFillContainer,
shouldRotateClockwise,
viewportHeight,
viewportWidth,
]);
// stats // stats
const [stats, setStats] = useState<PlayerStatsType>({ const [stats, setStats] = useState<PlayerStatsType>({
@ -348,7 +310,7 @@ export default function LivePlayer({
className={cn( className={cn(
"size-full rounded-lg md:rounded-2xl", "size-full rounded-lg md:rounded-2xl",
shouldFillContainer && "object-cover", shouldFillContainer && "object-cover",
liveReady ? "opacity-100" : "opacity-0", liveReady ? "" : "hidden",
)} )}
camera={streamName} camera={streamName}
playbackEnabled={cameraActive || liveReady} playbackEnabled={cameraActive || liveReady}
@ -371,7 +333,7 @@ export default function LivePlayer({
className={cn( className={cn(
"size-full rounded-lg md:rounded-2xl", "size-full rounded-lg md:rounded-2xl",
shouldFillContainer && "object-cover", shouldFillContainer && "object-cover",
liveReady ? "opacity-100" : "opacity-0", liveReady ? "" : "hidden",
)} )}
camera={streamName} camera={streamName}
playbackEnabled={cameraActive || liveReady} playbackEnabled={cameraActive || liveReady}
@ -411,11 +373,7 @@ export default function LivePlayer({
} }
useWebGL={useWebGL} useWebGL={useWebGL}
setStats={setStats} setStats={setStats}
containerRef={ containerRef={containerRef ?? internalContainerRef}
applyDashboardTransforms
? mediaContentRef
: (containerRef ?? internalContainerRef)
}
onPlaying={playerIsPlaying} onPlaying={playerIsPlaying}
fit={shouldFillContainer ? "cover" : "contain"} fit={shouldFillContainer ? "cover" : "contain"}
/> />
@ -463,7 +421,6 @@ export default function LivePlayer({
)} )}
> >
<div <div
ref={mediaContentRef}
className="absolute left-1/2 top-1/2" className="absolute left-1/2 top-1/2"
style={mediaTransformStyle} style={mediaTransformStyle}
> >