- implement camera zoom controls and state management

src/features/cameras/components/CameraSettings/CameraPanel.tsx

@@ -2,6 +2,7 @@ import { Tabs, Tab, TabList, TabPanel } from "react-tabs";
 import { useEffect } from "react";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 import RegionSelector from "./RegionSelector";
+import CameraControls from "./cameraControls/CameraControls";
 
 type CameraPanelProps = {
   tabIndex: number;
@@ -54,10 +55,7 @@ const CameraPanel = ({ tabIndex, isResetAllModalOpen, handleClose, setIsResetMod
         />
       </TabPanel>
       <TabPanel>
-        <div className="p-4">
-          <h2 className="text-lg font-semibold mb-4">Camera Controls</h2>
-          <p>Controls for camera {cameraFeedID} will go here.</p>
-        </div>
+        <CameraControls cameraFeedID={cameraFeedID} />
       </TabPanel>
     </Tabs>
   );

src/features/cameras/components/CameraSettings/cameraControls/CameraControls.tsx

@@ -0,0 +1,42 @@
+import { useCameraFeedContext } from "../../../../../app/context/CameraFeedContext";
+import SliderComponent from "../../../../../ui/SliderComponent";
+import { useCameraZoom } from "../../../hooks/useCameraZoom";
+import { useDebouncedCallback } from "use-debounce";
+
+type CameraControlsProps = {
+  cameraFeedID: "A" | "B" | "C";
+};
+
+const CameraControls = ({ cameraFeedID }: CameraControlsProps) => {
+  const { state, dispatch } = useCameraFeedContext();
+  const { cameraZoomMutation } = useCameraZoom(cameraFeedID);
+
+  const zoomLevel = state.zoomLevel ? state.zoomLevel[cameraFeedID] : 1;
+  const debouncedMutation = useDebouncedCallback(async (value) => {
+    await cameraZoomMutation.mutateAsync({
+      cameraFeedID,
+      zoomLevel: value as number,
+    });
+  }, 1000);
+
+  const handleChange = (value: number | number[]) => {
+    const newZoom = value as number;
+    dispatch({
+      type: "SET_ZOOM_LEVEL",
+      payload: { cameraFeedID: cameraFeedID, zoomLevel: value as number },
+    });
+    debouncedMutation(newZoom);
+  };
+
+  return (
+    <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
+      <h2 className="text-2xl mb-4">Camera {cameraFeedID}</h2>
+      <div className="w-[70%] ">
+        <label htmlFor="zoom">Zoom {zoomLevel} </label>
+        <SliderComponent id="zoom" onChange={handleChange} value={zoomLevel} min={1} max={3} step={0.1} />
+      </div>
+    </div>
+  );
+};
+
+export default CameraControls;