frigate/api/chat.py

@@ -407,7 +407,7 @@ async def _execute_search_objects(
     query_params = EventsQueryParams(
         cameras=arguments.get("camera", "all"),
         labels=arguments.get("label", "all"),
-        sub_labels=arguments.get("sub_label", "all"),  # case-insensitive on the backend
+        sub_labels=arguments.get("sub_label", "all").lower(),
         zones=zones,
         zone=zones,
         after=after,

frigate/api/event.py

@@ -199,18 +199,13 @@ def events(
             sub_label_clauses.append((Event.sub_label.is_null()))
 
         for label in filtered_sub_labels:
-            lowered = label.lower()
             sub_label_clauses.append(
-                (fn.LOWER(Event.sub_label.cast("text")) == lowered)
+                (Event.sub_label.cast("text") == label)
-            )  # include exact matches (case-insensitive)
+            )  # include exact matches
 
-            # include this label when part of a list (LIKE is case-insensitive in sqlite for ASCII)
+            # include this label when part of a list
-            sub_label_clauses.append(
+            sub_label_clauses.append((Event.sub_label.cast("text") % f"*{label},*"))
-                (fn.LOWER(Event.sub_label.cast("text")) % f"*{lowered},*")
+            sub_label_clauses.append((Event.sub_label.cast("text") % f"*, {label}*"))
-            )
-            sub_label_clauses.append(
-                (fn.LOWER(Event.sub_label.cast("text")) % f"*, {lowered}*")
-            )
 
         sub_label_clause = reduce(operator.or_, sub_label_clauses)
         clauses.append((sub_label_clause))
@@ -614,18 +609,13 @@ def events_search(
             sub_label_clauses.append((Event.sub_label.is_null()))
 
         for label in filtered_sub_labels:
-            lowered = label.lower()
             sub_label_clauses.append(
-                (fn.LOWER(Event.sub_label.cast("text")) == lowered)
+                (Event.sub_label.cast("text") == label)
-            )  # include exact matches (case-insensitive)
+            )  # include exact matches
 
-            # include this label when part of a list (LIKE is case-insensitive in sqlite for ASCII)
+            # include this label when part of a list
-            sub_label_clauses.append(
+            sub_label_clauses.append((Event.sub_label.cast("text") % f"*{label},*"))
-                (fn.LOWER(Event.sub_label.cast("text")) % f"*{lowered},*")
+            sub_label_clauses.append((Event.sub_label.cast("text") % f"*, {label}*"))
-            )
-            sub_label_clauses.append(
-                (fn.LOWER(Event.sub_label.cast("text")) % f"*, {lowered}*")
-            )
 
         event_filters.append((reduce(operator.or_, sub_label_clauses)))
 

frigate/ptz/onvif.py

@@ -152,12 +152,21 @@ class OnvifController:
 
         cam = self.camera_configs[cam_name]
         try:
+            user = cam.onvif.user
+            password = cam.onvif.password
+
+            if user is not None and isinstance(user, bytes):
+                user = user.decode("utf-8")
+
+            if password is not None and isinstance(password, bytes):
+                password = password.decode("utf-8")
+
             self.cams[cam_name] = {
                 "onvif": ONVIFCamera(
                     cam.onvif.host,
                     cam.onvif.port,
-                    cam.onvif.user,
+                    user,
-                    cam.onvif.password,
+                    password,
                     wsdl_dir=str(Path(find_spec("onvif").origin).parent / "wsdl"),
                     adjust_time=cam.onvif.ignore_time_mismatch,
                     encrypt=not cam.onvif.tls_insecure,
@@ -450,15 +459,15 @@ class OnvifController:
             presets = []
 
         for preset in presets:
+            # Ensure preset name is a Unicode string and handle UTF-8 characters correctly
             preset_name = getattr(preset, "Name") or f"preset {preset['token']}"
-            # Some cameras (e.g. Reolink) return UTF-8 bytes that zeep decodes
+
-            # as latin-1, producing mojibake. Detect that and repair it by
+            if isinstance(preset_name, bytes):
-            # round-tripping through latin-1 -> utf-8.
+                preset_name = preset_name.decode("utf-8")
-            try:
+
-                preset_name = preset_name.encode("latin-1").decode("utf-8")
+            # Convert to lowercase while preserving UTF-8 characters
-            except (UnicodeEncodeError, UnicodeDecodeError):
+            preset_name_lower = preset_name.lower()
-                pass
+            self.cams[camera_name]["presets"][preset_name_lower] = preset["token"]
-            self.cams[camera_name]["presets"][preset_name.lower()] = preset["token"]
 
         # get list of supported features
         supported_features = []
@@ -686,6 +695,9 @@ class OnvifController:
         self.cams[camera_name]["active"] = False
 
     async def _move_to_preset(self, camera_name: str, preset: str) -> None:
+        if isinstance(preset, bytes):
+            preset = preset.decode("utf-8")
+
         preset = preset.lower()
 
         if preset not in self.cams[camera_name]["presets"]:

web/src/components/overlay/DebugDrawingLayer.tsx

@@ -8,7 +8,6 @@ import {
 } from "@/components/ui/popover";
 import Konva from "konva";
 import { useResizeObserver } from "@/hooks/resize-observer";
-import { useTranslation } from "react-i18next";
 
 type DebugDrawingLayerProps = {
   containerRef: React.RefObject<HTMLDivElement | null>;
@@ -29,7 +28,6 @@ function DebugDrawingLayer({
   } | null>(null);
   const [isDrawing, setIsDrawing] = useState(false);
   const [showPopover, setShowPopover] = useState(false);
-  const { t } = useTranslation(["common"]);
   const stageRef = useRef<Konva.Stage>(null);
 
   const [{ width: containerWidth }] = useResizeObserver(containerRef);
@@ -155,13 +153,10 @@ function DebugDrawingLayer({
               <div className="flex flex-col text-primary">
                 Area:{" "}
                 <span className="text-sm text-primary-variant">
-                  {t("information.pixels", {
+                  px: {calculateArea().toFixed(0)}
-                    ns: "common",
-                    area: calculateArea().toFixed(0),
-                  })}
                 </span>
                 <span className="text-sm text-primary-variant">
-                  {(calculateAreaPercentage() * 100).toFixed(2)}%
+                  %: {calculateAreaPercentage().toFixed(4)}
                 </span>
               </div>
               <div className="flex flex-col text-primary">

web/src/pages/Replay.tsx

@@ -41,7 +41,6 @@ import { Toaster } from "@/components/ui/sonner";
 import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import { getIconForLabel } from "@/utils/iconUtil";
 import { getTranslatedLabel } from "@/utils/i18n";
-import { Card } from "@/components/ui/card";
 import { ObjectType } from "@/types/ws";
 import WsMessageFeed from "@/components/ws/WsMessageFeed";
 import { ConfigSectionTemplate } from "@/components/config-form/sections/ConfigSectionTemplate";
@@ -634,7 +633,7 @@ type ObjectListProps = {
 };
 
 function ObjectList({ cameraConfig, objects, config }: ObjectListProps) {
-  const { t } = useTranslation(["views/settings", "common"]);
+  const { t } = useTranslation(["views/settings"]);
 
   const colormap = useMemo(() => {
     if (!config) {
@@ -661,12 +660,14 @@ function ObjectList({ cameraConfig, objects, config }: ObjectListProps) {
   }
 
   return (
-    <div className="scrollbar-container relative flex w-full flex-col overflow-y-auto">
+    <div className="flex w-full flex-col gap-2">
       {objects.map((obj: ObjectType) => {
         return (
-          <Card className="mb-1 p-2 text-sm" key={obj.id}>
+          <div
+            key={obj.id}
+            className="flex flex-col rounded-lg bg-secondary/30 p-2"
+          >
             <div className="flex flex-row items-center gap-3 pb-1">
-              <div className="flex flex-1 flex-row items-center justify-start p-3 pl-1">
               <div
                 className="rounded-lg p-2"
                 style={{
@@ -675,66 +676,57 @@ function ObjectList({ cameraConfig, objects, config }: ObjectListProps) {
                     : getColorForObjectName(obj.label),
                 }}
               >
-                  {getIconForLabel(obj.label, "object", "size-5 text-white")}
+                {getIconForLabel(obj.label, "object", "size-4 text-white")}
               </div>
-                <div className="ml-3 text-lg">
+              <div className="text-sm font-medium">
                 {getTranslatedLabel(obj.label)}
               </div>
             </div>
-              <div className="flex w-8/12 flex-row items-center justify-end">
+            <div className="flex flex-col gap-1 pl-1 text-xs text-primary-variant">
-                <div className="text-md mr-2 w-1/3">
+              <div className="flex items-center justify-between">
-                  <div className="flex flex-col items-end justify-end">
+                <span>
-                    <p className="mb-1.5 text-sm text-primary-variant">
                   {t("debug.objectShapeFilterDrawing.score", {
                     ns: "views/settings",
                   })}
-                    </p>
+                  :
-                    {obj.score ? (obj.score * 100).toFixed(1).toString() : "-"}%
+                </span>
+                <span className="text-primary">
+                  {obj.score ? (obj.score * 100).toFixed(1) : "-"}%
+                </span>
               </div>
-                </div>
+              {obj.ratio && (
-                <div className="text-md mr-2 w-1/3">
+                <div className="flex items-center justify-between">
-                  <div className="flex flex-col items-end justify-end">
+                  <span>
-                    <p className="mb-1.5 text-sm text-primary-variant">
                     {t("debug.objectShapeFilterDrawing.ratio", {
                       ns: "views/settings",
                     })}
-                    </p>
+                    :
-                    {obj.ratio ? obj.ratio.toFixed(2).toString() : "-"}
+                  </span>
+                  <span className="text-primary">{obj.ratio.toFixed(2)}</span>
                 </div>
-                </div>
+              )}
-                <div className="text-md mr-2 w-1/3">
+              {obj.area && cameraConfig && (
-                  <div className="flex flex-col items-end justify-end">
+                <div className="flex items-center justify-between">
-                    <p className="mb-1.5 text-sm text-primary-variant">
+                  <span>
                     {t("debug.objectShapeFilterDrawing.area", {
                       ns: "views/settings",
                     })}
-                    </p>
+                    :
-                    {obj.area && cameraConfig ? (
+                  </span>
-                      <div className="text-end">
+                  <span className="text-primary">
-                        <div className="text-xs">
+                    {obj.area} px (
-                          {t("information.pixels", {
-                            ns: "common",
-                            area: obj.area,
-                          })}
-                        </div>
-                        <div className="text-xs">
                     {(
                       (obj.area /
                         (cameraConfig.detect.width *
                           cameraConfig.detect.height)) *
                       100
                     ).toFixed(2)}
-                          %
+                    %)
+                  </span>
                 </div>
-                      </div>
-                    ) : (
-                      "-"
               )}
             </div>
           </div>
-              </div>
-            </div>
-          </Card>
         );
       })}
     </div>

web/src/views/motion-search/MotionSearchDialog.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { isDesktop, isIOS, isMobile } from "react-device-detect";
 import { FaArrowRight, FaCalendarAlt, FaCheckCircle } from "react-icons/fa";
@@ -42,6 +42,7 @@ import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
 import { TimezoneAwareCalendar } from "@/components/overlay/ReviewActivityCalendar";
 
 import { useApiHost } from "@/api";
+import { useResizeObserver } from "@/hooks/resize-observer";
 import { useFormattedTimestamp, use24HourTime } from "@/hooks/use-date-utils";
 import { getUTCOffset } from "@/utils/dateUtil";
 import useSWR from "swr";
@@ -112,35 +113,11 @@ export default function MotionSearchDialog({
 }: MotionSearchDialogProps) {
   const { t } = useTranslation(["views/motionSearch", "common"]);
   const apiHost = useApiHost();
-  const [containerNode, setContainerNode] = useState<HTMLDivElement | null>(
+  const containerRef = useRef<HTMLDivElement>(null);
-    null,
+  const [{ width: containerWidth, height: containerHeight }] =
-  );
+    useResizeObserver(containerRef);
-  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
-  const containerWidth = containerSize.width;
-  const containerHeight = containerSize.height;
   const [imageLoaded, setImageLoaded] = useState(false);
 
-  useEffect(() => {
-    if (!containerNode) {
-      return;
-    }
-
-    const measure = () => {
-      const rect = containerNode.getBoundingClientRect();
-      setContainerSize((prev) =>
-        prev.width === rect.width && prev.height === rect.height
-          ? prev
-          : { width: rect.width, height: rect.height },
-      );
-    };
-
-    measure();
-
-    const observer = new ResizeObserver(() => measure());
-    observer.observe(containerNode);
-    return () => observer.disconnect();
-  }, [containerNode]);
-
   const cameraConfig = useMemo(() => {
     if (!selectedCamera) return undefined;
     return config.cameras[selectedCamera];
@@ -281,16 +258,16 @@ export default function MotionSearchDialog({
                     }}
                   >
                     <div
-                      ref={setContainerNode}
+                      ref={containerRef}
                       className="relative flex w-full items-center justify-center overflow-hidden rounded-lg border bg-secondary"
                       style={{ aspectRatio: "16 / 9" }}
                     >
-                      {selectedCamera && cameraConfig ? (
+                      {selectedCamera && cameraConfig && imageSize.width > 0 ? (
                         <div
                           className="relative"
                           style={{
-                            width: imageSize.width || "100%",
+                            width: imageSize.width,
-                            height: imageSize.height || "100%",
+                            height: imageSize.height,
                           }}
                         >
                           <img
@@ -300,11 +277,6 @@ export default function MotionSearchDialog({
                             src={`${apiHost}api/${selectedCamera}/latest.jpg?h=500`}
                             className="h-full w-full object-contain"
                             onLoad={() => setImageLoaded(true)}
-                            ref={(node) => {
-                              if (node?.complete && node.naturalWidth > 0) {
-                                setImageLoaded(true);
-                              }
-                            }}
                           />
                           {!imageLoaded && (
                             <div className="absolute inset-0 flex items-center justify-center">

web/src/views/motion-search/MotionSearchROICanvas.tsx

@@ -1,9 +1,10 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import { Stage, Layer, Line, Circle, Image } from "react-konva";
 import Konva from "konva";
 import type { KonvaEventObject } from "konva/lib/Node";
 import { flattenPoints } from "@/utils/canvasUtil";
 import { cn } from "@/lib/utils";
+import { useResizeObserver } from "@/hooks/resize-observer";
 
 type MotionSearchROICanvasProps = {
   camera: string;
@@ -29,40 +30,18 @@ export default function MotionSearchROICanvas({
   motionHeatmap,
   showMotionHeatmap = false,
 }: MotionSearchROICanvasProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
   const stageRef = useRef<Konva.Stage>(null);
-  const [containerNode, setContainerNode] = useState<HTMLDivElement | null>(
+  const [{ width: containerWidth, height: containerHeight }] =
-    null,
+    useResizeObserver(containerRef);
+
+  const stageSize = useMemo(
+    () => ({
+      width: containerWidth > 0 ? Math.ceil(containerWidth) : 0,
+      height: containerHeight > 0 ? Math.ceil(containerHeight) : 0,
+    }),
+    [containerHeight, containerWidth],
   );
-  const [stageSize, setStageSize] = useState({ width: 0, height: 0 });
-
-  useEffect(() => {
-    if (!containerNode) {
-      return;
-    }
-
-    const apply = (width: number, height: number) => {
-      setStageSize((prev) => {
-        const next = {
-          width: width > 0 ? Math.ceil(width) : 0,
-          height: height > 0 ? Math.ceil(height) : 0,
-        };
-        if (prev.width === next.width && prev.height === next.height) {
-          return prev;
-        }
-        return next;
-      });
-    };
-
-    apply(containerNode.clientWidth, containerNode.clientHeight);
-
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (!entry) return;
-      apply(entry.contentRect.width, entry.contentRect.height);
-    });
-    observer.observe(containerNode);
-    return () => observer.disconnect();
-  }, [containerNode]);
 
   const videoRect = useMemo(() => {
     const stageWidth = stageSize.width;
@@ -338,7 +317,7 @@ export default function MotionSearchROICanvas({
 
   return (
     <div
-      ref={setContainerNode}
+      ref={containerRef}
       className={cn(
         "absolute inset-0 z-10",
         isInteractive ? "pointer-events-auto" : "pointer-events-none",
@@ -406,8 +385,6 @@ export default function MotionSearchROICanvas({
                   stroke="white"
                   strokeWidth={2}
                   draggable={!isDrawing}
-                  onMouseDown={(e) => e.evt.stopPropagation()}
-                  onTouchStart={(e) => e.evt.stopPropagation()}
                   onDragMove={(e) => handlePointDragMove(e, index)}
                   onMouseOver={(e) => handleMouseOverPoint(e, index)}
                   onMouseOut={(e) => handleMouseOutPoint(e, index)}

web/src/views/motion-search/MotionSearchView.tsx

@@ -994,20 +994,15 @@ export default function MotionSearchView({
   );
 
   const progressMetrics = jobStatus?.metrics ?? searchMetrics;
-  const progressValue = (() => {
+  const progressValue =
-    if (!progressMetrics || progressMetrics.segments_scanned <= 0) {
+    progressMetrics && progressMetrics.segments_scanned > 0
-      return 0;
+      ? Math.min(
-    }
+          100,
-    const skipped =
+          (progressMetrics.segments_processed /
-      progressMetrics.heatmap_roi_skip_segments +
+            progressMetrics.segments_scanned) *
-      progressMetrics.metadata_inactive_segments;
+            100,
-    const totalWork = progressMetrics.segments_scanned - skipped;
+        )
-    const doneWork = progressMetrics.segments_processed - skipped;
+      : 0;
-    if (totalWork <= 0) {
-      return 100;
-    }
-    return Math.min(100, Math.max(0, (doneWork / totalWork) * 100));
-  })();
 
   const resultsPanel = (
     <>
@@ -1041,8 +1036,8 @@ export default function MotionSearchView({
             <Progress className="h-1" value={progressValue} />
           </div>
         )}
-        {searchMetrics && (isSearching || searchResults.length > 0) && (
+        {searchMetrics && searchResults.length > 0 && (
-          <div className="mx-2 my-3 rounded-lg border bg-secondary p-2">
+          <div className="mx-2 rounded-lg border bg-secondary p-2">
             <div className="space-y-0.5 text-xs text-muted-foreground">
               <div className="flex justify-between">
                 <span>{t("metrics.segmentsScanned")}</span>

web/src/views/settings/ObjectSettingsView.tsx

@@ -370,7 +370,7 @@ type ObjectListProps = {
 };
 
 function ObjectList({ cameraConfig, objects }: ObjectListProps) {
-  const { t } = useTranslation(["views/settings", "common"]);
+  const { t } = useTranslation(["views/settings"]);
   const { data: config } = useSWR<FrigateConfig>("config");
 
   const colormap = useMemo(() => {
@@ -440,21 +440,17 @@ function ObjectList({ cameraConfig, objects }: ObjectListProps) {
                       {obj.area ? (
                         <div className="text-end">
                           <div className="text-xs">
-                            {t("information.pixels", {
+                            px: {obj.area.toString()}
-                              ns: "common",
-                              area: obj.area,
-                            })}
                           </div>
                           <div className="text-xs">
+                            %:{" "}
                             {(
-                              (obj.area /
+                              obj.area /
                               (cameraConfig.detect.width *
-                                  cameraConfig.detect.height)) *
+                                cameraConfig.detect.height)
-                              100
                             )
-                              .toFixed(2)
+                              .toFixed(4)
                               .toString()}
-                            %
                           </div>
                         </div>
                       ) : (

web/src/views/system/StorageMetrics.tsx

@@ -22,7 +22,6 @@ import { Link } from "react-router-dom";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { LuExternalLink } from "react-icons/lu";
 import { FaExclamationTriangle } from "react-icons/fa";
-import ActivityIndicator from "@/components/indicators/activity-indicator";
 
 type CameraStorage = {
   [key: string]: {
@@ -129,11 +128,7 @@ export default function StorageMetrics({
   }, [stats, config]);
 
   if (!cameraStorage || !stats || !totalStorage || !config) {
-    return (
+    return;
-      <div className="flex size-full items-center justify-center">
-        <ActivityIndicator />
-      </div>
-    );
   }
 
   return (