From eb74c2c6495ae7eaabedf36b46f44f577e13a589 Mon Sep 17 00:00:00 2001 From: Toba Ojo Date: Tue, 30 Sep 2025 11:11:46 +0100 Subject: [PATCH] Refactor camera configuration and overview snapshot hooks; update environment variables and changed camera names to A and B --- .env | 14 +------- .../CameraOverview/SnapshotContainer.tsx | 2 +- .../CameraSettings/CameraSettingFields.tsx | 3 +- .../FrontCameraOverviewCard.tsx | 3 +- src/hooks/useCameraConfig.ts | 4 +-- src/hooks/useGetOverviewSnapshot.ts | 8 ++--- src/hooks/useOverviewVideo.ts | 36 ------------------- src/pages/Dashboard.tsx | 5 ++- src/pages/FrontCamera.tsx | 8 ++--- src/pages/RearCamera.tsx | 8 ++--- src/utils/config.ts | 2 +- 11 files changed, 24 insertions(+), 69 deletions(-) delete mode 100644 src/hooks/useOverviewVideo.ts diff --git a/.env b/.env index 81e1238..8914832 100644 --- a/.env +++ 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 \ No newline at end of file +VITE_AGX_BOX_URL=http://100.118.196.113:8080 diff --git a/src/components/CameraOverview/SnapshotContainer.tsx b/src/components/CameraOverview/SnapshotContainer.tsx index cc491db..5e1698f 100644 --- a/src/components/CameraOverview/SnapshotContainer.tsx +++ b/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

An error occurred

; if (isPending) return

Loading...

; diff --git a/src/components/CameraSettings/CameraSettingFields.tsx b/src/components/CameraSettings/CameraSettingFields.tsx index 284d249..90cf47b 100644 --- a/src/components/CameraSettings/CameraSettingFields.tsx +++ b/src/components/CameraSettings/CameraSettingFields.tsx @@ -24,7 +24,7 @@ const CameraSettingFields = ({ onZoomLevelChange, }: CameraSettingsProps) => { const [showPwd, setShowPwd] = useState(false); - + console.log(initialData); const initialValues = useMemo( () => ({ friendlyName: initialData?.id ?? "", @@ -48,6 +48,7 @@ const CameraSettingFields = ({ }; const handleSubmit = (values: CameraSettingValues) => { + console.log(values); updateCameraConfig(values); }; diff --git a/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx b/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx index b7689fa..75503b1 100644 --- a/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx +++ b/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"), diff --git a/src/hooks/useCameraConfig.ts b/src/hooks/useCameraConfig.ts index cd04942..c07d540 100644 --- a/src/hooks/useCameraConfig.ts +++ 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, }, ], diff --git a/src/hooks/useGetOverviewSnapshot.ts b/src/hooks/useGetOverviewSnapshot.ts index 5e00b0e..9ca68b8 100644 --- a/src/hooks/useGetOverviewSnapshot.ts +++ b/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(null); const canvasRef = useRef(null); const imageRef = useRef(null); @@ -38,7 +38,7 @@ export function useGetOverviewSnapshot() { isPending, } = useQuery({ queryKey: ["overviewSnapshot"], - queryFn: () => fetchSnapshot(), + queryFn: () => fetchSnapshot(side), refetchOnWindowFocus: false, refetchInterval: 250, }); diff --git a/src/hooks/useOverviewVideo.ts b/src/hooks/useOverviewVideo.ts deleted file mode 100644 index df56363..0000000 --- a/src/hooks/useOverviewVideo.ts +++ /dev/null @@ -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(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); -} diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index 7af2040..b46ffe1 100644 --- a/src/pages/Dashboard.tsx +++ b/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 (
diff --git a/src/pages/FrontCamera.tsx b/src/pages/FrontCamera.tsx index 3393e5e..daa5214 100644 --- a/src/pages/FrontCamera.tsx +++ b/src/pages/FrontCamera.tsx @@ -17,15 +17,15 @@ const FrontCamera = () => { return (
diff --git a/src/pages/RearCamera.tsx b/src/pages/RearCamera.tsx index 9644871..62f4ac1 100644 --- a/src/pages/RearCamera.tsx +++ b/src/pages/RearCamera.tsx @@ -17,14 +17,14 @@ const RearCamera = () => { return (
0 ? rawCamBase