- Implement CameraFeed context and provider with reducer for state management

- able to switch footage on tab clicks

src/features/cameras/hooks/useGetVideoFeed.ts

@@ -1,7 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
+import { CAMBASE } from "../../../utils/config";
 
-const getfeed = async () => {
-  const response = await fetch(`http://100.115.148.59/TargetDetectionColour-preview`, {
+const getfeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
+  const response = await fetch(`${CAMBASE}TargetDetectionColour${cameraFeedID}-preview`, {
     signal: AbortSignal.timeout(300000),
     cache: "no-store",
   });
@@ -11,10 +12,10 @@ const getfeed = async () => {
   return response.blob();
 };
 
-export const useGetVideoFeed = () => {
+export const useGetVideoFeed = (cameraFeedID: "A" | "B" | "C" | null) => {
   const videoQuery = useQuery({
-    queryKey: ["getfeed"],
-    queryFn: getfeed,
+    queryKey: ["getfeed", cameraFeedID],
+    queryFn: () => getfeed(cameraFeedID),
     refetchInterval: 500,
   });
 

src/features/cameras/hooks/useGetvideoSnapshots.ts

@@ -1,9 +1,12 @@
 import { useEffect, useRef } from "react";
 import { useGetVideoFeed } from "./useGetVideoFeed";
+import { useCameraFeedContext } from "../../../app/context/CameraFeedContext";
 
 export const useCreateVideoSnapshot = () => {
+  const { state } = useCameraFeedContext();
+  const cameraFeedID = state?.cameraFeedID;
   const latestBitmapRef = useRef<ImageBitmap | null>(null);
-  const { videoQuery } = useGetVideoFeed();
+  const { videoQuery } = useGetVideoFeed(cameraFeedID);
 
   const snapShot = videoQuery?.data;
   const isloading = videoQuery.isPending;