timeline utils hook props

web/src/components/timeline/EventReviewTimeline.tsx

@@ -79,9 +79,11 @@ export function EventReviewTimeline({
   );
 
   const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils(
-    segmentDuration,
+    {
-    timelineDuration,
+      segmentDuration,
-    selectedTimelineRef,
+      timelineDuration,
+      timelineRef: selectedTimelineRef,
+    },
   );
 
   const timelineStartAligned = useMemo(

web/src/components/timeline/EventSegment.tsx

@@ -54,8 +54,7 @@ export function EventSegment({
   } = useEventSegmentUtils(segmentDuration, events, severityType);
 
   const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils(
-    segmentDuration,
+    { segmentDuration },
-    0,
   );
 
   const severity = useMemo(

web/src/components/timeline/MotionReviewTimeline.tsx

@@ -77,8 +77,10 @@ export function MotionReviewTimeline({
   );
 
   const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils(
-    segmentDuration,
+    {
-    timelineDuration,
+      segmentDuration,
+      timelineDuration,
+    },
   );
 
   const timelineStartAligned = useMemo(

web/src/components/timeline/MotionSegment.tsx

@@ -43,8 +43,7 @@ export function MotionSegment({
     useMotionSegmentUtils(segmentDuration, motion_events);
 
   const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils(
-    segmentDuration,
+    { segmentDuration },
-    0,
   );
 
   const { handleTouchStart } = useTapUtils();

web/src/components/timeline/SummaryTimeline.tsx

@@ -44,11 +44,11 @@ export function SummaryTimeline({
     [timelineEnd, timelineStart, segmentDuration],
   );
 
-  const { alignStartDateToTimeline } = useTimelineUtils(
+  const { alignStartDateToTimeline } = useTimelineUtils({
     segmentDuration,
-    reviewTimelineDuration,
+    timelineDuration: reviewTimelineDuration,
-    reviewTimelineRef,
+    timelineRef: reviewTimelineRef,
-  );
+  });
 
   const timelineStartAligned = useMemo(
     () => alignStartDateToTimeline(timelineStart) + 2 * segmentDuration,

web/src/hooks/use-draggable-element.ts

@@ -41,9 +41,11 @@ function useDraggableElement({
   const [clientYPosition, setClientYPosition] = useState<number | null>(null);
   const [initialClickAdjustment, setInitialClickAdjustment] = useState(0);
   const { alignStartDateToTimeline, getCumulativeScrollTop } = useTimelineUtils(
-    segmentDuration,
+    {
-    timelineDuration,
+      segmentDuration: segmentDuration,
-    timelineRef,
+      timelineDuration: timelineDuration,
+      timelineRef,
+    },
   );
 
   const draggingAtTopEdge = useMemo(() => {

web/src/hooks/use-timeline-utils.ts

@@ -1,10 +1,16 @@
 import { useCallback } from "react";
 
-export const useTimelineUtils = (
+export type TimelineUtilsProps = {
-  segmentDuration: number,
+  segmentDuration: number;
-  timelineDuration: number,
+  timelineDuration?: number;
-  timelineRef?: React.RefObject<HTMLElement>,
+  timelineRef?: React.RefObject<HTMLElement>;
-) => {
+};
+
+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,
   };
-};
+}

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