From 4384d4b1d8d766978dc5b0a187a684d3f4f35d9c Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 26 Mar 2024 08:22:34 -0600
Subject: [PATCH] Consolidate packages and fix opening recording from event

---
 .../AnimatedEventCard.tsx}                        | 15 ++++++++++-----
 web/src/views/live/LiveDashboardView.tsx          |  4 ++--
 2 files changed, 12 insertions(+), 7 deletions(-)
 rename web/src/components/{image/AnimatedEventThumbnail.tsx => card/AnimatedEventCard.tsx} (87%)

diff --git a/web/src/components/image/AnimatedEventThumbnail.tsx b/web/src/components/card/AnimatedEventCard.tsx
similarity index 87%
rename from web/src/components/image/AnimatedEventThumbnail.tsx
rename to web/src/components/card/AnimatedEventCard.tsx
index dad85116a..2944e6c33 100644
--- a/web/src/components/image/AnimatedEventThumbnail.tsx
+++ b/web/src/components/card/AnimatedEventCard.tsx
@@ -8,11 +8,12 @@ import { ReviewSegment } from "@/types/review";
 import { useNavigate } from "react-router-dom";
 import { Skeleton } from "../ui/skeleton";
 import { RecordingStartingPoint } from "@/types/record";
+import axios from "axios";
 
-type AnimatedEventThumbnailProps = {
+type AnimatedEventCardProps = {
   event: ReviewSegment;
 };
-export function AnimatedEventThumbnail({ event }: AnimatedEventThumbnailProps) {
+export function AnimatedEventCard({ event }: AnimatedEventCardProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
 
   // interaction
@@ -21,11 +22,15 @@ export function AnimatedEventThumbnail({ event }: AnimatedEventThumbnailProps) {
   const onOpenReview = useCallback(() => {
     navigate("events", {
       state: {
-        camera: event.camera,
-        startTime: event.start_time,
         severity: event.severity,
-      } as RecordingStartingPoint,
+        recording: {
+          camera: event.camera,
+          startTime: event.start_time,
+          severity: event.severity,
+        } as RecordingStartingPoint,
+      },
     });
+    axios.post(`reviews/viewed`, { ids: [event.id] });
   }, [navigate, event]);
 
   // image behavior
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index 649e102b5..bcad9751b 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -2,7 +2,7 @@ import { useFrigateReviews } from "@/api/ws";
 import Logo from "@/components/Logo";
 import { CameraGroupSelector } from "@/components/filter/CameraGroupSelector";
 import { LiveGridIcon, LiveListIcon } from "@/components/icons/LiveIcons";
-import { AnimatedEventThumbnail } from "@/components/image/AnimatedEventThumbnail";
+import { AnimatedEventCard } from "@/components/card/AnimatedEventCard";
 import BirdseyeLivePlayer from "@/components/player/BirdseyeLivePlayer";
 import LivePlayer from "@/components/player/LivePlayer";
 import { Button } from "@/components/ui/button";
@@ -166,7 +166,7 @@ export default function LiveDashboardView({
           <TooltipProvider>
             <div className="flex gap-2 items-center">
               {events.map((event) => {
-                return <AnimatedEventThumbnail key={event.id} event={event} />;
+                return <AnimatedEventCard key={event.id} event={event} />;
               })}
             </div>
           </TooltipProvider>