From 425323e6c80b48084c5e86f11ade2484a480400d Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 12 Sep 2024 08:06:14 -0600
Subject: [PATCH] Always show snapshot but hide buttons for frigate+ if not
 applicable

---
 .../overlay/detail/ObjectLifecycle.tsx        | 18 ++++++++++-----
 .../overlay/detail/SearchDetailDialog.tsx     | 23 +++++++++++--------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/web/src/components/overlay/detail/ObjectLifecycle.tsx b/web/src/components/overlay/detail/ObjectLifecycle.tsx
index 5110ca020..ca8851b92 100644
--- a/web/src/components/overlay/detail/ObjectLifecycle.tsx
+++ b/web/src/components/overlay/detail/ObjectLifecycle.tsx
@@ -49,14 +49,14 @@ import { TooltipPortal } from "@radix-ui/react-tooltip";
 type ObjectLifecycleProps = {
   className?: string;
   event: Event;
-  showBack?: boolean;
+  fullscreen?: boolean;
   setPane: React.Dispatch<React.SetStateAction<ReviewDetailPaneType>>;
 };
 
 export default function ObjectLifecycle({
   className,
   event,
-  showBack = true,
+  fullscreen = false,
   setPane,
 }: ObjectLifecycleProps) {
   const { data: eventSequence } = useSWR<ObjectLifecycleSequence[]>([
@@ -227,7 +227,7 @@ export default function ObjectLifecycle({
 
   return (
     <div className={className}>
-      {showBack && (
+      {!fullscreen && (
         <div className={cn("flex items-center gap-2")}>
           <Button
             className="flex items-center gap-2.5 rounded-lg"
@@ -351,7 +351,10 @@ export default function ObjectLifecycle({
       )}
 
       <div className="relative flex flex-col items-center justify-center">
-        <Carousel className="m-0 w-full" setApi={setMainApi}>
+        <Carousel
+          className={cn("m-0 w-full", fullscreen && isDesktop && "w-[75%]")}
+          setApi={setMainApi}
+        >
           <CarouselContent>
             {eventSequence.map((item, index) => (
               <CarouselItem key={index}>
@@ -459,7 +462,7 @@ export default function ObjectLifecycle({
           </CarouselContent>
         </Carousel>
       </div>
-      <div className="relative flex flex-col items-center justify-center">
+      <div className="relative mt-4 flex flex-col items-center justify-center">
         <Carousel
           opts={{
             align: "center",
@@ -478,7 +481,10 @@ export default function ObjectLifecycle({
             {eventSequence.map((item, index) => (
               <CarouselItem
                 key={index}
-                className={cn("basis-1/4 cursor-pointer pl-1 md:basis-[10%]")}
+                className={cn(
+                  "basis-1/4 cursor-pointer pl-1 md:basis-[10%]",
+                  fullscreen && "md:basis-16",
+                )}
                 onClick={() => handleThumbnailClick(index)}
               >
                 <div className="p-1">
diff --git a/web/src/components/overlay/detail/SearchDetailDialog.tsx b/web/src/components/overlay/detail/SearchDetailDialog.tsx
index 799010ccb..e2c9e93fa 100644
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -34,14 +34,14 @@ import { baseUrl } from "@/api/baseUrl";
 import { cn } from "@/lib/utils";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
-import { FaRegListAlt, FaVideo } from "react-icons/fa";
+import { FaImage, FaRegListAlt, FaVideo } from "react-icons/fa";
 import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
 import { FaRotate } from "react-icons/fa6";
 import ObjectLifecycle from "./ObjectLifecycle";
 
 const SEARCH_TABS = [
   "details",
-  "frigate+",
+  "snapshot",
   "video",
   "object lifecycle",
 ] as const;
@@ -73,8 +73,8 @@ export default function SearchDetailDialog({
 
     const views = [...SEARCH_TABS];
 
-    if (!config.plus.enabled || !search.has_snapshot) {
-      const index = views.indexOf("frigate+");
+    if (!search.has_snapshot) {
+      const index = views.indexOf("snapshot");
       views.splice(index, 1);
     }
 
@@ -111,7 +111,7 @@ export default function SearchDetailDialog({
       <Content
         className={
           isDesktop
-            ? "sm:max-w-xl md:max-w-xl lg:max-w-3xl xl:max-w-6xl"
+            ? "sm:max-w-xl md:max-w-4xl lg:max-w-4xl xl:max-w-7xl"
             : "max-h-[75dvh] overflow-hidden px-2 pb-4"
         }
       >
@@ -143,7 +143,7 @@ export default function SearchDetailDialog({
                   aria-label={`Select ${item}`}
                 >
                   {item == "details" && <FaRegListAlt className="size-4" />}
-                  {item == "frigate+" && <FrigatePlusIcon className="size-4" />}
+                  {item == "snapshot" && <FaImage className="size-4" />}
                   {item == "video" && <FaVideo className="size-4" />}
                   {item == "object lifecycle" && (
                     <FaRotate className="size-4" />
@@ -163,9 +163,14 @@ export default function SearchDetailDialog({
             setSimilarity={setSimilarity}
           />
         )}
-        {page == "frigate+" && (
+        {page == "snapshot" && (
           <FrigatePlusDialog
-            upload={search as unknown as Event}
+            upload={
+              {
+                ...search,
+                plus_id: config?.plus?.enabled ? search.plus_id : "not_enabled",
+              } as unknown as Event
+            }
             dialog={false}
             onClose={() => {}}
             onEventUploaded={() => {
@@ -178,7 +183,7 @@ export default function SearchDetailDialog({
           <ObjectLifecycle
             className="w-full"
             event={search as unknown as Event}
-            showBack={false}
+            fullscreen={true}
             setPane={() => {}}
           />
         )}