UI Fixes (blakeblackshear#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
guxiaoqi2007 · May 1, 2024 · 2974443 · 2974443
1 parent 90bdb07
commit 2974443
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 17 deletions.
diff --git a/frigate/object_processing.py b/frigate/object_processing.py
@@ -740,11 +740,11 @@ def update(self, frame_time, current_detections, motion_boxes, regions):
  if not obj.false_positive:
  label = object_type
 
- if (
- obj.obj_data.get("sub_label")
- and obj.obj_data.get("sub_label")[0] in ALL_ATTRIBUTE_LABELS
- ):
- label = obj.obj_data["sub_label"]
+ if obj.obj_data.get("sub_label"):
+ if obj.obj_data.get("sub_label")[0] in ALL_ATTRIBUTE_LABELS:
+  label = obj.obj_data["sub_label"][0]
+  else:
+  label = f"{object_type}-verified"
 
  camera_activity["objects"].append(
  {"id": obj.obj_data["id"], "label": label, "stationary": not active}

diff --git a/web/src/components/card/AnimatedEventCard.tsx b/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,
  }}

diff --git a/web/src/components/player/LivePlayer.tsx b/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([

diff --git a/web/src/hooks/use-camera-activity.ts b/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);

diff --git a/web/src/pages/SubmitPlus.tsx b/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>

diff --git a/web/tailwind.config.js b/web/tailwind.config.js
@@ -139,7 +139,8 @@ module.exports = {
  xs: "480px",
  "2xl": "1440px",
  "3xl": "1920px",
- "4xl": "2560px",
+ "2k": "2560px",
+ "4k": "3180px",
  },
  },
  },