administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-07-30 07:39:01 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Camera profile support (#22482)

Browse Source 
* add CameraProfileConfig model for named config overrides

* add profiles field to CameraConfig

* add active_profile field to FrigateConfig

Runtime-only field excluded from YAML serialization, tracks which
profile is currently active.

* add ProfileManager for profile activation and persistence

Handles snapshotting base configs, applying profile overrides via
deep_merge + apply_section_update, publishing ZMQ updates, and
persisting active profile to /config/.active_profile.

* add profile API endpoints (GET /profiles, GET/PUT /profile)

* add MQTT and dispatcher integration for profiles

- Subscribe to frigate/profile/set MQTT topic
- Publish profile/state and profiles/available on connect
- Add _on_profile_command handler to dispatcher
- Broadcast active profile state on WebSocket connect

* wire ProfileManager into app startup and FastAPI

- Create ProfileManager after dispatcher init
- Restore persisted profile on startup
- Pass dispatcher and profile_manager to FastAPI app

* add tests for invalid profile values and keys

Tests that Pydantic rejects: invalid field values (fps: "not_a_number"),
unknown section keys (ffmpeg in profile), invalid nested values, and
invalid profiles in full config parsing.

* formatting

* fix CameraLiveConfig JSON serialization error on profile activation

refactor _publish_updates to only publish ZMQ updates for
sections that actually changed, not all sections on affected cameras.

* consolidate

* add enabled field to camera profiles for enabling/disabling cameras

* add zones support to camera profiles

* add frontend profile types, color utility, and config save support

* add profile state management and save preview support

* add profileName prop to BaseSection for profile-aware config editing

* add profile section dropdown and wire into camera settings pages

* add per-profile camera enable/disable to Camera Management view

* add profiles summary page with card-based layout and fix backend zone comparison bug

* add active profile badge to settings toolbar

* i18n

* add red dot for any pending changes including profiles

* profile support for mask and zone editor

* fix hidden field validation errors caused by lodash wildcard and schema gaps

lodash unset does not support wildcard (*) segments, so hidden fields like
filters.*.mask were never stripped from form data, leaving null raw_coordinates
that fail RJSF anyOf validation. Add unsetWithWildcard helper and also strip
hidden fields from the JSON schema itself as defense-in-depth.

* add face_recognition and lpr to profile-eligible sections

* move profile dropdown from section panes to settings header

* add profiles enable toggle and improve empty state

* formatting

* tweaks

* tweak colors and switch

* fix profile save diff, masksAndZones delete, and config sync

* ui tweaks

* ensure profile manager gets updated config

* rename profile settings to ui settings

* refactor profilesview and add dots/border colors when overridden

* implement an update_config method for profile manager

* fix mask deletion

* more unique colors

* add top-level profiles config section with friendly names

* implement profile friendly names and improve profile UI

- Add ProfileDefinitionConfig type and profiles field to FrigateConfig
- Use ProfilesApiResponse type with friendly_name support throughout
- Replace Record<string, unknown> with proper JsonObject/JsonValue types
- Add profile creation form matching zone pattern (Zod + NameAndIdFields)
- Add pencil icon for renaming profile friendly names in ProfilesView
- Move Profiles menu item to first under Camera Configuration
- Add activity indicators on save/rename/delete buttons
- Display friendly names in CameraManagementView profile selector
- Fix duplicate colored dots in management profile dropdown
- Fix i18n namespace for overridden base config tooltips
- Move profile override deletion from dropdown trash icon to footer
  button with confirmation dialog, matching Reset to Global pattern
- Remove Add Profile from section header dropdown to prevent saving
  camera overrides before top-level profile definition exists
- Clean up newProfiles state after API profile deletion
- Refresh profiles SWR cache after saving profile definitions

* remove profile badge in settings and add profiles to main menu

* use icon only on mobile

* change color order

* docs

* show activity indicator on trash icon while deleting a profile

* tweak language

* immediately create profiles on backend instead of deferring to Save All

* hide restart-required fields when editing a profile section

fields that require a restart cannot take effect via profile switching,
so they are merged into hiddenFields when profileName is set

* show active profile indicator in desktop status bar

* fix profile config inheritance bug where Pydantic defaults override base values

The /config API was dumping profile overrides with model_dump() which included
all Pydantic defaults. When the frontend merged these over
the camera's base config, explicitly-set base values were
lost. Now profile overrides are re-dumped with exclude_unset=True so only
user-specified fields are returned.

Also fixes the Save All path generating spurious deletion markers for
restart-required fields that are hidden during profile
editing but not excluded from the raw data sanitization in
prepareSectionSavePayload.

* docs tweaks

* docs tweak

* formatting

* formatting

* fix typing

* fix test pollution

test_maintainer was injecting MagicMock() into sys.modules["frigate.config.camera.updater"] at module load time and never restoring it. When the profile tests later imported CameraConfigUpdateEnum and CameraConfigUpdateTopic from that module, they got mock objects instead of the real dataclass/enum, so equality comparisons always failed

* remove

* fix settings showing profile-merged values when editing base config

When a profile is active, the in-memory config contains effective
(profile-merged) values. The settings UI was displaying these merged
values even when the "Base Config" view was selected.

Backend: snapshot pre-profile base configs in ProfileManager and expose
them via a `base_config` key in the /api/config camera response when a
profile is active. The top-level sections continue to reflect the
effective running config.

Frontend: read from `base_config` when available in BaseSection,
useConfigOverride, useAllCameraOverrides, and prepareSectionSavePayload.
Include formData labels in Object/Audio switches widgets so that labels
added only by a profile override remain visible when editing that profile.

* use rasterized_mask as field

makes it easier to exclude from the schema with exclude=True
prevents leaking of the field when using model_dump for profiles

* fix zones

- Fix zone colors not matching across profiles by falling back to base zone color when profile zone data lacks a color field
- Use base_config for base-layer values in masks/zones view so profile-merged values don't pollute the base config editing view
- Handle zones separately in profile manager snapshot/restore since ZoneConfig requires special serialization (color as private attr, contour generation)
- Inherit base zone color and generate contours for profile zone overrides in profile manager

* formatting

* don't require restart for camera enabled change for profiles

* publish camera state when changing profiles

* formatting

* remove available profiles from mqtt

* improve typing
This commit is contained in:
Josh Hawkins
2026-03-19 09:47:57 -05:00
committed by GitHub
parent a05f35c747
commit c93dad9bd9
47 changed files with 4591 additions and 458 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/Statusbar.tsx
+34
View File
@@ -4,8 +4,12 @@ import {
StatusMessage,
} from "@/context/statusbar-provider";
import useStats, { useAutoFrigateStats } from "@/hooks/use-stats";
import { cn } from "@/lib/utils";
import type { ProfilesApiResponse } from "@/types/profile";
import { getProfileColor } from "@/utils/profileColors";
import { useContext, useEffect, useMemo } from "react";
import { useTranslation } from "react-i18next";
import useSWR from "swr";
import { FaCheck } from "react-icons/fa";
import { IoIosWarning } from "react-icons/io";
@@ -46,6 +50,21 @@ export default function Statusbar() {
});
}, [potentialProblems, addMessage, clearMessages]);
const { data: profilesData } = useSWR<ProfilesApiResponse>("profiles");
const activeProfile = useMemo(() => {
if (!profilesData?.active_profile || !profilesData.profiles) return null;
const info = profilesData.profiles.find(
(p) => p.name === profilesData.active_profile,
);
const allNames = profilesData.profiles.map((p) => p.name).sort();
return {
name: profilesData.active_profile,
friendlyName: info?.friendly_name ?? profilesData.active_profile,
color: getProfileColor(profilesData.active_profile, allNames),
};
}, [profilesData]);
const { payload: reindexState } = useEmbeddingsReindexProgress();
useEffect(() => {
@@ -136,6 +155,21 @@ export default function Statusbar() {
</Link>
);
})}
{activeProfile && (
<Link to="/settings?page=profiles">
<div className="flex cursor-pointer items-center gap-2 text-sm hover:underline">
<span
className={cn(
"size-2 shrink-0 rounded-full",
activeProfile.color.dot,
)}
/>
<span className="max-w-[150px] truncate">
{activeProfile.friendlyName}
</span>
</div>
</Link>
)}
</div>
<div className="no-scrollbar flex h-full max-w-[50%] items-center gap-2 overflow-x-auto">
{Object.entries(messages).length === 0 ? (
web/src/components/config-form/sections/BaseSection.tsx
+230 -43
View File
@@ -28,12 +28,18 @@ import { useConfigOverride } from "@/hooks/use-config-override";
import { useSectionSchema } from "@/hooks/use-config-schema";
import type { FrigateConfig } from "@/types/frigateConfig";
import { Badge } from "@/components/ui/badge";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
import { LuChevronDown, LuChevronRight } from "react-icons/lu";
import Heading from "@/components/ui/heading";
import get from "lodash/get";
import cloneDeep from "lodash/cloneDeep";
import isEqual from "lodash/isEqual";
import merge from "lodash/merge";
import {
Collapsible,
CollapsibleContent,
@@ -59,6 +65,7 @@ import {
globalCameraDefaultSections,
buildOverrides,
buildConfigDataForPath,
getBaseCameraSectionValue,
sanitizeSectionData as sharedSanitizeSectionData,
requiresRestartForOverrides as sharedRequiresRestartForOverrides,
} from "@/utils/configUtil";
@@ -126,16 +133,25 @@ export interface BaseSectionProps {
onStatusChange?: (status: {
hasChanges: boolean;
isOverridden: boolean;
overrideSource?: "global" | "profile";
hasValidationErrors: boolean;
}) => void;
/** Pending form data keyed by "sectionKey" or "cameraName::sectionKey" */
pendingDataBySection?: Record<string, unknown>;
pendingDataBySection?: Record<string, ConfigSectionData>;
/** Callback to update pending data for a section */
onPendingDataChange?: (
sectionKey: string,
cameraName: string | undefined,
data: ConfigSectionData | null,
) => void;
/** When set, editing this profile's overrides instead of the base config */
profileName?: string;
/** Display name for the profile (friendly name) */
profileFriendlyName?: string;
/** Border color class for profile override badge (e.g., "border-amber-500") */
profileBorderColor?: string;
/** Callback to delete the current profile's overrides for this section */
onDeleteProfileSection?: () => void;
}
export interface CreateSectionOptions {
@@ -166,6 +182,10 @@ export function ConfigSection({
onStatusChange,
pendingDataBySection,
onPendingDataChange,
profileName,
profileFriendlyName,
profileBorderColor,
onDeleteProfileSection,
}: ConfigSectionProps) {
// For replay level, treat as camera-level config access
const effectiveLevel = level === "replay" ? "camera" : level;
@@ -181,12 +201,17 @@ export function ConfigSection({
const statusBar = useContext(StatusBarMessagesContext);
// Create a key for this section's pending data
// When editing a profile, use "cameraName::profiles.profileName.sectionPath"
const effectiveSectionPath = profileName
? `profiles.${profileName}.${sectionPath}`
: sectionPath;
const pendingDataKey = useMemo(
() =>
effectiveLevel === "camera" && cameraName
? `${cameraName}::${sectionPath}`
: sectionPath,
[effectiveLevel, cameraName, sectionPath],
? `${cameraName}::${effectiveSectionPath}`
: effectiveSectionPath,
[effectiveLevel, cameraName, effectiveSectionPath],
);
// Use pending data from parent if available, otherwise use local state
@@ -213,25 +238,29 @@ export function ConfigSection({
const setPendingData = useCallback(
(data: ConfigSectionData | null) => {
if (onPendingDataChange) {
onPendingDataChange(sectionPath, cameraName, data);
onPendingDataChange(effectiveSectionPath, cameraName, data);
} else {
setLocalPendingData(data);
}
},
[onPendingDataChange, sectionPath, cameraName],
[onPendingDataChange, effectiveSectionPath, cameraName],
);
const [isSaving, setIsSaving] = useState(false);
const [hasValidationErrors, setHasValidationErrors] = useState(false);
const [extraHasChanges, setExtraHasChanges] = useState(false);
const [formKey, setFormKey] = useState(0);
const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
const [isDeleteProfileDialogOpen, setIsDeleteProfileDialogOpen] =
useState(false);
const [restartDialogOpen, setRestartDialogOpen] = useState(false);
const isResettingRef = useRef(false);
const isInitializingRef = useRef(true);
const lastPendingDataKeyRef = useRef<string | null>(null);
const updateTopic =
effectiveLevel === "camera" && cameraName
// Profile definitions don't hot-reload — only PUT /api/profile/set applies them
const updateTopic = profileName
? undefined
: effectiveLevel === "camera" && cameraName
? cameraUpdateTopicMap[sectionPath]
? `config/cameras/${cameraName}/${cameraUpdateTopicMap[sectionPath]}`
: undefined
@@ -256,7 +285,7 @@ export function ConfigSection({
[sectionPath, level, sectionSchema],
);
// Get override status
// Get override status (camera vs global)
const { isOverridden, globalValue, cameraValue } = useConfigOverride({
config,
cameraName: effectiveLevel === "camera" ? cameraName : undefined,
@@ -264,16 +293,46 @@ export function ConfigSection({
compareFields: sectionConfig.overrideFields,
});
// Check if the active profile overrides the base config for this section
const profileOverridesSection = useMemo(() => {
if (!profileName || !cameraName || !config) return false;
const profileData = config.cameras?.[cameraName]?.profiles?.[profileName];
return !!profileData?.[sectionPath as keyof typeof profileData];
}, [profileName, cameraName, config, sectionPath]);
const overrideSource: "global" | "profile" | undefined =
profileOverridesSection ? "profile" : isOverridden ? "global" : undefined;
// Get current form data
// When a profile is active the top-level camera sections contain the
// effective (profile-merged) values. For the base-config view we read
// from `base_config` (original values before the profile was applied).
// When editing a profile, we merge the base value with profile overrides.
const rawSectionValue = useMemo(() => {
if (!config) return undefined;
if (effectiveLevel === "camera" && cameraName) {
return get(config.cameras?.[cameraName], sectionPath);
// Base value: prefer base_config (pre-profile) over effective value
const baseValue = getBaseCameraSectionValue(
config,
cameraName,
sectionPath,
);
if (profileName) {
const profileOverrides = get(
config.cameras?.[cameraName],
`profiles.${profileName}.${sectionPath}`,
);
if (profileOverrides && typeof profileOverrides === "object") {
return merge(cloneDeep(baseValue ?? {}), cloneDeep(profileOverrides));
}
return baseValue;
}
return baseValue;
}
return get(config, sectionPath);
}, [config, cameraName, sectionPath, effectiveLevel]);
}, [config, cameraName, sectionPath, effectiveLevel, profileName]);
const rawFormData = useMemo(() => {
if (!config) return {};
@@ -285,10 +344,20 @@ export function ConfigSection({
return rawSectionValue;
}, [config, rawSectionValue]);
// When editing a profile, hide fields that require a restart since they
// cannot take effect via profile switching alone.
const effectiveHiddenFields = useMemo(() => {
if (!profileName || !sectionConfig.restartRequired?.length) {
return sectionConfig.hiddenFields;
}
const base = sectionConfig.hiddenFields ?? [];
return [...new Set([...base, ...sectionConfig.restartRequired])];
}, [profileName, sectionConfig.hiddenFields, sectionConfig.restartRequired]);
const sanitizeSectionData = useCallback(
(data: ConfigSectionData) =>
sharedSanitizeSectionData(data, sectionConfig.hiddenFields),
[sectionConfig.hiddenFields],
sharedSanitizeSectionData(data, effectiveHiddenFields),
[effectiveHiddenFields],
);
const formData = useMemo(() => {
@@ -386,8 +455,20 @@ export function ConfigSection({
}, [formData, pendingData, extraHasChanges]);
useEffect(() => {
onStatusChange?.({ hasChanges, isOverridden, hasValidationErrors });
}, [hasChanges, isOverridden, hasValidationErrors, onStatusChange]);
onStatusChange?.({
hasChanges,
isOverridden: profileOverridesSection || isOverridden,
overrideSource,
hasValidationErrors,
});
}, [
hasChanges,
isOverridden,
profileOverridesSection,
overrideSource,
hasValidationErrors,
onStatusChange,
]);
// Handle form data change
const handleChange = useCallback(
@@ -499,8 +580,8 @@ export function ConfigSection({
try {
const basePath =
effectiveLevel === "camera" && cameraName
? `cameras.${cameraName}.${sectionPath}`
: sectionPath;
? `cameras.${cameraName}.${effectiveSectionPath}`
: effectiveSectionPath;
const rawData = sanitizeSectionData(rawFormData);
const overrides = buildOverrides(
pendingData,
@@ -522,9 +603,11 @@ export function ConfigSection({
return;
}
const needsRestart = skipSave
? false
: requiresRestartForOverrides(sanitizedOverrides);
// Profile definition edits never require restart
const needsRestart =
skipSave || profileName
? false
: requiresRestartForOverrides(sanitizedOverrides);
const configData = buildConfigDataForPath(basePath, sanitizedOverrides);
await axios.put("config/set", {
@@ -619,6 +702,8 @@ export function ConfigSection({
}
}, [
sectionPath,
effectiveSectionPath,
profileName,
pendingData,
effectiveLevel,
cameraName,
@@ -642,8 +727,8 @@ export function ConfigSection({
try {
const basePath =
effectiveLevel === "camera" && cameraName
? `cameras.${cameraName}.${sectionPath}`
: sectionPath;
? `cameras.${cameraName}.${effectiveSectionPath}`
: effectiveSectionPath;
const configData = buildConfigDataForPath(basePath, "");
@@ -675,7 +760,7 @@ export function ConfigSection({
);
}
}, [
sectionPath,
effectiveSectionPath,
effectiveLevel,
cameraName,
requiresRestart,
@@ -784,7 +869,7 @@ export function ConfigSection({
onValidationChange={setHasValidationErrors}
fieldOrder={sectionConfig.fieldOrder}
fieldGroups={sectionConfig.fieldGroups}
hiddenFields={sectionConfig.hiddenFields}
hiddenFields={effectiveHiddenFields}
advancedFields={sectionConfig.advancedFields}
liveValidate={sectionConfig.liveValidate}
uiSchema={sectionConfig.uiSchema}
@@ -823,7 +908,7 @@ export function ConfigSection({
renderers: wrappedRenderers,
sectionDocs: sectionConfig.sectionDocs,
fieldDocs: sectionConfig.fieldDocs,
hiddenFields: sectionConfig.hiddenFields,
hiddenFields: effectiveHiddenFields,
restartRequired: sectionConfig.restartRequired,
requiresRestart,
}}
@@ -855,7 +940,8 @@ export function ConfigSection({
{((effectiveLevel === "camera" && isOverridden) ||
effectiveLevel === "global") &&
!hasChanges &&
!skipSave && (
!skipSave &&
!profileName && (
<Button
onClick={() => setIsResetDialogOpen(true)}
variant="outline"
@@ -873,6 +959,23 @@ export function ConfigSection({
})}
</Button>
)}
{profileName &&
profileOverridesSection &&
!hasChanges &&
!skipSave &&
onDeleteProfileSection && (
<Button
onClick={() => setIsDeleteProfileDialogOpen(true)}
variant="outline"
disabled={isSaving || disabled}
className="flex flex-1 gap-2"
>
{t("profiles.removeOverride", {
ns: "views/settings",
defaultValue: "Remove Profile Override",
})}
</Button>
)}
{hasChanges && (
<Button
onClick={handleReset}
@@ -944,6 +1047,47 @@ export function ConfigSection({
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<AlertDialog
open={isDeleteProfileDialogOpen}
onOpenChange={setIsDeleteProfileDialogOpen}
>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>
{t("profiles.deleteSection", { ns: "views/settings" })}
</AlertDialogTitle>
<AlertDialogDescription>
{t("profiles.deleteSectionConfirm", {
ns: "views/settings",
profile: profileFriendlyName ?? profileName,
section: t(`${sectionPath}.label`, {
ns:
effectiveLevel === "camera"
? "config/cameras"
: "config/global",
defaultValue: sectionPath,
}),
camera: cameraName ?? "",
})}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>
{t("button.cancel", { ns: "common" })}
</AlertDialogCancel>
<AlertDialogAction
className="bg-destructive text-white hover:bg-destructive/90"
onClick={() => {
onDeleteProfileSection?.();
setIsDeleteProfileDialogOpen(false);
}}
>
{t("button.delete", { ns: "common" })}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
);
@@ -963,13 +1107,32 @@ export function ConfigSection({
<Heading as="h4">{title}</Heading>
{showOverrideIndicator &&
effectiveLevel === "camera" &&
isOverridden && (
<Badge variant="secondary" className="text-xs">
{t("button.overridden", {
ns: "common",
defaultValue: "Overridden",
})}
</Badge>
(profileOverridesSection || isOverridden) && (
<Tooltip>
<TooltipTrigger asChild>
<Badge variant="secondary" className="text-xs">
{overrideSource === "profile"
? t("button.overriddenBaseConfig", {
ns: "views/settings",
defaultValue: "Overridden (Base Config)",
})
: t("button.overriddenGlobal", {
ns: "views/settings",
defaultValue: "Overridden (Global)",
})}
</Badge>
</TooltipTrigger>
<TooltipContent>
{overrideSource === "profile"
? t("button.overriddenBaseConfigTooltip", {
ns: "views/settings",
profile: profileFriendlyName ?? profileName,
})
: t("button.overriddenGlobalTooltip", {
ns: "views/settings",
})}
</TooltipContent>
</Tooltip>
)}
{hasChanges && (
<Badge variant="outline" className="text-xs">
@@ -1007,16 +1170,40 @@ export function ConfigSection({
<Heading as="h4">{title}</Heading>
{showOverrideIndicator &&
effectiveLevel === "camera" &&
isOverridden && (
<Badge
variant="secondary"
className="cursor-default border-2 border-selected text-xs text-primary-variant"
>
{t("button.overridden", {
ns: "common",
defaultValue: "Overridden",
})}
</Badge>
(profileOverridesSection || isOverridden) && (
<Tooltip>
<TooltipTrigger asChild>
<Badge
variant="secondary"
className={cn(
"cursor-default border-2 text-center text-xs text-primary-variant",
overrideSource === "profile" && profileBorderColor
? profileBorderColor
: "border-selected",
)}
>
{overrideSource === "profile"
? t("button.overriddenBaseConfig", {
ns: "views/settings",
defaultValue: "Overridden (Base Config)",
})
: t("button.overriddenGlobal", {
ns: "views/settings",
defaultValue: "Overridden (Global)",
})}
</Badge>
</TooltipTrigger>
<TooltipContent>
{overrideSource === "profile"
? t("button.overriddenBaseConfigTooltip", {
ns: "views/settings",
profile: profileFriendlyName ?? profileName,
})
: t("button.overriddenGlobalTooltip", {
ns: "views/settings",
})}
</TooltipContent>
</Tooltip>
)}
{hasChanges && (
<Badge
web/src/components/config-form/theme/widgets/AudioLabelSwitchesWidget.tsx
+19 -25
View File
@@ -7,41 +7,35 @@ import type { FormContext } from "./SwitchesWidget";
import { getTranslatedLabel } from "@/utils/i18n";
import { JsonObject } from "@/types/configForm";
function extractListenLabels(value: unknown): string[] {
if (value && typeof value === "object" && !Array.isArray(value)) {
const listenValue = (value as JsonObject).listen;
if (Array.isArray(listenValue)) {
return listenValue.filter(
(item): item is string => typeof item === "string",
);
}
}
return [];
}
function getEnabledAudioLabels(context: FormContext): string[] {
let cameraLabels: string[] = [];
let globalLabels: string[] = [];
let formDataLabels: string[] = [];
if (context) {
// context.cameraValue and context.globalValue should be the entire audio section
if (
context.cameraValue &&
typeof context.cameraValue === "object" &&
!Array.isArray(context.cameraValue)
) {
const listenValue = (context.cameraValue as JsonObject).listen;
if (Array.isArray(listenValue)) {
cameraLabels = listenValue.filter(
(item): item is string => typeof item === "string",
);
}
}
cameraLabels = extractListenLabels(context.cameraValue);
globalLabels = extractListenLabels(context.globalValue);
if (
context.globalValue &&
typeof context.globalValue === "object" &&
!Array.isArray(context.globalValue)
) {
const globalListenValue = (context.globalValue as JsonObject).listen;
if (Array.isArray(globalListenValue)) {
globalLabels = globalListenValue.filter(
(item): item is string => typeof item === "string",
);
}
}
// Include labels from the current form data so that labels added via
// profile overrides (or user edits) are always visible as switches.
formDataLabels = extractListenLabels(context.formData);
}
const sourceLabels = cameraLabels.length > 0 ? cameraLabels : globalLabels;
return [...sourceLabels].sort();
return [...new Set([...sourceLabels, ...formDataLabels])].sort();
}
function getAudioLabelDisplayName(label: string): string {
web/src/components/config-form/theme/widgets/ObjectLabelSwitchesWidget.tsx
+24 -25
View File
@@ -40,43 +40,42 @@ function getLabelmapLabels(context: FormContext): string[] {
return [...labels];
}
// Extract track labels from an objects section value.
function extractTrackLabels(value: unknown): string[] {
if (value && typeof value === "object" && !Array.isArray(value)) {
const trackValue = (value as JsonObject).track;
if (Array.isArray(trackValue)) {
return trackValue.filter(
(item): item is string => typeof item === "string",
);
}
}
return [];
}
// Build the list of labels for switches (labelmap + configured track list).
function getObjectLabels(context: FormContext): string[] {
const labelmapLabels = getLabelmapLabels(context);
let cameraLabels: string[] = [];
let globalLabels: string[] = [];
let formDataLabels: string[] = [];
if (context) {
// context.cameraValue and context.globalValue should be the entire objects section
if (
context.cameraValue &&
typeof context.cameraValue === "object" &&
!Array.isArray(context.cameraValue)
) {
const trackValue = (context.cameraValue as JsonObject).track;
if (Array.isArray(trackValue)) {
cameraLabels = trackValue.filter(
(item): item is string => typeof item === "string",
);
}
}
cameraLabels = extractTrackLabels(context.cameraValue);
globalLabels = extractTrackLabels(context.globalValue);
if (
context.globalValue &&
typeof context.globalValue === "object" &&
!Array.isArray(context.globalValue)
) {
const globalTrackValue = (context.globalValue as JsonObject).track;
if (Array.isArray(globalTrackValue)) {
globalLabels = globalTrackValue.filter(
(item): item is string => typeof item === "string",
);
}
}
// Include labels from the current form data so that labels added via
// profile overrides (or user edits) are always visible as switches.
formDataLabels = extractTrackLabels(context.formData);
}
const sourceLabels = cameraLabels.length > 0 ? cameraLabels : globalLabels;
const combinedLabels = new Set<string>([...labelmapLabels, ...sourceLabels]);
const combinedLabels = new Set<string>([
...labelmapLabels,
...sourceLabels,
...formDataLabels,
]);
return [...combinedLabels].sort();
}
web/src/components/config-form/theme/widgets/SwitchesWidget.tsx
+1
View File
@@ -20,6 +20,7 @@ type FormContext = Pick<
| "globalValue"
| "fullCameraConfig"
| "fullConfig"
| "formData"
| "t"
| "level"
> & {
web/src/components/menu/GeneralSettings.tsx
+153
View File
@@ -2,6 +2,7 @@ import {
LuActivity,
LuGithub,
LuLanguages,
LuLayers,
LuLifeBuoy,
LuList,
LuLogOut,
@@ -69,6 +70,9 @@ import SetPasswordDialog from "../overlay/SetPasswordDialog";
import { toast } from "sonner";
import axios from "axios";
import { FrigateConfig } from "@/types/frigateConfig";
import type { ProfilesApiResponse } from "@/types/profile";
import { getProfileColor } from "@/utils/profileColors";
import { Badge } from "@/components/ui/badge";
import { useTranslation } from "react-i18next";
import { supportedLanguageKeys } from "@/lib/const";
@@ -84,6 +88,8 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
const { getLocaleDocUrl } = useDocDomain();
const { data: profile } = useSWR("profile");
const { data: config } = useSWR<FrigateConfig>("config");
const { data: profilesData, mutate: updateProfiles } =
useSWR<ProfilesApiResponse>("profiles");
const logoutUrl = config?.proxy?.logout_url || "/api/logout";
// languages
@@ -105,6 +111,41 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
});
}, [t]);
// profiles
const allProfileNames = useMemo(
() => profilesData?.profiles?.map((p) => p.name) ?? [],
[profilesData],
);
const profileFriendlyNames = useMemo(() => {
const map = new Map<string, string>();
profilesData?.profiles?.forEach((p) => map.set(p.name, p.friendly_name));
return map;
}, [profilesData]);
const hasProfiles = allProfileNames.length > 0;
const handleActivateProfile = async (profileName: string | null) => {
try {
await axios.put("profile/set", { profile: profileName || null });
await updateProfiles();
toast.success(
profileName
? t("profiles.activated", {
ns: "views/settings",
profile: profileFriendlyNames.get(profileName) ?? profileName,
})
: t("profiles.deactivated", { ns: "views/settings" }),
{ position: "top-center" },
);
} catch {
toast.error(t("profiles.activateFailed", { ns: "views/settings" }), {
position: "top-center",
});
}
};
// settings
const { language, setLanguage } = useLanguage();
@@ -285,6 +326,118 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
<span>{t("menu.systemLogs")}</span>
</MenuItem>
</Link>
{hasProfiles && (
<SubItem>
<SubItemTrigger
className={
isDesktop
? "cursor-pointer"
: "flex items-center p-2 text-sm"
}
>
<LuLayers className="mr-2 size-4" />
<span>{t("menu.profiles")}</span>
</SubItemTrigger>
<Portal>
<SubItemContent
className={
isDesktop ? "" : "w-[92%] rounded-lg md:rounded-2xl"
}
>
{!isDesktop && (
<>
<DialogTitle className="sr-only">
{t("menu.profiles")}
</DialogTitle>
<DialogDescription className="sr-only">
{t("menu.profiles")}
</DialogDescription>
</>
)}
<span tabIndex={0} className="sr-only" />
<MenuItem
className={
isDesktop
? "cursor-pointer"
: "flex items-center p-2 text-sm"
}
aria-label={t("profiles.baseConfig", {
ns: "views/settings",
})}
onClick={() => handleActivateProfile(null)}
>
<div className="flex w-full items-center justify-between gap-2">
<span className="ml-6 mr-2">
{t("profiles.baseConfig", {
ns: "views/settings",
})}
</span>
{!profilesData?.active_profile && (
<Badge
variant="secondary"
className="text-xs text-primary-variant"
>
{t("profiles.active", {
ns: "views/settings",
})}
</Badge>
)}
</div>
</MenuItem>
{allProfileNames.map((profileName) => {
const color = getProfileColor(
profileName,
allProfileNames,
);
const isActive =
profilesData?.active_profile === profileName;
return (
<MenuItem
key={profileName}
className={
isDesktop
? "cursor-pointer"
: "flex items-center p-2 text-sm"
}
aria-label={
profileFriendlyNames.get(profileName) ??
profileName
}
onClick={() =>
handleActivateProfile(profileName)
}
>
<div className="flex w-full items-center justify-between gap-2">
<div className="flex items-center gap-2">
<span
className={cn(
"ml-2 size-2 shrink-0 rounded-full",
color.dot,
)}
/>
<span>
{profileFriendlyNames.get(profileName) ??
profileName}
</span>
</div>
{isActive && (
<Badge
variant="secondary"
className="text-xs text-primary-variant"
>
{t("profiles.active", {
ns: "views/settings",
})}
</Badge>
)}
</div>
</MenuItem>
);
})}
</SubItemContent>
</Portal>
</SubItem>
)}
</DropdownMenuGroup>
</>
)}
web/src/components/overlay/detail/SaveAllPreviewPopover.tsx
+13
View File
@@ -12,6 +12,7 @@ import { cn } from "@/lib/utils";
export type SaveAllPreviewItem = {
scope: "global" | "camera";
cameraName?: string;
profileName?: string;
fieldPath: string;
value: unknown;
};
@@ -114,6 +115,18 @@ export default function SaveAllPreviewPopover({
})}
</span>
<span className="truncate">{scopeLabel}</span>
{item.profileName && (
<>
<span className="text-muted-foreground">
{t("saveAllPreview.profile.label", {
ns: "views/settings",
})}
</span>
<span className="truncate font-medium">
{item.profileName}
</span>
</>
)}
<span className="text-muted-foreground">
{t("saveAllPreview.field.label", {
ns: "views/settings",
web/src/components/settings/MotionMaskEditPane.tsx
+32 -17
View File
@@ -44,6 +44,7 @@ type MotionMaskEditPaneProps = {
onCancel?: () => void;
snapPoints: boolean;
setSnapPoints: React.Dispatch<React.SetStateAction<boolean>>;
editingProfile?: string | null;
};
export default function MotionMaskEditPane({
@@ -58,6 +59,7 @@ export default function MotionMaskEditPane({
onCancel,
snapPoints,
setSnapPoints,
editingProfile,
}: MotionMaskEditPaneProps) {
const { t } = useTranslation(["views/settings"]);
const { getLocaleDocUrl } = useDocDomain();
@@ -192,16 +194,28 @@ export default function MotionMaskEditPane({
coordinates: coordinates,
};
// Build config path based on profile mode
const motionMaskPath = editingProfile
? {
profiles: {
[editingProfile]: {
motion: { mask: { [maskId]: maskConfig } },
},
},
}
: { motion: { mask: { [maskId]: maskConfig } } };
// If renaming, we need to delete the old mask first
if (renamingMask) {
const deleteQueryPath = editingProfile
? `cameras.${polygon.camera}.profiles.${editingProfile}.motion.mask.${polygon.name}`
: `cameras.${polygon.camera}.motion.mask.${polygon.name}`;
try {
await axios.put(
`config/set?cameras.${polygon.camera}.motion.mask.${polygon.name}`,
{
requires_restart: 0,
},
);
} catch (error) {
await axios.put(`config/set?${deleteQueryPath}`, {
requires_restart: 0,
});
} catch {
toast.error(t("toast.save.error.noMessage", { ns: "common" }), {
position: "top-center",
});
@@ -210,22 +224,20 @@ export default function MotionMaskEditPane({
}
}
const updateTopic = editingProfile
? undefined
: `config/cameras/${polygon.camera}/motion`;
// Save the new/updated mask using JSON body
axios
.put("config/set", {
config_data: {
cameras: {
[polygon.camera]: {
motion: {
mask: {
[maskId]: maskConfig,
},
},
},
[polygon.camera]: motionMaskPath,
},
},
requires_restart: 0,
update_topic: `config/cameras/${polygon.camera}/motion`,
update_topic: updateTopic,
})
.then((res) => {
if (res.status === 200) {
@@ -238,8 +250,10 @@ export default function MotionMaskEditPane({
},
);
updateConfig();
// Publish the enabled state through websocket
sendMotionMaskState(enabled ? "ON" : "OFF");
// Only publish WS state for base config
if (!editingProfile) {
sendMotionMaskState(enabled ? "ON" : "OFF");
}
} else {
toast.error(
t("toast.save.error.title", {
@@ -277,6 +291,7 @@ export default function MotionMaskEditPane({
cameraConfig,
t,
sendMotionMaskState,
editingProfile,
],
);
web/src/components/settings/ObjectMaskEditPane.tsx
+43 -43
View File
@@ -51,6 +51,7 @@ type ObjectMaskEditPaneProps = {
onCancel?: () => void;
snapPoints: boolean;
setSnapPoints: React.Dispatch<React.SetStateAction<boolean>>;
editingProfile?: string | null;
};
export default function ObjectMaskEditPane({
@@ -65,6 +66,7 @@ export default function ObjectMaskEditPane({
onCancel,
snapPoints,
setSnapPoints,
editingProfile,
}: ObjectMaskEditPaneProps) {
const { t } = useTranslation(["views/settings"]);
const { data: config, mutate: updateConfig } =
@@ -190,14 +192,22 @@ export default function ObjectMaskEditPane({
// Determine if old mask was global or per-object
const wasGlobal =
polygon.objects.length === 0 || polygon.objects[0] === "all_labels";
const oldPath = wasGlobal
? `cameras.${polygon.camera}.objects.mask.${polygon.name}`
: `cameras.${polygon.camera}.objects.filters.${polygon.objects[0]}.mask.${polygon.name}`;
let oldPath: string;
if (editingProfile) {
oldPath = wasGlobal
? `cameras.${polygon.camera}.profiles.${editingProfile}.objects.mask.${polygon.name}`
: `cameras.${polygon.camera}.profiles.${editingProfile}.objects.filters.${polygon.objects[0]}.mask.${polygon.name}`;
} else {
oldPath = wasGlobal
? `cameras.${polygon.camera}.objects.mask.${polygon.name}`
: `cameras.${polygon.camera}.objects.filters.${polygon.objects[0]}.mask.${polygon.name}`;
}
await axios.put(`config/set?${oldPath}`, {
requires_restart: 0,
});
} catch (error) {
} catch {
toast.error(t("toast.save.error.noMessage", { ns: "common" }), {
position: "top-center",
});
@@ -206,45 +216,32 @@ export default function ObjectMaskEditPane({
}
}
// Build the config structure based on whether it's global or per-object
let configBody;
if (globalMask) {
configBody = {
config_data: {
cameras: {
[polygon.camera]: {
objects: {
mask: {
[maskId]: maskConfig,
},
},
},
// Build config path based on profile mode
const objectsSection = globalMask
? { objects: { mask: { [maskId]: maskConfig } } }
: {
objects: {
filters: { [form_objects]: { mask: { [maskId]: maskConfig } } },
},
};
const cameraData = editingProfile
? { profiles: { [editingProfile]: objectsSection } }
: objectsSection;
const updateTopic = editingProfile
? undefined
: `config/cameras/${polygon.camera}/objects`;
const configBody = {
config_data: {
cameras: {
[polygon.camera]: cameraData,
},
requires_restart: 0,
update_topic: `config/cameras/${polygon.camera}/objects`,
};
} else {
configBody = {
config_data: {
cameras: {
[polygon.camera]: {
objects: {
filters: {
[form_objects]: {
mask: {
[maskId]: maskConfig,
},
},
},
},
},
},
},
requires_restart: 0,
update_topic: `config/cameras/${polygon.camera}/objects`,
};
}
},
requires_restart: 0,
update_topic: updateTopic,
};
axios
.put("config/set", configBody)
@@ -259,8 +256,10 @@ export default function ObjectMaskEditPane({
},
);
updateConfig();
// Publish the enabled state through websocket
sendObjectMaskState(enabled ? "ON" : "OFF");
// Only publish WS state for base config
if (!editingProfile) {
sendObjectMaskState(enabled ? "ON" : "OFF");
}
} else {
toast.error(
t("toast.save.error.title", {
@@ -301,6 +300,7 @@ export default function ObjectMaskEditPane({
cameraConfig,
t,
sendObjectMaskState,
editingProfile,
],
);
web/src/components/settings/PolygonItem.tsx
+90 -64
View File
@@ -35,6 +35,7 @@ import { Trans, useTranslation } from "react-i18next";
import ActivityIndicator from "../indicators/activity-indicator";
import { cn } from "@/lib/utils";
import { useMotionMaskState, useObjectMaskState, useZoneState } from "@/api/ws";
import { getProfileColor } from "@/utils/profileColors";
type PolygonItemProps = {
polygon: Polygon;
@@ -48,6 +49,8 @@ type PolygonItemProps = {
setIsLoading: (loading: boolean) => void;
loadingPolygonIndex: number | undefined;
setLoadingPolygonIndex: (index: number | undefined) => void;
editingProfile?: string | null;
allProfileNames?: string[];
};
export default function PolygonItem({
@@ -62,6 +65,8 @@ export default function PolygonItem({
setIsLoading,
loadingPolygonIndex,
setLoadingPolygonIndex,
editingProfile,
allProfileNames,
}: PolygonItemProps) {
const { t } = useTranslation("views/settings");
const { data: config, mutate: updateConfig } =
@@ -107,6 +112,8 @@ export default function PolygonItem({
const PolygonItemIcon = polygon ? polygonTypeIcons[polygon.type] : undefined;
const isBasePolygon = !!editingProfile && polygon.polygonSource === "base";
const saveToConfig = useCallback(
async (polygon: Polygon) => {
if (!polygon || !cameraConfig) {
@@ -122,25 +129,36 @@ export default function PolygonItem({
? "objects"
: polygon.type;
const updateTopic = editingProfile
? undefined
: `config/cameras/${polygon.camera}/${updateTopicType}`;
setIsLoading(true);
setLoadingPolygonIndex(index);
if (polygon.type === "zone") {
// Zones use query string format
const { alertQueries, detectionQueries } = reviewQueries(
polygon.name,
false,
false,
polygon.camera,
cameraConfig?.review.alerts.required_zones || [],
cameraConfig?.review.detections.required_zones || [],
);
const url = `cameras.${polygon.camera}.zones.${polygon.name}${alertQueries}${detectionQueries}`;
let url: string;
if (editingProfile) {
// Profile mode: just delete the profile zone
url = `cameras.${polygon.camera}.profiles.${editingProfile}.zones.${polygon.name}`;
} else {
// Base mode: handle review queries
const { alertQueries, detectionQueries } = reviewQueries(
polygon.name,
false,
false,
polygon.camera,
cameraConfig?.review.alerts.required_zones || [],
cameraConfig?.review.detections.required_zones || [],
);
url = `cameras.${polygon.camera}.zones.${polygon.name}${alertQueries}${detectionQueries}`;
}
await axios
.put(`config/set?${url}`, {
requires_restart: 0,
update_topic: `config/cameras/${polygon.camera}/${updateTopicType}`,
update_topic: updateTopic,
})
.then((res) => {
if (res.status === 200) {
@@ -178,64 +196,34 @@ export default function PolygonItem({
}
// Motion masks and object masks use JSON body format
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let configUpdate: any = {};
if (polygon.type === "motion_mask") {
// Delete mask from motion.mask dict by setting it to undefined
configUpdate = {
cameras: {
[polygon.camera]: {
motion: {
mask: {
[polygon.name]: null, // Setting to null will delete the key
},
},
},
},
};
}
if (polygon.type === "object_mask") {
// Determine if this is a global mask or object-specific mask
const isGlobalMask = !polygon.objects.length;
if (isGlobalMask) {
configUpdate = {
cameras: {
[polygon.camera]: {
objects: {
mask: {
[polygon.name]: null, // Setting to null will delete the key
},
},
},
},
};
} else {
configUpdate = {
cameras: {
[polygon.camera]: {
const deleteSection =
polygon.type === "motion_mask"
? { motion: { mask: { [polygon.name]: null } } }
: !polygon.objects.length
? { objects: { mask: { [polygon.name]: null } } }
: {
objects: {
filters: {
[polygon.objects[0]]: {
mask: {
[polygon.name]: null, // Setting to null will delete the key
},
mask: { [polygon.name]: null },
},
},
},
},
},
};
}
}
};
const configUpdate = {
cameras: {
[polygon.camera]: editingProfile
? { profiles: { [editingProfile]: deleteSection } }
: deleteSection,
},
};
await axios
.put("config/set", {
config_data: configUpdate,
requires_restart: 0,
update_topic: `config/cameras/${polygon.camera}/${updateTopicType}`,
update_topic: updateTopic,
})
.then((res) => {
if (res.status === 200) {
@@ -278,6 +266,7 @@ export default function PolygonItem({
setIsLoading,
index,
setLoadingPolygonIndex,
editingProfile,
],
);
@@ -289,14 +278,19 @@ export default function PolygonItem({
const handleToggleEnabled = useCallback(
(e: React.MouseEvent) => {
e.stopPropagation();
// Prevent toggling if disabled in config
if (polygon.enabled_in_config === false) {
// Prevent toggling if disabled in config or if this is a base polygon in profile mode
if (polygon.enabled_in_config === false || isBasePolygon) {
return;
}
if (!polygon) {
return;
}
// Don't toggle via WS in profile mode
if (editingProfile) {
return;
}
const isEnabled = isPolygonEnabled;
const nextState = isEnabled ? "OFF" : "ON";
@@ -320,6 +314,8 @@ export default function PolygonItem({
sendZoneState,
sendMotionMaskState,
sendObjectMaskState,
isBasePolygon,
editingProfile,
],
);
@@ -358,7 +354,12 @@ export default function PolygonItem({
<button
type="button"
onClick={handleToggleEnabled}
disabled={isLoading || polygon.enabled_in_config === false}
disabled={
isLoading ||
polygon.enabled_in_config === false ||
isBasePolygon ||
!!editingProfile
}
className="mr-2 shrink-0 cursor-pointer border-none bg-transparent p-0 transition-opacity hover:opacity-70 disabled:cursor-not-allowed disabled:opacity-50"
>
<PolygonItemIcon
@@ -384,15 +385,37 @@ export default function PolygonItem({
</TooltipContent>
</Tooltip>
))}
{editingProfile &&
(polygon.polygonSource === "profile" ||
polygon.polygonSource === "override") &&
allProfileNames && (
<span
className={cn(
"mr-1.5 inline-block h-2 w-2 shrink-0 rounded-full",
getProfileColor(editingProfile, allProfileNames).dot,
)}
/>
)}
<p
className={cn(
"cursor-default",
!isPolygonEnabled && "opacity-60",
polygon.enabled_in_config === false && "line-through",
isBasePolygon && "opacity-50",
)}
>
{polygon.friendly_name ?? polygon.name}
{!isPolygonEnabled && " (disabled)"}
{isBasePolygon && (
<span className="ml-1 text-xs text-muted-foreground">
{t("masksAndZones.profileBase", { ns: "views/settings" })}
</span>
)}
{polygon.polygonSource === "override" && (
<span className="ml-1 text-xs text-muted-foreground">
{t("masksAndZones.profileOverride", { ns: "views/settings" })}
</span>
)}
</p>
</div>
<AlertDialog
@@ -459,7 +482,7 @@ export default function PolygonItem({
</DropdownMenuItem>
<DropdownMenuItem
aria-label={t("button.delete", { ns: "common" })}
disabled={isLoading}
disabled={isLoading || isBasePolygon}
onClick={() => setDeleteDialogOpen(true)}
>
{t("button.delete", { ns: "common" })}
@@ -531,9 +554,12 @@ export default function PolygonItem({
"size-[15px] cursor-pointer",
hoveredPolygonIndex === index &&
"fill-primary-variant text-primary-variant",
isLoading && "cursor-not-allowed opacity-50",
(isLoading || isBasePolygon) &&
"cursor-not-allowed opacity-50",
)}
onClick={() => !isLoading && setDeleteDialogOpen(true)}
onClick={() =>
!isLoading && !isBasePolygon && setDeleteDialogOpen(true)
}
/>
</TooltipTrigger>
<TooltipContent>
web/src/components/settings/ProfileSectionDropdown.tsx
+118
View File
@@ -0,0 +1,118 @@
import { useTranslation } from "react-i18next";
import { Check, ChevronDown } from "lucide-react";
import { LuLayers } from "react-icons/lu";
import { cn } from "@/lib/utils";
import { getProfileColor } from "@/utils/profileColors";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
type ProfileSectionDropdownProps = {
allProfileNames: string[];
profileFriendlyNames: Map<string, string>;
editingProfile: string | null;
hasProfileData: (profileName: string) => boolean;
onSelectProfile: (profileName: string | null) => void;
/** When true, show only an icon as the trigger (for mobile) */
iconOnly?: boolean;
};
export function ProfileSectionDropdown({
allProfileNames,
profileFriendlyNames,
editingProfile,
hasProfileData,
onSelectProfile,
iconOnly = false,
}: ProfileSectionDropdownProps) {
const { t } = useTranslation(["views/settings"]);
const activeColor = editingProfile
? getProfileColor(editingProfile, allProfileNames)
: null;
const editingFriendlyName = editingProfile
? (profileFriendlyNames.get(editingProfile) ?? editingProfile)
: null;
return (
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild>
{iconOnly ? (
<Button variant="outline" size="sm">
<LuLayers className="size-4" />
</Button>
) : (
<Button variant="outline" className="h-9 gap-2 font-normal">
{editingProfile ? (
<>
<span
className={cn(
"h-2 w-2 shrink-0 rounded-full",
activeColor?.dot,
)}
/>
{editingFriendlyName}
</>
) : (
t("profiles.baseConfig", { ns: "views/settings" })
)}
<ChevronDown className="h-3 w-3 opacity-50" />
</Button>
)}
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="min-w-[180px]">
<DropdownMenuItem onClick={() => onSelectProfile(null)}>
<div className="flex w-full items-center gap-2">
{editingProfile === null && (
<Check className="h-3.5 w-3.5 shrink-0" />
)}
<span className={editingProfile === null ? "" : "pl-[22px]"}>
{t("profiles.baseConfig", { ns: "views/settings" })}
</span>
</div>
</DropdownMenuItem>
{allProfileNames.length > 0 && <DropdownMenuSeparator />}
{allProfileNames.map((profile) => {
const color = getProfileColor(profile, allProfileNames);
const hasData = hasProfileData(profile);
const isActive = editingProfile === profile;
return (
<DropdownMenuItem
key={profile}
className="group flex items-start justify-between gap-2"
onClick={() => onSelectProfile(profile)}
>
<div className="flex flex-col items-center gap-2">
<div className="flex w-full flex-row items-center justify-start gap-2">
{isActive && <Check className="h-3.5 w-3.5 shrink-0" />}
<span
className={cn(
"h-2 w-2 shrink-0 rounded-full",
color.dot,
!isActive && "ml-[22px]",
)}
/>
<span>{profileFriendlyNames.get(profile) ?? profile}</span>
</div>
{!hasData && (
<span className="ml-[22px] text-xs text-muted-foreground">
{t("profiles.noOverrides", { ns: "views/settings" })}
</span>
)}
</div>
</DropdownMenuItem>
);
})}
</DropdownMenuContent>
</DropdownMenu>
);
}
web/src/components/settings/ZoneEditPane.tsx
+127 -88
View File
@@ -50,6 +50,7 @@ type ZoneEditPaneProps = {
setActiveLine: React.Dispatch<React.SetStateAction<number | undefined>>;
snapPoints: boolean;
setSnapPoints: React.Dispatch<React.SetStateAction<boolean>>;
editingProfile?: string | null;
};
export default function ZoneEditPane({
@@ -65,6 +66,7 @@ export default function ZoneEditPane({
setActiveLine,
snapPoints,
setSnapPoints,
editingProfile,
}: ZoneEditPaneProps) {
const { t } = useTranslation(["views/settings"]);
const { getLocaleDocUrl } = useDocDomain();
@@ -101,15 +103,23 @@ export default function ZoneEditPane({
}, [polygon, config]);
const [lineA, lineB, lineC, lineD] = useMemo(() => {
const distances =
polygon?.camera &&
polygon?.name &&
config?.cameras[polygon.camera]?.zones[polygon.name]?.distances;
if (!polygon?.camera || !polygon?.name || !config) {
return [undefined, undefined, undefined, undefined];
}
// Check profile zone first, then base
const profileZone = editingProfile
? config.cameras[polygon.camera]?.profiles?.[editingProfile]?.zones?.[
polygon.name
]
: undefined;
const baseZone = config.cameras[polygon.camera]?.zones[polygon.name];
const distances = profileZone?.distances ?? baseZone?.distances;
return Array.isArray(distances)
? distances.map((value) => parseFloat(value) || 0)
: [undefined, undefined, undefined, undefined];
}, [polygon, config]);
}, [polygon, config, editingProfile]);
const formSchema = z
.object({
@@ -272,6 +282,17 @@ export default function ZoneEditPane({
},
);
// Resolve zone data: profile zone takes priority over base
const resolvedZoneData = useMemo(() => {
if (!polygon?.camera || !polygon?.name || !config) return undefined;
const cam = config.cameras[polygon.camera];
if (!cam) return undefined;
const profileZone = editingProfile
? cam.profiles?.[editingProfile]?.zones?.[polygon.name]
: undefined;
return profileZone ?? cam.zones[polygon.name];
}, [polygon, config, editingProfile]);
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
mode: "onBlur",
@@ -279,20 +300,11 @@ export default function ZoneEditPane({
name: polygon?.name ?? "",
friendly_name: polygon?.friendly_name ?? polygon?.name ?? "",
enabled:
polygon?.camera &&
polygon?.name &&
config?.cameras[polygon.camera]?.zones[polygon.name]?.enabled !==
undefined
? config?.cameras[polygon.camera]?.zones[polygon.name]?.enabled
resolvedZoneData?.enabled !== undefined
? resolvedZoneData.enabled
: (polygon?.enabled ?? true),
inertia:
polygon?.camera &&
polygon?.name &&
config?.cameras[polygon.camera]?.zones[polygon.name]?.inertia,
loitering_time:
polygon?.camera &&
polygon?.name &&
config?.cameras[polygon.camera]?.zones[polygon.name]?.loitering_time,
inertia: resolvedZoneData?.inertia,
loitering_time: resolvedZoneData?.loitering_time,
isFinished: polygon?.isFinished ?? false,
objects: polygon?.objects ?? [],
speedEstimation: !!(lineA || lineB || lineC || lineD),
@@ -300,10 +312,7 @@ export default function ZoneEditPane({
lineB,
lineC,
lineD,
speed_threshold:
polygon?.camera &&
polygon?.name &&
config?.cameras[polygon.camera]?.zones[polygon.name]?.speed_threshold,
speed_threshold: resolvedZoneData?.speed_threshold,
},
});
@@ -341,6 +350,16 @@ export default function ZoneEditPane({
if (!scaledWidth || !scaledHeight || !polygon) {
return;
}
// Determine config path prefix based on profile mode
const pathPrefix = editingProfile
? `cameras.${polygon.camera}.profiles.${editingProfile}.zones.${zoneName}`
: `cameras.${polygon.camera}.zones.${zoneName}`;
const oldPathPrefix = editingProfile
? `cameras.${polygon.camera}.profiles.${editingProfile}.zones.${polygon.name}`
: `cameras.${polygon.camera}.zones.${polygon.name}`;
let mutatedConfig = config;
let alertQueries = "";
let detectionQueries = "";
@@ -349,55 +368,74 @@ export default function ZoneEditPane({
if (renamingZone) {
// rename - delete old zone and replace with new
const zoneInAlerts =
cameraConfig?.review.alerts.required_zones.includes(polygon.name) ??
false;
const zoneInDetections =
cameraConfig?.review.detections.required_zones.includes(
let renameAlertQueries = "";
let renameDetectionQueries = "";
// Only handle review queries for base config (not profiles)
if (!editingProfile) {
const zoneInAlerts =
cameraConfig?.review.alerts.required_zones.includes(polygon.name) ??
false;
const zoneInDetections =
cameraConfig?.review.detections.required_zones.includes(
polygon.name,
) ?? false;
({
alertQueries: renameAlertQueries,
detectionQueries: renameDetectionQueries,
} = reviewQueries(
polygon.name,
) ?? false;
false,
false,
polygon.camera,
cameraConfig?.review.alerts.required_zones || [],
cameraConfig?.review.detections.required_zones || [],
));
const {
alertQueries: renameAlertQueries,
detectionQueries: renameDetectionQueries,
} = reviewQueries(
polygon.name,
false,
false,
polygon.camera,
cameraConfig?.review.alerts.required_zones || [],
cameraConfig?.review.detections.required_zones || [],
);
try {
await axios.put(
`config/set?${oldPathPrefix}${renameAlertQueries}${renameDetectionQueries}`,
{
requires_restart: 0,
update_topic: `config/cameras/${polygon.camera}/zones`,
},
);
try {
await axios.put(
`config/set?cameras.${polygon.camera}.zones.${polygon.name}${renameAlertQueries}${renameDetectionQueries}`,
{
// Wait for the config to be updated
mutatedConfig = await updateConfig();
} catch {
toast.error(t("toast.save.error.noMessage", { ns: "common" }), {
position: "top-center",
});
return;
}
// make sure new zone name is readded to review
({ alertQueries, detectionQueries } = reviewQueries(
zoneName,
zoneInAlerts,
zoneInDetections,
polygon.camera,
mutatedConfig?.cameras[polygon.camera]?.review.alerts
.required_zones || [],
mutatedConfig?.cameras[polygon.camera]?.review.detections
.required_zones || [],
));
} else {
// Profile mode: just delete the old profile zone path
try {
await axios.put(`config/set?${oldPathPrefix}`, {
requires_restart: 0,
update_topic: `config/cameras/${polygon.camera}/zones`,
},
);
// Wait for the config to be updated
mutatedConfig = await updateConfig();
} catch (error) {
toast.error(t("toast.save.error.noMessage", { ns: "common" }), {
position: "top-center",
});
return;
});
mutatedConfig = await updateConfig();
} catch {
toast.error(t("toast.save.error.noMessage", { ns: "common" }), {
position: "top-center",
});
return;
}
}
// make sure new zone name is readded to review
({ alertQueries, detectionQueries } = reviewQueries(
zoneName,
zoneInAlerts,
zoneInDetections,
polygon.camera,
mutatedConfig?.cameras[polygon.camera]?.review.alerts
.required_zones || [],
mutatedConfig?.cameras[polygon.camera]?.review.detections
.required_zones || [],
));
}
const coordinates = flattenPoints(
@@ -405,10 +443,7 @@ export default function ZoneEditPane({
).join(",");
let objectQueries = objects
.map(
(object) =>
`&cameras.${polygon?.camera}.zones.${zoneName}.objects=${object}`,
)
.map((object) => `&${pathPrefix}.objects=${object}`)
.join("");
const same_objects =
@@ -419,55 +454,55 @@ export default function ZoneEditPane({
// deleting objects
if (!objectQueries && !same_objects && !renamingZone) {
objectQueries = `&cameras.${polygon?.camera}.zones.${zoneName}.objects`;
objectQueries = `&${pathPrefix}.objects`;
}
let inertiaQuery = "";
if (inertia) {
inertiaQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.inertia=${inertia}`;
inertiaQuery = `&${pathPrefix}.inertia=${inertia}`;
}
let loiteringTimeQuery = "";
if (loitering_time >= 0) {
loiteringTimeQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.loitering_time=${loitering_time}`;
loiteringTimeQuery = `&${pathPrefix}.loitering_time=${loitering_time}`;
}
let distancesQuery = "";
const distances = [lineA, lineB, lineC, lineD].filter(Boolean).join(",");
if (speedEstimation) {
distancesQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.distances=${distances}`;
distancesQuery = `&${pathPrefix}.distances=${distances}`;
} else {
if (distances != "") {
distancesQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.distances`;
distancesQuery = `&${pathPrefix}.distances`;
}
}
let speedThresholdQuery = "";
if (speed_threshold >= 0 && speedEstimation) {
speedThresholdQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.speed_threshold=${speed_threshold}`;
speedThresholdQuery = `&${pathPrefix}.speed_threshold=${speed_threshold}`;
} else {
if (
polygon?.camera &&
polygon?.name &&
config?.cameras[polygon.camera]?.zones[polygon.name]?.speed_threshold
) {
speedThresholdQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.speed_threshold`;
if (resolvedZoneData?.speed_threshold) {
speedThresholdQuery = `&${pathPrefix}.speed_threshold`;
}
}
let friendlyNameQuery = "";
if (friendly_name && friendly_name !== zoneName) {
friendlyNameQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.friendly_name=${encodeURIComponent(friendly_name)}`;
friendlyNameQuery = `&${pathPrefix}.friendly_name=${encodeURIComponent(friendly_name)}`;
}
const enabledQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.enabled=${enabled ? "True" : "False"}`;
const enabledQuery = `&${pathPrefix}.enabled=${enabled ? "True" : "False"}`;
const updateTopic = editingProfile
? undefined
: `config/cameras/${polygon.camera}/zones`;
axios
.put(
`config/set?cameras.${polygon?.camera}.zones.${zoneName}.coordinates=${coordinates}${enabledQuery}${inertiaQuery}${loiteringTimeQuery}${speedThresholdQuery}${distancesQuery}${objectQueries}${friendlyNameQuery}${alertQueries}${detectionQueries}`,
`config/set?${pathPrefix}.coordinates=${coordinates}${enabledQuery}${inertiaQuery}${loiteringTimeQuery}${speedThresholdQuery}${distancesQuery}${objectQueries}${friendlyNameQuery}${alertQueries}${detectionQueries}`,
{
requires_restart: 0,
update_topic: `config/cameras/${polygon.camera}/zones`,
update_topic: updateTopic,
},
)
.then((res) => {
@@ -481,8 +516,10 @@ export default function ZoneEditPane({
},
);
updateConfig();
// Publish the enabled state through websocket
sendZoneState(enabled ? "ON" : "OFF");
// Only publish WS state for base config (not profiles)
if (!editingProfile) {
sendZoneState(enabled ? "ON" : "OFF");
}
} else {
toast.error(
t("toast.save.error.title", {
@@ -524,6 +561,8 @@ export default function ZoneEditPane({
cameraConfig,
t,
sendZoneState,
editingProfile,
resolvedZoneData,
],
);