- added AUTO setting to mode

src/components/CameraSettings/CameraSettingFields.tsx

@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 import CardHeader from "../UI/CardHeader";
 import { useCameraMode, useCameraZoom } from "../../hooks/useCameraZoom";
-import { parseRTSPUrl, reverseZoomMapping, zoomMapping } from "../../utils/utils";
+import { capitalize, parseRTSPUrl, reverseZoomMapping, zoomMapping } from "../../utils/utils";
 
 type CameraSettingsProps = {
   initialData: CameraConfig;
@@ -181,9 +181,9 @@ const CameraSettingFields = ({
               <div
                 role="radiogroup"
                 aria-label="Camera mode"
-                className="mx-auto grid grid-cols-2 place-items-center gap-3"
+                className="mx-auto grid grid-cols-3 place-items-center gap-3"
               >
-                {["day", "night"].map((el) => (
+                {["day", "night", "auto"].map((el) => (
                   <div key={el} className="my-3">
                     <Field
                       type="radio"
@@ -205,7 +205,7 @@ const CameraSettingFields = ({
                 peer-checked:text-blue-600 peer-checked:bg-gray-100
                 ${cameraModeMutation.isPending ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}
                     >
-                      {el === "day" ? "Day" : "Night"}
+                      {capitalize(el)}
                     </label>
                   </div>
                 ))}

src/hooks/useCameraZoom.ts

@@ -11,6 +11,7 @@ const getCameraMode = async (options: { camera: string }) => {
 };
 
 const updateCameraMode = async (options: { camera: string; mode: string }) => {
+  console.log(options.mode);
   const dayNightPayload = {
     id: options.camera,
     fields: [