Timeline minimap and scrolling changes (#10589)

* add function to get visible timeline duration

* Don't show minimap when minimap bounds exceed timeline area

* when minimap is hidden, only scroll timeline when needed

* observe only when not showing minimap

* no need to duplicate observer

* fix out of order param

* timeline utils hook props

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

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

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

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

@@ -1,6 +1,16 @@
 import { useCallback } from "react";
 
-export const useTimelineUtils = (segmentDuration: number) => {
+export type TimelineUtilsProps = {
+  segmentDuration: number;
+  timelineDuration?: number;
+  timelineRef?: React.RefObject<HTMLElement>;
+};
+
+export function useTimelineUtils({
+  segmentDuration,
+  timelineDuration,
+  timelineRef,
+}: TimelineUtilsProps) {
   const alignEndDateToTimeline = useCallback(
     (time: number): number => {
       const remainder = time % segmentDuration;
@@ -28,9 +38,27 @@ export const useTimelineUtils = (segmentDuration: number) => {
     return scrollTop;
   }, []);
 
+  const getVisibleTimelineDuration = useCallback(() => {
+    if (timelineRef?.current && timelineDuration) {
+      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,
   };
-};
+}