add option to only scrollintoview initially (#10689)

web/src/components/timeline/MotionReviewTimeline.tsx

@@ -21,6 +21,7 @@ export type MotionReviewTimelineProps = {
   showHandlebar?: boolean;
   handlebarTime?: number;
   setHandlebarTime?: React.Dispatch<React.SetStateAction<number>>;
+  onlyInitialHandlebarScroll?: boolean;
   motionOnly?: boolean;
   showMinimap?: boolean;
   minimapStartTime?: number;
@@ -46,6 +47,7 @@ export function MotionReviewTimeline({
   showHandlebar = false,
   handlebarTime,
   setHandlebarTime,
+  onlyInitialHandlebarScroll = false,
   motionOnly = false,
   showMinimap = false,
   minimapStartTime,
@@ -114,6 +116,7 @@ export function MotionReviewTimeline({
     showDraggableElement: showHandlebar,
     draggableElementTime: handlebarTime,
     setDraggableElementTime: setHandlebarTime,
+    initialScrollIntoViewOnly: onlyInitialHandlebarScroll,
     timelineDuration,
     timelineCollapsed: motionOnly,
     timelineStartAligned,

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

@@ -13,6 +13,7 @@ type DraggableElementProps = {
   draggableElementEarliestTime?: number;
   draggableElementLatestTime?: number;
   setDraggableElementTime?: React.Dispatch<React.SetStateAction<number>>;
+  initialScrollIntoViewOnly?: boolean;
   draggableElementTimeRef: React.MutableRefObject<HTMLDivElement | null>;
   timelineDuration: number;
   timelineCollapsed?: boolean;
@@ -32,6 +33,7 @@ function useDraggableElement({
   draggableElementEarliestTime,
   draggableElementLatestTime,
   setDraggableElementTime,
+  initialScrollIntoViewOnly,
   draggableElementTimeRef,
   timelineDuration,
   timelineCollapsed,
@@ -42,6 +44,7 @@ function useDraggableElement({
 }: DraggableElementProps) {
   const [clientYPosition, setClientYPosition] = useState<number | null>(null);
   const [initialClickAdjustment, setInitialClickAdjustment] = useState(0);
+  const [elementScrollIntoView, setElementScrollIntoView] = useState(true);
   const [scrollEdgeSize, setScrollEdgeSize] = useState<number>();
   const [segments, setSegments] = useState<HTMLDivElement[]>([]);
   const { alignStartDateToTimeline, getCumulativeScrollTop } = useTimelineUtils(
@@ -397,9 +400,13 @@ function useDraggableElement({
         updateDraggableElementPosition(
           newElementPosition,
           draggableElementTime,
-          true,
+          elementScrollIntoView,
           true,
         );
+
+        if (initialScrollIntoViewOnly) {
+          setElementScrollIntoView(false);
+        }
       }
     }
     // we know that these deps are correct
@@ -413,6 +420,7 @@ function useDraggableElement({
     timelineStartAligned,
     timelineRef,
     timelineCollapsed,
+    initialScrollIntoViewOnly,
     segments,
   ]);
 

web/src/views/events/RecordingView.tsx

@@ -344,6 +344,7 @@ export function RecordingView({
             showHandlebar
             handlebarTime={currentTime}
             setHandlebarTime={setCurrentTime}
+            onlyInitialHandlebarScroll={true}
             events={mainCameraReviewItems}
             motion_events={motionData ?? []}
             severityType="significant_motion"