administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-05-01 19:17:41 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Use a state to track when face image loads

Browse Source 
The naturalWidth and naturalHeight will always be 0 until the image loads. So we use onLoad and a state to track loading and then calculate the area after it has loaded
This commit is contained in:
Josh Hawkins 2025-05-21 13:27:26 -05:00
parent 5a6fb237f7
commit fb7f8e6189
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/pages/FaceLibrary.tsx
View File

@ -876,6 +876,7 @@ function FaceAttempt({
onRefresh,
}: FaceAttemptProps) {
const { t } = useTranslation(["views/faceLibrary"]);
const [imageLoaded, setImageLoaded] = useState(false);
const scoreStatus = useMemo(() => {
if (data.score >= recognitionConfig.recognition_threshold) {
@ -896,14 +897,12 @@ function FaceAttempt({
});
const imageArea = useMemo(() => {
if (!imgRef.current) {
if (imgRef.current == null || !imageLoaded) {
return undefined;
}
return imgRef.current.naturalWidth * imgRef.current.naturalHeight;
// only refresh when severity changes
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [imgRef.current]);
}, [imageLoaded]);
// api calls
@ -966,9 +965,10 @@ function FaceAttempt({
: "outline-transparent duration-500",
)}
>
<div className="relative w-full select-none overflow-hidden rounded-lg *:text-card-foreground">
<div className="relative w-full select-none overflow-hidden rounded-lg">
<img
ref={imgRef}
onLoad={() => setImageLoaded(true)}
className={cn("size-44", isMobile && "w-full")}
src={`${baseUrl}clips/faces/train/${data.filename}`}
onClick={(e) => {