nik/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-02 06:23:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add zones friendly_name

Browse Source
This commit is contained in:
ZhaiSoul 2025-10-22 07:07:39 +00:00
parent c5fec3271f
commit 36b2043518
31 changed files with 198 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frigate/config/camera/zone.py
View File

@ -13,6 +13,9 @@ logger = logging.getLogger(__name__)
class ZoneConfig(BaseModel):
friendly_name: Optional[str] = Field(
None, title="Zone friendly name used in the Frigate UI."
)
filters: dict[str, FilterConfig] = Field(
default_factory=dict, title="Zone filters."
)

22
web/src/components/camera/CameraNameLabel.tsx → web/src/components/camera/FriendlyNameLabel.tsx
View File

@ -2,12 +2,19 @@ import * as React from "react";
import * as LabelPrimitive from "@radix-ui/react-label";
import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
import { CameraConfig } from "@/types/frigateConfig";
import { useZoneFriendlyName } from "@/hooks/use-zone-friendly-name";
interface CameraNameLabelProps
extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
camera?: string | CameraConfig;
}
interface ZoneNameLabelProps
extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
zone: string;
camera?: string;
}
const CameraNameLabel = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
CameraNameLabelProps
@ -21,4 +28,17 @@ const CameraNameLabel = React.forwardRef<
});
CameraNameLabel.displayName = LabelPrimitive.Root.displayName;
export { CameraNameLabel };
const ZoneNameLabel = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
ZoneNameLabelProps
>(({ className, zone, camera, ...props }, ref) => {
const displayName = useZoneFriendlyName(zone, camera);
return (
<LabelPrimitive.Root ref={ref} className={className} {...props}>
{displayName}
</LabelPrimitive.Root>
);
});
ZoneNameLabel.displayName = LabelPrimitive.Root.displayName;
export { CameraNameLabel, ZoneNameLabel };

2
web/src/components/filter/CameraGroupSelector.tsx
View File

@ -76,7 +76,7 @@ import { CameraStreamingDialog } from "../settings/CameraStreamingDialog";
import { DialogTrigger } from "@radix-ui/react-dialog";
import { useStreamingSettings } from "@/context/streaming-settings-provider";
import { Trans, useTranslation } from "react-i18next";
import { CameraNameLabel } from "../camera/CameraNameLabel";
import { CameraNameLabel } from "../camera/FriendlyNameLabel";
import { useAllowedCameras } from "@/hooks/use-allowed-cameras";
import { useIsCustomRole } from "@/hooks/use-is-custom-role";

2
web/src/components/filter/CamerasFilterButton.tsx
View File

@ -190,7 +190,7 @@ export function CamerasFilterContent({
key={item}
isChecked={currentCameras?.includes(item) ?? false}
label={item}
isCameraName={true}
type="camera"
disabled={
mainCamera !== undefined &&
currentCameras !== undefined &&

17
web/src/components/filter/FilterSwitch.tsx
View File

@ -1,29 +1,38 @@
import { Switch } from "../ui/switch";
import { Label } from "../ui/label";
import { CameraNameLabel } from "../camera/CameraNameLabel";
import { CameraNameLabel, ZoneNameLabel } from "../camera/FriendlyNameLabel";
type FilterSwitchProps = {
label: string;
disabled?: boolean;
isChecked: boolean;
isCameraName?: boolean;
type?: string;
extraValue?: string;
onCheckedChange: (checked: boolean) => void;
};
export default function FilterSwitch({
label,
disabled = false,
isChecked,
isCameraName = false,
type = "",
extraValue = "",
onCheckedChange,
}: FilterSwitchProps) {
return (
<div className="flex items-center justify-between gap-1">
{isCameraName ? (
{type === "camera" ? (
<CameraNameLabel
className={`mx-2 w-full cursor-pointer text-sm font-medium leading-none text-primary smart-capitalize peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${disabled ? "text-secondary-foreground" : ""}`}
htmlFor={label}
camera={label}
/>
) : type === "zone" ? (
<ZoneNameLabel
className={`mx-2 w-full cursor-pointer text-sm font-medium leading-none text-primary smart-capitalize peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ${disabled ? "text-secondary-foreground" : ""}`}
htmlFor={label}
camera={extraValue}
zone={label}
/>
) : (
<Label
className={`mx-2 w-full cursor-pointer text-primary smart-capitalize ${disabled ? "text-secondary-foreground" : ""}`}

3
web/src/components/filter/ReviewFilterGroup.tsx
View File

@ -552,7 +552,8 @@ export function GeneralFilterContent({
{allZones.map((item) => (
<FilterSwitch
key={item}
label={item.replaceAll("_", " ")}
label={item}
type={"zone"}
isChecked={filter.zones?.includes(item) ?? false}
onCheckedChange={(isChecked) => {
if (isChecked) {

2
web/src/components/input/InputWithTags.tsx
View File

@ -53,7 +53,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
import { MdImageSearch } from "react-icons/md";
import { useTranslation } from "react-i18next";
import { getTranslatedLabel } from "@/utils/i18n";
import { CameraNameLabel } from "../camera/CameraNameLabel";
import { CameraNameLabel } from "../camera/FriendlyNameLabel";
type InputWithTagsProps = {
inputFocused: boolean;

2
web/src/components/menu/LiveContextMenu.tsx
View File

@ -47,7 +47,7 @@ import {
import { useTranslation } from "react-i18next";
import { useDateLocale } from "@/hooks/use-date-locale";
import { useIsAdmin } from "@/hooks/use-is-admin";
import { CameraNameLabel } from "../camera/CameraNameLabel";
import { CameraNameLabel } from "../camera/FriendlyNameLabel";
type LiveContextMenuProps = {
className?: string;

2
web/src/components/overlay/CreateRoleDialog.tsx
View File

@ -25,7 +25,7 @@ import {
} from "@/components/ui/dialog";
import { useTranslation } from "react-i18next";
import { FrigateConfig } from "@/types/frigateConfig";
import { CameraNameLabel } from "../camera/CameraNameLabel";
import { CameraNameLabel } from "../camera/FriendlyNameLabel";
import { isDesktop, isMobile } from "react-device-detect";
import { cn } from "@/lib/utils";
import {

2
web/src/components/overlay/EditRoleCamerasDialog.tsx
View File

@ -24,7 +24,7 @@ import {
} from "@/components/ui/dialog";
import { Trans, useTranslation } from "react-i18next";
import { FrigateConfig } from "@/types/frigateConfig";
import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
type EditRoleCamerasOverlayProps = {
show: boolean;

2
web/src/components/overlay/MobileCameraDrawer.tsx
View File

@ -4,7 +4,7 @@ import { Button } from "../ui/button";
import { FaVideo } from "react-icons/fa";
import { isMobile } from "react-device-detect";
import { useTranslation } from "react-i18next";
import { CameraNameLabel } from "../camera/CameraNameLabel";
import { CameraNameLabel } from "../camera/FriendlyNameLabel";
type MobileCameraDrawerProps = {
allCameras: string[];

2
web/src/components/overlay/detail/ReviewDetailDialog.tsx
View File

@ -47,7 +47,7 @@ import { LuSearch } from "react-icons/lu";
import useKeyboardListener from "@/hooks/use-keyboard-listener";
import { Trans, useTranslation } from "react-i18next";
import { getTranslatedLabel } from "@/utils/i18n";
import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
type ReviewDetailDialogProps = {
review?: ReviewSegment;

2
web/src/components/overlay/detail/SearchDetailDialog.tsx
View File

@ -79,7 +79,7 @@ import { useIsAdmin } from "@/hooks/use-is-admin";
import FaceSelectionDialog from "../FaceSelectionDialog";
import { getTranslatedLabel } from "@/utils/i18n";
import { CgTranscript } from "react-icons/cg";
import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
const SEARCH_TABS = [
"details",

3
web/src/components/overlay/dialog/SearchFilterDialog.tsx
View File

@ -429,7 +429,8 @@ export function ZoneFilterContent({
{allZones.map((item) => (
<FilterSwitch
key={item}
label={item.replaceAll("_", " ")}
label={item}
type={"zone"}
isChecked={zones?.includes(item) ?? false}
onCheckedChange={(isChecked) => {
if (isChecked) {

6
web/src/components/settings/PolygonItem.tsx
View File

@ -261,7 +261,9 @@ export default function PolygonItem({
}}
/>
)}
<p className="cursor-default">{polygon.name}</p>
<p className="cursor-default">
{polygon.friendlyName ?? polygon.name}
</p>
</div>
<AlertDialog
open={deleteDialogOpen}
@ -278,7 +280,7 @@ export default function PolygonItem({
ns="views/settings"
values={{
type: polygon.type.replace("_", " "),
name: polygon.name,
name: polygon.friendlyName || polygon.name,
}}
>
masksAndZones.form.polygonDrawing.delete.desc

51
web/src/components/settings/ZoneEditPane.tsx
View File

@ -34,6 +34,7 @@ import { Link } from "react-router-dom";
import { LuExternalLink } from "react-icons/lu";
import { useDocDomain } from "@/hooks/use-doc-domain";
import { getTranslatedLabel } from "@/utils/i18n";
import { processZoneName } from "@/utils/zoneUtil";
type ZoneEditPaneProps = {
polygons?: Polygon[];
@ -146,15 +147,7 @@ export default function ZoneEditPane({
"masksAndZones.form.zoneName.error.mustNotContainPeriod",
),
},
)
.refine((value: string) => /^[a-zA-Z0-9_-]+$/.test(value), {
message: t("masksAndZones.form.zoneName.error.hasIllegalCharacter"),
})
.refine((value: string) => /[a-zA-Z]/.test(value), {
message: t(
"masksAndZones.form.zoneName.error.mustHaveAtLeastOneLetter",
),
}),
),
inertia: z.coerce
.number()
.min(1, {
@ -246,7 +239,11 @@ export default function ZoneEditPane({
resolver: zodResolver(formSchema),
mode: "onBlur",
defaultValues: {
name: polygon?.name ?? "",
name:
polygon?.camera && polygon?.name
? config?.cameras[polygon.camera]?.zones[polygon.name]
?.friendly_name || polygon?.name
: "",
inertia:
polygon?.camera &&
polygon?.name &&
@ -305,7 +302,12 @@ export default function ZoneEditPane({
let alertQueries = "";
let detectionQueries = "";
const renamingZone = zoneName != polygon.name && polygon.name != "";
const renamingZone =
zoneName != polygon.name &&
zoneName != polygon.friendlyName &&
polygon.name != "";
const { finalZoneName, friendlyName } = processZoneName(zoneName);
if (renamingZone) {
// rename - delete old zone and replace with new
@ -349,7 +351,7 @@ export default function ZoneEditPane({
// make sure new zone name is readded to review
({ alertQueries, detectionQueries } = reviewQueries(
zoneName,
finalZoneName,
zoneInAlerts,
zoneInDetections,
polygon.camera,
@ -367,7 +369,7 @@ export default function ZoneEditPane({
let objectQueries = objects
.map(
(object) =>
`&cameras.${polygon?.camera}.zones.${zoneName}.objects=${object}`,
`&cameras.${polygon?.camera}.zones.${finalZoneName}.objects=${object}`,
)
.join("");
@ -379,45 +381,50 @@ export default function ZoneEditPane({
// deleting objects
if (!objectQueries && !same_objects && !renamingZone) {
objectQueries = `&cameras.${polygon?.camera}.zones.${zoneName}.objects`;
objectQueries = `&cameras.${polygon?.camera}.zones.${finalZoneName}.objects`;
}
let inertiaQuery = "";
if (inertia) {
inertiaQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.inertia=${inertia}`;
inertiaQuery = `&cameras.${polygon?.camera}.zones.${finalZoneName}.inertia=${inertia}`;
}
let loiteringTimeQuery = "";
if (loitering_time >= 0) {
loiteringTimeQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.loitering_time=${loitering_time}`;
loiteringTimeQuery = `&cameras.${polygon?.camera}.zones.${finalZoneName}.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 = `&cameras.${polygon?.camera}.zones.${finalZoneName}.distances=${distances}`;
} else {
if (distances != "") {
distancesQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.distances`;
distancesQuery = `&cameras.${polygon?.camera}.zones.${finalZoneName}.distances`;
}
}
let speedThresholdQuery = "";
if (speed_threshold >= 0 && speedEstimation) {
speedThresholdQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.speed_threshold=${speed_threshold}`;
speedThresholdQuery = `&cameras.${polygon?.camera}.zones.${finalZoneName}.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`;
speedThresholdQuery = `&cameras.${polygon?.camera}.zones.${finalZoneName}.speed_threshold`;
}
}
let friendlyNameQuery = "";
if (friendlyName) {
friendlyNameQuery = `&cameras.${polygon?.camera}.zones.${finalZoneName}.friendly_name=${encodeURIComponent(friendlyName)}`;
}
axios
.put(
`config/set?cameras.${polygon?.camera}.zones.${zoneName}.coordinates=${coordinates}${inertiaQuery}${loiteringTimeQuery}${speedThresholdQuery}${distancesQuery}${objectQueries}${alertQueries}${detectionQueries}`,
`config/set?cameras.${polygon?.camera}.zones.${finalZoneName}.coordinates=${coordinates}${inertiaQuery}${loiteringTimeQuery}${speedThresholdQuery}${distancesQuery}${objectQueries}${friendlyNameQuery}${alertQueries}${detectionQueries}`,
{
requires_restart: 0,
update_topic: `config/cameras/${polygon.camera}/zones`,
@ -427,7 +434,7 @@ export default function ZoneEditPane({
if (res.status === 200) {
toast.success(
t("masksAndZones.zones.toast.success", {
zoneName,
zoneName: friendlyName,
}),
{
position: "top-center",

41
web/src/hooks/use-zone-friendly-name.ts Normal file
View File

@ -0,0 +1,41 @@
import { FrigateConfig } from "@/types/frigateConfig";
import { useMemo } from "react";
import useSWR from "swr";
export function resolveZoneName(
config: FrigateConfig | undefined,
zoneId: string,
cameraId?: string,
) {
if (!config) return String(zoneId).replace(/_/g, " ");
if (cameraId) {
const camera = config.cameras?.[String(cameraId)];
const zone = camera?.zones?.[zoneId];
return zone?.friendly_name || String(zoneId).replace(/_/g, " ");
}
for (const camKey in config.cameras) {
if (!Object.prototype.hasOwnProperty.call(config.cameras, camKey)) continue;
const cam = config.cameras[camKey];
if (!cam?.zones) continue;
if (Object.prototype.hasOwnProperty.call(cam.zones, zoneId)) {
const zone = cam.zones[zoneId];
return zone?.friendly_name || String(zoneId).replace(/_/g, " ");
}
}
// Fallback: return a cleaned-up zoneId string
return String(zoneId).replace(/_/g, " ");
}
export function useZoneFriendlyName(zoneId: string, cameraId?: string): string {
const { data: config } = useSWR<FrigateConfig>("config");
const name = useMemo(
() => resolveZoneName(config, zoneId, cameraId),
[config, cameraId, zoneId],
);
return name;
}

4
web/src/pages/Settings.tsx
View File

@ -42,7 +42,7 @@ import { useInitialCameraState } from "@/api/ws";
import { useIsAdmin } from "@/hooks/use-is-admin";
import { useTranslation } from "react-i18next";
import TriggerView from "@/views/settings/TriggerView";
import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
import {
Sidebar,
SidebarContent,
@ -642,7 +642,7 @@ function CameraSelectButton({
key={item.name}
isChecked={item.name === selectedCamera}
label={item.name}
isCameraName={true}
type={"camera"}
onCheckedChange={(isChecked) => {
if (isChecked && (isEnabled || isCameraSettingsPage)) {
setSelectedCamera(item.name);

1
web/src/types/canvas.ts
View File

@ -4,6 +4,7 @@ export type Polygon = {
typeIndex: number;
camera: string;
name: string;
friendlyName?: string;
type: PolygonType;
objects: string[];
points: number[][];

1
web/src/types/frigateConfig.ts
View File

@ -272,6 +272,7 @@ export interface CameraConfig {
webui_url: string | null;
zones: {
[zoneName: string]: {
friendly_name?: string;
coordinates: string;
distances: string[];
filters: Record<string, unknown>;

26
web/src/utils/cameraUtil.ts
View File

@ -1,29 +1,7 @@
import { generateFixedHash } from "./stringUtil";
// ==================== Camera Name Processing ====================
/**
* Generates a fixed-length hash from a camera name for use as a valid camera identifier.
* Works safely with Unicode input while outputting Latin-only identifiers.
*
* @param name - The original camera name/display name
* @returns A valid camera identifier (lowercase, alphanumeric, max 8 chars)
*/
export function generateFixedHash(name: string): string {
// Safely encode Unicode as UTF-8 bytes
const utf8Bytes = new TextEncoder().encode(name);
// Convert to base64 manually
let binary = "";
for (const byte of utf8Bytes) {
binary += String.fromCharCode(byte);
}
const base64 = btoa(binary);
// Strip out non-alphanumeric characters and truncate
const cleanHash = base64.replace(/[^a-zA-Z0-9]/g, "").substring(0, 8);
return `cam_${cleanHash.toLowerCase()}`;
}
/**
* Checks if a string is a valid camera name identifier.
* Valid camera names contain only ASCII letters, numbers, underscores, and hyphens.

28
web/src/utils/stringUtil.ts
View File

@ -9,3 +9,31 @@ export const capitalizeAll = (text: string): string => {
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(" ");
};
/**
* Generates a fixed-length hash from a camera name for use as a valid camera identifier.
* Works safely with Unicode input while outputting Latin-only identifiers.
*
* @param name - The original camera/zones name/display name
* @param prefix - The prefix to use for the generated camera/zones name (default: "cam_")
* @returns A valid camera identifier (lowercase, alphanumeric, max 8 chars)
*/
export function generateFixedHash(
name: string,
prefix: string = "cam_",
): string {
// Safely encode Unicode as UTF-8 bytes
const utf8Bytes = new TextEncoder().encode(name);
// Convert to base64 manually
let binary = "";
for (const byte of utf8Bytes) {
binary += String.fromCharCode(byte);
}
const base64 = btoa(binary);
// Strip out non-alphanumeric characters and truncate
const cleanHash = base64.replace(/[^a-zA-Z0-9]/g, "").substring(0, 8);
return `${prefix}_${cleanHash.toLowerCase()}`;
}

21
web/src/utils/zoneUtil.ts Normal file
View File

@ -0,0 +1,21 @@
import { isValidCameraName } from "./cameraUtil.ts";
import { generateFixedHash } from "./stringUtil.ts";
export function processZoneName(userInput: string): {
finalZoneName: string;
friendlyName?: string;
} {
const normalizedInput = userInput.replace(/\s+/g, "_").toLowerCase();
if (isValidCameraName(normalizedInput)) {
return {
finalZoneName: normalizedInput,
friendlyName: userInput.includes(" ") ? userInput : undefined,
};
}
return {
finalZoneName: generateFixedHash(userInput, "zone"),
friendlyName: userInput,
};
}

2
web/src/views/recording/RecordingView.tsx
View File

@ -65,7 +65,7 @@ import {
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
import { useAllowedCameras } from "@/hooks/use-allowed-cameras";
import { DetailStreamProvider } from "@/context/detail-stream-context";
import { GenAISummaryDialog } from "@/components/overlay/chip/GenAISummaryChip";

2
web/src/views/settings/AuthenticationView.tsx
View File

@ -36,7 +36,7 @@ import EditRoleCamerasDialog from "@/components/overlay/EditRoleCamerasDialog";
import { useTranslation } from "react-i18next";
import DeleteRoleDialog from "@/components/overlay/DeleteRoleDialog";
import { Separator } from "@/components/ui/separator";
import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
type AuthenticationViewProps = {
section?: "users" | "roles";

2
web/src/views/settings/CameraManagementView.tsx
View File

@ -18,7 +18,7 @@ import {
} from "@/components/ui/select";
import { IoMdArrowRoundBack } from "react-icons/io";
import { isDesktop } from "react-device-detect";
import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
import { Switch } from "@/components/ui/switch";
import { Trans } from "react-i18next";
import { Separator } from "@/components/ui/separator";

14
web/src/views/settings/CameraSettingsView.tsx
View File

@ -42,6 +42,7 @@ import CameraWizardDialog from "@/components/settings/CameraWizardDialog";
import { IoMdArrowRoundBack } from "react-icons/io";
import { isDesktop } from "react-device-detect";
import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
import { resolveZoneName } from "@/hooks/use-zone-friendly-name";
type CameraSettingsViewProps = {
selectedCamera: string;
@ -86,16 +87,23 @@ export default function CameraSettingsView({
// zones and labels
const getZoneName = useCallback(
(cameraId: string, zoneId: string) =>
resolveZoneName(config, zoneId, cameraId),
[config],
);
const zones = useMemo(() => {
if (cameraConfig) {
return Object.entries(cameraConfig.zones).map(([name, zoneData]) => ({
camera: cameraConfig.name,
name,
friendly_name: getZoneName(cameraConfig.name, name),
objects: zoneData.objects,
color: zoneData.color,
}));
}
}, [cameraConfig]);
}, [cameraConfig, getZoneName]);
const alertsLabels = useMemo(() => {
return cameraConfig?.review.alerts.labels
@ -526,7 +534,7 @@ export default function CameraSettingsView({
/>
</FormControl>
<FormLabel className="font-normal smart-capitalize">
{zone.name.replaceAll("_", " ")}
{zone.friendly_name}
</FormLabel>
</FormItem>
)}
@ -628,7 +636,7 @@ export default function CameraSettingsView({
/>
</FormControl>
<FormLabel className="font-normal smart-capitalize">
{zone.name.replaceAll("_", " ")}
{zone.friendly_name}
</FormLabel>
</FormItem>
)}

2
web/src/views/settings/FrigatePlusSettingsView.tsx
View File

@ -23,7 +23,7 @@ import {
SelectTrigger,
} from "@/components/ui/select";
import { useDocDomain } from "@/hooks/use-doc-domain";
import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
type FrigatePlusModel = {
id: string;

1
web/src/views/settings/MasksAndZonesView.tsx
View File

@ -229,6 +229,7 @@ export default function MasksAndZonesView({
typeIndex: index,
camera: cameraConfig.name,
name,
friendlyName: zoneData.friendly_name,
objects: zoneData.objects,
points: interpolatePoints(
parseCoordinates(zoneData.coordinates),

4
web/src/views/settings/NotificationsSettingsView.tsx
View File

@ -45,7 +45,7 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Trans, useTranslation } from "react-i18next";
import { useDateLocale } from "@/hooks/use-date-locale";
import { useDocDomain } from "@/hooks/use-doc-domain";
import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
import { useIsAdmin } from "@/hooks/use-is-admin";
import { cn } from "@/lib/utils";
@ -476,7 +476,7 @@ export default function NotificationView({
<FilterSwitch
key={camera.name}
label={camera.name}
isCameraName={true}
type={"camera"}
isChecked={field.value?.includes(
camera.name,
)}

2
web/src/views/system/CameraMetrics.tsx
View File

@ -13,7 +13,7 @@ import {
} from "@/components/ui/tooltip";
import useSWR from "swr";
import { useTranslation } from "react-i18next";
import { CameraNameLabel } from "@/components/camera/CameraNameLabel";
import { CameraNameLabel } from "@/components/camera/FriendlyNameLabel";
import { resolveCameraName } from "@/hooks/use-camera-friendly-name";
type CameraMetricsProps = {