rename vars and change which div is absolutely positioned (#10358)

web/src/components/timeline/EventReviewTimeline.tsx

@@ -46,7 +46,7 @@ export function EventReviewTimeline({
   onHandlebarDraggingChange,
 }: EventReviewTimelineProps) {
   const [isDragging, setIsDragging] = useState(false);
-  const scrollTimeRef = useRef<HTMLDivElement>(null);
+  const handlebarRef = useRef<HTMLDivElement>(null);
   const timelineRef = useRef<HTMLDivElement>(null);
   const handlebarTimeRef = useRef<HTMLDivElement>(null);
   const timelineDuration = useMemo(
@@ -68,7 +68,7 @@ export function EventReviewTimeline({
     useDraggableHandler({
       contentRef,
       timelineRef,
-      scrollTimeRef,
+      handlebarRef,
       alignStartDateToTimeline,
       alignEndDateToTimeline,
       segmentDuration,
@@ -143,7 +143,7 @@ export function EventReviewTimeline({
   return (
     <ReviewTimeline
       timelineRef={timelineRef}
-      scrollTimeRef={scrollTimeRef}
+      handlebarRef={handlebarRef}
       handlebarTimeRef={handlebarTimeRef}
       handleMouseMove={handleMouseMove}
       handleMouseUp={handleMouseUp}

web/src/components/timeline/MotionReviewTimeline.tsx

@@ -47,7 +47,7 @@ export function MotionReviewTimeline({
   onHandlebarDraggingChange,
 }: MotionReviewTimelineProps) {
   const [isDragging, setIsDragging] = useState(false);
-  const scrollTimeRef = useRef<HTMLDivElement>(null);
+  const handlebarRef = useRef<HTMLDivElement>(null);
   const timelineRef = useRef<HTMLDivElement>(null);
   const handlebarTimeRef = useRef<HTMLDivElement>(null);
   const timelineDuration = useMemo(
@@ -69,7 +69,7 @@ export function MotionReviewTimeline({
     useDraggableHandler({
       contentRef,
       timelineRef,
-      scrollTimeRef,
+      handlebarRef,
       alignStartDateToTimeline,
       alignEndDateToTimeline,
       segmentDuration,
@@ -145,7 +145,7 @@ export function MotionReviewTimeline({
   return (
     <ReviewTimeline
       timelineRef={timelineRef}
-      scrollTimeRef={scrollTimeRef}
+      handlebarRef={handlebarRef}
       handlebarTimeRef={handlebarTimeRef}
       handleMouseMove={handleMouseMove}
       handleMouseUp={handleMouseUp}

web/src/components/timeline/ReviewTimeline.tsx

@@ -2,7 +2,7 @@ import { ReactNode, RefObject } from "react";
 
 export type ReviewTimelineProps = {
   timelineRef: RefObject<HTMLDivElement>;
-  scrollTimeRef: RefObject<HTMLDivElement>;
+  handlebarRef: RefObject<HTMLDivElement>;
   handlebarTimeRef: RefObject<HTMLDivElement>;
   handleMouseMove: (
     e:
@@ -27,7 +27,7 @@ export type ReviewTimelineProps = {
 
 export function ReviewTimeline({
   timelineRef,
-  scrollTimeRef,
+  handlebarRef,
   handlebarTimeRef,
   handleMouseMove,
   handleMouseUp,
@@ -50,14 +50,17 @@ export function ReviewTimeline({
     >
       <div className="flex flex-col">{children}</div>
       {showHandlebar && (
-        <div className="absolute left-0 top-0 z-20 w-full" role="scrollbar">
+        <div
+          className="absolute left-0 top-0 z-20 w-full"
+          role="scrollbar"
+          ref={handlebarRef}
+        >
           <div
             className="flex items-center justify-center touch-none select-none"
             onMouseDown={handleMouseDown}
             onTouchStart={handleMouseDown}
           >
             <div
-              ref={scrollTimeRef}
               className={`relative w-full ${
                 isDragging ? "cursor-grabbing" : "cursor-grab"
               }`}

web/src/hooks/use-handle-dragging.ts

@@ -5,7 +5,7 @@ import scrollIntoView from "scroll-into-view-if-needed";
 type DragHandlerProps = {
   contentRef: React.RefObject<HTMLElement>;
   timelineRef: React.RefObject<HTMLDivElement>;
-  scrollTimeRef: React.RefObject<HTMLDivElement>;
+  handlebarRef: React.RefObject<HTMLDivElement>;
   alignStartDateToTimeline: (time: number) => number;
   alignEndDateToTimeline: (time: number) => number;
   segmentDuration: number;
@@ -22,7 +22,7 @@ type DragHandlerProps = {
 function useDraggableHandler({
   contentRef,
   timelineRef,
-  scrollTimeRef,
+  handlebarRef,
   alignStartDateToTimeline,
   segmentDuration,
   showHandlebar,
@@ -83,12 +83,12 @@ function useDraggableHandler({
       getClientYPosition(e);
       setIsDragging(true);
 
-      if (scrollTimeRef.current && clientYPosition && isDesktop) {
+      if (handlebarRef.current && clientYPosition && isDesktop) {
-        const handlebarRect = scrollTimeRef.current.getBoundingClientRect();
+        const handlebarRect = handlebarRef.current.getBoundingClientRect();
         setInitialClickAdjustment(clientYPosition - handlebarRect.top);
       }
     },
-    [setIsDragging, getClientYPosition, scrollTimeRef, clientYPosition],
+    [setIsDragging, getClientYPosition, handlebarRef, clientYPosition],
   );
 
   const handleMouseUp = useCallback(
@@ -121,7 +121,7 @@ function useDraggableHandler({
       scrollTimeline: boolean,
       updateHandle: boolean,
     ) => {
-      const thumb = scrollTimeRef.current;
+      const thumb = handlebarRef.current;
       if (thumb) {
         requestAnimationFrame(() => {
           thumb.style.top = `${newHandlePosition}px`;
@@ -148,7 +148,7 @@ function useDraggableHandler({
         }
       }
     },
-    [segmentDuration, handlebarTimeRef, scrollTimeRef, setHandlebarTime],
+    [segmentDuration, handlebarTimeRef, handlebarRef, setHandlebarTime],
   );
 
   const handleMouseMove = useCallback(
@@ -158,7 +158,7 @@ function useDraggableHandler({
       if (
         !contentRef.current ||
         !timelineRef.current ||
-        !scrollTimeRef.current
+        !handlebarRef.current
       ) {
         return;
       }
@@ -166,7 +166,7 @@ function useDraggableHandler({
       getClientYPosition(e);
     },
 
-    [contentRef, scrollTimeRef, timelineRef, getClientYPosition],
+    [contentRef, handlebarRef, timelineRef, getClientYPosition],
   );
 
   useEffect(() => {
@@ -277,7 +277,7 @@ function useDraggableHandler({
   useEffect(() => {
     if (
       timelineRef.current &&
-      scrollTimeRef.current &&
+      handlebarRef.current &&
       showHandlebar &&
       handlebarTime &&
       !isDragging
@@ -301,7 +301,7 @@ function useDraggableHandler({
     }
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [handlebarTime, showHandlebar, scrollTimeRef, timelineStartAligned]);
+  }, [handlebarTime, showHandlebar, handlebarRef, timelineStartAligned]);
 
   return { handleMouseDown, handleMouseUp, handleMouseMove };
 }