motion tuner fixes and tweaks

web/src/components/settings/MotionMaskEditPane.tsx

@@ -248,7 +248,10 @@ export default function MotionMaskEditPane({
       <Separator className="my-3 bg-secondary" />
 
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-6 flex flex-col flex-1"
+        >
           <FormField
             control={form.control}
             name="polygon.name"
@@ -267,6 +270,7 @@ export default function MotionMaskEditPane({
               </FormItem>
             )}
           />
+          <div className="flex flex-col flex-1 justify-end">
             <div className="flex flex-row gap-2 pt-5">
               <Button className="flex flex-1" onClick={onCancel}>
                 Cancel
@@ -287,6 +291,7 @@ export default function MotionMaskEditPane({
                 )}
               </Button>
             </div>
+          </div>
         </form>
       </Form>
     </>

web/src/components/settings/MotionTuner.tsx

@@ -27,6 +27,9 @@ import { Button } from "../ui/button";
 import { Switch } from "../ui/switch";
 import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
+import { Separator } from "../ui/separator";
+import { Link } from "react-router-dom";
+import { LuExternalLink } from "react-icons/lu";
 
 type MotionTunerProps = {
   selectedCamera: string;
@@ -45,9 +48,6 @@ export default function MotionTuner({ selectedCamera }: MotionTunerProps) {
   const [isLoading, setIsLoading] = useState(false);
   const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
 
-  // const [selectedCamera, setSelectedCamera] = useState(cameras[0]?.name);
-  const [nextSelectedCamera, setNextSelectedCamera] = useState("");
-
   const { send: sendMotionThreshold } = useMotionThreshold(selectedCamera);
   const { send: sendMotionContourArea } = useMotionContourArea(selectedCamera);
   const { send: sendImproveContrast } = useImproveContrast(selectedCamera);
@@ -58,6 +58,12 @@ export default function MotionTuner({ selectedCamera }: MotionTunerProps) {
     improve_contrast: undefined,
   });
 
+  const [origMotionSettings, setOrigMotionSettings] = useState<MotionSettings>({
+    threshold: undefined,
+    contour_area: undefined,
+    improve_contrast: undefined,
+  });
+
   const cameraConfig = useMemo(() => {
     if (config && selectedCamera) {
       return config.cameras[selectedCamera];
@@ -71,6 +77,11 @@ export default function MotionTuner({ selectedCamera }: MotionTunerProps) {
         contour_area: cameraConfig.motion.contour_area,
         improve_contrast: cameraConfig.motion.improve_contrast,
       });
+      setOrigMotionSettings({
+        threshold: cameraConfig.motion.threshold,
+        contour_area: cameraConfig.motion.contour_area,
+        improve_contrast: cameraConfig.motion.improve_contrast,
+      });
     }
   }, [cameraConfig]);
 
@@ -150,15 +161,16 @@ export default function MotionTuner({ selectedCamera }: MotionTunerProps) {
     selectedCamera,
   ]);
 
-  const onCancel = useCallback(() => {}, []);
+  const onCancel = useCallback(() => {
+    setMotionSettings(origMotionSettings);
+    setChangedValue(false);
+  }, [origMotionSettings]);
 
   const handleDialog = useCallback(
     (save: boolean) => {
       if (save) {
         saveToConfig();
       }
-      // setSelectedCamera(nextSelectedCamera);
-      setNextSelectedCamera("");
       setConfirmationDialogOpen(false);
       setChangedValue(false);
     },
@@ -176,72 +188,117 @@ export default function MotionTuner({ selectedCamera }: MotionTunerProps) {
         <Heading as="h3" className="my-2">
           Motion Detection Tuner
         </Heading>
+        <div className="text-sm text-muted-foreground my-3 space-y-3">
+          <p>
+            Frigate uses motion detection as a first line check to see if there
+            is anything happening in the frame worth checking with object
+            detection.
+          </p>
 
-        <div className="flex flex-col w-full space-y-10">
-          <div className="flex flex-row mb-5">
+          <div className="flex items-center text-primary">
+            <Link
+              to="https://docs.frigate.video/configuration/motion_detection"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline"
+            >
+              Read the Motion Tuning Guide{" "}
+              <LuExternalLink className="size-3 ml-2 inline-flex" />
+            </Link>
+          </div>
+        </div>
+        <Separator className="flex my-2 bg-secondary" />
+        <div className="flex flex-col w-full space-y-6">
+          <div className="mt-2 space-y-6">
+            <div className="space-y-0.5">
+              <Label htmlFor="motion-threshold" className="text-md">
+                Threshold
+              </Label>
+              <div className="text-sm text-muted-foreground my-2">
+                <p>
+                  The threshold value dictates how much of a change in a pixel's
+                  luminance is required to be considered motion.{" "}
+                  <em>Default: 30</em>
+                </p>
+              </div>
+            </div>
+            <div className="flex flex-row justify-between">
               <Slider
                 id="motion-threshold"
-              className="w-[300px]"
+                className="w-full"
                 disabled={motionSettings.threshold === undefined}
                 value={[motionSettings.threshold ?? 0]}
-              min={10}
+                min={5}
                 max={80}
                 step={1}
                 onValueChange={(value) => {
                   handleMotionConfigChange({ threshold: value[0] });
                 }}
               />
-            <Label htmlFor="motion-threshold" className="px-2">
-              Threshold: {motionSettings.threshold}
-            </Label>
+              <div className="text-lg ml-6 mr-2 flex align-center">
+                {motionSettings.threshold}
               </div>
-          <div className="flex flex-row">
+            </div>
+          </div>
+          <div className="mt-2 space-y-6">
+            <div className="space-y-0.5">
+              <Label htmlFor="motion-threshold" className="text-md">
+                Contour Area
+              </Label>
+              <div className="text-sm text-muted-foreground my-2">
+                <p>
+                  The contour area value is used to decide which groups of
+                  changed pixels qualify as motion. <em>Default: 10</em>
+                </p>
+              </div>
+            </div>
+            <div className="flex flex-row justify-between">
               <Slider
                 id="motion-contour-area"
-              className="w-[300px]"
+                className="w-full"
                 disabled={motionSettings.contour_area === undefined}
                 value={[motionSettings.contour_area ?? 0]}
-              min={10}
-              max={200}
-              step={5}
+                min={5}
+                max={100}
+                step={1}
                 onValueChange={(value) => {
                   handleMotionConfigChange({ contour_area: value[0] });
                 }}
               />
-            <Label htmlFor="motion-contour-area" className="px-2">
-              Contour Area: {motionSettings.contour_area}
-            </Label>
+              <div className="text-lg ml-6 mr-2 flex align-center">
+                {motionSettings.contour_area}
+              </div>
+            </div>
+          </div>
+          <Separator className="flex my-2 bg-secondary" />
+          <div className="flex flex-row items-center justify-between">
+            <div className="space-y-0.5">
+              <Label htmlFor="improve-contrast">Improve Contrast</Label>
+              <div className="text-sm text-muted-foreground">
+                Improve contrast for darker scenes. <em>Default: ON</em>
+              </div>
             </div>
-          <div className="flex flex-row">
             <Switch
               id="improve-contrast"
+              className="ml-3"
               disabled={motionSettings.improve_contrast === undefined}
               checked={motionSettings.improve_contrast === true}
               onCheckedChange={(isChecked) => {
                 handleMotionConfigChange({ improve_contrast: isChecked });
               }}
             />
-            <Label htmlFor="improve-contrast">Improve Contrast</Label>
-          </div>
-          <div className="flex flex-row items-center justify-between rounded-lg border p-4">
-            <div className="space-y-0.5">
-              <div className="text-base">Improve Contrast</div>
-              <div>Improve contrast for darker scenes.</div>
-            </div>
-            <div>
-              <div checked={field.value} onCheckedChange={field.onChange} />
           </div>
         </div>
-
+        <div className="flex flex-col flex-1 justify-end">
           <div className="flex flex-row gap-2 pt-5">
             <Button className="flex flex-1" onClick={onCancel}>
-              Cancel
+              Reset
             </Button>
             <Button
               variant="select"
-              disabled={isLoading}
+              disabled={!changedValue || isLoading}
               className="flex flex-1"
-              type="submit"
+              onClick={saveToConfig}
             >
               {isLoading ? (
                 <div className="flex flex-row items-center gap-2">

web/src/components/settings/ObjectMaskEditPane.tsx

@@ -325,7 +325,11 @@ export default function ObjectMaskEditPane({
       <Separator className="my-3 bg-secondary" />
 
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-6 flex flex-col flex-1"
+        >
+          <div>
             <FormField
               control={form.control}
               name="polygon.name"
@@ -370,6 +374,8 @@ export default function ObjectMaskEditPane({
                 </FormItem>
               )}
             />
+          </div>
+          <div className="flex flex-col flex-1 justify-end">
             <div className="flex flex-row gap-2 pt-5">
               <Button className="flex flex-1" onClick={onCancel}>
                 Cancel
@@ -390,6 +396,7 @@ export default function ObjectMaskEditPane({
                 )}
               </Button>
             </div>
+          </div>
         </form>
       </Form>
     </>

web/src/components/settings/ZoneEditPane.tsx

@@ -394,7 +394,7 @@ export default function ZoneEditPane({
       <Separator className="my-3 bg-secondary" />
 
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <form onSubmit={form.handleSubmit(onSubmit)} className="mt-2 space-y-6">
           <FormField
             control={form.control}
             name="name"
@@ -416,9 +416,7 @@ export default function ZoneEditPane({
               </FormItem>
             )}
           />
-          <div className="flex my-2">
-            <Separator className="bg-secondary" />
-          </div>
+          <Separator className="flex my-2 bg-secondary" />
           <FormField
             control={form.control}
             name="inertia"
@@ -440,9 +438,7 @@ export default function ZoneEditPane({
               </FormItem>
             )}
           />
-          <div className="flex my-2">
-            <Separator className="bg-secondary" />
-          </div>
+          <Separator className="flex my-2 bg-secondary" />
           <FormField
             control={form.control}
             name="loitering_time"
@@ -464,9 +460,7 @@ export default function ZoneEditPane({
               </FormItem>
             )}
           />
-          <div className="flex my-2">
-            <Separator className="bg-secondary" />
-          </div>
+          <Separator className="flex my-2 bg-secondary" />
           <FormItem>
             <FormLabel>Objects</FormLabel>
             <FormDescription>
@@ -490,14 +484,14 @@ export default function ZoneEditPane({
               }}
             />
           </FormItem>
-          <div className="flex my-2">
-            <Separator className="bg-secondary" />
-          </div>
+
+          <Separator className="flex my-2 bg-secondary" />
+
           <FormField
             control={form.control}
             name="review_alerts"
             render={({ field }) => (
-              <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+              <FormItem className="flex flex-row items-center justify-between">
                 <div className="space-y-0.5">
                   <FormLabel>Alerts</FormLabel>
                   <FormDescription>
@@ -509,6 +503,7 @@ export default function ZoneEditPane({
                   <Switch
                     checked={field.value}
                     onCheckedChange={field.onChange}
+                    className="ml-3"
                   />
                 </FormControl>
               </FormItem>
@@ -518,7 +513,7 @@ export default function ZoneEditPane({
             control={form.control}
             name="review_detections"
             render={({ field }) => (
-              <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+              <FormItem className="flex flex-row items-center justify-between">
                 <div className="space-y-0.5">
                   <FormLabel className="text-base">Detections</FormLabel>
                   <FormDescription>
@@ -530,6 +525,7 @@ export default function ZoneEditPane({
                   <Switch
                     checked={field.value}
                     onCheckedChange={field.onChange}
+                    className="ml-3"
                   />
                 </FormControl>
               </FormItem>

web/src/components/ui/slider.tsx

@@ -18,7 +18,7 @@ const Slider = React.forwardRef<
     <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
       <SliderPrimitive.Range className="absolute h-full bg-primary" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full cursor-pointer border-2 border-primary bg-primary ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;