frontend

web/src/components/settings/MotionMaskEditPane.tsx

@@ -1,21 +1,25 @@
 import Heading from "../ui/heading";
 import { Separator } from "../ui/separator";
 import { Button } from "@/components/ui/button";
-import { Form, FormField, FormItem, FormMessage } from "@/components/ui/form";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
 import { useCallback, useEffect, useMemo } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import { z } from "zod";
 import PolygonEditControls from "./PolygonEditControls";
 import { FaCheckCircle } from "react-icons/fa";
-import { Polygon } from "@/types/canvas";
+import { MotionMaskFormValuesType, Polygon } from "@/types/canvas";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
-import {
+import { flattenPoints, interpolatePoints } from "@/utils/canvasUtil";
-  flattenPoints,
-  interpolatePoints,
-  parseCoordinates,
-} from "@/utils/canvasUtil";
 import axios from "axios";
 import { toast } from "sonner";
 import { Toaster } from "../ui/sonner";
@@ -24,6 +28,8 @@ import { Link } from "react-router-dom";
 import { LuExternalLink } from "react-icons/lu";
 import { Trans, useTranslation } from "react-i18next";
 import { useDocDomain } from "@/hooks/use-doc-domain";
+import NameAndIdFields from "../input/NameAndIdFields";
+import { Switch } from "../ui/switch";
 
 type MotionMaskEditPaneProps = {
   polygons?: Polygon[];
@@ -73,12 +79,24 @@ export default function MotionMaskEditPane({
 
   const defaultName = useMemo(() => {
     if (!polygons) {
-      return;
+      return "";
     }
 
     const count = polygons.filter((poly) => poly.type == "motion_mask").length;
 
-    return `Motion Mask ${count + 1}`;
+    return t("masksAndZones.motionMasks.defaultName", {
+      number: count + 1,
+    });
+  }, [polygons, t]);
+
+  const defaultId = useMemo(() => {
+    if (!polygons) {
+      return "";
+    }
+
+    const count = polygons.filter((poly) => poly.type == "motion_mask").length;
+
+    return `motion_mask_${count + 1}`;
   }, [polygons]);
 
   const polygonArea = useMemo(() => {
@@ -104,116 +122,154 @@ export default function MotionMaskEditPane({
     }
   }, [polygon, scaledWidth, scaledHeight]);
 
-  const formSchema = z
+  const formSchema = z.object({
-    .object({
+    name: z
-      polygon: z.object({ name: z.string(), isFinished: z.boolean() }),
+      .string()
-    })
+      .min(1, {
-    .refine(() => polygon?.isFinished === true, {
+        message: t("masksAndZones.form.id.error.mustNotBeEmpty"),
+      })
+      .refine(
+        (value: string) => {
+          // When editing, allow the same name
+          if (polygon?.name && value === polygon.name) {
+            return true;
+          }
+          // Check if mask ID already exists
+          const existingMaskIds = Object.keys(cameraConfig?.motion.mask || {});
+          return !existingMaskIds.includes(value);
+        },
+        {
+          message: t("masksAndZones.form.id.error.alreadyExists"),
+        },
+      ),
+    friendly_name: z.string().min(1, {
+      message: t("masksAndZones.form.name.error.mustNotBeEmpty"),
+    }),
+    enabled: z.boolean(),
+    isFinished: z.boolean().refine(() => polygon?.isFinished === true, {
       message: t("masksAndZones.form.polygonDrawing.error.mustBeFinished"),
-      path: ["polygon.isFinished"],
+    }),
-    });
+  });
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     mode: "onChange",
     defaultValues: {
-      polygon: { isFinished: polygon?.isFinished ?? false, name: defaultName },
+      name: polygon?.name || defaultId,
+      friendly_name: polygon?.friendly_name || defaultName,
+      enabled: polygon?.enabled ?? true,
+      isFinished: polygon?.isFinished ?? false,
     },
   });
 
-  const saveToConfig = useCallback(async () => {
+  const saveToConfig = useCallback(
-    if (!scaledWidth || !scaledHeight || !polygon || !cameraConfig) {
+    async ({
-      return;
+      name: maskId,
-    }
+      friendly_name,
+      enabled,
+    }: MotionMaskFormValuesType) => {
+      if (!scaledWidth || !scaledHeight || !polygon || !cameraConfig) {
+        return;
+      }
 
-    const coordinates = flattenPoints(
+      const coordinates = flattenPoints(
-      interpolatePoints(polygon.points, scaledWidth, scaledHeight, 1, 1),
+        interpolatePoints(polygon.points, scaledWidth, scaledHeight, 1, 1),
-    ).join(",");
+      ).join(",");
 
-    let index = Array.isArray(cameraConfig.motion.mask)
+      const editingMask = polygon.name.length > 0;
-      ? cameraConfig.motion.mask.length
+      const renamingMask = editingMask && maskId !== polygon.name;
-      : cameraConfig.motion.mask
-        ? 1
-        : 0;
 
-    const editingMask = polygon.name.length > 0;
+      // Build the new mask configuration
+      const maskConfig = {
+        friendly_name: friendly_name,
+        enabled: enabled,
+        coordinates: coordinates,
+      };
 
-    // editing existing mask, not creating a new one
+      // If renaming, we need to delete the old mask first
-    if (editingMask) {
+      if (renamingMask) {
-      index = polygon.typeIndex;
+        try {
-    }
+          await axios.put(
-
+            `config/set?cameras.${polygon.camera}.motion.mask.${polygon.name}`,
-    const filteredMask = (
-      Array.isArray(cameraConfig.motion.mask)
-        ? cameraConfig.motion.mask
-        : [cameraConfig.motion.mask]
-    ).filter((_, currentIndex) => currentIndex !== index);
-
-    filteredMask.splice(index, 0, coordinates);
-
-    const queryString = filteredMask
-      .map((pointsArray) => {
-        const coordinates = flattenPoints(parseCoordinates(pointsArray)).join(
-          ",",
-        );
-        return `cameras.${polygon?.camera}.motion.mask=${coordinates}&`;
-      })
-      .join("");
-
-    axios
-      .put(`config/set?${queryString}`, {
-        requires_restart: 0,
-        update_topic: `config/cameras/${polygon.camera}/motion`,
-      })
-      .then((res) => {
-        if (res.status === 200) {
-          toast.success(
-            polygon.name
-              ? t("masksAndZones.motionMasks.toast.success.title", {
-                  polygonName: polygon.name,
-                })
-              : t("masksAndZones.motionMasks.toast.success.noName"),
             {
-              position: "top-center",
+              requires_restart: 0,
             },
           );
-          updateConfig();
+        } catch (error) {
-        } else {
+          toast.error(t("toast.save.error.noMessage", { ns: "common" }), {
-          toast.error(
-            t("toast.save.error.title", {
-              errorMessage: res.statusText,
-              ns: "common",
-            }),
-            {
-              position: "top-center",
-            },
-          );
-        }
-      })
-      .catch((error) => {
-        const errorMessage =
-          error.response?.data?.message ||
-          error.response?.data?.detail ||
-          "Unknown error";
-        toast.error(
-          t("toast.save.error.title", { errorMessage, ns: "common" }),
-          {
             position: "top-center",
+          });
+          setIsLoading(false);
+          return;
+        }
+      }
+
+      // Save the new/updated mask using JSON body
+      axios
+        .put("config/set", {
+          config_data: {
+            cameras: {
+              [polygon.camera]: {
+                motion: {
+                  mask: {
+                    [maskId]: maskConfig,
+                  },
+                },
+              },
+            },
           },
-        );
+          requires_restart: 0,
-      })
+          update_topic: `config/cameras/${polygon.camera}/motion`,
-      .finally(() => {
+        })
-        setIsLoading(false);
+        .then((res) => {
-      });
+          if (res.status === 200) {
-  }, [
+            toast.success(
-    updateConfig,
+              t("masksAndZones.motionMasks.toast.success.title", {
-    polygon,
+                polygonName: friendly_name || maskId,
-    scaledWidth,
+              }),
-    scaledHeight,
+              {
-    setIsLoading,
+                position: "top-center",
-    cameraConfig,
+              },
-    t,
+            );
-  ]);
+            updateConfig();
+          } else {
+            toast.error(
+              t("toast.save.error.title", {
+                errorMessage: res.statusText,
+                ns: "common",
+              }),
+              {
+                position: "top-center",
+              },
+            );
+          }
+        })
+        .catch((error) => {
+          const errorMessage =
+            error.response?.data?.message ||
+            error.response?.data?.detail ||
+            "Unknown error";
+          toast.error(
+            t("toast.save.error.title", { errorMessage, ns: "common" }),
+            {
+              position: "top-center",
+            },
+          );
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    },
+    [
+      updateConfig,
+      polygon,
+      scaledWidth,
+      scaledHeight,
+      setIsLoading,
+      cameraConfig,
+      t,
+    ],
+  );
 
   function onSubmit(values: z.infer<typeof formSchema>) {
     if (activePolygonIndex === undefined || !values || !polygons) {
@@ -221,7 +277,7 @@ export default function MotionMaskEditPane({
     }
     setIsLoading(true);
 
-    saveToConfig();
+    saveToConfig(values as MotionMaskFormValuesType);
     if (onSave) {
       onSave();
     }
@@ -310,58 +366,83 @@ export default function MotionMaskEditPane({
         </>
       )}
 
-      <Form {...form}>
+      <FormProvider {...form}>
-        <form
+        <Form {...form}>
-          onSubmit={form.handleSubmit(onSubmit)}
+          <form
-          className="flex flex-1 flex-col space-y-6"
+            onSubmit={form.handleSubmit(onSubmit)}
-        >
+            className="flex flex-1 flex-col space-y-6"
-          <FormField
+          >
-            control={form.control}
+            <NameAndIdFields
-            name="polygon.name"
+              type="motion_mask"
-            render={() => (
+              control={form.control}
-              <FormItem>
+              nameField="friendly_name"
-                <FormMessage />
+              idField="name"
-              </FormItem>
+              idVisible={(polygon && polygon.name.length > 0) ?? false}
-            )}
+              nameLabel={t("masksAndZones.motionMasks.name.title")}
-          />
+              nameDescription={t("masksAndZones.motionMasks.name.description")}
-          <FormField
+              placeholderName={t("masksAndZones.motionMasks.name.placeholder")}
-            control={form.control}
+            />
-            name="polygon.isFinished"
+            <FormField
-            render={() => (
+              control={form.control}
-              <FormItem>
+              name="enabled"
-                <FormMessage />
+              render={({ field }) => (
-              </FormItem>
+                <FormItem className="flex flex-row items-center justify-between">
-            )}
+                  <div className="space-y-0.5">
-          />
+                    <FormLabel>
-          <div className="flex flex-1 flex-col justify-end">
+                      {t("masksAndZones.masks.enabled.title")}
-            <div className="flex flex-row gap-2 pt-5">
+                    </FormLabel>
-              <Button
+                    <FormDescription>
-                className="flex flex-1"
+                      {t("masksAndZones.masks.enabled.description")}
-                aria-label={t("button.cancel", { ns: "common" })}
+                    </FormDescription>
-                onClick={onCancel}
-              >
-                {t("button.cancel", { ns: "common" })}
-              </Button>
-              <Button
-                variant="select"
-                aria-label={t("button.save", { ns: "common" })}
-                disabled={isLoading}
-                className="flex flex-1"
-                type="submit"
-              >
-                {isLoading ? (
-                  <div className="flex flex-row items-center gap-2">
-                    <ActivityIndicator />
-                    <span>{t("button.saving", { ns: "common" })}</span>
                   </div>
-                ) : (
+                  <FormControl>
-                  t("button.save", { ns: "common" })
+                    <Switch
-                )}
+                      checked={field.value}
-              </Button>
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="isFinished"
+              render={() => (
+                <FormItem>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <div className="flex flex-1 flex-col justify-end">
+              <div className="flex flex-row gap-2 pt-5">
+                <Button
+                  className="flex flex-1"
+                  aria-label={t("button.cancel", { ns: "common" })}
+                  onClick={onCancel}
+                >
+                  {t("button.cancel", { ns: "common" })}
+                </Button>
+                <Button
+                  variant="select"
+                  aria-label={t("button.save", { ns: "common" })}
+                  disabled={isLoading}
+                  className="flex flex-1"
+                  type="submit"
+                >
+                  {isLoading ? (
+                    <div className="flex flex-row items-center gap-2">
+                      <ActivityIndicator />
+                      <span>{t("button.saving", { ns: "common" })}</span>
+                    </div>
+                  ) : (
+                    t("button.save", { ns: "common" })
+                  )}
+                </Button>
+              </div>
             </div>
-          </div>
+          </form>
-        </form>
+        </Form>
-      </Form>
+      </FormProvider>
     </>
   );
 }

web/src/components/settings/ObjectMaskEditPane.tsx

@@ -23,22 +23,20 @@ import { useCallback, useEffect, useMemo } from "react";
 import { FrigateConfig } from "@/types/frigateConfig";
 import useSWR from "swr";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import { z } from "zod";
 import { ObjectMaskFormValuesType, Polygon } from "@/types/canvas";
 import PolygonEditControls from "./PolygonEditControls";
 import { FaCheckCircle } from "react-icons/fa";
-import {
+import { flattenPoints, interpolatePoints } from "@/utils/canvasUtil";
-  flattenPoints,
-  interpolatePoints,
-  parseCoordinates,
-} from "@/utils/canvasUtil";
 import axios from "axios";
 import { toast } from "sonner";
 import { Toaster } from "../ui/sonner";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { useTranslation } from "react-i18next";
 import { getTranslatedLabel } from "@/utils/i18n";
+import NameAndIdFields from "../input/NameAndIdFields";
+import { Switch } from "../ui/switch";
 
 type ObjectMaskEditPaneProps = {
   polygons?: Polygon[];
@@ -87,7 +85,7 @@ export default function ObjectMaskEditPane({
 
   const defaultName = useMemo(() => {
     if (!polygons) {
-      return;
+      return "";
     }
 
     const count = polygons.filter((poly) => poly.type == "object_mask").length;
@@ -95,40 +93,81 @@ export default function ObjectMaskEditPane({
     let objectType = "";
     const objects = polygon?.objects[0];
     if (objects === undefined) {
-      objectType = "all objects";
+      objectType = t("masksAndZones.zones.allObjects");
     } else {
-      objectType = objects;
+      objectType = getTranslatedLabel(objects);
     }
 
     return t("masksAndZones.objectMaskLabel", {
       number: count + 1,
-      label: getTranslatedLabel(objectType),
+      label: objectType,
     });
   }, [polygons, polygon, t]);
 
-  const formSchema = z
+  const defaultId = useMemo(() => {
-    .object({
+    if (!polygons) {
-      objects: z.string(),
+      return "";
-      polygon: z.object({ isFinished: z.boolean(), name: z.string() }),
+    }
-    })
+
-    .refine(() => polygon?.isFinished === true, {
+    const count = polygons.filter((poly) => poly.type == "object_mask").length;
+
+    return `object_mask_${count + 1}`;
+  }, [polygons]);
+
+  const formSchema = z.object({
+    name: z
+      .string()
+      .min(1, {
+        message: t("masksAndZones.form.id.error.mustNotBeEmpty"),
+      })
+      .refine(
+        (value: string) => {
+          // When editing, allow the same name
+          if (polygon?.name && value === polygon.name) {
+            return true;
+          }
+          // Check if mask ID already exists in global masks or filter masks
+          const globalMaskIds = Object.keys(cameraConfig?.objects.mask || {});
+          const filterMaskIds = Object.values(
+            cameraConfig?.objects.filters || {},
+          ).flatMap((filter) => Object.keys(filter.mask || {}));
+          return (
+            !globalMaskIds.includes(value) && !filterMaskIds.includes(value)
+          );
+        },
+        {
+          message: t("masksAndZones.form.id.error.alreadyExists"),
+        },
+      ),
+    friendly_name: z.string().min(1, {
+      message: t("masksAndZones.form.name.error.mustNotBeEmpty"),
+    }),
+    enabled: z.boolean(),
+    objects: z.string(),
+    isFinished: z.boolean().refine(() => polygon?.isFinished === true, {
       message: t("masksAndZones.form.polygonDrawing.error.mustBeFinished"),
-      path: ["polygon.isFinished"],
+    }),
-    });
+  });
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     mode: "onChange",
     defaultValues: {
+      name: polygon?.name || defaultId,
+      friendly_name: polygon?.friendly_name || defaultName,
+      enabled: polygon?.enabled ?? true,
       objects: polygon?.objects[0] ?? "all_labels",
-      polygon: { isFinished: polygon?.isFinished ?? false, name: defaultName },
+      isFinished: polygon?.isFinished ?? false,
     },
   });
 
   const saveToConfig = useCallback(
-    async (
+    async ({
-      { objects: form_objects }: ObjectMaskFormValuesType, // values submitted via the form
+      name: maskId,
-    ) => {
+      friendly_name,
+      enabled,
+      objects: form_objects,
+    }: ObjectMaskFormValuesType) => {
       if (!scaledWidth || !scaledHeight || !polygon || !cameraConfig) {
         return;
       }
@@ -137,88 +176,87 @@ export default function ObjectMaskEditPane({
         interpolatePoints(polygon.points, scaledWidth, scaledHeight, 1, 1),
       ).join(",");
 
-      let queryString = "";
-      let configObject;
-      let createFilter = false;
-      let globalMask = false;
-      let filteredMask = [coordinates];
       const editingMask = polygon.name.length > 0;
+      const renamingMask = editingMask && maskId !== polygon.name;
+      const globalMask = form_objects === "all_labels";
 
-      // global mask on camera for all objects
+      // Build the mask configuration
-      if (form_objects == "all_labels") {
+      const maskConfig = {
-        configObject = cameraConfig.objects.mask;
+        friendly_name: friendly_name,
-        globalMask = true;
+        enabled: enabled,
+        coordinates: coordinates,
+      };
+
+      // If renaming, delete the old mask first
+      if (renamingMask) {
+        try {
+          // 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}`;
+
+          await axios.put(`config/set?${oldPath}`, {
+            requires_restart: 0,
+          });
+        } catch (error) {
+          toast.error(t("toast.save.error.noMessage", { ns: "common" }), {
+            position: "top-center",
+          });
+          setIsLoading(false);
+          return;
+        }
+      }
+
+      // 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,
+                  },
+                },
+              },
+            },
+          },
+          requires_restart: 0,
+          update_topic: `config/cameras/${polygon.camera}/objects`,
+        };
       } else {
-        if (
+        configBody = {
-          cameraConfig.objects.filters[form_objects] &&
+          config_data: {
-          cameraConfig.objects.filters[form_objects].mask !== null
+            cameras: {
-        ) {
+              [polygon.camera]: {
-          configObject = cameraConfig.objects.filters[form_objects].mask;
+                objects: {
-        } else {
+                  filters: {
-          createFilter = true;
+                    [form_objects]: {
-        }
+                      mask: {
-      }
+                        [maskId]: maskConfig,
-
+                      },
-      if (!createFilter) {
+                    },
-        let index = Array.isArray(configObject)
+                  },
-          ? configObject.length
+                },
-          : configObject
+              },
-            ? 1
+            },
-            : 0;
+          },
-
+          requires_restart: 0,
-        // editing existing mask, not creating a new one
+          update_topic: `config/cameras/${polygon.camera}/objects`,
-        if (editingMask) {
+        };
-          index = polygon.typeIndex;
-        }
-
-        filteredMask = (
-          Array.isArray(configObject) ? configObject : [configObject as string]
-        ).filter((_, currentIndex) => currentIndex !== index);
-
-        filteredMask.splice(index, 0, coordinates);
-      }
-
-      // prevent duplicating global masks under specific object filters
-      if (!globalMask) {
-        const globalObjectMasksArray = Array.isArray(cameraConfig.objects.mask)
-          ? cameraConfig.objects.mask
-          : cameraConfig.objects.mask
-            ? [cameraConfig.objects.mask]
-            : [];
-
-        filteredMask = filteredMask.filter(
-          (mask) => !globalObjectMasksArray.includes(mask),
-        );
-      }
-
-      queryString = filteredMask
-        .map((pointsArray) => {
-          const coordinates = flattenPoints(parseCoordinates(pointsArray)).join(
-            ",",
-          );
-          return globalMask
-            ? `cameras.${polygon?.camera}.objects.mask=${coordinates}&`
-            : `cameras.${polygon?.camera}.objects.filters.${form_objects}.mask=${coordinates}&`;
-        })
-        .join("");
-
-      if (!queryString) {
-        return;
       }
 
       axios
-        .put(`config/set?${queryString}`, {
+        .put("config/set", configBody)
-          requires_restart: 0,
-          update_topic: `config/cameras/${polygon.camera}/objects`,
-        })
         .then((res) => {
           if (res.status === 200) {
             toast.success(
-              polygon.name
+              t("masksAndZones.objectMasks.toast.success.title", {
-                ? t("masksAndZones.objectMasks.toast.success.title", {
+                polygonName: friendly_name || maskId,
-                    polygonName: polygon.name,
+              }),
-                  })
-                : t("masksAndZones.objectMasks.toast.success.noName"),
               {
                 position: "top-center",
               },
@@ -323,89 +361,118 @@ export default function ObjectMaskEditPane({
 
       <Separator className="my-3 bg-secondary" />
 
-      <Form {...form}>
+      <FormProvider {...form}>
-        <form
+        <Form {...form}>
-          onSubmit={form.handleSubmit(onSubmit)}
+          <form
-          className="flex flex-1 flex-col space-y-6"
+            onSubmit={form.handleSubmit(onSubmit)}
-        >
+            className="flex flex-1 flex-col space-y-6"
-          <div>
+          >
-            <FormField
+            <div className="space-y-4">
-              control={form.control}
+              <NameAndIdFields
-              name="polygon.name"
+                type="object_mask"
-              render={() => (
+                control={form.control}
-                <FormItem>
+                nameField="friendly_name"
-                  <FormMessage />
+                idField="name"
-                </FormItem>
+                idVisible={(polygon && polygon.name.length > 0) ?? false}
-              )}
+                nameLabel={t("masksAndZones.objectMasks.name.title")}
-            />
+                nameDescription={t(
-            <FormField
+                  "masksAndZones.objectMasks.name.description",
-              control={form.control}
-              name="objects"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>
-                    {t("masksAndZones.objectMasks.objects.title")}
-                  </FormLabel>
-                  <Select
-                    onValueChange={field.onChange}
-                    defaultValue={field.value}
-                    disabled={polygon.name.length != 0}
-                  >
-                    <FormControl>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select an object type" />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      <ZoneObjectSelector camera={polygon.camera} />
-                    </SelectContent>
-                  </Select>
-                  <FormDescription>
-                    {t("masksAndZones.objectMasks.objects.desc")}
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name="polygon.isFinished"
-              render={() => (
-                <FormItem>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          </div>
-          <div className="flex flex-1 flex-col justify-end">
-            <div className="flex flex-row gap-2 pt-5">
-              <Button
-                className="flex flex-1"
-                aria-label={t("button.cancel", { ns: "common" })}
-                onClick={onCancel}
-              >
-                {t("button.cancel", { ns: "common" })}
-              </Button>
-              <Button
-                variant="select"
-                disabled={isLoading}
-                className="flex flex-1"
-                aria-label={t("button.save", { ns: "common" })}
-                type="submit"
-              >
-                {isLoading ? (
-                  <div className="flex flex-row items-center gap-2">
-                    <ActivityIndicator />
-                    <span>{t("button.saving", { ns: "common" })}</span>
-                  </div>
-                ) : (
-                  t("button.save", { ns: "common" })
                 )}
-              </Button>
+                placeholderName={t(
+                  "masksAndZones.objectMasks.name.placeholder",
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="enabled"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center justify-between">
+                    <div className="space-y-0.5">
+                      <FormLabel>
+                        {t("masksAndZones.masks.enabled.title")}
+                      </FormLabel>
+                      <FormDescription>
+                        {t("masksAndZones.masks.enabled.description")}
+                      </FormDescription>
+                    </div>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="objects"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      {t("masksAndZones.objectMasks.objects.title")}
+                    </FormLabel>
+                    <Select
+                      onValueChange={field.onChange}
+                      defaultValue={field.value}
+                      disabled={polygon.name.length != 0}
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select an object type" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <ZoneObjectSelector camera={polygon.camera} />
+                      </SelectContent>
+                    </Select>
+                    <FormDescription>
+                      {t("masksAndZones.objectMasks.objects.desc")}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="isFinished"
+                render={() => (
+                  <FormItem>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
             </div>
-          </div>
+            <div className="flex flex-1 flex-col justify-end">
-        </form>
+              <div className="flex flex-row gap-2 pt-5">
-      </Form>
+                <Button
+                  className="flex flex-1"
+                  aria-label={t("button.cancel", { ns: "common" })}
+                  onClick={onCancel}
+                >
+                  {t("button.cancel", { ns: "common" })}
+                </Button>
+                <Button
+                  variant="select"
+                  disabled={isLoading}
+                  className="flex flex-1"
+                  aria-label={t("button.save", { ns: "common" })}
+                  type="submit"
+                >
+                  {isLoading ? (
+                    <div className="flex flex-row items-center gap-2">
+                      <ActivityIndicator />
+                      <span>{t("button.saving", { ns: "common" })}</span>
+                    </div>
+                  ) : (
+                    t("button.save", { ns: "common" })
+                  )}
+                </Button>
+              </div>
+            </div>
+          </form>
+        </Form>
+      </FormProvider>
     </>
   );
 }

web/src/components/settings/PolygonItem.tsx

@@ -20,11 +20,7 @@ import { FaDrawPolygon, FaObjectGroup } from "react-icons/fa";
 import { BsPersonBoundingBox } from "react-icons/bs";
 import { HiOutlineDotsVertical, HiTrash } from "react-icons/hi";
 import { isDesktop, isMobile } from "react-device-detect";
-import {
+import { toRGBColorString } from "@/utils/canvasUtil";
-  flattenPoints,
-  parseCoordinates,
-  toRGBColorString,
-} from "@/utils/canvasUtil";
 import { Polygon, PolygonType } from "@/types/canvas";
 import { useCallback, useMemo, useState } from "react";
 import axios from "axios";
@@ -81,93 +77,6 @@ export default function PolygonItem({
       if (!polygon || !cameraConfig) {
         return;
       }
-      let url = "";
-      if (polygon.type == "zone") {
-        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}`;
-      }
-      if (polygon.type == "motion_mask") {
-        const filteredMask = (
-          Array.isArray(cameraConfig.motion.mask)
-            ? cameraConfig.motion.mask
-            : [cameraConfig.motion.mask]
-        ).filter((_, currentIndex) => currentIndex !== polygon.typeIndex);
-
-        url = filteredMask
-          .map((pointsArray) => {
-            const coordinates = flattenPoints(
-              parseCoordinates(pointsArray),
-            ).join(",");
-            return `cameras.${polygon?.camera}.motion.mask=${coordinates}&`;
-          })
-          .join("");
-
-        if (!url) {
-          // deleting last mask
-          url = `cameras.${polygon?.camera}.motion.mask&`;
-        }
-      }
-
-      if (polygon.type == "object_mask") {
-        let configObject;
-        let globalMask = false;
-
-        // global mask on camera for all objects
-        if (!polygon.objects.length) {
-          configObject = cameraConfig.objects.mask;
-          globalMask = true;
-        } else {
-          configObject = cameraConfig.objects.filters[polygon.objects[0]].mask;
-        }
-
-        if (!configObject) {
-          return;
-        }
-
-        const globalObjectMasksArray = Array.isArray(cameraConfig.objects.mask)
-          ? cameraConfig.objects.mask
-          : cameraConfig.objects.mask
-            ? [cameraConfig.objects.mask]
-            : [];
-
-        let filteredMask;
-        if (globalMask) {
-          filteredMask = (
-            Array.isArray(configObject) ? configObject : [configObject]
-          ).filter((_, currentIndex) => currentIndex !== polygon.typeIndex);
-        } else {
-          filteredMask = (
-            Array.isArray(configObject) ? configObject : [configObject]
-          )
-            .filter((mask) => !globalObjectMasksArray.includes(mask))
-            .filter((_, currentIndex) => currentIndex !== polygon.typeIndex);
-        }
-
-        url = filteredMask
-          .map((pointsArray) => {
-            const coordinates = flattenPoints(
-              parseCoordinates(pointsArray),
-            ).join(",");
-            return globalMask
-              ? `cameras.${polygon?.camera}.objects.mask=${coordinates}&`
-              : `cameras.${polygon?.camera}.objects.filters.${polygon.objects[0]}.mask=${coordinates}&`;
-          })
-          .join("");
-
-        if (!url) {
-          // deleting last mask
-          url = globalMask
-            ? `cameras.${polygon?.camera}.objects.mask&`
-            : `cameras.${polygon?.camera}.objects.filters.${polygon.objects[0]}.mask`;
-        }
-      }
 
       const updateTopicType =
         polygon.type === "zone"
@@ -180,8 +89,115 @@ export default function PolygonItem({
 
       setIsLoading(true);
 
+      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}`;
+
+        await axios
+          .put(`config/set?${url}`, {
+            requires_restart: 0,
+            update_topic: `config/cameras/${polygon.camera}/${updateTopicType}`,
+          })
+          .then((res) => {
+            if (res.status === 200) {
+              toast.success(
+                t("masksAndZones.form.polygonDrawing.delete.success", {
+                  name: polygon?.friendly_name ?? polygon?.name,
+                }),
+                { position: "top-center" },
+              );
+              updateConfig();
+            } else {
+              toast.error(
+                t("toast.save.error.title", {
+                  ns: "common",
+                  errorMessage: res.statusText,
+                }),
+                { position: "top-center" },
+              );
+            }
+          })
+          .catch((error) => {
+            const errorMessage =
+              error.response?.data?.message ||
+              error.response?.data?.detail ||
+              "Unknown error";
+            toast.error(
+              t("toast.save.error.title", { errorMessage, ns: "common" }),
+              { position: "top-center" },
+            );
+          })
+          .finally(() => {
+            setIsLoading(false);
+          });
+        return;
+      }
+
+      // 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]: {
+                objects: {
+                  filters: {
+                    [polygon.objects[0]]: {
+                      mask: {
+                        [polygon.name]: null, // Setting to null will delete the key
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          };
+        }
+      }
+
       await axios
-        .put(`config/set?${url}`, {
+        .put("config/set", {
+          config_data: configUpdate,
           requires_restart: 0,
           update_topic: `config/cameras/${polygon.camera}/${updateTopicType}`,
         })
@@ -191,9 +207,7 @@ export default function PolygonItem({
               t("masksAndZones.form.polygonDrawing.delete.success", {
                 name: polygon?.friendly_name ?? polygon?.name,
               }),
-              {
+              { position: "top-center" },
-                position: "top-center",
-              },
             );
             updateConfig();
           } else {
@@ -202,9 +216,7 @@ export default function PolygonItem({
                 ns: "common",
                 errorMessage: res.statusText,
               }),
-              {
+              { position: "top-center" },
-                position: "top-center",
-              },
             );
           }
         })
@@ -215,9 +227,7 @@ export default function PolygonItem({
             "Unknown error";
           toast.error(
             t("toast.save.error.title", { errorMessage, ns: "common" }),
-            {
+            { position: "top-center" },
-              position: "top-center",
-            },
           );
         })
         .finally(() => {
@@ -238,7 +248,9 @@ export default function PolygonItem({
 
       <div
         key={index}
-        className="transition-background my-1.5 flex flex-row items-center justify-between rounded-lg p-1 duration-100"
+        className={`transition-background my-1.5 flex flex-row items-center justify-between rounded-lg p-1 duration-100 ${
+          polygon.enabled === false ? "opacity-50" : ""
+        }`}
         data-index={index}
         onMouseEnter={() => setHoveredPolygonIndex(index)}
         onMouseLeave={() => setHoveredPolygonIndex(null)}
@@ -265,8 +277,11 @@ export default function PolygonItem({
               }}
             />
           )}
-          <p className="cursor-default">
+          <p
+            className={`cursor-default ${polygon.enabled === false ? "line-through" : ""}`}
+          >
             {polygon.friendly_name ?? polygon.name}
+            {polygon.enabled === false && " (disabled)"}
           </p>
         </div>
         <AlertDialog

web/src/types/canvas.ts

@@ -12,6 +12,7 @@ export type Polygon = {
   isFinished: boolean;
   color: number[];
   friendly_name?: string;
+  enabled?: boolean;
 };
 
 export type ZoneFormValuesType = {
@@ -29,10 +30,17 @@ export type ZoneFormValuesType = {
   speed_threshold: number;
 };
 
-export type ObjectMaskFormValuesType = {
+export type MotionMaskFormValuesType = {
-  objects: string;
+  name: string;
-  polygon: {
+  friendly_name: string;
-    isFinished: boolean;
+  enabled: boolean;
-    name: string;
+  isFinished: boolean;
-  };
+};
+
+export type ObjectMaskFormValuesType = {
+  name: string;
+  friendly_name: string;
+  enabled: boolean;
+  objects: string;
+  isFinished: boolean;
 };

web/src/types/frigateConfig.ts

@@ -106,7 +106,13 @@ export interface CameraConfig {
     frame_height: number;
     improve_contrast: boolean;
     lightning_threshold: number;
-    mask: string[];
+    mask: {
+      [maskId: string]: {
+        friendly_name?: string;
+        enabled: boolean;
+        coordinates: string;
+      };
+    };
     mqtt_off_delay: number;
     threshold: number;
   };
@@ -128,7 +134,13 @@ export interface CameraConfig {
   objects: {
     filters: {
       [objectName: string]: {
-        mask: string[] | null;
+        mask: {
+          [maskId: string]: {
+            friendly_name?: string;
+            enabled: boolean;
+            coordinates: string;
+          };
+        };
         max_area: number;
         max_ratio: number;
         min_area: number;
@@ -137,7 +149,13 @@ export interface CameraConfig {
         threshold: number;
       };
     };
-    mask: string;
+    mask: {
+      [maskId: string]: {
+        friendly_name?: string;
+        enabled: boolean;
+        coordinates: string;
+      };
+    };
     track: string[];
     genai: {
       enabled: boolean;

web/src/views/settings/MasksAndZonesView.tsx

@@ -34,7 +34,6 @@ import { useSearchEffect } from "@/hooks/use-overlay-state";
 import { useTranslation } from "react-i18next";
 
 import { useDocDomain } from "@/hooks/use-doc-domain";
-import { getTranslatedLabel } from "@/utils/i18n";
 import { cn } from "@/lib/utils";
 
 type MasksAndZoneViewProps = {
@@ -250,102 +249,91 @@ export default function MasksAndZonesView({
       let globalObjectMasks: Polygon[] = [];
       let objectMasks: Polygon[] = [];
 
-      // this can be an array or a string
+      // Motion masks are a dict with mask_id as key
-      motionMasks = (
+      motionMasks = Object.entries(cameraConfig.motion.mask || {}).map(
-        Array.isArray(cameraConfig.motion.mask)
+        ([maskId, maskData], index) => ({
-          ? cameraConfig.motion.mask
+          type: "motion_mask" as PolygonType,
-          : cameraConfig.motion.mask
+          typeIndex: index,
-            ? [cameraConfig.motion.mask]
+          camera: cameraConfig.name,
-            : []
+          name: maskId,
-      ).map((maskData, index) => ({
+          friendly_name: maskData.friendly_name,
-        type: "motion_mask" as PolygonType,
+          enabled: maskData.enabled,
-        typeIndex: index,
+          objects: [],
-        camera: cameraConfig.name,
+          points: interpolatePoints(
-        name: t("masksAndZones.motionMaskLabel", {
+            parseCoordinates(maskData.coordinates),
-          number: index + 1,
+            1,
+            1,
+            scaledWidth,
+            scaledHeight,
+          ),
+          distances: [],
+          isFinished: true,
+          color: maskData.enabled ? [0, 0, 255] : [100, 100, 100],
         }),
-        objects: [],
+      );
-        points: interpolatePoints(
-          parseCoordinates(maskData),
-          1,
-          1,
-          scaledWidth,
-          scaledHeight,
-        ),
-        distances: [],
-        isFinished: true,
-        color: [0, 0, 255],
-      }));
 
-      const globalObjectMasksArray = Array.isArray(cameraConfig.objects.mask)
+      // Global object masks are a dict with mask_id as key
-        ? cameraConfig.objects.mask
+      globalObjectMasks = Object.entries(cameraConfig.objects.mask || {}).map(
-        : cameraConfig.objects.mask
+        ([maskId, maskData], index) => ({
-          ? [cameraConfig.objects.mask]
+          type: "object_mask" as PolygonType,
-          : [];
+          typeIndex: index,
-
+          camera: cameraConfig.name,
-      globalObjectMasks = globalObjectMasksArray.map((maskData, index) => ({
+          name: maskId,
-        type: "object_mask" as PolygonType,
+          friendly_name: maskData.friendly_name,
-        typeIndex: index,
+          enabled: maskData.enabled,
-        camera: cameraConfig.name,
+          objects: [],
-        name: t("masksAndZones.objectMaskLabel", {
+          points: interpolatePoints(
-          number: index + 1,
+            parseCoordinates(maskData.coordinates),
-          label: t("masksAndZones.zones.allObjects"),
+            1,
+            1,
+            scaledWidth,
+            scaledHeight,
+          ),
+          distances: [],
+          isFinished: true,
+          color: maskData.enabled ? [128, 128, 128] : [80, 80, 80],
         }),
-        objects: [],
+      );
-        points: interpolatePoints(
-          parseCoordinates(maskData),
-          1,
-          1,
-          scaledWidth,
-          scaledHeight,
-        ),
-        distances: [],
-        isFinished: true,
-        color: [128, 128, 128],
-      }));
 
-      const globalObjectMasksCount = globalObjectMasks.length;
+      const globalObjectMaskIds = Object.keys(cameraConfig.objects.mask || {});
-      let index = 0;
+      let objectMaskIndex = globalObjectMasks.length;
 
       objectMasks = Object.entries(cameraConfig.objects.filters)
-        .filter(([, { mask }]) => mask || Array.isArray(mask))
+        .filter(
-        .flatMap(([objectName, { mask }]): Polygon[] => {
+          ([, filterConfig]) =>
-          const maskArray = Array.isArray(mask) ? mask : mask ? [mask] : [];
+            filterConfig.mask && Object.keys(filterConfig.mask).length > 0,
-          return maskArray.flatMap((maskItem, subIndex) => {
+        )
-            const maskItemString = maskItem;
+        .flatMap(([objectName, filterConfig]): Polygon[] => {
-            const newMask = {
+          return Object.entries(filterConfig.mask || {}).flatMap(
-              type: "object_mask" as PolygonType,
+            ([maskId, maskData]) => {
-              typeIndex: subIndex,
+              // Skip if this mask is already included in global masks
-              camera: cameraConfig.name,
+              if (globalObjectMaskIds.includes(maskId)) {
-              name: t("masksAndZones.objectMaskLabel", {
+                return [];
-                number: globalObjectMasksCount + index + 1,
+              }
-                label: getTranslatedLabel(objectName),
-              }),
-              objects: [objectName],
-              points: interpolatePoints(
-                parseCoordinates(maskItem),
-                1,
-                1,
-                scaledWidth,
-                scaledHeight,
-              ),
-              distances: [],
-              isFinished: true,
-              color: [128, 128, 128],
-            };
-            index++;
 
-            if (
+              const newMask = {
-              globalObjectMasksArray.some(
+                type: "object_mask" as PolygonType,
-                (globalMask) => globalMask === maskItemString,
+                typeIndex: objectMaskIndex,
-              )
+                camera: cameraConfig.name,
-            ) {
+                name: maskId,
-              index--;
+                friendly_name: maskData.friendly_name,
-              return [];
+                enabled: maskData.enabled,
-            } else {
+                objects: [objectName],
+                points: interpolatePoints(
+                  parseCoordinates(maskData.coordinates),
+                  1,
+                  1,
+                  scaledWidth,
+                  scaledHeight,
+                ),
+                distances: [],
+                isFinished: true,
+                color: maskData.enabled ? [128, 128, 128] : [80, 80, 80],
+              };
+              objectMaskIndex++;
               return [newMask];
-            }
+            },
-          });
+          );
         });
 
       setAllPolygons([