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/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 };
 };