diff --git a/web/src/components/timeline/MotionReviewTimeline.tsx b/web/src/components/timeline/MotionReviewTimeline.tsx index 6560e84ae..f94e80a6c 100644 --- a/web/src/components/timeline/MotionReviewTimeline.tsx +++ b/web/src/components/timeline/MotionReviewTimeline.tsx @@ -166,7 +166,7 @@ export function MotionReviewTimeline({ // Generate segments for the timeline const generateSegments = useCallback(() => { - const segmentCount = timelineDuration / segmentDuration; + const segmentCount = Math.ceil(timelineDuration / segmentDuration); return Array.from({ length: segmentCount }, (_, index) => { const segmentTime = timelineStartAligned - index * segmentDuration; diff --git a/web/src/hooks/use-camera-activity.ts b/web/src/hooks/use-camera-activity.ts index 9ddcfa692..9ecc7187c 100644 --- a/web/src/hooks/use-camera-activity.ts +++ b/web/src/hooks/use-camera-activity.ts @@ -100,8 +100,7 @@ export function useCameraMotionNextTimestamp( alignStartDateToTimeline(timeRangeSegmentEnd)) % segmentDuration; - const startIndex = - offset > 0 ? Math.floor(offset / (segmentDuration / 15)) : 0; + const startIndex = Math.abs(Math.floor(offset / 15)); for ( let i = startIndex; diff --git a/web/src/hooks/use-draggable-element.ts b/web/src/hooks/use-draggable-element.ts index 493252714..34b20b987 100644 --- a/web/src/hooks/use-draggable-element.ts +++ b/web/src/hooks/use-draggable-element.ts @@ -40,6 +40,7 @@ function useDraggableElement({ setIsDragging, setDraggableElementPosition, }: DraggableElementProps) { + const segmentHeight = 8; const [clientYPosition, setClientYPosition] = useState(null); const [initialClickAdjustment, setInitialClickAdjustment] = useState(0); const [scrollEdgeSize, setScrollEdgeSize] = useState(); @@ -134,15 +135,9 @@ function useDraggableElement({ const timestampToPixels = useCallback( (time: number) => { - const { scrollHeight: timelineHeight } = - timelineRef.current as HTMLDivElement; - - const segmentHeight = - timelineHeight / (timelineDuration / segmentDuration); - return ((timelineStartAligned - time) / segmentDuration) * segmentHeight; }, - [segmentDuration, timelineRef, timelineStartAligned, timelineDuration], + [segmentDuration, timelineStartAligned], ); const updateDraggableElementPosition = useCallback( @@ -225,11 +220,7 @@ function useDraggableElement({ clientYPosition && segments ) { - const { scrollHeight: timelineHeight, scrollTop: scrolled } = - timelineRef.current; - - const segmentHeight = - timelineHeight / (timelineDuration / segmentDuration); + const { scrollTop: scrolled } = timelineRef.current; const parentScrollTop = getCumulativeScrollTop(timelineRef.current); @@ -371,11 +362,7 @@ function useDraggableElement({ !isDragging && segments.length > 0 ) { - const { scrollHeight: timelineHeight, scrollTop: scrolled } = - timelineRef.current; - - const segmentHeight = - timelineHeight / (timelineDuration / segmentDuration); + const { scrollTop: scrolled } = timelineRef.current; const alignedSegmentTime = alignStartDateToTimeline(draggableElementTime); diff --git a/web/src/hooks/use-timeline-utils.ts b/web/src/hooks/use-timeline-utils.ts index c52213161..0bd35a39c 100644 --- a/web/src/hooks/use-timeline-utils.ts +++ b/web/src/hooks/use-timeline-utils.ts @@ -40,13 +40,9 @@ export function useTimelineUtils({ const getVisibleTimelineDuration = useCallback(() => { if (timelineRef?.current && timelineDuration) { - const { - scrollHeight: timelineHeight, - clientHeight: visibleTimelineHeight, - } = timelineRef.current; + const { clientHeight: visibleTimelineHeight } = timelineRef.current; - const segmentHeight = - timelineHeight / (timelineDuration / segmentDuration); + const segmentHeight = 8; const visibleTime = (visibleTimelineHeight / segmentHeight) * segmentDuration;