- improved zoom while clicking on on image to zoom

src/app/context/WebSocketContext.ts

@@ -1,6 +1,6 @@
 import { createContext, useContext } from "react";
 import { ReadyState } from "react-use-websocket";
-import type { InfoBarData } from "../../types/types";
+import type { CameraZoomData, InfoBarData } from "../../types/types";
 
 type InfoSocketState = {
   data: InfoBarData | null;
@@ -10,7 +10,7 @@ type InfoSocketState = {
 };
 
 type CameraSocketState = {
-  data: null;
+  data: CameraZoomData | null;
   readyState: ReadyState;
   send: (msg: string) => void;
 };

src/app/providers/WebSocketProvider.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { WebsocketContext, type WebSocketConextValue } from "../context/WebSocketContext";
 import useWebSocket from "react-use-websocket";
 import { wsConfig } from "../config/wsconfig";
-import type { InfoBarData } from "../../types/types";
+import type { CameraZoomData, InfoBarData } from "../../types/types";
 
 type WebSocketProviderProps = {
   children: ReactNode;
@@ -10,7 +10,7 @@ type WebSocketProviderProps = {
 
 export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
   const [systemData, setSystemData] = useState<InfoBarData | null>(null);
-
+  const [socketData, setSocketData] = useState<CameraZoomData | null>(null);
   const infoSocket = useWebSocket(wsConfig.infoBar, { share: true, shouldReconnect: () => true });
   const cameraFeedASocket = useWebSocket(wsConfig.cameraFeedA, { share: true, shouldReconnect: () => true });
   const cameraFeedBSocket = useWebSocket(wsConfig.cameraFeedB, { share: true, shouldReconnect: () => true });
@@ -23,9 +23,20 @@ export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
         const data = JSON.parse(text);
         setSystemData(data);
       }
+      if (cameraFeedASocket.lastMessage || cameraFeedBSocket.lastMessage || cameraFeedCSocket.lastMessage) {
+        const message = cameraFeedASocket.lastMessage || cameraFeedBSocket.lastMessage || cameraFeedCSocket.lastMessage;
+        const data = await message?.data.text();
+        const parsedData: CameraZoomData = JSON.parse(data || "");
+        setSocketData(parsedData);
+      }
     }
     parseData();
-  }, [infoSocket.lastMessage]);
+  }, [
+    cameraFeedASocket.lastMessage,
+    cameraFeedBSocket.lastMessage,
+    cameraFeedCSocket.lastMessage,
+    infoSocket.lastMessage,
+  ]);
 
   const value = useMemo<WebSocketConextValue>(
     () => ({
@@ -35,19 +46,19 @@ export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
         sendJson: infoSocket.sendJsonMessage,
       },
       cameraFeedA: {
-        data: null,
+        data: socketData,
         readyState: cameraFeedASocket.readyState,
 
         send: cameraFeedASocket.sendMessage,
       },
       cameraFeedB: {
-        data: null,
+        data: socketData,
         readyState: cameraFeedBSocket.readyState,
 
         send: cameraFeedBSocket.sendMessage,
       },
       cameraFeedC: {
-        data: null,
+        data: socketData,
         readyState: cameraFeedCSocket.readyState,
 
         send: cameraFeedCSocket.sendMessage,
@@ -62,6 +73,7 @@ export const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
       cameraFeedCSocket.sendMessage,
       infoSocket.readyState,
       infoSocket.sendJsonMessage,
+      socketData,
       systemData,
     ],
   );