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, minimapStartTime,
minimapEndTime, minimapEndTime,
events, events,
motion_events,
]); ]);
const segments = useMemo( const segments = useMemo(
@ -128,6 +129,7 @@ export function MotionReviewTimeline({
minimapStartTime, minimapStartTime,
minimapEndTime, minimapEndTime,
events, events,
motion_events,
], ],
); );

View File

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

View File

@ -1,28 +1,34 @@
import { useCallback } from "react"; import { useCallback, useMemo } from "react";
import { MockMotionData } from "@/pages/UIPlayground"; import { MockMotionData } from "@/pages/UIPlayground";
export const useMotionSegmentUtils = ( export const useMotionSegmentUtils = (
segmentDuration: number, segmentDuration: number,
motion_events: MockMotionData[], motion_events: MockMotionData[],
) => { ) => {
const halfSegmentDuration = useMemo(
() => segmentDuration / 2,
[segmentDuration],
);
const getSegmentStart = useCallback( const getSegmentStart = useCallback(
(time: number): number => { (time: number): number => {
return Math.floor(time / segmentDuration) * segmentDuration; return Math.floor(time / halfSegmentDuration) * halfSegmentDuration;
}, },
[segmentDuration], [halfSegmentDuration],
); );
const getSegmentEnd = useCallback( const getSegmentEnd = useCallback(
(time: number | undefined): number => { (time: number | undefined): number => {
if (time) { if (time) {
return ( return (
Math.floor(time / segmentDuration) * segmentDuration + segmentDuration Math.floor(time / halfSegmentDuration) * halfSegmentDuration +
halfSegmentDuration
); );
} else { } else {
return Date.now() / 1000 + segmentDuration; return Date.now() / 1000 + halfSegmentDuration;
} }
}, },
[segmentDuration], [halfSegmentDuration],
); );
const interpolateMotionAudioData = useCallback( const interpolateMotionAudioData = useCallback(
@ -37,13 +43,13 @@ export const useMotionSegmentUtils = (
const matchingEvent = motion_events.find((event) => { const matchingEvent = motion_events.find((event) => {
return ( return (
time >= getSegmentStart(event.start_time) && time >= getSegmentStart(event.start_time) &&
time < getSegmentEnd(event.start_time + segmentDuration / 2) time < getSegmentEnd(event.start_time)
); );
}); });
return matchingEvent?.motionValue ?? 0; return matchingEvent?.motionValue ?? 0;
}, },
[motion_events, getSegmentStart, getSegmentEnd, segmentDuration], [motion_events, getSegmentStart, getSegmentEnd],
); );
const getAudioSegmentValue = useCallback( const getAudioSegmentValue = useCallback(
@ -51,7 +57,7 @@ export const useMotionSegmentUtils = (
const matchingEvent = motion_events.find((event) => { const matchingEvent = motion_events.find((event) => {
return ( return (
time >= getSegmentStart(event.start_time) && time >= getSegmentStart(event.start_time) &&
time < getSegmentEnd(event.end_time) time < getSegmentEnd(event.start_time)
); );
}); });