From 81397c79a574f51f38af9472ba0eac7eefeff9f1 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 19 Feb 2024 22:53:39 -0600
Subject: [PATCH] initial implementation of review timeline

---
 web/src/index.css              | 11 +++++
 web/src/pages/UIPlayground.tsx | 79 ++++++++++++++++++++++++++--------
 2 files changed, 72 insertions(+), 18 deletions(-)

diff --git a/web/src/index.css b/web/src/index.css
index abb9da523..14e9f4f73 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -27,3 +27,14 @@
   font-family: "Inter";
   src: url("../fonts/Inter-VariableFont_slnt,wght.ttf");
 }
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
diff --git a/web/src/pages/UIPlayground.tsx b/web/src/pages/UIPlayground.tsx
index 1359f77bf..413911f12 100644
--- a/web/src/pages/UIPlayground.tsx
+++ b/web/src/pages/UIPlayground.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import Heading from "@/components/ui/heading";
 import ActivityScrubber, {
   ScrubberItem,
@@ -9,6 +9,7 @@ import { Event } from "@/types/event";
 import ActivityIndicator from "@/components/ui/activity-indicator";
 import { useApiHost } from "@/api";
 import TimelineScrubber from "@/components/playground/TimelineScrubber";
+import { ReviewTimeline } from "@/components/timeline/ReviewTimeline";
 
 // Color data
 const colors = [
@@ -57,9 +58,21 @@ function eventsToScrubberItems(events: Event[]): ScrubberItem[] {
   }));
 }
 
+const generateRandomEvent = (): Event => {
+  const start_time = Date.now() - Math.random() * 3600000 * 3;
+  const end_time = start_time + Math.random() * 36000;
+  const severities = ["motion", "detection", "alert"];
+  const severity = severities[Math.floor(Math.random() * severities.length)];
+  const has_been_reviewed = Math.random() < 0.2;
+  const id = new Date(start_time).toISOString(); // Date string as mock ID
+  return { id, start_time, end_time, severity, has_been_reviewed };
+};
+
 function UIPlayground() {
   const { data: config } = useSWR<FrigateConfig>("config");
   const [timeline, setTimeline] = useState<string | undefined>(undefined);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [mockEvents, setMockEvents] = useState<Event[]>([]);
 
   const onSelect = useCallback(({ items }: { items: string[] }) => {
     setTimeline(items[0]);
@@ -75,6 +88,11 @@ function UIPlayground() {
     { limit: 10, after: recentTimestamp },
   ]);
 
+  useMemo(() => {
+    const initialEvents = Array.from({ length: 50 }, generateRandomEvent);
+    setMockEvents(initialEvents);
+  }, []);
+
   return (
     <>
       <Heading as="h2">UI Playground</Heading>
@@ -111,25 +129,50 @@ function UIPlayground() {
         </div>
       )}
 
-      <Heading as="h4" className="my-5">
-        Color scheme
-      </Heading>
-      <p className="text-small">
-        Colors as set by the current theme. See the{" "}
-        <a className="underline" href="https://ui.shadcn.com/docs/theming">
-          shadcn theming docs
-        </a>{" "}
-        for usage.
-      </p>
+      <div className="flex">
+        <div className="flex-grow">
+          <div ref={contentRef}>
+            <Heading as="h4" className="my-5">
+              Color scheme
+            </Heading>
+            <p className="text-small">
+              Colors as set by the current theme. See the{" "}
+              <a
+                className="underline"
+                href="https://ui.shadcn.com/docs/theming"
+              >
+                shadcn theming docs
+              </a>{" "}
+              for usage.
+            </p>
 
-      <div className="w-72 my-5">
-        {colors.map((color, index) => (
-          <ColorSwatch
-            key={index}
-            name={color}
-            value={`hsl(var(--${color}))`}
+            <div className="w-72 my-5">
+              {colors.map((color, index) => (
+                <ColorSwatch
+                  key={index}
+                  name={color}
+                  value={`hsl(var(--${color}))`}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="flex-none">
+          <ReviewTimeline
+            segmentDuration={60}
+            timestampSpread={15}
+            timelineStart={Date.now()}
+            timelineDuration={24 * 60 * 60}
+            showHandlebar
+            handlebarTime={Date.now() - 27 * 60 * 1000}
+            showMinimap
+            minimapStartTime={Date.now() - 35 * 60 * 1000}
+            minimapEndTime={Date.now() - 21 * 60 * 1000}
+            events={mockEvents}
+            severityType={"alert"}
+            contentRef={contentRef}
           />
-        ))}
+        </div>
       </div>
     </>
   );