fix math and update dependency

This commit is contained in:
Josh Hawkins 2024-03-04 15:13:07 -06:00
parent 648f615560
commit 5a3dcd8605
3 changed files with 21 additions and 13 deletions

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,
],
);

View File

@ -218,7 +218,7 @@ export function MotionSegment({
onClick={segmentClick}
style={{
width: interpolateMotionAudioData(
getMotionSegmentValue(segmentTime),
getMotionSegmentValue(segmentTime + segmentDuration / 2),
maxSegmentWidth,
),
}}
@ -231,7 +231,7 @@ export function MotionSegment({
onClick={segmentClick}
style={{
width: interpolateMotionAudioData(
getAudioSegmentValue(segmentTime),
getAudioSegmentValue(segmentTime + segmentDuration / 2),
maxSegmentWidth,
),
}}
@ -247,7 +247,7 @@ export function MotionSegment({
onClick={segmentClick}
style={{
width: interpolateMotionAudioData(
getMotionSegmentValue(segmentTime + segmentDuration / 2),
getMotionSegmentValue(segmentTime),
maxSegmentWidth,
),
}}
@ -260,7 +260,7 @@ export function MotionSegment({
onClick={segmentClick}
style={{
width: interpolateMotionAudioData(
getAudioSegmentValue(segmentTime + segmentDuration / 2),
getAudioSegmentValue(segmentTime),
maxSegmentWidth,
),
}}

View File

@ -1,28 +1,34 @@
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(
@ -37,13 +43,13 @@ export const useMotionSegmentUtils = (
const matchingEvent = motion_events.find((event) => {
return (
time >= getSegmentStart(event.start_time) &&
time < getSegmentEnd(event.start_time + segmentDuration / 2)
time < getSegmentEnd(event.start_time)
);
});
return matchingEvent?.motionValue ?? 0;
},
[motion_events, getSegmentStart, getSegmentEnd, segmentDuration],
[motion_events, getSegmentStart, getSegmentEnd],
);
const getAudioSegmentValue = useCallback(
@ -51,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)
);
});