From 29e86d4eebb88d12b2f06fad6e2c6655bef9a4f9 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 14 Aug 2024 15:21:43 -0600
Subject: [PATCH] Add ability to upload to Frigate+ from review side panel
 (#13071)

* Add ability to submit to frigate+ from review panel

* Add separator

* Use consistent ID
---
 .../overlay/detail/ReviewDetailDialog.tsx     | 30 +++++++++++++++++--
 .../player/PreviewThumbnailPlayer.tsx         |  2 +-
 .../player/SearchThumbnailPlayer.tsx          |  2 +-
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/web/src/components/overlay/detail/ReviewDetailDialog.tsx b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
index 1cdc42889..e31b493f4 100644
--- a/web/src/components/overlay/detail/ReviewDetailDialog.tsx
+++ b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
@@ -8,7 +8,9 @@ import { getIconForLabel } from "@/utils/iconUtil";
 import { useApiHost } from "@/api";
 import { ReviewSegment } from "@/types/review";
 import { Event } from "@/types/event";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
+import { cn } from "@/lib/utils";
+import { FrigatePlusDialog } from "../dialog/FrigatePlusDialog";
 
 type ReviewDetailDialogProps = {
   review?: ReviewSegment;
@@ -24,6 +26,10 @@ export default function ReviewDetailDialog({
 
   const apiHost = useApiHost();
 
+  // upload
+
+  const [upload, setUpload] = useState<Event>();
+
   // data
 
   const { data: events } = useSWR<Event[]>(
@@ -59,6 +65,16 @@ export default function ReviewDetailDialog({
         }
       }}
     >
+      <FrigatePlusDialog
+        upload={upload}
+        onClose={() => setUpload(undefined)}
+        onEventUploaded={() => {
+          if (upload) {
+            upload.plus_id = "new_upload";
+          }
+        }}
+      />
+
       <Content
         className={
           isDesktop ? "sm:max-w-xl" : "max-h-[75dvh] overflow-hidden p-2 pb-4"
@@ -127,7 +143,12 @@ export default function ReviewDetailDialog({
                 return (
                   <img
                     key={event.id}
-                    className="aspect-video select-none rounded-lg object-contain transition-opacity"
+                    className={cn(
+                      "aspect-video select-none rounded-lg object-contain transition-opacity",
+                      event.has_snapshot &&
+                        event.plus_id == undefined &&
+                        "cursor-pointer",
+                    )}
                     style={
                       isIOS
                         ? {
@@ -142,6 +163,11 @@ export default function ReviewDetailDialog({
                         ? `${apiHost}api/events/${event.id}/snapshot.jpg`
                         : `${apiHost}api/events/${event.id}/thumbnail.jpg`
                     }
+                    onClick={() => {
+                      if (event.has_snapshot && event.plus_id == undefined) {
+                        setUpload(event);
+                      }
+                    }}
                   />
                 );
               })}
diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index f91b6c82a..69ced8b9c 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -266,7 +266,7 @@ export default function PreviewThumbnailPlayer({
                 .sort()
                 .join(", ")
                 .replaceAll("-verified", "")}
-              {` Click To View Detection Details`}
+              {` • Click To View Detection Details`}
             </TooltipContent>
           </Tooltip>
         </div>
diff --git a/web/src/components/player/SearchThumbnailPlayer.tsx b/web/src/components/player/SearchThumbnailPlayer.tsx
index 0f3a497c7..f1a58c061 100644
--- a/web/src/components/player/SearchThumbnailPlayer.tsx
+++ b/web/src/components/player/SearchThumbnailPlayer.tsx
@@ -232,7 +232,7 @@ export default function SearchThumbnailPlayer({
                 .sort()
                 .join(", ")
                 .replaceAll("-verified", "")}{" "}
-              {` Click To View Detection Details`}
+              {` • Click To View Detection Details`}
             </TooltipContent>
           </Tooltip>
         </div>