camera zoom handling across components; unify zoom level type and improve state management

src/components/CameraOverview/SnapshotContainer.tsx

@@ -1,5 +1,5 @@
 import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot";
-import type { ZoomInOptions, ZoomLevel } from "../../types/types";
+import type { ZoomInOptions } from "../../types/types";
 import NavigationArrow from "../UI/NavigationArrow";
 import { useCameraZoom } from "../../hooks/useCameraZoom";
 import { useEffect } from "react";
@@ -7,8 +7,8 @@ import { useEffect } from "react";
 type SnapshotContainerProps = {
   side: string;
   settingsPage?: boolean;
-  zoomLevel?: ZoomLevel;
+  zoomLevel?: number;
-  onZoomLevelChange?: (level: ZoomLevel) => void;
+  onZoomLevelChange?: (level: number) => void;
 };
 
 export const SnapshotContainer = ({
@@ -18,50 +18,29 @@ export const SnapshotContainer = ({
   onZoomLevelChange,
 }: SnapshotContainerProps) => {
   const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
-  const { mutation } = useCameraZoom();
   const cameraControllerSide =
     side === "CameraA" ? "CameraControllerA" : "CameraControllerB";
+  const { mutation } = useCameraZoom({ camera: cameraControllerSide });
 
-  const handleZoomClick = (event: React.MouseEvent<HTMLCanvasElement>) => {
+  const handleZoomClick = () => {
-    const bounds = canvasRef.current?.getBoundingClientRect();
+    const baseLevel = zoomLevel ?? 1;
-    if (!bounds) return;
-    const left = bounds.left;
-    const top = bounds.top;
-    const x = event.pageX;
-    const y = event.pageY;
-    const cw = canvasRef.current?.clientWidth;
-    const ch = canvasRef.current?.clientHeight;
-    if (!cw || !ch) return;
-    const px = x / cw;
-    const py = y / ch;
-
-    const baseLevel = zoomLevel?.level ?? 1;
     const newLevel = baseLevel >= 8 ? 1 : baseLevel * 2;
 
-    if (onZoomLevelChange)
+    if (onZoomLevelChange) onZoomLevelChange(newLevel);
-      onZoomLevelChange({
-        left,
-        top,
-        x,
-        y,
-        px,
-        py,
-        level: newLevel,
-      });
 
-    if (!zoomLevel?.level) return;
+    if (!zoomLevel) return;
   };
 
   useEffect(() => {
-    if (zoomLevel?.level) {
+    if (zoomLevel) {
       const zoomInOptions: ZoomInOptions = {
         camera: cameraControllerSide,
-        multiplier: zoomLevel.level,
+        multiplier: zoomLevel,
       };
       mutation.mutate(zoomInOptions);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [zoomLevel?.level]);
+  }, [zoomLevel]);
 
   if (isError) return <p className="h-100">An error occurred</p>;
   if (isPending) return <p className="h-100">Loading...</p>;

src/components/CameraSettings/CameraSettingFields.tsx

@@ -4,20 +4,18 @@ import type {
   CameraSettingErrorValues,
   CameraSettingValues,
   ZoomInOptions,
-  ZoomLevel,
 } from "../../types/types";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 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 { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
 
 type CameraSettingsProps = {
   initialData: CameraConfig;
   updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
-  zoomLevel?: ZoomLevel;
+  zoomLevel?: number;
-  onZoomLevelChange?: (level: ZoomLevel) => void;
+  onZoomLevelChange?: (level: number) => void;
 };
 
 const CameraSettingFields = ({
@@ -27,9 +25,38 @@ const CameraSettingFields = ({
   onZoomLevelChange,
 }: CameraSettingsProps) => {
   const [showPwd, setShowPwd] = useState(false);
-  const { mutation } = useCameraZoom();
+  const cameraControllerSide =
-  const { mutation: blackboardMuation, query: blackboardQuery } =
+    initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB";
-    useCameraBlackboard();
+  const { mutation, query } = useCameraZoom({ camera: cameraControllerSide });
+  const zoomOptions = [1, 2, 4, 8];
+
+  useEffect(() => {
+    if (!query.data) return;
+    const apiZoom = getZoomLevel(query.data);
+    onZoomLevelChange?.(apiZoom);
+  }, [query.data, onZoomLevelChange]);
+
+  const getZoomLevel = (levelstring: string | undefined) => {
+    switch (levelstring) {
+      case "1x":
+        return 1;
+        break;
+      case "2x":
+        return 2;
+        break;
+      case "4x":
+        return 4;
+        break;
+      case "8x":
+        return 8;
+      default:
+        return 1;
+    }
+  };
+  const level = getZoomLevel(query.data);
+
+  console.log("level from get", level);
+  console.log("zoomLevel state", zoomLevel);
   const initialValues = useMemo<CameraSettingValues>(
     () => ({
       friendlyName: initialData?.id ?? "",
@@ -37,10 +64,10 @@ const CameraSettingFields = ({
       userName: "",
       password: "",
       id: initialData?.id,
-      //TODO: update zoomlevel to query data
+
-      zoom: zoomLevel?.level ? zoomLevel.level : 1,
+      zoom: zoomLevel,
     }),
-    [initialData?.id, initialData?.propURI?.value, zoomLevel?.level]
+    [initialData?.id, initialData?.propURI?.value, zoomLevel]
   );
 
   const validateValues = (values: CameraSettingValues) => {
@@ -56,12 +83,7 @@ const CameraSettingFields = ({
 
   const handleRadioButtonChange = async (levelNumber: number) => {
     if (!onZoomLevelChange || !zoomLevel) return;
-    onZoomLevelChange({
+    onZoomLevelChange(levelNumber);
-      ...zoomLevel,
-      level: zoomLevel?.level !== levelNumber ? levelNumber : zoomLevel?.level,
-    });
-    const cameraControllerSide =
-      initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB";
 
     const zoomInOptions: ZoomInOptions = {
       camera: cameraControllerSide,
@@ -69,28 +91,16 @@ const CameraSettingFields = ({
     };
 
     mutation.mutate(zoomInOptions);
-
-    if (!blackboardQuery.data.cameraZoom) {
-      blackboardMuation.mutate({
-        operation: "INSERT",
-        path: "cameraZoom",
-        value: zoomInOptions,
-      });
-    } else {
-      blackboardMuation.mutate({
-        operation: "APPEND",
-        path: "cameraZoom",
-        value: zoomInOptions,
-      });
-    }
   };
-
+  const selectedZoom = zoomLevel ?? 1;
+  console.log(selectedZoom);
   return (
     <Formik
       initialValues={initialValues}
       onSubmit={handleSubmit}
       validate={validateValues}
       validateOnChange={false}
+      enableReinitialize
     >
       {({ errors, touched }) => (
         <Form className="flex flex-col space-y-6 p-2">
@@ -169,78 +179,28 @@ const CameraSettingFields = ({
             </div>
             <div className="my-3">
               <CardHeader title="Zoom settings" />
-              <div className="mx-auto flex gap-10 items-center ">
+              <div className="mx-auto flex gap-10 items-center">
-                <div>
+                {zoomOptions.map((zoom) => (
-                  <Field
+                  <div key={zoom}>
-                    type="radio"
+                    <Field
-                    name="zoom"
+                      type="radio"
-                    value={zoomLevel?.level ? zoomLevel.level.toString() : "1"}
+                      name="zoom"
-                    checked={zoomLevel?.level === 1}
+                      value={zoom.toString()}
-                    className="hidden peer"
+                      checked={selectedZoom === zoom}
-                    id="zoom1"
+                      className="hidden peer"
-                    onChange={() => handleRadioButtonChange(1)}
+                      id={`zoom${zoom}`}
-                  />
+                      onChange={() => handleRadioButtonChange(zoom)}
-                  <label
+                    />
-                    htmlFor="zoom1"
+                    <label
-                    className="px-6 py-2 rounded-md border border-gray-300 peer-checked:border-2 peer-checked:border-blue-900  peer-checked:text-blue-600 peer-checked:bg-gray-100"
+                      htmlFor={`zoom${zoom}`}
-                  >
+                      className="px-6 py-2 rounded-md border border-gray-300 
-                    x1
+                   peer-checked:border-2 peer-checked:border-blue-900  
-                  </label>
+                   peer-checked:text-blue-600 peer-checked:bg-gray-100"
-                </div>
+                    >
-
+                      x{zoom}
-                <div>
+                    </label>
-                  <Field
+                  </div>
-                    type="radio"
+                ))}
-                    name="zoom"
-                    value={zoomLevel?.level ? zoomLevel.level.toString() : "2"}
-                    checked={zoomLevel?.level === 2}
-                    className="hidden peer"
-                    id="zoom2"
-                    onChange={() => handleRadioButtonChange(2)}
-                  />
-                  <label
-                    htmlFor="zoom2"
-                    className="px-6 py-2 rounded-md border border-gray-300 peer-checked:border-2 peer-checked:border-blue-900  peer-checked:text-blue-600 peer-checked:bg-gray-100"
-                  >
-                    x2
-                  </label>
-                </div>
-
-                <div>
-                  <Field
-                    type="radio"
-                    name="zoom"
-                    value={zoomLevel?.level ? zoomLevel.level.toString() : "4"}
-                    checked={zoomLevel?.level === 4}
-                    className="hidden peer"
-                    id="zoom4"
-                    onChange={() => handleRadioButtonChange(4)}
-                  />
-                  <label
-                    htmlFor="zoom4"
-                    className="px-6 py-2 rounded-md border border-gray-300 peer-checked:border-2 peer-checked:border-blue-900  peer-checked:text-blue-600 peer-checked:bg-gray-100"
-                  >
-                    x4
-                  </label>
-                </div>
-
-                <div>
-                  <Field
-                    type="radio"
-                    name="zoom"
-                    value={zoomLevel?.level ? zoomLevel.level.toString() : "8"}
-                    checked={zoomLevel?.level === 8}
-                    className="hidden peer"
-                    id="zoom8"
-                    onChange={() => handleRadioButtonChange(8)}
-                  />
-                  <label
-                    htmlFor="zoom8"
-                    className="px-6 py-2 rounded-md border border-gray-300 peer-checked:border-2 peer-checked:border-blue-900  peer-checked:text-blue-600 peer-checked:bg-gray-100"
-                  >
-                    x8
-                  </label>
-                </div>
               </div>
             </div>
             <button

src/components/CameraSettings/CameraSettings.tsx

@@ -1,5 +1,5 @@
 import { useFetchCameraConfig } from "../../hooks/useCameraConfig";
-import type { ZoomLevel } from "../../types/types";
+
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
 import CameraSettingFields from "./CameraSettingFields";
@@ -13,8 +13,8 @@ const CameraSettings = ({
 }: {
   title: string;
   side: string;
-  zoomLevel?: ZoomLevel;
+  zoomLevel?: number;
-  onZoomLevelChange?: (level: ZoomLevel) => void;
+  onZoomLevelChange?: (level: number) => void;
 }) => {
   const { data, isError, isPending, updateCameraConfig } =
     useFetchCameraConfig(side);

src/components/FrontCameraSettings/OverviewVideoContainer.tsx

@@ -3,7 +3,6 @@ import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
 import Card from "../UI/Card";
 import { useNavigate, useLocation } from "react-router";
 import { useSwipeable } from "react-swipeable";
-import type { ZoomLevel } from "../../types/types";
 
 const OverviewVideoContainer = ({
   side,
@@ -14,8 +13,8 @@ const OverviewVideoContainer = ({
   title: string;
   side: string;
   settingsPage?: boolean;
-  zoomLevel?: ZoomLevel;
+  zoomLevel?: number;
-  onZoomLevelChange?: (level: ZoomLevel) => void;
+  onZoomLevelChange?: (level: number) => void;
 }) => {
   const navigate = useNavigate();
   const location = useLocation();

src/hooks/useCameraZoom.ts

@@ -1,6 +1,10 @@
-import { useMutation } from "@tanstack/react-query";
+import {
+  useMutation,
+  useQuery,
+  type QueryFunctionContext,
+} from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
-import type { ZoomInOptions } from "../types/types";
+import type { zoomConfig, ZoomInOptions } from "../types/types";
 
 async function zoomIn(options: ZoomInOptions) {
   const response = await fetch(
@@ -9,14 +13,32 @@ async function zoomIn(options: ZoomInOptions) {
   if (!response.ok) {
     throw new Error("Cannot reach camera zoom endpoint");
   }
+  const data = await response.json();
+  console.log(data);
   return;
 }
 
-export const useCameraZoom = () => {
+async function fetchZoomInConfig({
+  queryKey,
+}: QueryFunctionContext<[string, zoomConfig]>) {
+  const [, { camera }] = queryKey;
+  console.log(camera);
+  const response = await fetch(`${CAM_BASE}/Ip${camera}-inspect`);
+  if (!response.ok) {
+    throw new Error("Cannot get camera zoom settings");
+  }
+  return response.text();
+}
+//change to string
+export const useCameraZoom = (options: zoomConfig) => {
   const mutation = useMutation({
     mutationKey: ["zoomIn"],
     mutationFn: (options: ZoomInOptions) => zoomIn(options),
   });
 
-  return { mutation };
+  const query = useQuery({
+    queryKey: ["fetchZoomInConfig", options],
+    queryFn: fetchZoomInConfig,
+  });
+  return { mutation, query };
 };

src/pages/FrontCamera.tsx

@@ -2,18 +2,9 @@ import { useState } from "react";
 import CameraSettings from "../components/CameraSettings/CameraSettings";
 import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVideoContainer";
 import { Toaster } from "sonner";
-import type { ZoomLevel } from "../types/types";
 
 const FrontCamera = () => {
-  const [zoomLevel, setZoomLevel] = useState<ZoomLevel>({
+  const [zoomLevel, setZoomLevel] = useState<number>(1);
-    left: 0,
-    top: 0,
-    x: 0,
-    y: 0,
-    px: 0,
-    py: 0,
-    level: 1,
-  });
   return (
     <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
       <OverviewVideoContainer

src/types/types.ts

@@ -266,3 +266,7 @@ export type ZoomInOptions = {
   camera: string;
   multiplier: number;
 };
+
+export type zoomConfig = {
+  camera: string;
+};