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

Fix overflowing portrait images in debug and motion tuner views (#11209)

Browse Source 
* fix overflowing camera image and remove mse console debug

* move calc into onLoad

* check container aspect
This commit is contained in:
Josh Hawkins 2024-05-02 15:05:20 -05:00 committed by GitHub
parent 7a5df6045a
commit b69c1828cb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/components/camera/CameraImage.tsx
View File

@ -2,6 +2,7 @@ import { useApiHost } from "@/api";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import useSWR from "swr"; import useSWR from "swr";
import ActivityIndicator from "../indicators/activity-indicator"; import ActivityIndicator from "../indicators/activity-indicator";
import { useResizeObserver } from "@/hooks/resize-observer";
type CameraImageProps = { type CameraImageProps = {
className?: string; className?: string;
@ -24,6 +25,7 @@ export default function CameraImage({
const { name } = config ? config.cameras[camera] : ""; const { name } = config ? config.cameras[camera] : "";
const enabled = config ? config.cameras[camera].enabled : "True"; const enabled = config ? config.cameras[camera].enabled : "True";
const [isPortraitImage, setIsPortraitImage] = useState(false);
useEffect(() => { useEffect(() => {
if (!config || !imgRef.current) { if (!config || !imgRef.current) {
@ -35,15 +37,25 @@ export default function CameraImage({
}`; }`;
}, [apiHost, name, imgRef, searchParams, config]); }, [apiHost, name, imgRef, searchParams, config]);
const [{ width: containerWidth, height: containerHeight }] =
useResizeObserver(containerRef);
return ( return (
<div className={className} ref={containerRef}> <div className={className} ref={containerRef}>
{enabled ? ( {enabled ? (
<img <img
ref={imgRef} ref={imgRef}
className="object-contain rounded-lg md:rounded-2xl" className={`object-contain ${isPortraitImage ? "h-full w-auto" : "w-full h-auto"} rounded-lg md:rounded-2xl`}
onLoad={() => { onLoad={() => {
setHasLoaded(true); setHasLoaded(true);
if (imgRef.current) {
const { naturalHeight, naturalWidth } = imgRef.current;
setIsPortraitImage(
naturalWidth / naturalHeight < containerWidth / containerHeight,
);
}
if (onload) { if (onload) {
onload(); onload();
} }

6
web/src/components/player/MsePlayer.tsx
View File

@ -215,8 +215,7 @@ function MSEPlayer({
} }
} }
} catch (e) { } catch (e) {
// eslint-disable-next-line no-console // no-op
console.debug(e);
} }
}); });
@ -233,8 +232,7 @@ function MSEPlayer({
try { try {
sb?.appendBuffer(data); sb?.appendBuffer(data);
} catch (e) { } catch (e) {
// eslint-disable-next-line no-console // no-op
console.debug(e);
} }
} }
}; };