Display data for review items

web/src/pages/Events.tsx

@@ -1,14 +1,47 @@
+import TimeAgo from "@/components/dynamic/TimeAgo";
+import ActivityIndicator from "@/components/ui/activity-indicator";
 import { Button } from "@/components/ui/button";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import { useState } from "react";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { ReviewSegment, ReviewSeverity } from "@/types/review";
+import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
+import { useMemo, useState } from "react";
 import { LuCalendar, LuFilter, LuVideo } from "react-icons/lu";
 import { MdCircle } from "react-icons/md";
-
-type ReviewSeverity = "alert" | "detection" | "significant_motion";
+import useSWR from "swr";
 
 export default function Events() {
+  const { data: config } = useSWR<FrigateConfig>("config");
   const [severity, setSeverity] = useState<ReviewSeverity>("alert");
 
+  const { data: reviewSegments } = useSWR<ReviewSegment[]>("review");
+
+  const previewTimes = useMemo(() => {
+    if (!reviewSegments) {
+      return undefined;
+    }
+
+    const startDate = new Date();
+    startDate.setMinutes(0, 0, 0);
+
+    const endDate = new Date(reviewSegments.at(-1)!!.end_time);
+    endDate.setHours(0, 0, 0, 0);
+    return {
+      start: startDate.getTime() / 1000,
+      end: endDate.getTime() / 1000,
+    };
+  }, [reviewSegments]);
+  const { data: allPreviews } = useSWR<Preview[]>(
+    previewTimes
+      ? `preview/all/start/${previewTimes.start}/end/${previewTimes.end}`
+      : null,
+    { revalidateOnFocus: false }
+  );
+
+  if (!config) {
+    return <ActivityIndicator />;
+  }
+
   return (
     <>
       <div className="w-full flex justify-between">
@@ -64,6 +97,27 @@ export default function Events() {
           </Button>
         </div>
       </div>
+
+      <div className="flex flex-wrap gap-2 mt-2">
+        {reviewSegments?.map((value) => {
+          if (value.severity == severity) {
+            return (
+              <div className="relative h-[234px] w-[416px] bg-blue-500 rounded-lg">
+                {value.camera} {value.data.objects}
+                <div className="absolute left-1 right-1 bottom-0 flex justify-between">
+                  <TimeAgo time={value.start_time * 1000} />
+                  {formatUnixTimestampToDateTime(value.start_time, {
+                    strftime_fmt:
+                      config.ui.time_format == "24hour"
+                        ? "%b %-d, %H:%M"
+                        : "%b %-d, %I:%M %p",
+                  })}
+                </div>
+              </div>
+            );
+          }
+        })}
+      </div>
     </>
   );
 }

web/src/types/review.ts

@@ -1,20 +1,20 @@
 export interface ReviewSegment {
-    id: string;
-    camera: string;
-    severity: ReviewSeverity;
-    start_time: number;
-    end_time: number;
-    thumb_path: string;
-    has_been_reviewed: boolean;
-    data: ReviewData;
-  }
+  id: string;
+  camera: string;
+  severity: ReviewSeverity;
+  start_time: number;
+  end_time: number;
+  thumb_path: string;
+  has_been_reviewed: boolean;
+  data: ReviewData;
+}
 
-  export type ReviewSeverity = "alert" | "detection" | "significant_motion";
+export type ReviewSeverity = "alert" | "detection" | "significant_motion";
 
-  export type ReviewData = {
-    audio: string[];
-    detections: string[];
-    objects: string[];
-    significant_motion_areas: number[];
-    zones: string[];
-  };
+type ReviewData = {
+  audio: string[];
+  detections: string[];
+  objects: string[];
+  significant_motion_areas: number[];
+  zones: string[];
+};