- more addition bugfixes

src/components/CameraSettings/CameraSettingFields.tsx

@@ -5,13 +5,13 @@ 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, zoomMapping } from "../../utils/utils";
+import { parseRTSPUrl, reverseZoomMapping, zoomMapping } from "../../utils/utils";
 
 type CameraSettingsProps = {
   initialData: CameraConfig;
   updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
   zoomLevel?: number;
-  onZoomLevelChange?: (level: number) => void;
+  onZoomLevelChange?: (level: number | undefined) => void;
   updateCameraConfigError: null | Error;
 };
 
@@ -26,36 +26,31 @@ const CameraSettingFields = ({
   const cameraControllerSide = initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB";
   const { mutation, query } = useCameraZoom({ camera: cameraControllerSide });
   const zoomOptions = [1, 2, 4];
-  // const zoomTextOptions = [
-  //   { label: "near", value: 4 },
-  //   { label: "medium", value: 2 },
-  //   { label: "far", value: 1 },
-  // ];
-
+  const magnification = query?.data?.propMagnification?.value;
+  const apiZoom = reverseZoomMapping(magnification);
   const parsed = parseRTSPUrl(initialData?.propURI?.value);
 
   useEffect(() => {
     if (!query?.data) return;
-    const apiZoom = getZoomLevel(query.data);
     onZoomLevelChange?.(apiZoom);
   }, [query?.data, onZoomLevelChange]);
 
-  const getZoomLevel = (levelstring: string | undefined) => {
-    console.log(levelstring);
-    switch (levelstring) {
-      case "1x":
-        return 1;
+  // const getZoomLevel = (levelstring: string | undefined) => {
+  //   console.log(levelstring);
+  //   switch (levelstring) {
+  //     case "1x":
+  //       return 1;
 
-      case "2x":
-        return 2;
+  //     case "2x":
+  //       return 2;
 
-      case "4x":
-        return 4;
+  //     case "4x":
+  //       return 4;
 
-      default:
-        return 1;
-    }
-  };
+  //     default:
+  //       return 1;
+  //   }
+  // };
 
   const initialValues = useMemo<CameraSettingValues>(
     () => ({
@@ -65,7 +60,7 @@ const CameraSettingFields = ({
       password: parsed?.password ?? "",
       id: initialData?.id,
 
-      zoom: zoomLevel,
+      zoom: apiZoom,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [initialData?.id, initialData?.propURI?.value, zoomLevel]