Refactor camera feed handling to support dynamic camera IDs and improve context management

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

@@ -3,13 +3,10 @@ import { Stage, Layer, Image, Shape } from "react-konva";
 import type { KonvaEventObject } from "konva/lib/Node";
 import { useCreateVideoSnapshot } from "../../hooks/useGetvideoSnapshots";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
-import {
-  useCameraFeedASocket,
-  useCameraFeedBSocket,
-  useCameraFeedCSocket,
-} from "../../../../app/context/WebSocketContext";
+import { useCameraFeedSocket } from "../../../../app/context/WebSocketContext";
 import { ReadyState } from "react-use-websocket";
 import { toast } from "sonner";
+import type { CameraID } from "../../../../app/config/cameraConfig";
 
 const BACKEND_WIDTH = 640;
 const BACKEND_HEIGHT = 360;
@@ -41,22 +38,20 @@ const VideoFeedGridPainter = () => {
   const currentScale = stageSize.width / BACKEND_WIDTH;
   const size = BACKEND_CELL_SIZE * currentScale;
 
-  const cameraASocket = useCameraFeedASocket();
-  const cameraBSocket = useCameraFeedBSocket();
-  const cameraCSocket = useCameraFeedCSocket();
+  const cameraSocket = useCameraFeedSocket();
 
   const getCurrentSocket = () => {
     switch (cameraFeedID) {
       case "A":
-        return cameraASocket;
+        return cameraSocket;
       case "B":
-        return cameraBSocket;
+        return cameraSocket;
       case "C":
-        return cameraCSocket;
+        return cameraSocket;
     }
   };
 
-  const handleZoomClick = (e: KonvaEventObject<MouseEvent>, cameraFeedID: "A" | "B" | "C") => {
+  const handleZoomClick = (e: KonvaEventObject<MouseEvent>, cameraFeedID: CameraID) => {
     if (mode !== "zoom") return;
     const socket = getCurrentSocket();
     const stage = e.target.getStage();