Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

ensure the correct container is used for canvas calcs (#11599)

Browse Source
This commit is contained in:
Josh Hawkins 2024-05-28 13:41:51 -05:00 committed by GitHub
parent 4236580672
commit ced5ab203f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/src/components/player/JSMpegPlayer.tsx
View File

@ -23,8 +23,13 @@ export default function JSMpegPlayer({
const playerRef = useRef<HTMLDivElement | null>(null); const playerRef = useRef<HTMLDivElement | null>(null);
const internalContainerRef = useRef<HTMLDivElement | null>(null); const internalContainerRef = useRef<HTMLDivElement | null>(null);
const selectedContainerRef = useMemo(
() => containerRef ?? internalContainerRef,
[containerRef, internalContainerRef],
);
const [{ width: containerWidth, height: containerHeight }] = const [{ width: containerWidth, height: containerHeight }] =
useResizeObserver(containerRef ?? internalContainerRef); useResizeObserver(selectedContainerRef);
const stretch = true; const stretch = true;
const aspectRatio = width / height; const aspectRatio = width / height;
@ -35,11 +40,14 @@ export default function JSMpegPlayer({
); );
const scaledHeight = useMemo(() => { const scaledHeight = useMemo(() => {
if (containerRef?.current && width && height) { if (selectedContainerRef?.current && width && height) {
const scaledHeight = const scaledHeight =
aspectRatio < (fitAspect ?? 0) aspectRatio < (fitAspect ?? 0)
? Math.floor( ? Math.floor(
Math.min(containerHeight, containerRef.current?.clientHeight), Math.min(
containerHeight,
selectedContainerRef.current?.clientHeight,
),
) )
: aspectRatio > fitAspect : aspectRatio > fitAspect
? Math.floor(containerWidth / aspectRatio) ? Math.floor(containerWidth / aspectRatio)
@ -60,7 +68,7 @@ export default function JSMpegPlayer({
height, height,
width, width,
stretch, stretch,
containerRef, selectedContainerRef,
]); ]);
const scaledWidth = useMemo(() => { const scaledWidth = useMemo(() => {
@ -93,15 +101,17 @@ export default function JSMpegPlayer({
}, [url, camera]); }, [url, camera]);
return ( return (
<div className={className} ref={internalContainerRef}> <div className={className}>
<div ref={playerRef} className="jsmpeg"> <div className="size-full" ref={internalContainerRef}>
<canvas <div ref={playerRef} className="jsmpeg">
id={`${camera}-canvas`} <canvas
style={{ id={`${camera}-canvas`}
width: scaledWidth ?? width, style={{
height: scaledHeight ?? height, width: scaledWidth ?? width,
}} height: scaledHeight ?? height,
></canvas> }}
></canvas>
</div>
</div> </div>
</div> </div>
); );