From c12617fd56c813dd2d1209d9279a52e1dae6f914 Mon Sep 17 00:00:00 2001 From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Date: Thu, 21 Mar 2024 12:40:37 -0500 Subject: [PATCH] timeline utils hook props --- .../timeline/EventReviewTimeline.tsx | 8 +++++--- web/src/components/timeline/EventSegment.tsx | 3 +-- .../timeline/MotionReviewTimeline.tsx | 6 ++++-- web/src/components/timeline/MotionSegment.tsx | 3 +-- .../components/timeline/SummaryTimeline.tsx | 8 ++++---- web/src/hooks/use-draggable-element.ts | 8 +++++--- web/src/hooks/use-timeline-utils.ts | 20 ++++++++++++------- web/src/views/events/EventView.tsx | 6 +++++- 8 files changed, 38 insertions(+), 24 deletions(-) diff --git a/web/src/components/timeline/EventReviewTimeline.tsx b/web/src/components/timeline/EventReviewTimeline.tsx index 6c6a8c8df..1e165d799 100644 --- a/web/src/components/timeline/EventReviewTimeline.tsx +++ b/web/src/components/timeline/EventReviewTimeline.tsx @@ -79,9 +79,11 @@ export function EventReviewTimeline({ ); const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils( - segmentDuration, - timelineDuration, - selectedTimelineRef, + { + segmentDuration, + timelineDuration, + timelineRef: selectedTimelineRef, + }, ); const timelineStartAligned = useMemo( diff --git a/web/src/components/timeline/EventSegment.tsx b/web/src/components/timeline/EventSegment.tsx index 8d63c9dc3..263b3bdbc 100644 --- a/web/src/components/timeline/EventSegment.tsx +++ b/web/src/components/timeline/EventSegment.tsx @@ -54,8 +54,7 @@ export function EventSegment({ } = useEventSegmentUtils(segmentDuration, events, severityType); const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils( - segmentDuration, - 0, + { segmentDuration }, ); const severity = useMemo( diff --git a/web/src/components/timeline/MotionReviewTimeline.tsx b/web/src/components/timeline/MotionReviewTimeline.tsx index c335d17d8..9255df53e 100644 --- a/web/src/components/timeline/MotionReviewTimeline.tsx +++ b/web/src/components/timeline/MotionReviewTimeline.tsx @@ -77,8 +77,10 @@ export function MotionReviewTimeline({ ); const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils( - segmentDuration, - timelineDuration, + { + segmentDuration, + timelineDuration, + }, ); const timelineStartAligned = useMemo( diff --git a/web/src/components/timeline/MotionSegment.tsx b/web/src/components/timeline/MotionSegment.tsx index d8d8b2856..21d404859 100644 --- a/web/src/components/timeline/MotionSegment.tsx +++ b/web/src/components/timeline/MotionSegment.tsx @@ -43,8 +43,7 @@ export function MotionSegment({ useMotionSegmentUtils(segmentDuration, motion_events); const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils( - segmentDuration, - 0, + { segmentDuration }, ); const { handleTouchStart } = useTapUtils(); diff --git a/web/src/components/timeline/SummaryTimeline.tsx b/web/src/components/timeline/SummaryTimeline.tsx index 41c6c217f..29fe11680 100644 --- a/web/src/components/timeline/SummaryTimeline.tsx +++ b/web/src/components/timeline/SummaryTimeline.tsx @@ -44,11 +44,11 @@ export function SummaryTimeline({ [timelineEnd, timelineStart, segmentDuration], ); - const { alignStartDateToTimeline } = useTimelineUtils( + const { alignStartDateToTimeline } = useTimelineUtils({ segmentDuration, - reviewTimelineDuration, - reviewTimelineRef, - ); + timelineDuration: reviewTimelineDuration, + timelineRef: reviewTimelineRef, + }); const timelineStartAligned = useMemo( () => alignStartDateToTimeline(timelineStart) + 2 * segmentDuration, diff --git a/web/src/hooks/use-draggable-element.ts b/web/src/hooks/use-draggable-element.ts index 7646478d7..1a70658f9 100644 --- a/web/src/hooks/use-draggable-element.ts +++ b/web/src/hooks/use-draggable-element.ts @@ -41,9 +41,11 @@ function useDraggableElement({ const [clientYPosition, setClientYPosition] = useState(null); const [initialClickAdjustment, setInitialClickAdjustment] = useState(0); const { alignStartDateToTimeline, getCumulativeScrollTop } = useTimelineUtils( - segmentDuration, - timelineDuration, - timelineRef, + { + segmentDuration: segmentDuration, + timelineDuration: timelineDuration, + timelineRef, + }, ); const draggingAtTopEdge = useMemo(() => { diff --git a/web/src/hooks/use-timeline-utils.ts b/web/src/hooks/use-timeline-utils.ts index 75d476905..c52213161 100644 --- a/web/src/hooks/use-timeline-utils.ts +++ b/web/src/hooks/use-timeline-utils.ts @@ -1,10 +1,16 @@ import { useCallback } from "react"; -export const useTimelineUtils = ( - segmentDuration: number, - timelineDuration: number, - timelineRef?: React.RefObject, -) => { +export type TimelineUtilsProps = { + segmentDuration: number; + timelineDuration?: number; + timelineRef?: React.RefObject; +}; + +export function useTimelineUtils({ + segmentDuration, + timelineDuration, + timelineRef, +}: TimelineUtilsProps) { const alignEndDateToTimeline = useCallback( (time: number): number => { const remainder = time % segmentDuration; @@ -33,7 +39,7 @@ export const useTimelineUtils = ( }, []); const getVisibleTimelineDuration = useCallback(() => { - if (timelineRef?.current) { + if (timelineRef?.current && timelineDuration) { const { scrollHeight: timelineHeight, clientHeight: visibleTimelineHeight, @@ -55,4 +61,4 @@ export const useTimelineUtils = ( getCumulativeScrollTop, getVisibleTimelineDuration, }; -}; +} diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx index d585d92d4..5c555f402 100644 --- a/web/src/views/events/EventView.tsx +++ b/web/src/views/events/EventView.tsx @@ -385,7 +385,11 @@ function DetectionReview({ ); const { alignStartDateToTimeline, getVisibleTimelineDuration } = - useTimelineUtils(segmentDuration, timelineDuration, reviewTimelineRef); + useTimelineUtils({ + segmentDuration, + timelineDuration, + timelineRef: reviewTimelineRef, + }); const scrollLock = useScrollLockout(contentRef);