Bugfixes (#11420)

* mse and misc messages fixes

* clean up

web/src/components/settings/MotionTuner.tsx

@@ -42,7 +42,7 @@ export default function MotionTuner({
   const [changedValue, setChangedValue] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
-  const { addMessage, clearMessages } = useContext(StatusBarMessagesContext)!;
+  const { addMessage, removeMessage } = useContext(StatusBarMessagesContext)!;
 
   const { send: sendMotionThreshold } = useMotionThreshold(selectedCamera);
   const { send: sendMotionContourArea } = useMotionContourArea(selectedCamera);
@@ -148,21 +148,23 @@ export default function MotionTuner({
   const onCancel = useCallback(() => {
     setMotionSettings(origMotionSettings);
     setChangedValue(false);
-    clearMessages("motion_tuner");
-  }, [origMotionSettings, clearMessages]);
+    removeMessage("motion_tuner", `motion_tuner_${selectedCamera}`);
+  }, [origMotionSettings, removeMessage, selectedCamera]);
 
   useEffect(() => {
     if (changedValue) {
       addMessage(
         "motion_tuner",
-        "Unsaved motion tuner changes",
+        `Unsaved motion tuner changes (${selectedCamera})`,
         undefined,
-        "motion_tuner",
+        `motion_tuner_${selectedCamera}`,
       );
     } else {
-      clearMessages("motion_tuner");
+      removeMessage("motion_tuner", `motion_tuner_${selectedCamera}`);
     }
-  }, [changedValue, addMessage, clearMessages]);
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [changedValue, selectedCamera]);
 
   useEffect(() => {
     document.title = "Motion Tuner - Frigate";

web/src/components/settings/PolygonItem.tsx

@@ -26,7 +26,7 @@ import {
   toRGBColorString,
 } from "@/utils/canvasUtil";
 import { Polygon, PolygonType } from "@/types/canvas";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useContext, useMemo, useState } from "react";
 import axios from "axios";
 import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
@@ -34,6 +34,7 @@ import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { reviewQueries } from "@/utils/zoneEdutUtil";
 import IconWrapper from "../ui/icon-wrapper";
+import { StatusBarMessagesContext } from "@/context/statusbar-provider";
 
 type PolygonItemProps = {
   polygon: Polygon;
@@ -57,6 +58,7 @@ export default function PolygonItem({
   const { data: config, mutate: updateConfig } =
     useSWR<FrigateConfig>("config");
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const { addMessage } = useContext(StatusBarMessagesContext)!;
   const [isLoading, setIsLoading] = useState(false);
 
   const cameraConfig = useMemo(() => {
@@ -198,6 +200,12 @@ export default function PolygonItem({
   const handleDelete = () => {
     setActivePolygonIndex(undefined);
     saveToConfig(polygon);
+    addMessage(
+      "masks_zones",
+      "Restart required (masks/zones changed)",
+      undefined,
+      "masks_zones",
+    );
   };
 
   return (