UI Tweaks (#20791)

* Add tooltip for classification group

* Don't portal upload dialog when not in fullscreen

web/public/locales/en/views/classificationModel.json

@@ -1,5 +1,8 @@
 {
   "documentTitle": "Classification Models",
+  "details": {
+    "scoreInfo": "Score represents the average classification confidence across all detections of this object."
+  },
   "button": {
     "deleteClassificationAttempts": "Delete Classification Images",
     "renameCategory": "Rename Class",

web/public/locales/en/views/faceLibrary.json

@@ -6,7 +6,8 @@
   },
   "details": {
     "timestamp": "Timestamp",
-    "unknown": "Unknown"
+    "unknown": "Unknown",
+    "scoreInfo": "Score is a weighted average of all face scores, weighted by the size of the face in each image."
   },
   "documentTitle": "Face Library - Frigate",
   "uploadFaceImage": {

web/src/components/card/ClassificationCard.tsx

@@ -11,7 +11,8 @@ import { isDesktop, isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import TimeAgo from "../dynamic/TimeAgo";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
-import { LuSearch } from "react-icons/lu";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { LuSearch, LuInfo } from "react-icons/lu";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { useNavigate } from "react-router-dom";
 import { HiSquare2Stack } from "react-icons/hi2";
@@ -321,14 +322,31 @@ export function GroupedClassificationCard({
                     ? event.sub_label
                     : t(noClassificationLabel)}
                   {event?.sub_label && event.sub_label !== "none" && (
-                    <div
+                    <div className="flex items-center gap-1">
-                      className={cn(
+                      <div
-                        "",
+                        className={cn(
-                        bestScoreStatus == "match" && "text-success",
+                          "",
-                        bestScoreStatus == "potential" && "text-orange-400",
+                          bestScoreStatus == "match" && "text-success",
-                        bestScoreStatus == "unknown" && "text-danger",
+                          bestScoreStatus == "potential" && "text-orange-400",
-                      )}
+                          bestScoreStatus == "unknown" && "text-danger",
-                    >{`${Math.round((event.data.sub_label_score || 0) * 100)}%`}</div>
+                        )}
+                      >{`${Math.round((event.data.sub_label_score || 0) * 100)}%`}</div>
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <button
+                            className="focus:outline-none"
+                            aria-label={t("details.scoreInfo", {
+                              ns: i18nLibrary,
+                            })}
+                          >
+                            <LuInfo className="size-3" />
+                          </button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-80 text-sm">
+                          {t("details.scoreInfo", { ns: i18nLibrary })}
+                        </PopoverContent>
+                      </Popover>
+                    </div>
                   )}
                 </ContentTitle>
                 <ContentDescription className={cn("", isMobile && "px-2")}>

web/src/components/player/VideoControls.tsx

@@ -289,6 +289,7 @@ export default function VideoControls({
           }}
           onUploadFrame={onUploadFrame}
           containerRef={containerRef}
+          fullscreen={fullscreen}
         />
       )}
       {features.fullscreen && toggleFullscreen && (
@@ -306,6 +307,7 @@ type FrigatePlusUploadButtonProps = {
   onClose: () => void;
   onUploadFrame: () => void;
   containerRef?: React.MutableRefObject<HTMLDivElement | null>;
+  fullscreen?: boolean;
 };
 function FrigatePlusUploadButton({
   video,
@@ -313,6 +315,7 @@ function FrigatePlusUploadButton({
   onClose,
   onUploadFrame,
   containerRef,
+  fullscreen,
 }: FrigatePlusUploadButtonProps) {
   const { t } = useTranslation(["components/player"]);
 
@@ -349,7 +352,11 @@ function FrigatePlusUploadButton({
         />
       </AlertDialogTrigger>
       <AlertDialogContent
-        portalProps={{ container: containerRef?.current }}
+        portalProps={
+          fullscreen && containerRef?.current
+            ? { container: containerRef.current }
+            : undefined
+        }
         className="md:max-w-2xl lg:max-w-3xl xl:max-w-4xl"
       >
         <AlertDialogHeader>