add function to get visible timeline duration

web/src/components/timeline/EventReviewTimeline.tsx

@@ -74,8 +74,11 @@ export function EventReviewTimeline({
     [timelineEnd, timelineStart],
   );
 
-  const { alignStartDateToTimeline, alignEndDateToTimeline } =
+  const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils(
-    useTimelineUtils(segmentDuration);
+    segmentDuration,
+    timelineDuration,
+    timelineRef || internalTimelineRef,
+  );
 
   const timelineStartAligned = useMemo(
     () => alignStartDateToTimeline(timelineStart),

web/src/components/timeline/EventSegment.tsx

@@ -53,8 +53,10 @@ export function EventSegment({
     getEventThumbnail,
   } = useEventSegmentUtils(segmentDuration, events, severityType);
 
-  const { alignStartDateToTimeline, alignEndDateToTimeline } =
+  const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils(
-    useTimelineUtils(segmentDuration);
+    segmentDuration,
+    0,
+  );
 
   const severity = useMemo(
     () => getSeverity(segmentTime, displaySeverityType),

web/src/components/timeline/MotionReviewTimeline.tsx

@@ -76,8 +76,10 @@ export function MotionReviewTimeline({
     [timelineEnd, timelineStart, segmentDuration],
   );
 
-  const { alignStartDateToTimeline, alignEndDateToTimeline } =
+  const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils(
-    useTimelineUtils(segmentDuration);
+    segmentDuration,
+    timelineDuration,
+  );
 
   const timelineStartAligned = useMemo(
     () => alignStartDateToTimeline(timelineStart) + 2 * segmentDuration,

web/src/components/timeline/MotionSegment.tsx

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

web/src/components/timeline/SummaryTimeline.tsx

@@ -39,18 +39,22 @@ export function SummaryTimeline({
 
   const observer = useRef<ResizeObserver | null>(null);
 
-  const { alignStartDateToTimeline } = useTimelineUtils(segmentDuration);
+  const reviewTimelineDuration = useMemo(
+    () => timelineStart - timelineEnd + 4 * segmentDuration,
+    [timelineEnd, timelineStart, segmentDuration],
+  );
+
+  const { alignStartDateToTimeline } = useTimelineUtils(
+    segmentDuration,
+    reviewTimelineDuration,
+    reviewTimelineRef,
+  );
 
   const timelineStartAligned = useMemo(
     () => alignStartDateToTimeline(timelineStart) + 2 * segmentDuration,
     [timelineStart, alignStartDateToTimeline, segmentDuration],
   );
 
-  const reviewTimelineDuration = useMemo(
-    () => timelineStart - timelineEnd + 4 * segmentDuration,
-    [timelineEnd, timelineStart, segmentDuration],
-  );
-
   // Generate segments for the timeline
   const generateSegments = useCallback(() => {
     const segmentCount = reviewTimelineDuration / segmentDuration;

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

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

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

@@ -1,6 +1,10 @@
 import { useCallback } from "react";
 
-export const useTimelineUtils = (segmentDuration: number) => {
+export const useTimelineUtils = (
+  segmentDuration: number,
+  timelineDuration: number,
+  timelineRef?: React.RefObject<HTMLElement>,
+) => {
   const alignEndDateToTimeline = useCallback(
     (time: number): number => {
       const remainder = time % segmentDuration;
@@ -28,9 +32,27 @@ export const useTimelineUtils = (segmentDuration: number) => {
     return scrollTop;
   }, []);
 
+  const getVisibleTimelineDuration = useCallback(() => {
+    if (timelineRef?.current) {
+      const {
+        scrollHeight: timelineHeight,
+        clientHeight: visibleTimelineHeight,
+      } = timelineRef.current;
+
+      const segmentHeight =
+        timelineHeight / (timelineDuration / segmentDuration);
+
+      const visibleTime =
+        (visibleTimelineHeight / segmentHeight) * segmentDuration;
+
+      return visibleTime;
+    }
+  }, [segmentDuration, timelineDuration, timelineRef]);
+
   return {
     alignEndDateToTimeline,
     alignStartDateToTimeline,
     getCumulativeScrollTop,
+    getVisibleTimelineDuration,
   };
 };

web/src/views/events/EventView.tsx

@@ -379,7 +379,16 @@ function DetectionReview({
 
   // timeline interaction
 
-  const { alignStartDateToTimeline } = useTimelineUtils(segmentDuration);
+  const timelineDuration = useMemo(
+    () => timeRange.before - timeRange.after,
+    [timeRange],
+  );
+
+  const { alignStartDateToTimeline } = useTimelineUtils(
+    segmentDuration,
+    timelineDuration,
+    reviewTimelineRef,
+  );
 
   const scrollLock = useScrollLockout(contentRef);