From 4ecc0e15cebf42b17fe61e4996ff91001edb6e1b Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 9 Aug 2024 07:29:35 -0600
Subject: [PATCH] Add button to mark review item as reviewed in filmstrip
 (#12878)

* Add button to mark review item as reviewd in filmstrip

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

diff --git a/web/src/components/card/AnimatedEventCard.tsx b/web/src/components/card/AnimatedEventCard.tsx
index 552aa9f26..85d6eb6d4 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,26 @@ export function AnimatedEventCard({
           style={{
             aspectRatio: aspectRatio,
           }}
+          onMouseEnter={isDesktop ? () => setIsHovered(true) : undefined}
+          onMouseLeave={isDesktop ? () => setIsHovered(false) : undefined}
         >
+          {isHovered && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <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>
+              </TooltipTrigger>
+              <TooltipContent>Mark as Reviewed</TooltipContent>
+            </Tooltip>
+          )}
           <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}
                   />
                 );
               })}