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