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 segments on motion review (#10370)

Browse Source 
* fix segments on motion review

* remove unneeded data attribute
This commit is contained in:
Josh Hawkins 2024-03-11 07:56:36 -05:00 committed by GitHub
parent 359e45a748
commit cac5bccbe7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 36 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web/src/components/timeline/MotionSegment.tsx
View File

@ -82,7 +82,19 @@ export function MotionSegment({
return isMobile ? 30 : 50; return isMobile ? 30 : 50;
}, []); }, []);
const segmentWidth = useMemo(() => { const firstHalfSegmentWidth = useMemo(() => {
return interpolateMotionAudioData(
getMotionSegmentValue(segmentTime),
maxSegmentWidth,
);
}, [
segmentTime,
maxSegmentWidth,
getMotionSegmentValue,
interpolateMotionAudioData,
]);
const secondHalfSegmentWidth = useMemo(() => {
return interpolateMotionAudioData( return interpolateMotionAudioData(
getMotionSegmentValue(segmentTime + segmentDuration / 2), getMotionSegmentValue(segmentTime + segmentDuration / 2),
maxSegmentWidth, maxSegmentWidth,
@ -167,10 +179,19 @@ export function MotionSegment({
}; };
const segmentClick = useCallback(() => { const segmentClick = useCallback(() => {
if (startTimestamp && setHandlebarTime && segmentWidth > 1) { if (
startTimestamp &&
setHandlebarTime &&
(firstHalfSegmentWidth > 1 || secondHalfSegmentWidth > 1)
) {
setHandlebarTime(startTimestamp); setHandlebarTime(startTimestamp);
} }
}, [startTimestamp, setHandlebarTime, segmentWidth]); }, [
startTimestamp,
setHandlebarTime,
firstHalfSegmentWidth,
secondHalfSegmentWidth,
]);
return ( return (
<div <div
@ -204,7 +225,7 @@ export function MotionSegment({
key={`${segmentKey}_motion_data_1`} key={`${segmentKey}_motion_data_1`}
className={`h-[2px] rounded-full bg-motion_review`} className={`h-[2px] rounded-full bg-motion_review`}
style={{ style={{
width: segmentWidth, width: secondHalfSegmentWidth,
}} }}
></div> ></div>
</div> </div>
@ -216,7 +237,7 @@ export function MotionSegment({
key={`${segmentKey}_motion_data_2`} key={`${segmentKey}_motion_data_2`}
className={`h-[2px] rounded-full bg-motion_review`} className={`h-[2px] rounded-full bg-motion_review`}
style={{ style={{
width: segmentWidth, width: firstHalfSegmentWidth,
}} }}
></div> ></div>
</div> </div>

14
web/src/hooks/use-motion-segment-utils.ts
View File

@ -40,14 +40,20 @@ export const useMotionSegmentUtils = (
const getMotionSegmentValue = useCallback( const getMotionSegmentValue = useCallback(
(time: number): number => { (time: number): number => {
const matchingEvent = motion_events.find((event) => { const segmentStart = getSegmentStart(time);
const segmentEnd = getSegmentEnd(time);
const matchingEvents = motion_events.filter((event) => {
return ( return (
time >= getSegmentStart(event.start_time) && event.start_time >= segmentStart && event.start_time < segmentEnd
time <= getSegmentEnd(event.start_time)
); );
}); });
return matchingEvent?.motion ?? 0; const totalMotion = matchingEvents.reduce(
(acc, curr) => acc + (curr.motion ?? 0),
0,
);
return totalMotion;
}, },
[motion_events, getSegmentStart, getSegmentEnd], [motion_events, getSegmentStart, getSegmentEnd],
); );