Add status bar provider (#11066)

web/src/components/settings/MasksAndZones.tsx

@@ -1,7 +1,14 @@
 import { FrigateConfig } from "@/types/frigateConfig";
 import useSWR from "swr";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { PolygonCanvas } from "./PolygonCanvas";
 import { Polygon, PolygonType } from "@/types/canvas";
 import { interpolatePoints, parseCoordinates } from "@/utils/canvasUtil";
@@ -25,6 +32,7 @@ import ObjectMaskEditPane from "./ObjectMaskEditPane";
 import PolygonItem from "./PolygonItem";
 import { Link } from "react-router-dom";
 import { isDesktop } from "react-device-detect";
+import { StatusBarMessagesContext } from "@/context/statusbar-provider";
 
 type MasksAndZoneProps = {
   selectedCamera: string;
@@ -50,6 +58,8 @@ export default function MasksAndZones({
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [editPane, setEditPane] = useState<PolygonType | undefined>(undefined);
 
+  const { addMessage } = useContext(StatusBarMessagesContext)!;
+
   const cameraConfig = useMemo(() => {
     if (config && selectedCamera) {
       return config.cameras[selectedCamera];
@@ -167,7 +177,8 @@ export default function MasksAndZones({
     setAllPolygons([...(editingPolygons ?? [])]);
     setHoveredPolygonIndex(null);
     setUnsavedChanges(false);
-  }, [editingPolygons, setUnsavedChanges]);
+    addMessage("masks_zones", "Restart required (masks/zones changed)");
+  }, [editingPolygons, setUnsavedChanges, addMessage]);
 
   useEffect(() => {
     if (isLoading) {

web/src/components/settings/MotionTuner.tsx

@@ -4,7 +4,7 @@ import useSWR from "swr";
 import axios from "axios";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import AutoUpdatingCameraImage from "@/components/camera/AutoUpdatingCameraImage";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { Slider } from "@/components/ui/slider";
 import { Label } from "@/components/ui/label";
 import {
@@ -20,6 +20,7 @@ import { toast } from "sonner";
 import { Separator } from "../ui/separator";
 import { Link } from "react-router-dom";
 import { LuExternalLink } from "react-icons/lu";
+import { StatusBarMessagesContext } from "@/context/statusbar-provider";
 
 type MotionTunerProps = {
   selectedCamera: string;
@@ -41,6 +42,8 @@ export default function MotionTuner({
   const [changedValue, setChangedValue] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
+  const { addMessage, clearMessages } = useContext(StatusBarMessagesContext)!;
+
   const { send: sendMotionThreshold } = useMotionThreshold(selectedCamera);
   const { send: sendMotionContourArea } = useMotionContourArea(selectedCamera);
   const { send: sendImproveContrast } = useImproveContrast(selectedCamera);
@@ -145,7 +148,16 @@ export default function MotionTuner({
   const onCancel = useCallback(() => {
     setMotionSettings(origMotionSettings);
     setChangedValue(false);
-  }, [origMotionSettings]);
+    clearMessages("motion_tuner");
+  }, [origMotionSettings, clearMessages]);
+
+  useEffect(() => {
+    if (changedValue) {
+      addMessage("motion_tuner", "Unsaved motion tuner changes");
+    } else {
+      clearMessages("motion_tuner");
+    }
+  }, [changedValue, addMessage, clearMessages]);
 
   if (!cameraConfig && !selectedCamera) {
     return <ActivityIndicator />;