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

.env

@@ -6,16 +6,4 @@ VITE_OUTSIDE_BASEURL=http://100.82.205.44
 VITE_FOLKESTONE_URL=http://100.116.253.81/mergedHistory/sightingSummary?mostRecentRef=
 VITE_MAV_URL=http://192.168.75.11/SightingListFront/sightingSummary?mostRecentRef=
 
-VITE_AGX_BOX_FRONT_URL=http://192.168.0.90:8080/SightingListFront/sightingSummary?mostRecentRef=
-VITE_AGX_BOX_REAR_URL=http://192.168.0.90:8080/SightingListRear/sightingSummary?mostRecentRef=
-
-VITE_AGX=http://100.72.72.70:8080/SightingListRear/sightingSummary?mostRecentRef=
-VITE_AGX_FRONT=http://100.72.72.70:8080/SightingListFront/sightingSummary?mostRecentRef=
-
-VITE_AGX_FRONT_BASE=http://100.72.72.70:8080/
-
-VITE_LOCAL=http://10.42.0.1:8080/SightingListRear/sightingSummary?mostRecentRef=
-VITE_LOCAL_FRONT=http://10.42.0.1:8080/SightingListFront/sightingSummary?mostRecentRef=
-
-VITE_LOCAL_BASE=http://10.42.0.1:8080/
-VITE_LOCAL_BASE_NEW=http://100.113.222.39
+VITE_AGX_BOX_URL=http://100.118.196.113:8080

src/components/CameraOverview/SnapshotContainer.tsx

@@ -15,7 +15,7 @@ export const SnapshotContainer = ({
   zoomLevel,
   onZoomLevelChange,
 }: SnapshotContainerProps) => {
-  const { canvasRef, isError, isPending } = useGetOverviewSnapshot();
+  const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
   if (isError) return <p className="h-100">An error occurred</p>;
   if (isPending) return <p className="h-100">Loading...</p>;
 

src/components/CameraSettings/CameraSettingFields.tsx

@@ -24,7 +24,7 @@ const CameraSettingFields = ({
   onZoomLevelChange,
 }: CameraSettingsProps) => {
   const [showPwd, setShowPwd] = useState(false);
-
+  console.log(initialData);
   const initialValues = useMemo<CameraSettingValues>(
     () => ({
       friendlyName: initialData?.id ?? "",
@@ -48,6 +48,7 @@ const CameraSettingFields = ({
   };
 
   const handleSubmit = (values: CameraSettingValues) => {
+    console.log(values);
     updateCameraConfig(values);
   };
 

src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx

@@ -2,11 +2,10 @@ import clsx from "clsx";
 import Card from "../UI/Card";
 import { useSwipeable } from "react-swipeable";
 import { useNavigate } from "react-router";
-import { useOverviewVideo } from "../../hooks/useOverviewVideo";
+
 import SightingOverview from "../SightingOverview/SightingOverview";
 
 const FrontCameraOverviewCard = () => {
-  useOverviewVideo();
   const navigate = useNavigate();
   const handlers = useSwipeable({
     onSwipedRight: () => navigate("/camera-settings"),

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

src/pages/Dashboard.tsx

@@ -4,7 +4,10 @@ import { SightingFeedProvider } from "../context/providers/SightingFeedProvider"
 import { CAM_BASE } from "../utils/config";
 
 const Dashboard = () => {
-  const base_url = `${CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`;
+  const mode = import.meta.env.MODE;
+  const base_url = `${CAM_BASE}/SightingList/sightingSummary?mostRecentRef=`;
+  console.log(mode);
+  console.log(base_url);
   return (
     <SightingFeedProvider url={base_url}>
       <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">

src/pages/FrontCamera.tsx

@@ -17,15 +17,15 @@ const FrontCamera = () => {
   return (
     <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
       <OverviewVideoContainer
-        title={"Front Camera"}
-        side="CameraFront"
+        title={"Camera A"}
+        side="CameraA"
         settingsPage={true}
         zoomLevel={zoomLevel}
         onZoomLevelChange={setZoomLevel}
       />
       <CameraSettings
-        title="Front Camera Settings"
-        side="CameraFront"
+        title="Camera A Settings"
+        side="CameraA"
         zoomLevel={zoomLevel}
         onZoomLevelChange={setZoomLevel}
       />

src/pages/RearCamera.tsx

@@ -17,14 +17,14 @@ const RearCamera = () => {
   return (
     <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
       <CameraSettings
-        title="Rear Camera Settings"
-        side={"CameraRear"}
+        title="Camera B Settings"
+        side={"CameraB"}
         zoomLevel={zoomLevel}
         onZoomLevelChange={setZoomLevel}
       />
       <OverviewVideoContainer
-        title={"Rear Camera"}
-        side={"CameraRear"}
+        title={"Camera B"}
+        side={"CameraB"}
         settingsPage={true}
         zoomLevel={zoomLevel}
         onZoomLevelChange={setZoomLevel}

src/utils/config.ts

@@ -1,4 +1,4 @@
-const rawCamBase = import.meta.env.VITE_OUTSIDE_BASEURL;
+const rawCamBase = import.meta.env.VITE_AGX_BOX_URL;
 export const CAM_BASE =
   rawCamBase && rawCamBase.trim().length > 0
     ? rawCamBase