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

Simplify

Browse Source
This commit is contained in:
Nicolas Mowen 2025-10-15 17:20:12 -06:00
parent cba58ffccb
commit b0f5748be8
1 changed files with 19 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
web/src/components/overlay/detail/ObjectLifecycle.tsx
View File

@ -220,7 +220,7 @@ export default function ObjectLifecycle({
const [timeIndex, setTimeIndex] = useState(0); const [timeIndex, setTimeIndex] = useState(0);
const handleSetBox = useCallback( const handleSetBox = useCallback(
(box: number[]) => { (box: number[], attrBox: number[] | undefined) => {
if (imgRef.current && Array.isArray(box) && box.length === 4) { if (imgRef.current && Array.isArray(box) && box.length === 4) {
const imgElement = imgRef.current; const imgElement = imgRef.current;
const imgRect = imgElement.getBoundingClientRect(); const imgRect = imgElement.getBoundingClientRect();
@ -233,34 +233,25 @@ export default function ObjectLifecycle({
borderColor: `rgb(${getObjectColor(event.label)?.join(",")})`, borderColor: `rgb(${getObjectColor(event.label)?.join(",")})`,
}; };
if (attrBox) {
const attrStyle = {
left: `${attrBox[0] * imgRect.width}px`,
top: `${attrBox[1] * imgRect.height}px`,
width: `${attrBox[2] * imgRect.width}px`,
height: `${attrBox[3] * imgRect.height}px`,
borderColor: `rgb(${getObjectColor(event.label)?.join(",")})`,
};
setAttributeBoxStyle(attrStyle);
} else {
setAttributeBoxStyle(null);
}
setBoxStyle(style); setBoxStyle(style);
} }
}, },
[imgRef, event, getObjectColor], [imgRef, event, getObjectColor],
); );
const handleSetAttributeBox = useCallback(
(box: number[] | undefined) => {
if (imgRef.current && Array.isArray(box) && box.length === 4) {
const imgElement = imgRef.current;
const imgRect = imgElement.getBoundingClientRect();
const style = {
left: `${box[0] * imgRect.width}px`,
top: `${box[1] * imgRect.height}px`,
width: `${box[2] * imgRect.width}px`,
height: `${box[3] * imgRect.height}px`,
borderColor: `rgb(${getObjectColor(event.label)?.join(",")})`,
};
setAttributeBoxStyle(style);
} else {
setAttributeBoxStyle(null);
}
},
[imgRef, event, getObjectColor],
);
// image // image
const [src, setSrc] = useState( const [src, setSrc] = useState(
@ -316,13 +307,15 @@ export default function ObjectLifecycle({
} else { } else {
// lifecycle point // lifecycle point
setTimeIndex(eventSequence?.[current].timestamp); setTimeIndex(eventSequence?.[current].timestamp);
handleSetBox(eventSequence?.[current].data.box ?? []); handleSetBox(
handleSetAttributeBox(eventSequence?.[current].data?.attribute_box); eventSequence?.[current].data.box ?? [],
eventSequence?.[current].data?.attribute_box,
);
setLifecycleZones(eventSequence?.[current].data.zones); setLifecycleZones(eventSequence?.[current].data.zones);
} }
setSelectedZone(""); setSelectedZone("");
} }
}, [current, imgLoaded, handleSetBox, handleSetAttributeBox, eventSequence]); }, [current, imgLoaded, handleSetBox, eventSequence]);
useEffect(() => { useEffect(() => {
if (!mainApi || !thumbnailApi || !eventSequence || !event) { if (!mainApi || !thumbnailApi || !eventSequence || !event) {