- minor big fixes

- default settings toggled
-update camera zoom need to test

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 { useCameraZoom } from "../../hooks/useCameraZoom";
-import { parseRTSPUrl } from "../../utils/utils";
+import { parseRTSPUrl, zoomMapping } from "../../utils/utils";
 
 type CameraSettingsProps = {
   initialData: CameraConfig;
@@ -25,7 +25,12 @@ const CameraSettingFields = ({
   const [showPwd, setShowPwd] = useState(false);
   const cameraControllerSide = initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB";
   const { mutation, query } = useCameraZoom({ camera: cameraControllerSide });
-  const zoomOptions = [1, 2, 4, 8];
+  const zoomOptions = [1, 2, 4];
+  // const zoomTextOptions = [
+  //   { label: "near", value: 4 },
+  //   { label: "medium", value: 2 },
+  //   { label: "far", value: 1 },
+  // ];
 
   const parsed = parseRTSPUrl(initialData?.propURI?.value);
 
@@ -36,6 +41,7 @@ const CameraSettingFields = ({
   }, [query?.data, onZoomLevelChange]);
 
   const getZoomLevel = (levelstring: string | undefined) => {
+    console.log(levelstring);
     switch (levelstring) {
       case "1x":
         return 1;
@@ -46,8 +52,6 @@ const CameraSettingFields = ({
       case "4x":
         return 4;
 
-      case "8x":
-        return 8;
       default:
         return 1;
     }
@@ -80,11 +84,13 @@ const CameraSettingFields = ({
 
   const handleRadioButtonChange = async (levelNumber: number) => {
     if (!onZoomLevelChange || !zoomLevel) return;
+    const text = zoomMapping(levelNumber);
     onZoomLevelChange(levelNumber);
 
     const zoomInOptions: ZoomInOptions = {
       camera: cameraControllerSide,
       multiplier: levelNumber,
+      multiplierText: text,
     };
 
     mutation.mutate(zoomInOptions);
@@ -169,7 +175,7 @@ const CameraSettingFields = ({
             </div>
             <div className="my-3">
               <CardHeader title="Zoom settings" />
-              <div className="mx-auto grid grid-cols-4 items-center">
+              <div className="mx-auto grid grid-cols-3 place-items-center">
                 {zoomOptions.map((zoom) => (
                   <div key={zoom} className="my-3">
                     <Field
@@ -187,7 +193,7 @@ const CameraSettingFields = ({
                    peer-checked:border-2 peer-checked:border-blue-900  
                    peer-checked:text-blue-600 peer-checked:bg-gray-100"
                     >
-                      x{zoom}
+                      {zoomMapping(zoom)}
                     </label>
                   </div>
                 ))}