Add zoom mode functionality and refactor video feed hooks

- Implemented zoom mode in RegionSelector for digital zooming.
- Updated VideoFeedGridPainter to handle zoom interactions.
- Refactored useGetVideoFeed to support target detection and video feed queries based on mode.
- Enhanced useCreateVideoSnapshot to manage snapshots during zoom mode.

src/features/cameras/components/CameraGrid.tsx

@@ -4,22 +4,33 @@ import VideoFeedGridPainter from "./Video/VideoFeedGridPainter";
 import CameraSettings from "./CameraSettings/CameraSettings";
 
 import PlatePatch from "./PlatePatch/SightingPatch";
+import ResetAllModal from "./CameraSettings/resetAllModal/ResetAllModal";
 
 const CameraGrid = () => {
   const [tabIndex, setTabIndex] = useState(0);
+  const [isResetModalOpen, setIsResetModalOpen] = useState(false);
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-3 md:gap-4 p-4 h-screen max-h-screen">
-      <div className="col-span-2 flex flex-col gap-4">
-        <div className="">
-          <VideoFeedGridPainter />
-        </div>
-        <div className="overflow-hidden">
-          <PlatePatch />
+    <>
+      <div className="grid grid-cols-1 md:grid-cols-3 md:gap-4 p-4 h-screen max-h-screen">
+        <div className="col-span-2 flex flex-col gap-4">
+          <div className="">
+            <VideoFeedGridPainter />
+          </div>
+          <div className="overflow-hidden">
+            <PlatePatch />
+          </div>
         </div>
+        <CameraSettings
+          tabIndex={tabIndex}
+          setTabIndex={setTabIndex}
+          isResetAllModalOpen={isResetModalOpen}
+          handleClose={() => setIsResetModalOpen(false)}
+          setIsResetModalOpen={setIsResetModalOpen}
+        />
       </div>
-      <CameraSettings tabIndex={tabIndex} setTabIndex={setTabIndex} />
-    </div>
+      <ResetAllModal isResetAllModalOpen={isResetModalOpen} handleClose={() => setIsResetModalOpen(false)} />
+    </>
   );
 };
 

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

@@ -5,9 +5,12 @@ import RegionSelector from "./RegionSelector";
 
 type CameraPanelProps = {
   tabIndex: number;
+  isResetAllModalOpen: boolean;
+  handleClose: () => void;
+  setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const CameraPanel = ({ tabIndex }: CameraPanelProps) => {
+const CameraPanel = ({ tabIndex, isResetAllModalOpen, handleClose, setIsResetModalOpen }: CameraPanelProps) => {
   const { state, dispatch } = useCameraFeedContext();
   const cameraFeedID = state.cameraFeedID;
   const regions = state.regionsByCamera[cameraFeedID];
@@ -45,6 +48,9 @@ const CameraPanel = ({ tabIndex }: CameraPanelProps) => {
           selectedRegionIndex={selectedRegionIndex}
           mode={mode}
           cameraFeedID={cameraFeedID}
+          isResetAllModalOpen={isResetAllModalOpen}
+          handleClose={handleClose}
+          setIsResetModalOpen={setIsResetModalOpen}
         />
       </TabPanel>
       <TabPanel>

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

@@ -6,9 +6,18 @@ import CameraPanel from "./CameraPanel";
 type CameraSettingsProps = {
   setTabIndex: (tabIndex: number) => void;
   tabIndex: number;
+  isResetAllModalOpen: boolean;
+  handleClose: () => void;
+  setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => {
+const CameraSettings = ({
+  tabIndex,
+  setTabIndex,
+  isResetAllModalOpen,
+  handleClose,
+  setIsResetModalOpen,
+}: CameraSettingsProps) => {
   return (
     <Card className="p-4 w-full h-full max-h-screen">
       <Tabs
@@ -22,13 +31,28 @@ const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => {
           <Tab>Camera C</Tab>
         </TabList>
         <TabPanel>
-          <CameraPanel tabIndex={tabIndex} />
+          <CameraPanel
+            tabIndex={tabIndex}
+            isResetAllModalOpen={isResetAllModalOpen}
+            handleClose={handleClose}
+            setIsResetModalOpen={setIsResetModalOpen}
+          />
         </TabPanel>
         <TabPanel>
-          <CameraPanel tabIndex={tabIndex} />
+          <CameraPanel
+            tabIndex={tabIndex}
+            isResetAllModalOpen={isResetAllModalOpen}
+            handleClose={handleClose}
+            setIsResetModalOpen={setIsResetModalOpen}
+          />
         </TabPanel>
         <TabPanel>
-          <CameraPanel tabIndex={tabIndex} />
+          <CameraPanel
+            tabIndex={tabIndex}
+            isResetAllModalOpen={isResetAllModalOpen}
+            handleClose={handleClose}
+            setIsResetModalOpen={setIsResetModalOpen}
+          />
         </TabPanel>
       </Tabs>
     </Card>

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

@@ -10,9 +10,20 @@ type RegionSelectorProps = {
   selectedRegionIndex: number;
   mode: string;
   cameraFeedID: "A" | "B" | "C";
+  isResetAllModalOpen: boolean;
+  handleClose: () => void;
+  setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: RegionSelectorProps) => {
+const RegionSelector = ({
+  regions,
+  selectedRegionIndex,
+  mode,
+  cameraFeedID,
+  isResetAllModalOpen,
+
+  setIsResetModalOpen,
+}: RegionSelectorProps) => {
   const { colourMutation } = useColourDectection();
   const { state, dispatch } = useCameraFeedContext();
   const { blackboardMutation } = useBlackBoard();
@@ -61,8 +72,9 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
     });
   };
 
-  const handleResetAll = () => {
-    dispatch({ type: "RESET_CAMERA_FEED" });
+  const openResetModal = () => {
+    if (isResetAllModalOpen) return;
+    setIsResetModalOpen(true);
   };
 
   const handleSaveclick = () => {
@@ -162,6 +174,27 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
               />
               <span className="text-xl">Erase mode</span>
             </label>
+            <label
+              htmlFor="zoomMode"
+              className={`p-4 border rounded-lg  mb-2
+            ${mode === "zoom" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+            >
+              <input
+                id="zoomMode"
+                type="radio"
+                onChange={handleChange}
+                checked={mode === "zoom"}
+                value="zoom"
+                className="sr-only"
+              />
+              <div className="flex flex-col space-y-3">
+                <span className="text-xl">Enlarge image</span>
+                {mode === "zoom" && (
+                  <small className={`text-gray-400 italic`}>Use mouse to digitally zoom in and out</small>
+                )}
+              </div>
+            </label>
           </div>
         </div>
 
@@ -228,7 +261,7 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
             Reset Region
           </button>
           <button
-            onClick={handleResetAll}
+            onClick={openResetModal}
             className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-full hover:bg-red-700 hover:cursor-pointer"
           >
             Reset All

src/features/cameras/components/CameraSettings/resetAllModal/ResetAllModal.tsx

@@ -0,0 +1,55 @@
+import { toast } from "sonner";
+import { useCameraFeedContext } from "../../../../../app/context/CameraFeedContext";
+import { useBlackBoard } from "../../../../../hooks/useBlackBoard";
+import ModalComponent from "../../../../../ui/ModalComponent";
+
+type ResetAllModalProps = {
+  isResetAllModalOpen: boolean;
+  handleClose: () => void;
+};
+
+const ResetAllModal = ({ isResetAllModalOpen, handleClose }: ResetAllModalProps) => {
+  const { state, dispatch } = useCameraFeedContext();
+  const { blackboardMutation } = useBlackBoard();
+
+  const handleResetAll = async () => {
+    dispatch({ type: "RESET_CAMERA_FEED" });
+
+    handleClose();
+    const result = await blackboardMutation.mutateAsync({
+      operation: "INSERT",
+      path: `cameraFeed`,
+      value: state,
+    });
+    //  Need endpoint to reset all target detection painted cells
+    if (result?.reason === "OK") {
+      toast.success("All camera settings have been reset to default values.");
+    }
+  };
+  return (
+    <ModalComponent isModalOpen={isResetAllModalOpen} close={handleClose}>
+      <div>
+        <h2 className="text-xl font-bold mb-4">Reset All Camera Settings</h2>
+        <p className="mb-4">
+          Are you sure you want to reset all camera settings to their default values? This action cannot be undone.
+        </p>
+        <div className="flex justify-end gap-4">
+          <button
+            onClick={handleResetAll}
+            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 hover:cursor-pointer"
+          >
+            Reset
+          </button>
+          <button
+            onClick={handleClose}
+            className="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 hover:cursor-pointer  "
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </ModalComponent>
+  );
+};
+
+export default ResetAllModal;

src/features/cameras/components/Video/VideoFeedGridPainter.tsx

@@ -23,6 +23,10 @@ const VideoFeedGridPainter = () => {
   const { latestBitmapRef, isloading } = useCreateVideoSnapshot();
   const [stageSize, setStageSize] = useState({ width: BACKEND_WIDTH, height: BACKEND_HEIGHT });
   const isDrawingRef = useRef(false);
+  const [scale, setScale] = useState(1);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const stageRef = useRef<any>(null);
 
   const currentScale = stageSize.width / BACKEND_WIDTH;
   const size = BACKEND_CELL_SIZE * currentScale;
@@ -71,14 +75,14 @@ const VideoFeedGridPainter = () => {
   };
 
   const handleStageMouseDown = (e: KonvaEventObject<MouseEvent>) => {
-    if (!regions[selectedRegionIndex]) return;
+    if (!regions[selectedRegionIndex] || mode === "zoom") return;
     isDrawingRef.current = true;
     const pos = e.target.getStage()?.getPointerPosition();
     if (pos) paintCell(pos.x, pos.y);
   };
 
   const handleStageMouseMove = (e: KonvaEventObject<MouseEvent>) => {
-    if (!isDrawingRef.current) return;
+    if (!isDrawingRef.current || mode === "zoom") return;
     if (!regions[selectedRegionIndex]) return;
     const pos = e.target.getStage()?.getPointerPosition();
     if (pos) paintCell(pos.x, pos.y);
@@ -88,12 +92,43 @@ const VideoFeedGridPainter = () => {
     isDrawingRef.current = false;
   };
 
+  const handleMouseEnter = () => {
+    if (mode !== "zoom") return;
+    setScale(2);
+  };
+  const handleMouseLeave = () => {
+    document.body.style.cursor = "default";
+    setScale(1);
+    setPosition({ x: 0, y: 0 });
+  };
+  const handleMouseMove = (e: KonvaEventObject<MouseEvent>) => {
+    if (scale === 1) return;
+
+    const stage = e.target.getStage();
+    if (!stage) return;
+
+    const pointerPosition = stage.getPointerPosition();
+    if (!pointerPosition) return;
+
+    const newX = stageSize.width / 2 - pointerPosition.x * scale;
+    const newY = stageSize.height / 2 - pointerPosition.y * scale;
+
+    const maxX = 0;
+    const minX = stageSize.width - stageSize.width * scale;
+    const maxY = 0;
+    const minY = stageSize.height - stageSize.height * scale;
+
+    setPosition({
+      x: Math.max(minX, Math.min(maxX, newX)),
+      y: Math.max(minY, Math.min(maxY, newY)),
+    });
+  };
+
   useEffect(() => {
     const handleResize = () => {
       const width = window.innerWidth;
 
       const aspectRatio = BACKEND_WIDTH / BACKEND_HEIGHT;
-      console.log(window.innerWidth);
       if (width < 768) {
         const newWidth = width * 0.8;
         const newHeight = newWidth / aspectRatio;
@@ -113,48 +148,57 @@ const VideoFeedGridPainter = () => {
 
   if (image === null || isloading) return <span className="text-slate-500">Loading Video feed…</span>;
   return (
-    <div
-      className={`w-full md:row-span-3 md:col-span-3 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
-        mode === "eraser" ? "hover:cursor-pointer" : ""
-      }`}
-    >
+    <div>
       <Stage
+        ref={stageRef}
         width={stageSize.width}
         height={stageSize.height}
         onMouseDown={handleStageMouseDown}
         onMouseMove={handleStageMouseMove}
         onMouseUp={handleStageMouseUp}
         onMouseLeave={handleStageMouseUp}
-        className="max-w-[55%]"
+        className={`max-w-[55%] md:row-span-3 md:col-span-3 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
+          mode === "eraser" ? "hover:cursor-pointer" : ""
+        }`}
       >
-        <Layer>
+        <Layer
+          scaleX={scale}
+          scaleY={scale}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          onMouseMove={handleMouseMove}
+          x={position.x}
+          y={position.y}
+        >
           <Image image={image} width={stageSize.width} height={stageSize.height} classname={"rounded-lg"} />
         </Layer>
 
         <Layer ref={paintLayerRef} opacity={0.6}>
-          <Shape
-            sceneFunc={(ctx, shape) => {
-              const cells = paintedCells;
-              if (!cells || cells.size === 0 || !paintLayerRef.current) return;
-              cells?.forEach((cell, key) => {
-                const [rowStr, colStr] = key.split("-");
-                const row = Number(rowStr);
-                const col = Number(colStr);
+          {mode === "painter" || mode === "eraser" ? (
+            <Shape
+              sceneFunc={(ctx, shape) => {
+                const cells = paintedCells;
+                if (!cells || cells.size === 0 || !paintLayerRef.current) return;
+                cells?.forEach((cell, key) => {
+                  const [rowStr, colStr] = key.split("-");
+                  const row = Number(rowStr);
+                  const col = Number(colStr);
 
-                const x = col * (size + gap);
-                const y = row * (size + gap);
+                  const x = col * (size + gap);
+                  const y = row * (size + gap);
 
-                ctx.beginPath();
-                ctx.rect(x, y, size, size);
-                ctx.fillStyle = cell.colour;
-                ctx.fill();
-              });
+                  ctx.beginPath();
+                  ctx.rect(x, y, size, size);
+                  ctx.fillStyle = cell.colour;
+                  ctx.fill();
+                });
 
-              ctx.fillStrokeShape(shape);
-            }}
-            width={stageSize.width}
-            height={stageSize.height}
-          />
+                ctx.fillStrokeShape(shape);
+              }}
+              width={stageSize.width}
+              height={stageSize.height}
+            />
+          ) : null}
         </Layer>
       </Stage>
     </div>

src/features/cameras/hooks/useGetVideoFeed.ts

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { CAMBASE } from "../../../utils/config";
 
-const getfeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
+const targetDectionFeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
   const response = await fetch(`${CAMBASE}/TargetDetectionColour${cameraFeedID}-preview`, {
     signal: AbortSignal.timeout(300000),
     cache: "no-store",
@@ -12,12 +12,31 @@ const getfeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
   return response.blob();
 };
 
-export const useGetVideoFeed = (cameraFeedID: "A" | "B" | "C" | null) => {
-  const videoQuery = useQuery({
+const getVideoFeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
+  const response = await fetch(`${CAMBASE}/Camera${cameraFeedID}-preview`, {
+    signal: AbortSignal.timeout(300000),
+    cache: "no-store",
+  });
+  if (!response.ok) {
+    throw new Error(`Cannot reach endpoint (${response.status})`);
+  }
+  return response.blob();
+};
+
+export const useGetVideoFeed = (cameraFeedID: "A" | "B" | "C" | null, mode: string) => {
+  const targetDetectionQuery = useQuery({
     queryKey: ["getfeed", cameraFeedID],
-    queryFn: () => getfeed(cameraFeedID),
+    queryFn: () => targetDectionFeed(cameraFeedID),
     refetchInterval: 500,
+    enabled: mode !== "zoom",
   });
 
-  return { videoQuery };
+  const videoFeedQuery = useQuery({
+    queryKey: ["videoQuery", cameraFeedID, mode],
+    queryFn: () => getVideoFeed(cameraFeedID),
+    refetchInterval: 500,
+    enabled: mode === "zoom",
+  });
+
+  return { targetDetectionQuery, videoFeedQuery };
 };

src/features/cameras/hooks/useGetvideoSnapshots.ts

@@ -5,11 +5,19 @@ import { useCameraFeedContext } from "../../../app/context/CameraFeedContext";
 export const useCreateVideoSnapshot = () => {
   const { state } = useCameraFeedContext();
   const cameraFeedID = state?.cameraFeedID;
+  const mode = state.modeByCamera[cameraFeedID];
   const latestBitmapRef = useRef<ImageBitmap | null>(null);
-  const { videoQuery } = useGetVideoFeed(cameraFeedID);
+  const { targetDetectionQuery, videoFeedQuery } = useGetVideoFeed(cameraFeedID, mode);
 
-  const snapShot = videoQuery?.data;
-  const isloading = videoQuery.isPending;
+  let snapShot = targetDetectionQuery?.data;
+  const isloading = targetDetectionQuery.isPending;
+
+  const videoSnapShot = videoFeedQuery?.data;
+  const isVideoLoading = videoFeedQuery.isPending;
+
+  if (isVideoLoading === false && videoSnapShot && mode === "zoom") {
+    snapShot = videoSnapShot;
+  }
 
   useEffect(() => {
     async function createBitmap() {

src/features/output/components/ChannelCard.tsx

@@ -23,7 +23,7 @@ const ChannelCard = () => {
         type="submit"
         className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
       >
-        {"Save Changes"}
+        {"Save Settings"}
       </button>
     </Card>
   );

src/features/output/components/OSDFields.tsx

@@ -62,7 +62,7 @@ const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
             onClick={() => handleSubmit(values)}
             className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
           >
-            Submit
+            Save Settings
           </button>
         </div>
       </div>

src/index.css

@@ -5,3 +5,33 @@ body {
   color: #fff;
   font-family: Arial, Helvetica, sans-serif;
 }
+
+/* Modal animations */
+.ReactModal__Overlay {
+  opacity: 0;
+  transition: opacity 200ms ease-in-out;
+}
+
+.ReactModal__Overlay--after-open {
+  opacity: 1;
+}
+
+.ReactModal__Overlay--before-close {
+  opacity: 0;
+}
+
+.ReactModal__Content {
+  transform: scale(0.9) translateY(-20px);
+  opacity: 0;
+  transition: all 200ms ease-in-out;
+}
+
+.ReactModal__Content--after-open {
+  transform: scale(1) translateY(0);
+  opacity: 1;
+}
+
+.ReactModal__Content--before-close {
+  transform: scale(0.9) translateY(-20px);
+  opacity: 0;
+}

src/ui/ModalComponent.tsx

@@ -13,6 +13,15 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) =
       onRequestClose={close}
       className="bg-[#1e2a38] p-6 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[40%] z-100 overflow-y-auto border border-gray-600 max-h-[90%]"
       overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
+      closeTimeoutMS={200}
+      style={{
+        overlay: {
+          transition: "opacity 200ms ease-in-out",
+        },
+        content: {
+          transition: "all 200ms ease-in-out",
+        },
+      }}
     >
       {children}
     </Modal>