From 05a66ce90d8c6558f51521f070d85cc8751ac5ba Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 8 Mar 2024 16:49:10 -0600
Subject: [PATCH] Timeline handlebar tweaks (#10336)

* initial offset click for desktop only

* align start timeline and update pixel math
---
 .../timeline/EventReviewTimeline.tsx          | 10 +++++--
 .../timeline/MotionReviewTimeline.tsx         | 14 +++++----
 web/src/hooks/use-handle-dragging.ts          | 30 +++++++++----------
 3 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/web/src/components/timeline/EventReviewTimeline.tsx b/web/src/components/timeline/EventReviewTimeline.tsx
index 6b23ac610..7e2b60bc3 100644
--- a/web/src/components/timeline/EventReviewTimeline.tsx
+++ b/web/src/components/timeline/EventReviewTimeline.tsx
@@ -59,6 +59,11 @@ export function EventReviewTimeline({
     segmentDuration,
   );
 
+  const timelineStartAligned = useMemo(
+    () => alignStartDateToTimeline(timelineStart),
+    [timelineStart, alignStartDateToTimeline],
+  );
+
   const { handleMouseDown, handleMouseUp, handleMouseMove } =
     useDraggableHandler({
       contentRef,
@@ -71,7 +76,7 @@ export function EventReviewTimeline({
       handlebarTime,
       setHandlebarTime,
       timelineDuration,
-      timelineStart,
+      timelineStartAligned,
       isDragging,
       setIsDragging,
       handlebarTimeRef,
@@ -80,10 +85,9 @@ export function EventReviewTimeline({
   // Generate segments for the timeline
   const generateSegments = useCallback(() => {
     const segmentCount = timelineDuration / segmentDuration;
-    const segmentAlignedTime = alignStartDateToTimeline(timelineStart);
 
     return Array.from({ length: segmentCount }, (_, index) => {
-      const segmentTime = segmentAlignedTime - index * segmentDuration;
+      const segmentTime = timelineStartAligned - index * segmentDuration;
 
       return (
         <EventSegment
diff --git a/web/src/components/timeline/MotionReviewTimeline.tsx b/web/src/components/timeline/MotionReviewTimeline.tsx
index 4c6c38409..fc9b6a796 100644
--- a/web/src/components/timeline/MotionReviewTimeline.tsx
+++ b/web/src/components/timeline/MotionReviewTimeline.tsx
@@ -60,6 +60,11 @@ export function MotionReviewTimeline({
     segmentDuration,
   );
 
+  const timelineStartAligned = useMemo(
+    () => alignStartDateToTimeline(timelineStart),
+    [timelineStart, alignStartDateToTimeline],
+  );
+
   const { handleMouseDown, handleMouseUp, handleMouseMove } =
     useDraggableHandler({
       contentRef,
@@ -72,7 +77,7 @@ export function MotionReviewTimeline({
       handlebarTime,
       setHandlebarTime,
       timelineDuration,
-      timelineStart,
+      timelineStartAligned,
       isDragging,
       setIsDragging,
       handlebarTimeRef,
@@ -81,10 +86,9 @@ export function MotionReviewTimeline({
   // Generate segments for the timeline
   const generateSegments = useCallback(() => {
     const segmentCount = timelineDuration / segmentDuration;
-    const segmentAlignedTime = alignStartDateToTimeline(timelineStart);
 
     return Array.from({ length: segmentCount }, (_, index) => {
-      const segmentTime = segmentAlignedTime - index * segmentDuration;
+      const segmentTime = timelineStartAligned - index * segmentDuration;
 
       return (
         <MotionSegment
@@ -106,7 +110,7 @@ export function MotionReviewTimeline({
   }, [
     segmentDuration,
     timestampSpread,
-    timelineStart,
+    timelineStartAligned,
     timelineDuration,
     showMinimap,
     minimapStartTime,
@@ -122,7 +126,7 @@ export function MotionReviewTimeline({
     [
       segmentDuration,
       timestampSpread,
-      timelineStart,
+      timelineStartAligned,
       timelineDuration,
       showMinimap,
       minimapStartTime,
diff --git a/web/src/hooks/use-handle-dragging.ts b/web/src/hooks/use-handle-dragging.ts
index c306705a1..c6bcbb257 100644
--- a/web/src/hooks/use-handle-dragging.ts
+++ b/web/src/hooks/use-handle-dragging.ts
@@ -14,7 +14,7 @@ type DragHandlerProps = {
   setHandlebarTime?: React.Dispatch<React.SetStateAction<number>>;
   handlebarTimeRef: React.MutableRefObject<HTMLDivElement | null>;
   timelineDuration: number;
-  timelineStart: number;
+  timelineStartAligned: number;
   isDragging: boolean;
   setIsDragging: React.Dispatch<React.SetStateAction<boolean>>;
 };
@@ -30,7 +30,7 @@ function useDraggableHandler({
   setHandlebarTime,
   handlebarTimeRef,
   timelineDuration,
-  timelineStart,
+  timelineStartAligned,
   isDragging,
   setIsDragging,
 }: DragHandlerProps) {
@@ -83,7 +83,7 @@ function useDraggableHandler({
       getClientYPosition(e);
       setIsDragging(true);
 
-      if (scrollTimeRef.current && clientYPosition) {
+      if (scrollTimeRef.current && clientYPosition && isDesktop) {
         const handlebarRect = scrollTimeRef.current.getBoundingClientRect();
         setInitialClickAdjustment(clientYPosition - handlebarRect.top);
       }
@@ -207,7 +207,7 @@ function useDraggableHandler({
 
         const segmentIndex = Math.floor(newHandlePosition / segmentHeight);
         const segmentStartTime = alignStartDateToTimeline(
-          timelineStart - segmentIndex * segmentDuration,
+          timelineStartAligned - segmentIndex * segmentDuration,
         );
 
         if (draggingAtTopEdge || draggingAtBottomEdge) {
@@ -233,8 +233,9 @@ function useDraggableHandler({
 
         if (setHandlebarTime) {
           setHandlebarTime(
-            timelineStart -
-              (newHandlePosition / segmentHeight) * segmentDuration,
+            timelineStartAligned -
+              ((newHandlePosition - segmentHeight / 2 - 2) / segmentHeight) *
+                segmentDuration,
           );
         }
 
@@ -265,7 +266,7 @@ function useDraggableHandler({
     clientYPosition,
     isDragging,
     segmentDuration,
-    timelineStart,
+    timelineStartAligned,
     timelineDuration,
     timelineRef,
     draggingAtTopEdge,
@@ -290,20 +291,17 @@ function useDraggableHandler({
       const parentScrollTop = getCumulativeScrollTop(timelineRef.current);
 
       const newHandlePosition =
-        ((timelineStart - handlebarTime) / segmentDuration) * segmentHeight +
+        ((timelineStartAligned - handlebarTime) / segmentDuration) *
+          segmentHeight +
         parentScrollTop -
-        scrolled;
+        scrolled -
+        2; // height of handlebar horizontal line
 
-      updateHandlebarPosition(
-        newHandlePosition - segmentHeight,
-        handlebarTime,
-        true,
-        true,
-      );
+      updateHandlebarPosition(newHandlePosition, handlebarTime, true, true);
     }
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [handlebarTime, showHandlebar, scrollTimeRef, timelineStart]);
+  }, [handlebarTime, showHandlebar, scrollTimeRef, timelineStartAligned]);
 
   return { handleMouseDown, handleMouseUp, handleMouseMove };
 }