Refactor camera configuration and overview snapshot hooks; update environment variables and changed camera names to A and B

src/hooks/useCameraConfig.ts

@@ -19,10 +19,10 @@ const updateCamerasideConfig = async (data: {
   const updateUrl = `${base_url}/update-config?id=${data.id}`;
 
   const updateConfigPayload = {
-    id: data.id,
+    id: data.friendlyName,
     fields: [
       {
-        property: "propLEDDriverControlURI",
+        property: "id",
         value: data.friendlyName,
       },
     ],

src/hooks/useGetOverviewSnapshot.ts

@@ -4,8 +4,8 @@ import { CAM_BASE } from "../utils/config";
 
 const apiUrl = CAM_BASE;
 
-async function fetchSnapshot() {
-  const response = await fetch(`${apiUrl}/CameraRear-preview`);
+async function fetchSnapshot(cameraSide: string) {
+  const response = await fetch(`${apiUrl}/${cameraSide}-preview`);
   if (!response.ok) {
     throw new Error("Cannot reach endpoint");
   }
@@ -13,7 +13,7 @@ async function fetchSnapshot() {
   return await response.blob();
 }
 
-export function useGetOverviewSnapshot() {
+export function useGetOverviewSnapshot(side: string) {
   const latestUrlRef = useRef<string | null>(null);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const imageRef = useRef<HTMLImageElement | null>(null);
@@ -38,7 +38,7 @@ export function useGetOverviewSnapshot() {
     isPending,
   } = useQuery({
     queryKey: ["overviewSnapshot"],
-    queryFn: () => fetchSnapshot(),
+    queryFn: () => fetchSnapshot(side),
     refetchOnWindowFocus: false,
     refetchInterval: 250,
   });

src/hooks/useOverviewVideo.ts

@@ -1,36 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { useRef } from "react";
-import { CAM_BASE } from "../utils/config";
-
-async function fetchOverviewImage(cameraSide: string) {
-  const response = await fetch(`${CAM_BASE}/${cameraSide}-preview`);
-  if (!response.ok) throw new Error("could not fetch overview image");
-  return response.blob();
-}
-
-export function useOverviewVideo() {
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const { isPending, isError, data } = useQuery({
-    queryKey: ["overviewVideo"],
-    queryFn: () => fetchOverviewImage("CameraFront"),
-    // refetchInterval: () =>
-    //   typeof document !== "undefined" && document.visibilityState === "hidden"
-    //     ? SLOW_MS
-    //     : FAST_MS,
-    // refetchIntervalInBackground: false,
-  });
-
-  if (isPending) return;
-
-  if (isError) return;
-
-  const img = new Image();
-  const imgUrl = URL.createObjectURL(data);
-  img.src = imgUrl;
-
-  const canvas = canvasRef.current;
-  if (!canvas) return;
-  const ctx = canvas.getContext("2d");
-
-  ctx?.drawImage(img, 0, 0);
-}