Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-10-27 10:52:11 +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;
}, []);
const segmentWidth = useMemo(() => {
const firstHalfSegmentWidth = useMemo(() => {
return interpolateMotionAudioData(
getMotionSegmentValue(segmentTime),
maxSegmentWidth,
);
}, [
segmentTime,
maxSegmentWidth,
getMotionSegmentValue,
interpolateMotionAudioData,
]);
const secondHalfSegmentWidth = useMemo(() => {
return interpolateMotionAudioData(
getMotionSegmentValue(segmentTime + segmentDuration / 2),
maxSegmentWidth,
@ -167,10 +179,19 @@ export function MotionSegment({
};
const segmentClick = useCallback(() => {
if (startTimestamp && setHandlebarTime && segmentWidth > 1) {
if (
startTimestamp &&
setHandlebarTime &&
(firstHalfSegmentWidth > 1 || secondHalfSegmentWidth > 1)
) {
setHandlebarTime(startTimestamp);
}
}, [startTimestamp, setHandlebarTime, segmentWidth]);
}, [
startTimestamp,
setHandlebarTime,
firstHalfSegmentWidth,
secondHalfSegmentWidth,
]);
return (
<div
@ -204,7 +225,7 @@ export function MotionSegment({
key={`${segmentKey}_motion_data_1`}
className={`h-[2px] rounded-full bg-motion_review`}
style={{
width: segmentWidth,
width: secondHalfSegmentWidth,
}}
></div>
</div>
@ -216,7 +237,7 @@ export function MotionSegment({
key={`${segmentKey}_motion_data_2`}
className={`h-[2px] rounded-full bg-motion_review`}
style={{
width: segmentWidth,
width: firstHalfSegmentWidth,
}}
></div>
</div>

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

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