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/app/providers/CameraFeedProvider.tsx

@@ -1,9 +1,33 @@
-import { useReducer, type ReactNode } from "react";
+import { useEffect, useReducer, type ReactNode } from "react";
 import { CameraFeedContext } from "../context/CameraFeedContext";
 import { initialState, reducer } from "../reducers/cameraFeedReducer";
+import { useBlackBoard } from "../../hooks/useBlackBoard";
+import type { CameraFeedState } from "../../types/types";
 
 export const CameraFeedProvider = ({ children }: { children: ReactNode }) => {
+  const { blackboardMutation } = useBlackBoard();
   const [state, dispatch] = useReducer(reducer, initialState);
 
+  useEffect(() => {
+    const fetchBlackBoardData = async () => {
+      const result = await blackboardMutation.mutateAsync({
+        operation: "VIEW",
+        path: "cameraFeed",
+      });
+      if (!result?.result || typeof result.result === "string") return;
+      const cameraFeedData: CameraFeedState = result.result;
+      const recontructedState = {
+        ...cameraFeedData,
+        paintedCells: {
+          A: new Map(cameraFeedData.paintedCells.A),
+          B: new Map(cameraFeedData.paintedCells.B),
+          C: new Map(cameraFeedData.paintedCells.C),
+        },
+      };
+      dispatch({ type: "SET_CAMERA_FEED_DATA", cameraState: recontructedState });
+    };
+    fetchBlackBoardData();
+  }, []);
+
   return <CameraFeedContext.Provider value={{ state, dispatch }}>{children}</CameraFeedContext.Provider>;
 };

src/app/reducers/cameraFeedReducer.ts

@@ -98,6 +98,14 @@ export function reducer(state: CameraFeedState, action: CameraFeedAction) {
           [state.cameraFeedID]: new Map<string, PaintedCell>(),
         },
       };
+    case "SET_CAMERA_FEED_DATA":
+      return {
+        ...action.cameraState,
+      };
+    case "RESET_CAMERA_FEED":
+      return {
+        ...initialState,
+      };
 
     default:
       return state;

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 gap-4 p-4 h-screen max-h-screen overflow-hidden">
+    <>
+      <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="shrink-0">
+          <div className="">
             <VideoFeedGridPainter />
           </div>
-        <div className="flex-1 overflow-hidden">
+          <div className="overflow-hidden">
             <PlatePatch />
           </div>
         </div>
-      <CameraSettings tabIndex={tabIndex} setTabIndex={setTabIndex} />
+        <CameraSettings
+          tabIndex={tabIndex}
+          setTabIndex={setTabIndex}
+          isResetAllModalOpen={isResetModalOpen}
+          handleClose={() => setIsResetModalOpen(false)}
+          setIsResetModalOpen={setIsResetModalOpen}
+        />
       </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];
@@ -39,13 +42,15 @@ const CameraPanel = ({ tabIndex }: CameraPanelProps) => {
         <Tab>Target Detection</Tab>
         <Tab>Camera Controls</Tab>
       </TabList>
-
       <TabPanel>
         <RegionSelector
           regions={regions}
           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

@@ -2,17 +2,31 @@ import type { ColourData, PaintedCell, Region } from "../../../../types/types";
 import ColourPicker from "./ColourPicker";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 import { useColourDectection } from "../../hooks/useColourDetection";
+import { useBlackBoard } from "../../../../hooks/useBlackBoard";
+import { toast } from "sonner";
 
 type RegionSelectorProps = {
   regions: Region[];
   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();
   const paintedCells = state.paintedCells[cameraFeedID];
 
   const handleChange = (e: { target: { value: string } }) => {
@@ -58,6 +72,11 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
     });
   };
 
+  const openResetModal = () => {
+    if (isResetAllModalOpen) return;
+    setIsResetModalOpen(true);
+  };
+
   const handleSaveclick = () => {
     const regions: ColourData[] = [];
     const test = Array.from(paintedCells.entries());
@@ -103,12 +122,24 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
     }
 
     colourMutation.mutate({ cameraFeedID, regions: regions });
+
+    // Convert Map to plain object for blackboard
+    const serializableState = {
+      ...state,
+      paintedCells: {
+        A: Array.from(state.paintedCells.A.entries()),
+        B: Array.from(state.paintedCells.B.entries()),
+        C: Array.from(state.paintedCells.C.entries()),
+      },
+    };
+    blackboardMutation.mutate({ operation: "INSERT", path: `cameraFeed`, value: serializableState });
+    toast.success("Region data saved successfully!");
   };
 
   return (
     <div className="flex flex-col gap-4 max-h-[50%]">
-      <div className="flex flex-row gap-3">
-        <div className="p-2 border border-gray-600 rounded-lg flex flex-col h-50 w-full">
+      <div className="flex flex-col md:flex-row gap-3">
+        <div className="p-2 border border-gray-600 rounded-lg flex flex-col h-[10%] w-full">
           <h2 className="text-2xl mb-2">Tools</h2>
           <div className="flex flex-col">
             <label
@@ -143,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>
 
@@ -208,6 +260,12 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
           >
             Reset Region
           </button>
+          <button
+            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
+          </button>
         </div>
       </div>
     </div>

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/PlatePatch/SightingEntryTable.tsx

@@ -12,7 +12,7 @@ const SightingEntryTable = () => {
 
   if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
   return (
-    <div className="border border-gray-600 rounded-lg overflow-hidden m-2">
+    <div className="border border-gray-600 rounded-lg  m-2">
       <div className="overflow-y-auto ">
         <table className="w-full text-left text-sm">
           <thead className="bg-gray-700/50 text-gray-200 sticky top-0">

src/features/cameras/components/PlatePatch/SightingPatch.tsx

@@ -6,9 +6,9 @@ import SightingExitTable from "./SightingExitTable";
 
 const PlatePatch = () => {
   return (
-    <Card className="p-4 w-full max-h-[600px] overflow-hidden flex flex-col">
+    <Card className="p-4 w-full max-h-[600px] flex flex-col md:w-[95%]">
       <CardHeader title="Entry / Exit" />
-      <Tabs defaultIndex={1} className="flex-1 overflow-hidden flex flex-col">
+      <Tabs defaultIndex={1} className="flex-1 flex flex-col">
         <TabList>
           <Tab>Entry Sightings</Tab>
           <Tab>Exit Sightings</Tab>

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

@@ -16,13 +16,17 @@ const gap = 0;
 const VideoFeedGridPainter = () => {
   const { state } = useCameraFeedContext();
   const cameraFeedID = state.cameraFeedID;
-  const paintedCells = state.paintedCells[cameraFeedID];
+  const paintedCells = state?.paintedCells?.[cameraFeedID];
   const regions = state.regionsByCamera[cameraFeedID];
   const selectedRegionIndex = state.selectedRegionIndex;
   const mode = state.modeByCamera[cameraFeedID];
   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,14 +92,52 @@ 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;
+      if (width < 768) {
+        const newWidth = width * 0.8;
+        const newHeight = newWidth / aspectRatio;
+        setStageSize({ width: newWidth, height: newHeight });
+      } else {
         const newWidth = width * 0.6;
         const newHeight = newWidth / aspectRatio;
         setStageSize({ width: newWidth, height: newHeight });
+      }
     };
 
     handleResize();
@@ -106,29 +148,38 @@ 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
+          scaleX={scale}
+          scaleY={scale}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          onMouseMove={handleMouseMove}
+          x={position.x}
+          y={position.y}
         >
-        <Layer>
           <Image image={image} width={stageSize.width} height={stageSize.height} classname={"rounded-lg"} />
         </Layer>
 
         <Layer ref={paintLayerRef} opacity={0.6}>
+          {mode === "painter" || mode === "eraser" ? (
             <Shape
               sceneFunc={(ctx, shape) => {
                 const cells = paintedCells;
-              cells.forEach((cell, key) => {
+                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);
@@ -147,6 +198,7 @@ const VideoFeedGridPainter = () => {
               width={stageSize.width}
               height={stageSize.height}
             />
+          ) : null}
         </Layer>
       </Stage>
     </div>

src/features/cameras/hooks/useGetVideoFeed.ts

@@ -1,8 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
 import { CAMBASE } from "../../../utils/config";
 
-const getfeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
-  const response = await fetch(`${CAMBASE}TargetDetectionColour${cameraFeedID}-preview`, {
+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

@@ -2,6 +2,7 @@ import { Field, useFormikContext } from "formik";
 import { useOSDConfig } from "../hooks/useOSDConfig";
 import OSDFieldToggle from "./OSDFieldToggle";
 import type { OSDConfigFields } from "../../../types/types";
+import { toast } from "sonner";
 
 type OSDFieldsProps = {
   isOSDLoading: boolean;
@@ -15,7 +16,9 @@ const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
 
   const handleSubmit = async (values: OSDConfigFields) => {
     const result = await osdMutation.mutateAsync(values);
-    console.log(result);
+    if (result?.id) {
+      toast.success("OSD Config updated successfully");
+    }
   };
 
   if (isOSDLoading) {
@@ -59,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/features/output/components/OutputForms.tsx

@@ -24,7 +24,7 @@ const OutputForms = () => {
   const includeCameraName = osdQuery?.data?.propIncludeCameraName?.value.toLowerCase() === "true";
   const overlayPosition = osdQuery?.data?.propOverlayPosition?.value;
   const OSDTimestampFormat = osdQuery?.data?.propTimestampFormat?.value;
-  console.log(includeVRM);
+
   const format = dispatcherQuery?.data?.propFormat?.value;
   const { optionalConstantsQuery, optionalConstantsMutation } = useOptionalConstants(format?.toLowerCase());
   const FFID = optionalConstantsQuery?.data?.propFeedIdentifier?.value;

src/features/output/hooks/useOSDConfig.ts

@@ -26,7 +26,6 @@ const postOSDConfig = async (data: OSDConfigFields) => {
     fields: fields,
   };
 
-  console.log(osdConfigPayload);
   const response = await fetch(`${CAMBASE}/api/update-config`, {
     method: "POST",
     body: JSON.stringify(osdConfigPayload),

src/hooks/useBlackBoard.ts

@@ -0,0 +1,35 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { CAMBASE } from "../utils/config";
+import type { BlackBoardOptions } from "../types/types";
+
+const fetchBlackBoardData = async () => {
+  const response = await fetch(`${CAMBASE}/api/blackboard`);
+  if (!response.ok) {
+    throw new Error("Failed to fetch blackboard data");
+  }
+  return response.json();
+};
+
+const viewBlackBoardData = async (options: BlackBoardOptions) => {
+  const response = await fetch(`${CAMBASE}/api/blackboard`, {
+    method: "POST",
+    body: JSON.stringify(options),
+  });
+  if (!response.ok) {
+    throw new Error("Failed to view blackboard data");
+  }
+  return response.json();
+};
+
+export const useBlackBoard = () => {
+  const blackboardQuery = useQuery({
+    queryKey: ["blackboardData"],
+    queryFn: fetchBlackBoardData,
+  });
+
+  const blackboardMutation = useMutation({
+    mutationKey: ["viewBlackBoardData"],
+    mutationFn: (options: BlackBoardOptions) => viewBlackBoardData(options),
+  });
+  return { blackboardQuery, blackboardMutation };
+};

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/types/types.ts

@@ -170,6 +170,13 @@ export type CameraFeedAction =
   | {
       type: "RESET_PAINTED_CELLS";
       payload: { cameraFeedID: "A" | "B" | "C"; paintedCells: Map<string, PaintedCell> };
+    }
+  | {
+      type: "SET_CAMERA_FEED_DATA";
+      cameraState: CameraFeedState;
+    }
+  | {
+      type: "RESET_CAMERA_FEED";
     };
 
 export type DecodeReading = {
@@ -214,3 +221,9 @@ export type CustomFieldConfig = {
   label: string;
   value: string;
 };
+
+export type BlackBoardOptions = {
+  operation?: string;
+  path?: string;
+  value?: object | string | number | (string | number)[] | null;
+};

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>