From 116452d9370c94ac6358a15d10c3830bf40640df Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 9 Aug 2024 07:11:29 -0600
Subject: [PATCH] Add button to mark review item as reviewd in filmstrip

---
 web/src/components/card/AnimatedEventCard.tsx | 21 ++++++++++++++++++-
 web/src/views/live/LiveDashboardView.tsx      |  1 +
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/web/src/components/card/AnimatedEventCard.tsx b/web/src/components/card/AnimatedEventCard.tsx
index 552aa9f26..adfb95f9c 100644
--- a/web/src/components/card/AnimatedEventCard.tsx
+++ b/web/src/components/card/AnimatedEventCard.tsx
@@ -12,17 +12,21 @@ import { isCurrentHour } from "@/utils/dateUtil";
 import { useCameraPreviews } from "@/hooks/use-camera-previews";
 import { baseUrl } from "@/api/baseUrl";
 import { useApiHost } from "@/api";
-import { isSafari } from "react-device-detect";
+import { isDesktop, isSafari } from "react-device-detect";
 import { usePersistence } from "@/hooks/use-persistence";
 import { Skeleton } from "../ui/skeleton";
+import { Button } from "../ui/button";
+import { FaCircleCheck } from "react-icons/fa6";
 
 type AnimatedEventCardProps = {
   event: ReviewSegment;
   selectedGroup?: string;
+  updateEvents: () => void;
 };
 export function AnimatedEventCard({
   event,
   selectedGroup,
+  updateEvents,
 }: AnimatedEventCardProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
   const apiHost = useApiHost();
@@ -59,6 +63,7 @@ export function AnimatedEventCard({
   }, [visibilityListener]);
 
   const [isLoaded, setIsLoaded] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
 
   // interaction
 
@@ -102,7 +107,21 @@ export function AnimatedEventCard({
           style={{
             aspectRatio: aspectRatio,
           }}
+          onMouseEnter={isDesktop ? () => setIsHovered(true) : undefined}
+          onMouseLeave={isDesktop ? () => setIsHovered(false) : undefined}
         >
+          {isHovered && (
+            <Button
+              className="absolute right-2 top-1 z-40 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
+              size="xs"
+              onClick={async () => {
+                await axios.post(`reviews/viewed`, { ids: [event.id] });
+                updateEvents();
+              }}
+            >
+              <FaCircleCheck className="size-3 text-white" />
+            </Button>
+          )}
           <div
             className="size-full cursor-pointer overflow-hidden rounded md:rounded-lg"
             onClick={onOpenReview}
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index bcee49811..00c046224 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -315,6 +315,7 @@ export default function LiveDashboardView({
                     key={event.id}
                     event={event}
                     selectedGroup={cameraGroup}
+                    updateEvents={updateEvents}
                   />
                 );
               })}