From b50ad87d34f2055ed40bbe202ef6fa347e0c6d1e Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 3 Mar 2024 12:30:59 -0600
Subject: [PATCH 1/5] mobile touch events

---
 .../timeline/EventReviewTimeline.tsx          | 19 +++++------
 web/src/hooks/use-handle-dragging.ts          | 34 +++++++++++++------
 2 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/web/src/components/timeline/EventReviewTimeline.tsx b/web/src/components/timeline/EventReviewTimeline.tsx
index e78f9ff21c..9942d73bf0 100644
--- a/web/src/components/timeline/EventReviewTimeline.tsx
+++ b/web/src/components/timeline/EventReviewTimeline.tsx
@@ -159,14 +159,6 @@ export function EventReviewTimeline({
 
   useEffect(() => {
     generateSegments();
-
-    // TODO: touch events for mobile
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [generateSegments, timelineStart, handleMouseUp, handleMouseMove]);
@@ -174,6 +166,10 @@ export function EventReviewTimeline({
   return (
     <div
       ref={timelineRef}
+      onMouseMove={handleMouseMove}
+      onTouchMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onTouchEnd={handleMouseUp}
       className={`relative h-full overflow-y-scroll no-scrollbar bg-secondary ${
         isDragging && showHandlebar ? "cursor-grabbing" : "cursor-auto"
       }`}
@@ -181,13 +177,16 @@ export function EventReviewTimeline({
       <div className="flex flex-col">{segments}</div>
       {showHandlebar && (
         <div className={`absolute left-0 top-0 z-20 w-full `} role="scrollbar">
-          <div className={`flex items-center justify-center `}>
+          <div
+            className="flex items-center justify-center touch-none select-none"
+            onMouseDown={handleMouseDown}
+            onTouchStart={handleMouseDown}
+          >
             <div
               ref={scrollTimeRef}
               className={`relative w-full ${
                 isDragging ? "cursor-grabbing" : "cursor-grab"
               }`}
-              onMouseDown={handleMouseDown}
             >
               <div
                 className={`bg-destructive rounded-full mx-auto ${
diff --git a/web/src/hooks/use-handle-dragging.ts b/web/src/hooks/use-handle-dragging.ts
index cf2f2e0a09..57a789f12b 100644
--- a/web/src/hooks/use-handle-dragging.ts
+++ b/web/src/hooks/use-handle-dragging.ts
@@ -1,5 +1,5 @@
 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 +34,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 +45,9 @@ function useDraggableHandler({
   );
 
   const handleMouseUp = useCallback(
-    (e: MouseEvent) => {
+    (
+      e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
+    ) => {
       e.preventDefault();
       e.stopPropagation();
       if (isDragging) {
@@ -76,10 +80,6 @@ function useDraggableHandler({
               minute: "2-digit",
               ...(segmentDuration < 60 && { second: "2-digit" }),
             });
-            scrollIntoView(thumb, {
-              scrollMode: "if-needed",
-              behavior: "smooth",
-            });
           }
         });
         if (setHandlebarTime) {
@@ -91,7 +91,9 @@ function useDraggableHandler({
   );
 
   const handleMouseMove = useCallback(
-    (e: MouseEvent) => {
+    (
+      e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
+    ) => {
       if (
         !contentRef.current ||
         !timelineRef.current ||
@@ -100,10 +102,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 +129,7 @@ function useDraggableHandler({
           visibleTimelineHeight - timelineTop + parentScrollTop,
           Math.max(
             segmentHeight + scrolled,
-            e.clientY - timelineTop + parentScrollTop,
+            clientY - timelineTop + parentScrollTop,
           ),
         );
 
@@ -172,6 +181,11 @@ function useDraggableHandler({
         scrolled;
 
       updateHandlebarPosition(newHandlePosition - segmentHeight, handlebarTime);
+
+      scrollTimeRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
     }
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps

From 93b6d11292dd553e86f9031924715c795fc6de35 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 3 Mar 2024 12:37:17 -0600
Subject: [PATCH 2/5] rebase

---
 web/src/hooks/use-handle-dragging.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/hooks/use-handle-dragging.ts b/web/src/hooks/use-handle-dragging.ts
index 57a789f12b..794b650930 100644
--- a/web/src/hooks/use-handle-dragging.ts
+++ b/web/src/hooks/use-handle-dragging.ts
@@ -1,4 +1,5 @@
 import { useCallback, useEffect } from "react";
+import scrollIntoView from "scroll-into-view-if-needed";
 import { isMobile } from "react-device-detect";
 
 type DragHandlerProps = {
@@ -80,6 +81,10 @@ function useDraggableHandler({
               minute: "2-digit",
               ...(segmentDuration < 60 && { second: "2-digit" }),
             });
+            scrollIntoView(thumb, {
+              behavior: "smooth",
+              block: "center",
+            });
           }
         });
         if (setHandlebarTime) {
@@ -181,11 +186,6 @@ function useDraggableHandler({
         scrolled;
 
       updateHandlebarPosition(newHandlePosition - segmentHeight, handlebarTime);
-
-      scrollTimeRef.current.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-      });
     }
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps

From 77b8dcfdef72e2d6132470aeb29137305761f7e9 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 3 Mar 2024 12:38:08 -0600
Subject: [PATCH 3/5] fix scroll mode

---
 web/src/hooks/use-handle-dragging.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/hooks/use-handle-dragging.ts b/web/src/hooks/use-handle-dragging.ts
index 794b650930..f28d82943e 100644
--- a/web/src/hooks/use-handle-dragging.ts
+++ b/web/src/hooks/use-handle-dragging.ts
@@ -82,8 +82,8 @@ function useDraggableHandler({
               ...(segmentDuration < 60 && { second: "2-digit" }),
             });
             scrollIntoView(thumb, {
+              scrollMode: "if-needed",
               behavior: "smooth",
-              block: "center",
             });
           }
         });

From 62fa09ae664e8af0cf4e20f51cc6cbdbca051b44 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 3 Mar 2024 13:15:23 -0600
Subject: [PATCH 4/5] clean up deps and remove unneeded useeffect

---
 web/src/components/timeline/EventReviewTimeline.tsx |  6 ------
 web/vite.config.ts                                  | 12 ++++++------
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/web/src/components/timeline/EventReviewTimeline.tsx b/web/src/components/timeline/EventReviewTimeline.tsx
index 9942d73bf0..998234711d 100644
--- a/web/src/components/timeline/EventReviewTimeline.tsx
+++ b/web/src/components/timeline/EventReviewTimeline.tsx
@@ -157,12 +157,6 @@ export function EventReviewTimeline({
     }
   }, [isDragging, onHandlebarDraggingChange]);
 
-  useEffect(() => {
-    generateSegments();
-    // we know that these deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [generateSegments, timelineStart, handleMouseUp, handleMouseMove]);
-
   return (
     <div
       ref={timelineRef}
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 5afefa3312..b914f76c96 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -12,24 +12,24 @@ export default defineConfig({
   server: {
     proxy: {
       "/api": {
-        target: "http://localhost:5000",
+        target: "http://192.168.5.4:5000",
         ws: true,
       },
       "/vod": {
-        target: "http://localhost:5000",
+        target: "http://192.168.5.4:5000",
       },
       "/clips": {
-        target: "http://localhost:5000",
+        target: "http://192.168.5.4:5000",
       },
       "/exports": {
-        target: "http://localhost:5000",
+        target: "http://192.168.5.4:5000",
       },
       "/ws": {
-        target: "ws://localhost:5000",
+        target: "ws://192.168.5.4:5000",
         ws: true,
       },
       "/live": {
-        target: "ws://localhost:5000",
+        target: "ws://192.168.5.4:5000",
         changeOrigin: true,
         ws: true,
       },

From dea3ed5e9cbe4fff297a64e1b8f475666864b993 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 3 Mar 2024 13:18:16 -0600
Subject: [PATCH 5/5] remove vite

---
 web/vite.config.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/vite.config.ts b/web/vite.config.ts
index b914f76c96..5afefa3312 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -12,24 +12,24 @@ export default defineConfig({
   server: {
     proxy: {
       "/api": {
-        target: "http://192.168.5.4:5000",
+        target: "http://localhost:5000",
         ws: true,
       },
       "/vod": {
-        target: "http://192.168.5.4:5000",
+        target: "http://localhost:5000",
       },
       "/clips": {
-        target: "http://192.168.5.4:5000",
+        target: "http://localhost:5000",
       },
       "/exports": {
-        target: "http://192.168.5.4:5000",
+        target: "http://localhost:5000",
       },
       "/ws": {
-        target: "ws://192.168.5.4:5000",
+        target: "ws://localhost:5000",
         ws: true,
       },
       "/live": {
-        target: "ws://192.168.5.4:5000",
+        target: "ws://localhost:5000",
         changeOrigin: true,
         ws: true,
       },