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>; + 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>; + initialScrollIntoViewOnly?: boolean; draggableElementTimeRef: React.MutableRefObject; 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(null); const [initialClickAdjustment, setInitialClickAdjustment] = useState(0); + const [elementScrollIntoView, setElementScrollIntoView] = useState(true); const [scrollEdgeSize, setScrollEdgeSize] = useState(); const [segments, setSegments] = useState([]); 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"