From 7d18c2c03d85f74be8dc53e10bb24ad4b5e23993 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 23 Feb 2024 07:52:54 -0600
Subject: [PATCH] UI tweaks (#9996)

* various tweaks

* update debounce time

* scroll to top with new events
---
 .../timeline/EventReviewTimeline.tsx          |   9 +-
 web/src/components/timeline/EventSegment.tsx  |  14 ++-
 web/src/hooks/use-handle-dragging.ts          |  13 ++-
 web/src/pages/UIPlayground.tsx                |  13 ++-
 web/src/views/events/DesktopEventView.tsx     | 106 ++++++++++--------
 5 files changed, 91 insertions(+), 64 deletions(-)

diff --git a/web/src/components/timeline/EventReviewTimeline.tsx b/web/src/components/timeline/EventReviewTimeline.tsx
index 7240934c0..d84b3ed75 100644
--- a/web/src/components/timeline/EventReviewTimeline.tsx
+++ b/web/src/components/timeline/EventReviewTimeline.tsx
@@ -187,14 +187,7 @@ export function EventReviewTimeline({
 
       setCurrentTimeSegment(alignedHandlebarTime);
     }
-  }, [
-    handlebarTime,
-    segmentDuration,
-    showHandlebar,
-    timelineDuration,
-    timelineStart,
-    alignDateToTimeline,
-  ]);
+  }, []);
 
   useEffect(() => {
     generateSegments();
diff --git a/web/src/components/timeline/EventSegment.tsx b/web/src/components/timeline/EventSegment.tsx
index 8493bca40..7113e660e 100644
--- a/web/src/components/timeline/EventSegment.tsx
+++ b/web/src/components/timeline/EventSegment.tsx
@@ -186,14 +186,20 @@ export function EventSegment({
 
   const firstMinimapSegmentRef = useRef<HTMLDivElement>(null);
 
+  let debounceTimer: ReturnType<typeof setTimeout>;
+
+  function debounceScrollIntoView(element: HTMLElement) {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      element.scrollIntoView({ behavior: "smooth", block: "center" });
+    }, 100);
+  }
+
   useEffect(() => {
     // Check if the first segment is out of view
     const firstSegment = firstMinimapSegmentRef.current;
     if (firstSegment && showMinimap && isFirstSegmentInMinimap) {
-      firstSegment.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-      });
+      debounceScrollIntoView(firstSegment);
     }
   }, [showMinimap, isFirstSegmentInMinimap, events, segmentDuration]);
 
diff --git a/web/src/hooks/use-handle-dragging.ts b/web/src/hooks/use-handle-dragging.ts
index 06e6f4b6f..cf887095f 100644
--- a/web/src/hooks/use-handle-dragging.ts
+++ b/web/src/hooks/use-handle-dragging.ts
@@ -113,7 +113,10 @@ function useDraggableHandler({
             }
           });
           if (setHandlebarTime) {
-            setHandlebarTime(timelineStart - segmentIndex * segmentDuration);
+            setHandlebarTime(
+              timelineStart -
+                (newHandlePosition / segmentHeight) * segmentDuration
+            );
           }
         }
       }
@@ -132,10 +135,10 @@ function useDraggableHandler({
     // TODO: determine when we want to do this
     const handlebar = scrollTimeRef.current;
     if (handlebar && showHandlebar) {
-      // handlebar.scrollIntoView({
-      //   behavior: "smooth",
-      //   block: "center",
-      // });
+      handlebar.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
     }
   }, []);
 
diff --git a/web/src/pages/UIPlayground.tsx b/web/src/pages/UIPlayground.tsx
index f7bc5da47..d37a0a01a 100644
--- a/web/src/pages/UIPlayground.tsx
+++ b/web/src/pages/UIPlayground.tsx
@@ -102,7 +102,7 @@ function UIPlayground() {
   const contentRef = useRef<HTMLDivElement>(null);
   const [mockEvents, setMockEvents] = useState<ReviewSegment[]>([]);
   const [handlebarTime, setHandlebarTime] = useState(
-    Math.floor(Date.now() / 1000) - 7 * 60
+    Math.floor(Date.now() / 1000) - 15 * 60
   );
 
   const onSelect = useCallback(({ items }: { items: string[] }) => {
@@ -217,7 +217,16 @@ function UIPlayground() {
               <Heading as="h4" className="my-5">
                 Timeline
               </Heading>
-              <p className="text-small">Handlebar timestamp: {handlebarTime}</p>
+              <p className="text-small">
+                Handlebar timestamp: {handlebarTime} -&nbsp;
+                {new Date(handlebarTime * 1000).toLocaleTimeString([], {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  month: "short",
+                  day: "2-digit",
+                  second: "2-digit",
+                })}
+              </p>
               <p className="text-small">
                 Handlebar is dragging: {isDragging ? "yes" : "no"}
               </p>
diff --git a/web/src/views/events/DesktopEventView.tsx b/web/src/views/events/DesktopEventView.tsx
index 02e8a8854..f00bff557 100644
--- a/web/src/views/events/DesktopEventView.tsx
+++ b/web/src/views/events/DesktopEventView.tsx
@@ -247,58 +247,74 @@ export default function DesktopEventView({
         </div>
       </div>
 
-      {hasUpdate && (
-        <Button
-          className="absolute top-14 left-[50%] -translate-x-[50%] z-30 bg-gray-400 text-white"
-          variant="secondary"
-          onClick={() => {
-            setHasUpdate(false);
-            pullLatestData();
-          }}
-        >
-          <LuRefreshCcw className="w-4 h-4 mr-2" />
-          New Items To Review
-        </Button>
-      )}
-
       <div className="flex h-full overflow-hidden">
         <div
           ref={contentRef}
           className="flex flex-1 flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"
         >
-          {currentItems ? (
-            currentItems.map((value, segIdx) => {
-              const lastRow = segIdx == reviewItems[severity].length - 1;
-              const relevantPreview = Object.values(
-                relevantPreviews || []
-              ).find(
-                (preview) =>
-                  preview.camera == value.camera &&
-                  preview.start < value.start_time &&
-                  preview.end > value.end_time
-              );
-
-              return (
-                <div
-                  key={value.id}
-                  ref={lastRow ? lastReviewRef : minimapRef}
-                  data-start={value.start_time}
+          {hasUpdate && (
+            <div className="absolute w-full z-30">
+              <div className="flex justify-center items-center mr-[100px]">
+                <Button
+                  className={`${
+                    hasUpdate
+                      ? "animate-in slide-in-from-top duration-500"
+                      : "invisible"
+                  }  text-center mt-5 mx-auto bg-gray-400 text-white`}
+                  variant="secondary"
+                  onClick={() => {
+                    setHasUpdate(false);
+                    pullLatestData();
+                    if (contentRef.current) {
+                      contentRef.current.scrollTo({
+                        top: 0,
+                        behavior: "smooth",
+                      });
+                    }
+                  }}
                 >
-                  <div className="h-[234px] aspect-video rounded-lg overflow-hidden">
-                    <PreviewThumbnailPlayer
-                      review={value}
-                      relevantPreview={relevantPreview}
-                      setReviewed={() => markItemAsReviewed(value.id)}
-                      onClick={() => onSelectReview(value.id)}
-                    />
-                  </div>
-                  {lastRow && !reachedEnd && <ActivityIndicator />}
-                </div>
-              );
-            })
-          ) : (
-            <div ref={lastReviewRef} />
+                  <LuRefreshCcw className="w-4 h-4 mr-2" />
+                  New Items To Review
+                </Button>
+              </div>
+            </div>
           )}
+
+          <div className="w-full mr-4 md:grid md:grid-cols-3 3xl:grid-cols-4 gap-4 overflow-y-auto no-scrollbar">
+            {currentItems ? (
+              currentItems.map((value, segIdx) => {
+                const lastRow = segIdx == reviewItems[severity].length - 1;
+                const relevantPreview = Object.values(
+                  relevantPreviews || []
+                ).find(
+                  (preview) =>
+                    preview.camera == value.camera &&
+                    preview.start < value.start_time &&
+                    preview.end > value.end_time
+                );
+
+                return (
+                  <div
+                    key={value.id}
+                    ref={lastRow ? lastReviewRef : minimapRef}
+                    data-start={value.start_time}
+                  >
+                    <div className="aspect-video rounded-lg overflow-hidden">
+                      <PreviewThumbnailPlayer
+                        review={value}
+                        relevantPreview={relevantPreview}
+                        setReviewed={() => markItemAsReviewed(value.id)}
+                        onClick={() => onSelectReview(value.id)}
+                      />
+                    </div>
+                    {lastRow && !reachedEnd && <ActivityIndicator />}
+                  </div>
+                );
+              })
+            ) : (
+              <div ref={lastReviewRef} />
+            )}
+          </div>
         </div>
         <div className="md:w-[100px] overflow-y-auto no-scrollbar">
           <EventReviewTimeline