Improve review book keeping (#10735)

* Improve review book keeping

* Cleanup

* Cleanup for new labels

* Final cleanup

* Fix sub label checking

web/src/components/card/AnimatedEventCard.tsx

@@ -83,7 +83,7 @@ export function AnimatedEventCard({ event }: AnimatedEventCardProps) {
         </div>
       </TooltipTrigger>
       <TooltipContent>
-        {`${[...event.data.objects, ...event.data.audio, ...(event.data.sub_labels || [])].join(", ")} detected`}
+        {`${[...event.data.objects, ...event.data.audio].join(", ").replaceAll("-verified", "")} detected`}
       </TooltipContent>
     </Tooltip>
   );

web/src/components/card/ReviewCard.tsx

@@ -2,7 +2,7 @@ import { baseUrl } from "@/api/baseUrl";
 import { useFormattedTimestamp } from "@/hooks/use-date-utils";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { ReviewSegment } from "@/types/review";
-import { getIconForLabel, getIconForSubLabel } from "@/utils/iconUtil";
+import { getIconForLabel } from "@/utils/iconUtil";
 import { isSafari } from "react-device-detect";
 import useSWR from "swr";
 import TimeAgo from "../dynamic/TimeAgo";
@@ -57,9 +57,6 @@ export default function ReviewCard({
           {event.data.audio.map((audio) => {
             return getIconForLabel(audio, "size-3 text-white");
           })}
-          {event.data.sub_labels?.map((sub) => {
-            return getIconForSubLabel(sub, "size-3 text-white");
-          })}
           <div className="font-extra-light text-xs">{formattedDate}</div>
         </div>
         <TimeAgo

web/src/components/filter/ReviewFilterGroup.tsx

@@ -30,7 +30,6 @@ import MobileReviewSettingsDrawer, {
   DrawerFeatures,
 } from "../overlay/MobileReviewSettingsDrawer";
 
-const ATTRIBUTES = ["amazon", "face", "fedex", "license_plate", "ups"];
 const REVIEW_FILTERS = [
   "cameras",
   "reviewed",
@@ -77,9 +76,7 @@ export default function ReviewFilterGroup({
     cameras.forEach((camera) => {
       const cameraConfig = config.cameras[camera];
       cameraConfig.objects.track.forEach((label) => {
-        if (!ATTRIBUTES.includes(label)) {
-          labels.add(label);
-        }
+        labels.add(label);
       });
 
       if (cameraConfig.audio.enabled_in_config) {

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -9,7 +9,7 @@ import { useApiHost } from "@/api";
 import { isCurrentHour } from "@/utils/dateUtil";
 import { ReviewSegment } from "@/types/review";
 import { Slider } from "../ui/slider-no-thumb";
-import { getIconForLabel, getIconForSubLabel } from "@/utils/iconUtil";
+import { getIconForLabel } from "@/utils/iconUtil";
 import TimeAgo from "../dynamic/TimeAgo";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
@@ -227,9 +227,6 @@ export default function PreviewThumbnailPlayer({
                         {review.data.audio.map((audio) => {
                           return getIconForLabel(audio, "size-3 text-white");
                         })}
-                        {review.data.sub_labels?.map((sub) => {
-                          return getIconForSubLabel(sub, "size-3 text-white");
-                        })}
                       </Chip>
                     </>
                   )}
@@ -237,13 +234,10 @@ export default function PreviewThumbnailPlayer({
               </TooltipTrigger>
             </div>
             <TooltipContent className="capitalize">
-              {[
-                ...(review.data.objects || []),
-                ...(review.data.audio || []),
-                ...(review.data.sub_labels || []),
-              ]
+              {[...(review.data.objects || []), ...(review.data.audio || [])]
                 .filter((item) => item !== undefined)
-                .join(", ")}
+                .join(", ")
+                .replaceAll("-verified", "")}
             </TooltipContent>
           </Tooltip>
         </div>

web/src/types/review.ts

@@ -15,7 +15,6 @@ export type ReviewData = {
   audio: string[];
   detections: string[];
   objects: string[];
-  sub_labels?: string[];
   significant_motion_areas: number[];
   zones: string[];
 };

web/src/utils/iconUtil.tsx

@@ -3,6 +3,7 @@ import {
   FaAmazon,
   FaCarSide,
   FaCat,
+  FaCheckCircle,
   FaCircle,
   FaDog,
   FaFedex,
@@ -34,6 +35,10 @@ export function getIconForGroup(icon: string, className: string = "size-4") {
 }
 
 export function getIconForLabel(label: string, className?: string) {
+  if (label.endsWith("-verified")) {
+    return getVerifiedIcon(label, className);
+  }
+
   switch (label) {
     case "car":
       return <FaCarSide key={label} className={className} />;
@@ -48,24 +53,32 @@ export function getIconForLabel(label: string, className?: string) {
       return <LuBox key={label} className={className} />;
     case "person":
       return <BsPersonWalking key={label} className={className} />;
+    // audio
     case "crying":
     case "laughter":
     case "scream":
     case "speech":
     case "yell":
       return <MdRecordVoiceOver key={label} className={className} />;
-    default:
-      return <LuLassoSelect key={label} className={className} />;
-  }
-}
-
-export function getIconForSubLabel(label: string, className?: string) {
-  switch (label) {
+    // sub labels
     case "amazon":
       return <FaAmazon key={label} className={className} />;
     case "fedex":
       return <FaFedex key={label} className={className} />;
     case "ups":
       return <FaUps key={label} className={className} />;
+    default:
+      return <LuLassoSelect key={label} className={className} />;
   }
 }
+
+function getVerifiedIcon(label: string, className?: string) {
+  const simpleLabel = label.substring(0, label.lastIndexOf("-"));
+
+  return (
+    <div className="flex items-center">
+      {getIconForLabel(simpleLabel, className)}
+      <FaCheckCircle className="absolute size-2 translate-x-[80%] translate-y-3/4" />
+    </div>
+  );
+}