+
+
+
+ {title}
+
+ {description && (
+
+ {open ? (
+ + {description} +
+ )} +
+
+ );
+ })}
+
+
+ handleRenameKey(key, e.target.value)}
+ className="flex-1"
+ />
+
+
+
+
+ {plates.map((plate, plateIndex) => (
+
+
+
+ handleUpdatePlate(key, plateIndex, e.target.value)
+ }
+ className="flex-1"
+ />
+ {plates.length > 1 && (
+
+ )}
+
+ ))}
+
+
+
+
+
-
+
{children}
diff --git a/web/src/components/overlay/DebugDrawingLayer.tsx b/web/src/components/overlay/DebugDrawingLayer.tsx
index 7cc52bc93..845217adc 100644
--- a/web/src/components/overlay/DebugDrawingLayer.tsx
+++ b/web/src/components/overlay/DebugDrawingLayer.tsx
@@ -8,6 +8,7 @@ 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;
@@ -28,6 +29,7 @@ function DebugDrawingLayer({
} | null>(null);
const [isDrawing, setIsDrawing] = useState(false);
const [showPopover, setShowPopover] = useState(false);
+ const { t } = useTranslation(["common"]);
const stageRef = useRef(null);
const [{ width: containerWidth }] = useResizeObserver(containerRef);
@@ -153,10 +155,13 @@ function DebugDrawingLayer({
Area:{" "}
- px: {calculateArea().toFixed(0)}
+ {t("information.pixels", {
+ ns: "common",
+ area: calculateArea().toFixed(0),
+ })}
- %: {calculateAreaPercentage().toFixed(4)}
+ {(calculateAreaPercentage() * 100).toFixed(2)}%
diff --git a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
index 6f16a86eb..72bcbbfc1 100644
--- a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
+++ b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
@@ -23,7 +23,7 @@ import { GeneralFilterContent } from "../filter/ReviewFilterGroup";
import { toast } from "sonner";
import axios, { AxiosError } from "axios";
import SaveExportOverlay from "./SaveExportOverlay";
-import { isIOS, isMobile } from "react-device-detect";
+import { isMobile } from "react-device-detect";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { ShareTimestampContent } from "./ShareTimestampDialog";
@@ -564,7 +564,6 @@ export default function MobileReviewSettingsDrawer({
setShowPreview={setShowExportPreview}
/>
{
if (!open) {
diff --git a/web/src/components/overlay/detail/TrackingDetails.tsx b/web/src/components/overlay/detail/TrackingDetails.tsx
index 00d09ec4f..026c0a1b6 100644
--- a/web/src/components/overlay/detail/TrackingDetails.tsx
+++ b/web/src/components/overlay/detail/TrackingDetails.tsx
@@ -9,7 +9,12 @@ import { FrigateConfig } from "@/types/frigateConfig";
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
import { use24HourTime } from "@/hooks/use-date-utils";
import { getIconForLabel } from "@/utils/iconUtil";
-import { LuCircle, LuFolderX } from "react-icons/lu";
+import {
+ LuChevronDown,
+ LuChevronRight,
+ LuCircle,
+ LuFolderX,
+} from "react-icons/lu";
import { cn } from "@/lib/utils";
import HlsVideoPlayer from "@/components/player/HlsVideoPlayer";
import { baseUrl } from "@/api/baseUrl";
@@ -899,6 +904,7 @@ function LifecycleIconRow({
const { t } = useTranslation(["views/explore", "components/player"]);
const { data: config } = useSWR("config");
const [isOpen, setIsOpen] = useState(false);
+ const [showAdvancedScores, setShowAdvancedScores] = useState(false);
const navigate = useNavigate();
const isAdmin = useIsAdmin();
@@ -993,12 +999,31 @@ function LifecycleIconRow({
[item.data.box],
);
- const score = useMemo(() => {
- if (item.data.score !== undefined) {
- return (item.data.score * 100).toFixed(0) + "%";
- }
- return "N/A";
- }, [item.data.score]);
+ const currentScore = useMemo(
+ () =>
+ item.data.score !== undefined
+ ? (item.data.score * 100).toFixed(0) + "%"
+ : null,
+ [item.data.score],
+ );
+ const computedScore = useMemo(
+ () =>
+ item.data.computed_score !== undefined &&
+ item.data.computed_score !== null &&
+ item.data.computed_score > 0
+ ? (item.data.computed_score * 100).toFixed(0) + "%"
+ : null,
+ [item.data.computed_score],
+ );
+ const topScore = useMemo(
+ () =>
+ item.data.top_score !== undefined &&
+ item.data.top_score !== null &&
+ item.data.top_score > 0
+ ? (item.data.top_score * 100).toFixed(0) + "%"
+ : null,
+ [item.data.top_score],
+ );
return (
{t("trackingDetails.lifecycleItemDesc.header.score")}
- {score}
+
+ {currentScore ?? "N/A"}
+
+ {(computedScore || topScore) && (
+
+ )}
+ {showAdvancedScores && computedScore && (
+
+
+ {t(
+ "trackingDetails.lifecycleItemDesc.header.computedScore",
+ )}
+
+
+ {computedScore}
+
+
+ )}
+ {showAdvancedScores && topScore && (
+
+
+ {t("trackingDetails.lifecycleItemDesc.header.topScore")}
+
+ {topScore}
+
+ )}
{t("trackingDetails.lifecycleItemDesc.header.ratio")}
diff --git a/web/src/pages/Replay.tsx b/web/src/pages/Replay.tsx
index 50927d1dd..2a6ea9ad1 100644
--- a/web/src/pages/Replay.tsx
+++ b/web/src/pages/Replay.tsx
@@ -41,6 +41,7 @@ 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";
@@ -633,7 +634,7 @@ type ObjectListProps = {
};
function ObjectList({ cameraConfig, objects, config }: ObjectListProps) {
- const { t } = useTranslation(["views/settings"]);
+ const { t } = useTranslation(["views/settings", "common"]);
const colormap = useMemo(() => {
if (!config) {
@@ -660,73 +661,80 @@ function ObjectList({ cameraConfig, objects, config }: ObjectListProps) {
}
return (
-
+
{objects.map((obj: ObjectType) => {
return (
-
+
- {hasPendingChanges && (
+ {showSaveAllButtons && (
-
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index 5f119a86c..c74191957 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -818,6 +818,27 @@ export default function Settings() {
[],
);
+ // Show save/undo all buttons only when changes span multiple sections
+ // or the single changed section is not the one currently being viewed
+ const showSaveAllButtons = useMemo(() => {
+ const pendingKeys = Object.keys(pendingDataBySection);
+ if (pendingKeys.length === 0) return false;
+ if (pendingKeys.length >= 2) return true;
+
+ // Exactly one pending section — check if it matches the current view
+ const key = pendingKeys[0];
+ const menuKey = pendingKeyToMenuKey(key);
+ if (menuKey !== pageToggle) return true;
+
+ // For camera-scoped keys, also check if the camera matches
+ if (key.includes("::")) {
+ const cameraName = key.slice(0, key.indexOf("::"));
+ return cameraName !== selectedCamera;
+ }
+
+ return false;
+ }, [pendingDataBySection, pendingKeyToMenuKey, pageToggle, selectedCamera]);
+
const handleSaveAll = useCallback(async () => {
if (
!config ||
@@ -1491,7 +1512,7 @@ export default function Settings() {
);
})}
- {getIconForLabel(obj.label, "object", "size-4 text-white")}
+
+
);
})}
+
-
+ {getIconForLabel(obj.label, "object", "size-5 text-white")}
+
+
+ {getTranslatedLabel(obj.label)}
+
- {getTranslatedLabel(obj.label)}
+
-
+
+
+
+
+ + {t("debug.objectShapeFilterDrawing.score", { + ns: "views/settings", + })} +
+ {obj.score ? (obj.score * 100).toFixed(1).toString() : "-"}% +
+
+
+
+ + {t("debug.objectShapeFilterDrawing.ratio", { + ns: "views/settings", + })} +
+ {obj.ratio ? obj.ratio.toFixed(2).toString() : "-"} +
+
+
+ + {t("debug.objectShapeFilterDrawing.area", { + ns: "views/settings", + })} +
+ {obj.area && cameraConfig ? ( +
+
+ ) : (
+ "-"
+ )}
+
+ {t("information.pixels", {
+ ns: "common",
+ area: obj.area,
+ })}
+
+
+ {(
+ (obj.area /
+ (cameraConfig.detect.width *
+ cameraConfig.detect.height)) *
+ 100
+ ).toFixed(2)}
+ %
+
+
-
-
-
- {t("debug.objectShapeFilterDrawing.score", {
- ns: "views/settings",
- })}
- :
-
-
- {obj.score ? (obj.score * 100).toFixed(1) : "-"}%
-
-
- {obj.ratio && (
-
-
- {t("debug.objectShapeFilterDrawing.ratio", {
- ns: "views/settings",
- })}
- :
-
- {obj.ratio.toFixed(2)}
-
- )}
- {obj.area && cameraConfig && (
-
-
- {t("debug.objectShapeFilterDrawing.area", {
- ns: "views/settings",
- })}
- :
-
-
- {obj.area} px (
- {(
- (obj.area /
- (cameraConfig.detect.width *
- cameraConfig.detect.height)) *
- 100
- ).toFixed(2)}
- %)
-
-
- )}
-
@@ -1667,7 +1688,7 @@ export default function Settings() {
- {hasPendingChanges && (
+ {showSaveAllButtons && (
(null);
- const [{ width: containerWidth, height: containerHeight }] =
- useResizeObserver(containerRef);
+ const [containerNode, setContainerNode] = useState(
+ null,
+ );
+ 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];
@@ -258,16 +281,16 @@ export default function MotionSearchDialog({
}}
>
- {selectedCamera && cameraConfig && imageSize.width > 0 ? (
+ {selectedCamera && cameraConfig ? (
setImageLoaded(true)}
+ ref={(node) => {
+ if (node?.complete && node.naturalWidth > 0) {
+ setImageLoaded(true);
+ }
+ }}
/>
{!imageLoaded && (
setImageLoaded(true)}
+ ref={(node) => {
+ if (node?.complete && node.naturalWidth > 0) {
+ setImageLoaded(true);
+ }
+ }}
/>
{!imageLoaded && (
diff --git a/web/src/views/motion-search/MotionSearchROICanvas.tsx b/web/src/views/motion-search/MotionSearchROICanvas.tsx
index 43fac7a48..b0d90da81 100644
--- a/web/src/views/motion-search/MotionSearchROICanvas.tsx
+++ b/web/src/views/motion-search/MotionSearchROICanvas.tsx
@@ -1,10 +1,9 @@
-import { useCallback, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } 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;
@@ -30,18 +29,40 @@ export default function MotionSearchROICanvas({
motionHeatmap,
showMotionHeatmap = false,
}: MotionSearchROICanvasProps) {
- const containerRef = useRef(null);
const stageRef = useRef(null);
- const [{ width: containerWidth, height: containerHeight }] =
- useResizeObserver(containerRef);
-
- const stageSize = useMemo(
- () => ({
- width: containerWidth > 0 ? Math.ceil(containerWidth) : 0,
- height: containerHeight > 0 ? Math.ceil(containerHeight) : 0,
- }),
- [containerHeight, containerWidth],
+ const [containerNode, setContainerNode] = useState(
+ null,
);
+ 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;
@@ -317,7 +338,7 @@ export default function MotionSearchROICanvas({
return (
e.evt.stopPropagation()}
+ onTouchStart={(e) => e.evt.stopPropagation()}
onDragMove={(e) => handlePointDragMove(e, index)}
onMouseOver={(e) => handleMouseOverPoint(e, index)}
onMouseOut={(e) => handleMouseOutPoint(e, index)}
diff --git a/web/src/views/motion-search/MotionSearchView.tsx b/web/src/views/motion-search/MotionSearchView.tsx
index 961c1065c..34c52cc5d 100644
--- a/web/src/views/motion-search/MotionSearchView.tsx
+++ b/web/src/views/motion-search/MotionSearchView.tsx
@@ -994,15 +994,20 @@ export default function MotionSearchView({
);
const progressMetrics = jobStatus?.metrics ?? searchMetrics;
- const progressValue =
- progressMetrics && progressMetrics.segments_scanned > 0
- ? Math.min(
- 100,
- (progressMetrics.segments_processed /
- progressMetrics.segments_scanned) *
- 100,
- )
- : 0;
+ const progressValue = (() => {
+ if (!progressMetrics || progressMetrics.segments_scanned <= 0) {
+ return 0;
+ }
+ const skipped =
+ progressMetrics.heatmap_roi_skip_segments +
+ progressMetrics.metadata_inactive_segments;
+ const totalWork = progressMetrics.segments_scanned - skipped;
+ const doneWork = progressMetrics.segments_processed - skipped;
+ if (totalWork <= 0) {
+ return 100;
+ }
+ return Math.min(100, Math.max(0, (doneWork / totalWork) * 100));
+ })();
const resultsPanel = (
<>
@@ -1036,8 +1041,8 @@ export default function MotionSearchView({
)}
- {searchMetrics && searchResults.length > 0 && (
-
+ {searchMetrics && (isSearching || searchResults.length > 0) && (
+
{t("metrics.segmentsScanned")}
diff --git a/web/src/views/settings/ObjectSettingsView.tsx b/web/src/views/settings/ObjectSettingsView.tsx
index 2f4ec5eaf..3179fb85c 100644
--- a/web/src/views/settings/ObjectSettingsView.tsx
+++ b/web/src/views/settings/ObjectSettingsView.tsx
@@ -370,7 +370,7 @@ type ObjectListProps = {
};
function ObjectList({ cameraConfig, objects }: ObjectListProps) {
- const { t } = useTranslation(["views/settings"]);
+ const { t } = useTranslation(["views/settings", "common"]);
const { data: config } = useSWR("config");
const colormap = useMemo(() => {
@@ -440,17 +440,21 @@ function ObjectList({ cameraConfig, objects }: ObjectListProps) {
{obj.area ? (
) : (
diff --git a/web/src/views/system/StorageMetrics.tsx b/web/src/views/system/StorageMetrics.tsx
index 00855b948..df7287fad 100644
--- a/web/src/views/system/StorageMetrics.tsx
+++ b/web/src/views/system/StorageMetrics.tsx
@@ -22,6 +22,7 @@ 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]: {
@@ -128,7 +129,11 @@ export default function StorageMetrics({
}, [stats, config]);
if (!cameraStorage || !stats || !totalStorage || !config) {
- return;
+ return (
+
- px: {obj.area.toString()}
+ {t("information.pixels", {
+ ns: "common",
+ area: obj.area,
+ })}
- %:{" "}
{(
- obj.area /
- (cameraConfig.detect.width *
- cameraConfig.detect.height)
+ (obj.area /
+ (cameraConfig.detect.width *
+ cameraConfig.detect.height)) *
+ 100
)
- .toFixed(4)
+ .toFixed(2)
.toString()}
+ %
+
+ );
}
return (