Use touch events for mobile review timeline (#10212)

* mobile touch events

* rebase

* fix scroll mode

* clean up deps and remove unneeded useeffect

* remove vite

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

@@ -1,5 +1,6 @@
 import { useCallback, useEffect } from "react";
 import scrollIntoView from "scroll-into-view-if-needed";
+import { isMobile } from "react-device-detect";
 
 type DragHandlerProps = {
   contentRef: React.RefObject<HTMLElement>;
@@ -34,7 +35,9 @@ function useDraggableHandler({
   setIsDragging,
 }: DragHandlerProps) {
   const handleMouseDown = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
+    (
+      e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
+    ) => {
       e.preventDefault();
       e.stopPropagation();
       setIsDragging(true);
@@ -43,7 +46,9 @@ function useDraggableHandler({
   );
 
   const handleMouseUp = useCallback(
-    (e: MouseEvent) => {
+    (
+      e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
+    ) => {
       e.preventDefault();
       e.stopPropagation();
       if (isDragging) {
@@ -91,7 +96,9 @@ function useDraggableHandler({
   );
 
   const handleMouseMove = useCallback(
-    (e: MouseEvent) => {
+    (
+      e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
+    ) => {
       if (
         !contentRef.current ||
         !timelineRef.current ||
@@ -100,10 +107,17 @@ function useDraggableHandler({
         return;
       }
 
+      let clientY;
+      if (isMobile && e.nativeEvent instanceof TouchEvent) {
+        clientY = e.nativeEvent.touches[0].clientY;
+      } else if (e.nativeEvent instanceof MouseEvent) {
+        clientY = e.nativeEvent.clientY;
+      }
+
       e.preventDefault();
       e.stopPropagation();
 
-      if (showHandlebar && isDragging) {
+      if (showHandlebar && isDragging && clientY) {
         const {
           scrollHeight: timelineHeight,
           clientHeight: visibleTimelineHeight,
@@ -120,7 +134,7 @@ function useDraggableHandler({
           visibleTimelineHeight - timelineTop + parentScrollTop,
           Math.max(
             segmentHeight + scrolled,
-            e.clientY - timelineTop + parentScrollTop,
+            clientY - timelineTop + parentScrollTop,
           ),
         );