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

Motion timeline updates (#10242)

Browse Source 
* adjust segment math

* simplify interp and fix math

* fix math and update dependency

* push debug

* Revert "push debug"

This reverts commit 07c171b341.
This commit is contained in:
Josh Hawkins 2024-03-04 16:18:27 -06:00 committed by GitHub
parent 282c92c9c8
commit 38e76666e7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 27 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/timeline/MotionReviewTimeline.tsx
View File

@ -113,6 +113,7 @@ export function MotionReviewTimeline({
minimapStartTime,
minimapEndTime,
events,
motion_events,
]);
const segments = useMemo(
@ -128,6 +129,7 @@ export function MotionReviewTimeline({
minimapStartTime,
minimapEndTime,
events,
motion_events,
],
);

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

@ -217,13 +217,8 @@ export function MotionSegment({
className={`h-[2px] rounded-full bg-motion_review`}
onClick={segmentClick}
style={{
width:
maxSegmentWidth -
interpolateMotionAudioData(
getMotionSegmentValue(segmentTime - segmentDuration / 2),
0,
100,
1,
width: interpolateMotionAudioData(
getMotionSegmentValue(segmentTime + segmentDuration / 2),
maxSegmentWidth,
),
}}
@ -236,10 +231,7 @@ export function MotionSegment({
onClick={segmentClick}
style={{
width: interpolateMotionAudioData(
getAudioSegmentValue(segmentTime - segmentDuration / 2),
-100,
0,
1,
getAudioSegmentValue(segmentTime + segmentDuration / 2),
maxSegmentWidth,
),
}}
@ -254,13 +246,8 @@ export function MotionSegment({
className={`h-[2px] rounded-full bg-motion_review`}
onClick={segmentClick}
style={{
width:
maxSegmentWidth -
interpolateMotionAudioData(
width: interpolateMotionAudioData(
getMotionSegmentValue(segmentTime),
0,
100,
1,
maxSegmentWidth,
),
}}
@ -274,9 +261,6 @@ export function MotionSegment({
style={{
width: interpolateMotionAudioData(
getAudioSegmentValue(segmentTime),
-100,
0,
1,
maxSegmentWidth,
),
}}

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

@ -1,41 +1,39 @@
import { useCallback } from "react";
import { useCallback, useMemo } from "react";
import { MockMotionData } from "@/pages/UIPlayground";
export const useMotionSegmentUtils = (
segmentDuration: number,
motion_events: MockMotionData[],
) => {
const halfSegmentDuration = useMemo(
() => segmentDuration / 2,
[segmentDuration],
);
const getSegmentStart = useCallback(
(time: number): number => {
return Math.floor(time / segmentDuration) * segmentDuration;
return Math.floor(time / halfSegmentDuration) * halfSegmentDuration;
},
[segmentDuration],
[halfSegmentDuration],
);
const getSegmentEnd = useCallback(
(time: number | undefined): number => {
if (time) {
return (
Math.floor(time / segmentDuration) * segmentDuration + segmentDuration
Math.floor(time / halfSegmentDuration) * halfSegmentDuration +
halfSegmentDuration
);
} else {
return Date.now() / 1000 + segmentDuration;
return Date.now() / 1000 + halfSegmentDuration;
}
},
[segmentDuration],
[halfSegmentDuration],
);
const interpolateMotionAudioData = useCallback(
(
value: number,
oldMin: number,
oldMax: number,
newMin: number,
newMax: number,
): number => {
return (
((value - oldMin) / (oldMax - oldMin)) * (newMax - newMin) + newMin
);
(value: number, newMax: number): number => {
return Math.ceil((Math.abs(value) / 100.0) * newMax) || 1;
},
[],
);
@ -45,7 +43,7 @@ export const useMotionSegmentUtils = (
const matchingEvent = motion_events.find((event) => {
return (
time >= getSegmentStart(event.start_time) &&
time < getSegmentEnd(event.end_time)
time < getSegmentEnd(event.start_time)
);
});
@ -59,7 +57,7 @@ export const useMotionSegmentUtils = (
const matchingEvent = motion_events.find((event) => {
return (
time >= getSegmentStart(event.start_time) &&
time < getSegmentEnd(event.end_time)
time < getSegmentEnd(event.start_time)
);
});