Expose setter for review timeline handlebar (#9978)

* expose setter for handlebar

* use as much resolution as possible

web/src/components/timeline/EventReviewTimeline.tsx

@@ -18,6 +18,7 @@ export type EventReviewTimelineProps = {
   timelineEnd: number;
   showHandlebar?: boolean;
   handlebarTime?: number;
+  setHandlebarTime?: React.Dispatch<React.SetStateAction<number>>;
   showMinimap?: boolean;
   minimapStartTime?: number;
   minimapEndTime?: number;
@@ -33,6 +34,7 @@ export function EventReviewTimeline({
   timelineEnd,
   showHandlebar = false,
   handlebarTime,
+  setHandlebarTime,
   showMinimap = false,
   minimapStartTime,
   minimapEndTime,
@@ -66,6 +68,7 @@ export function EventReviewTimeline({
       isDragging,
       setIsDragging,
       currentTimeRef,
+      setHandlebarTime,
     });
 
   function handleResize() {

web/src/hooks/use-handle-dragging.ts

@@ -12,6 +12,7 @@ interface DragHandlerProps {
   isDragging: boolean;
   setIsDragging: React.Dispatch<React.SetStateAction<boolean>>;
   currentTimeRef: React.MutableRefObject<HTMLDivElement | null>;
+  setHandlebarTime?: React.Dispatch<React.SetStateAction<number>>;
 }
 
 // TODO: handle mobile touch events
@@ -27,6 +28,7 @@ function useDraggableHandler({
   isDragging,
   setIsDragging,
   currentTimeRef,
+  setHandlebarTime,
 }: DragHandlerProps) {
   const handleMouseDown = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
@@ -110,6 +112,9 @@ function useDraggableHandler({
               });
             }
           });
+          if (setHandlebarTime) {
+            setHandlebarTime(timelineStart - segmentIndex * segmentDuration);
+          }
         }
       }
     },

web/src/pages/UIPlayground.tsx

@@ -99,6 +99,9 @@ function UIPlayground() {
   const [timeline, setTimeline] = useState<string | undefined>(undefined);
   const contentRef = useRef<HTMLDivElement>(null);
   const [mockEvents, setMockEvents] = useState<ReviewSegment[]>([]);
+  const [handlebarTime, setHandlebarTime] = useState(
+    Math.floor(Date.now() / 1000) - 27 * 60
+  );
 
   const onSelect = useCallback(({ items }: { items: string[] }) => {
     setTimeline(items[0]);
@@ -158,6 +161,10 @@ function UIPlayground() {
       <div className="flex">
         <div className="flex-grow">
           <div ref={contentRef}>
+            <Heading as="h4" className="my-5">
+              Handlebar time
+            </Heading>
+            <p className="text-small">{handlebarTime}</p>
             <Heading as="h4" className="my-5">
               Color scheme
             </Heading>
@@ -190,7 +197,8 @@ function UIPlayground() {
             timelineStart={Math.floor(Date.now() / 1000)} // start of the timeline - all times are numeric, not Date objects
             timelineEnd={Math.floor(Date.now() / 1000) + 2 * 60 * 60} // end of timeline - timestamp
             showHandlebar // show / hide the handlebar
-            handlebarTime={Math.floor(Date.now() / 1000) - 27 * 60} // set the time of the handlebar
+            handlebarTime={handlebarTime} // set the time of the handlebar
+            setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time
             showMinimap // show / hide the minimap
             minimapStartTime={Math.floor(Date.now() / 1000) - 35 * 60} // start time of the minimap - the earlier time (eg 1:00pm)
             minimapEndTime={Math.floor(Date.now() / 1000) - 21 * 60} // end of the minimap - the later time (eg 3:00pm)