From 1cd374d3ad42348d665376332ffd42694dc728df Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 26 Mar 2024 11:29:07 -0500
Subject: [PATCH] add option to only scrollintoview initially (#10689)

---
 web/src/components/timeline/MotionReviewTimeline.tsx |  3 +++
 web/src/hooks/use-draggable-element.ts               | 10 +++++++++-
 web/src/views/events/RecordingView.tsx               |  1 +
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/web/src/components/timeline/MotionReviewTimeline.tsx b/web/src/components/timeline/MotionReviewTimeline.tsx
index 6560e84ae..7d2d5371f 100644
--- a/web/src/components/timeline/MotionReviewTimeline.tsx
+++ b/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,
diff --git a/web/src/hooks/use-draggable-element.ts b/web/src/hooks/use-draggable-element.ts
index 493252714..f68ea5ebe 100644
--- a/web/src/hooks/use-draggable-element.ts
+++ b/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,
   ]);
 
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index f1a414be0..e9981c1be 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/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"