UI Fixes (#11179)

* Better scaling for frigate+ dialog and thumbnails

* Always show live objects chip

* Handle sub labels

* Send sub label correctly

* Formatting

* Undo vite

* Update web/src/utils/iconUtil.tsx

frigate/object_processing.py

@@ -740,11 +740,11 @@ class CameraState:
             if not obj.false_positive:
                 label = object_type
 
-                if (
+                if obj.obj_data.get("sub_label"):
-                    obj.obj_data.get("sub_label")
+                    if obj.obj_data.get("sub_label")[0] in ALL_ATTRIBUTE_LABELS:
-                    and obj.obj_data.get("sub_label")[0] in ALL_ATTRIBUTE_LABELS
+                        label = obj.obj_data["sub_label"][0]
-                ):
+                    else:
-                    label = obj.obj_data["sub_label"]
+                        label = f"{object_type}-verified"
 
                 camera_activity["objects"].append(
                     {"id": obj.obj_data["id"], "label": label, "stationary": not active}

web/src/components/card/AnimatedEventCard.tsx

@@ -62,7 +62,7 @@ export function AnimatedEventCard({ event }: AnimatedEventCardProps) {
     <Tooltip>
       <TooltipTrigger asChild>
         <div
-          className="h-24 relative"
+          className="h-24 4k:h-32 relative"
           style={{
             aspectRatio: aspectRatio,
           }}

web/src/components/player/LivePlayer.tsx

@@ -12,7 +12,6 @@ import { LivePlayerMode, VideoResolutionType } from "@/types/live";
 import useCameraLiveMode from "@/hooks/use-camera-live-mode";
 import { getIconForLabel } from "@/utils/iconUtil";
 import Chip from "../indicators/Chip";
-import { isMobile } from "react-device-detect";
 import { capitalizeFirstLetter } from "@/utils/stringUtil";
 
 type LivePlayerProps = {
@@ -44,8 +43,6 @@ export default function LivePlayer({
   onClick,
   setFullResolution,
 }: LivePlayerProps) {
-  const [cameraHovered, setCameraHovered] = useState(false);
-
   // camera activity
 
   const { activeMotion, activeTracking, objects } =
@@ -159,8 +156,6 @@ export default function LivePlayer({
           : "outline-0 outline-background"
       } transition-all duration-500 ${className}`}
       onClick={onClick}
-      onMouseEnter={() => setCameraHovered(true)}
-      onMouseLeave={() => setCameraHovered(false)}
     >
       <div className="absolute top-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
       <div className="absolute bottom-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
@@ -173,7 +168,7 @@ export default function LivePlayer({
               <TooltipTrigger asChild>
                 <div className="mx-3 pb-1 text-white text-sm">
                   <Chip
-                    className={`flex items-start justify-between space-x-1 ${cameraHovered || isMobile ? "" : "hidden"} bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0`}
+                    className={`flex items-start justify-between space-x-1 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0`}
                   >
                     {[
                       ...new Set([

web/src/hooks/use-camera-activity.ts

@@ -3,7 +3,7 @@ import {
   useInitialCameraState,
   useMotionActivity,
 } from "@/api/ws";
-import { CameraConfig } from "@/types/frigateConfig";
+import { ATTRIBUTE_LABELS, CameraConfig } from "@/types/frigateConfig";
 import { MotionData, ReviewSegment } from "@/types/review";
 import { useEffect, useMemo, useState } from "react";
 import { useTimelineUtils } from "./use-timeline-utils";
@@ -29,6 +29,7 @@ export function useCameraActivity(
 
   useEffect(() => {
     if (updatedCameraState) {
+      console.log(`the initial objects are ${JSON.stringify(updatedCameraState.objects)}`)
       setObjects(updatedCameraState.objects);
     }
   }, [updatedCameraState]);
@@ -77,8 +78,20 @@ export function useCameraActivity(
         }
       } else {
         const newObjects = [...objects];
-        newObjects[updatedEventIndex].label =
+
-          updatedEvent.after.sub_label ?? updatedEvent.after.label;
+        let label = updatedEvent.after.label;
+
+        if (updatedEvent.after.sub_label) {
+          const sub_label = updatedEvent.after.sub_label[0];
+
+          if (ATTRIBUTE_LABELS.includes(sub_label)) {
+            label = sub_label;
+          } else {
+            label = `${label}-verified`;
+          }
+        }
+
+        newObjects[updatedEventIndex].label = label;
         newObjects[updatedEventIndex].stationary =
           updatedEvent.after.stationary;
         setObjects(newObjects);

web/src/pages/SubmitPlus.tsx

@@ -141,7 +141,7 @@ export default function SubmitPlus() {
             open={upload != undefined}
             onOpenChange={(open) => (!open ? setUpload(undefined) : null)}
           >
-            <DialogContent className="md:max-w-4xl">
+            <DialogContent className="md:max-w-2xl lg:max-w-3xl xl:max-w-4xl">
               <DialogHeader>
                 <DialogTitle>Submit To Frigate+</DialogTitle>
                 <DialogDescription>

web/tailwind.config.js

@@ -139,7 +139,8 @@ module.exports = {
         xs: "480px",
         "2xl": "1440px",
         "3xl": "1920px",
-        "4xl": "2560px",
+        "2k": "2560px",
+        "4k": "3180px",
       },
     },
   },