From eb74c2c6495ae7eaabedf36b46f44f577e13a589 Mon Sep 17 00:00:00 2001 From: Toba Ojo Date: Tue, 30 Sep 2025 11:11:46 +0100 Subject: [PATCH 1/4] 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 From 6f2bc96ac7cfbe38af2c4f1db8ef2b458c72d4d5 Mon Sep 17 00:00:00 2001 From: Toba Ojo Date: Wed, 1 Oct 2025 10:59:10 +0100 Subject: [PATCH 2/4] Add camera zoom functionality and refactor blackboard data fetching - Introduced `useCameraZoom` hook for managing camera zoom operations. - Refactored `useCameraBlackboard` to improve data fetching function naming. - Updated `CameraSettingFields` to utilize new zoom functionality and handle zoom level changes. - Removed unnecessary console logs from `Dashboard`. --- .../CameraSettings/CameraSettingFields.tsx | 37 ++++++++++++++++--- src/hooks/useCameraBlackboard.ts | 4 +- src/hooks/useCameraZoom.ts | 22 +++++++++++ src/pages/Dashboard.tsx | 1 - src/types/types.ts | 5 +++ 5 files changed, 60 insertions(+), 9 deletions(-) create mode 100644 src/hooks/useCameraZoom.ts diff --git a/src/components/CameraSettings/CameraSettingFields.tsx b/src/components/CameraSettings/CameraSettingFields.tsx index 90cf47b..8b5c42e 100644 --- a/src/components/CameraSettings/CameraSettingFields.tsx +++ b/src/components/CameraSettings/CameraSettingFields.tsx @@ -3,12 +3,15 @@ import type { CameraConfig, CameraSettingErrorValues, CameraSettingValues, + ZoomInOptions, ZoomLevel, } from "../../types/types"; import { useMemo, useState } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons"; import CardHeader from "../UI/CardHeader"; +import { useCameraZoom } from "../../hooks/useCameraZoom"; +import { useCameraBlackboard } from "../../hooks/useCameraBlackboard"; type CameraSettingsProps = { initialData: CameraConfig; @@ -24,7 +27,9 @@ const CameraSettingFields = ({ onZoomLevelChange, }: CameraSettingsProps) => { const [showPwd, setShowPwd] = useState(false); - console.log(initialData); + const { mutation } = useCameraZoom(); + const { mutation: blackboardMuation, query: blackboardQuery } = + useCameraBlackboard(); const initialValues = useMemo( () => ({ friendlyName: initialData?.id ?? "", @@ -32,6 +37,7 @@ const CameraSettingFields = ({ userName: "", password: "", id: initialData?.id, + //TODO: update zoomlevel to query data zoom: zoomLevel?.level ? zoomLevel.level : 1, }), [initialData?.id, initialData?.propURI?.value, zoomLevel?.level] @@ -41,23 +47,42 @@ const CameraSettingFields = ({ const errors: CameraSettingErrorValues = {}; if (!values.friendlyName) errors.friendlyName = "Required"; if (!values.cameraAddress) errors.cameraAddress = "Required"; - if (!values.userName) errors.userName = "Required"; - if (!values.password) errors.password = "Required"; - return errors; }; const handleSubmit = (values: CameraSettingValues) => { - console.log(values); updateCameraConfig(values); }; - const handleRadioButtonChange = (levelNumber: number) => { + const handleRadioButtonChange = async (levelNumber: number) => { if (!onZoomLevelChange || !zoomLevel) return; onZoomLevelChange({ ...zoomLevel, level: zoomLevel?.level !== levelNumber ? levelNumber : zoomLevel?.level, }); + const cameraControllerSide = + initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB"; + + const zoomInOptions: ZoomInOptions = { + camera: cameraControllerSide, + multiplier: levelNumber, + }; + + mutation.mutate(zoomInOptions); + + if (!blackboardQuery.data.cameraZoom) { + blackboardMuation.mutate({ + operation: "INSERT", + path: "cameraZoom", + value: zoomInOptions, + }); + } else { + blackboardMuation.mutate({ + operation: "APPEND", + path: "cameraZoom", + value: zoomInOptions, + }); + } }; return ( diff --git a/src/hooks/useCameraBlackboard.ts b/src/hooks/useCameraBlackboard.ts index d8cd31b..81c16a8 100644 --- a/src/hooks/useCameraBlackboard.ts +++ b/src/hooks/useCameraBlackboard.ts @@ -2,7 +2,7 @@ import { useMutation, useQuery } from "@tanstack/react-query"; import { CAM_BASE } from "../utils/config"; import type { CameraBlackBoardOptions } from "../types/types"; -const getBlackboardData = async () => { +const getAllBlackboardData = async () => { const response = await fetch(`${CAM_BASE}/api/blackboard`); if (!response.ok) { throw new Error("Failed to fetch blackboard data"); @@ -25,7 +25,7 @@ const viewBlackboardData = async (options: CameraBlackBoardOptions) => { export const useCameraBlackboard = () => { const query = useQuery({ queryKey: ["cameraBlackboard"], - queryFn: getBlackboardData, + queryFn: getAllBlackboardData, }); const mutation = useMutation({ diff --git a/src/hooks/useCameraZoom.ts b/src/hooks/useCameraZoom.ts new file mode 100644 index 0000000..474c29e --- /dev/null +++ b/src/hooks/useCameraZoom.ts @@ -0,0 +1,22 @@ +import { useMutation } from "@tanstack/react-query"; +import { CAM_BASE } from "../utils/config"; +import type { ZoomInOptions } from "../types/types"; + +async function zoomIn(options: ZoomInOptions) { + const response = await fetch( + `${CAM_BASE}/Ip${options.camera}-command?magnification=${options.multiplier}x` + ); + if (!response.ok) { + throw new Error("Cannot reach camera zoom endpoint"); + } + return; +} + +export const useCameraZoom = () => { + const mutation = useMutation({ + mutationKey: ["zoomIn"], + mutationFn: (options: ZoomInOptions) => zoomIn(options), + }); + + return { mutation }; +}; diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index b46ffe1..fb0182a 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -7,7 +7,6 @@ const Dashboard = () => { 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/types/types.ts b/src/types/types.ts index e70d706..55e2d88 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -261,3 +261,8 @@ export type ZoomLevel = { py: number; level?: number; }; + +export type ZoomInOptions = { + camera: string; + multiplier: number; +}; From 4eeb3684847526ae967924a1b3af08f1d40a1fb5 Mon Sep 17 00:00:00 2001 From: Toba Ojo Date: Wed, 1 Oct 2025 11:30:06 +0100 Subject: [PATCH 3/4] Refactor SnapshotContainer to integrate camera zoom functionality and improve error handling --- .../CameraOverview/SnapshotContainer.tsx | 25 ++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/src/components/CameraOverview/SnapshotContainer.tsx b/src/components/CameraOverview/SnapshotContainer.tsx index 5e1698f..7d85dad 100644 --- a/src/components/CameraOverview/SnapshotContainer.tsx +++ b/src/components/CameraOverview/SnapshotContainer.tsx @@ -1,6 +1,8 @@ import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot"; -import type { ZoomLevel } from "../../types/types"; +import type { ZoomInOptions, ZoomLevel } from "../../types/types"; import NavigationArrow from "../UI/NavigationArrow"; +import { useCameraZoom } from "../../hooks/useCameraZoom"; +import { useEffect } from "react"; type SnapshotContainerProps = { side: string; @@ -16,8 +18,9 @@ export const SnapshotContainer = ({ onZoomLevelChange, }: SnapshotContainerProps) => { const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side); - if (isError) return

An error occurred

; - if (isPending) return

Loading...

; + const { mutation } = useCameraZoom(); + const cameraControllerSide = + side === "CameraA" ? "CameraControllerA" : "CameraControllerB"; const handleZoomClick = (event: React.MouseEvent) => { const bounds = canvasRef.current?.getBoundingClientRect(); @@ -45,8 +48,24 @@ export const SnapshotContainer = ({ py, level: newLevel, }); + + if (!zoomLevel?.level) return; }; + useEffect(() => { + if (zoomLevel?.level) { + const zoomInOptions: ZoomInOptions = { + camera: cameraControllerSide, + multiplier: zoomLevel.level, + }; + mutation.mutate(zoomInOptions); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [zoomLevel?.level]); + + if (isError) return

An error occurred

; + if (isPending) return

Loading...

; + return (
From 82ef562046c9ca226725d52f2cfe54a5e7d094e8 Mon Sep 17 00:00:00 2001 From: Toba Ojo Date: Thu, 2 Oct 2025 16:07:05 +0100 Subject: [PATCH 4/4] camera zoom handling across components; unify zoom level type and improve state management --- .../CameraOverview/SnapshotContainer.tsx | 43 ++--- .../CameraSettings/CameraSettingFields.tsx | 168 +++++++----------- .../CameraSettings/CameraSettings.tsx | 6 +- .../OverviewVideoContainer.tsx | 5 +- src/hooks/useCameraZoom.ts | 30 +++- src/pages/FrontCamera.tsx | 11 +- src/types/types.ts | 4 + 7 files changed, 111 insertions(+), 156 deletions(-) diff --git a/src/components/CameraOverview/SnapshotContainer.tsx b/src/components/CameraOverview/SnapshotContainer.tsx index 7d85dad..c7a26b9 100644 --- a/src/components/CameraOverview/SnapshotContainer.tsx +++ b/src/components/CameraOverview/SnapshotContainer.tsx @@ -1,5 +1,5 @@ import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot"; -import type { ZoomInOptions, ZoomLevel } from "../../types/types"; +import type { ZoomInOptions } from "../../types/types"; import NavigationArrow from "../UI/NavigationArrow"; import { useCameraZoom } from "../../hooks/useCameraZoom"; import { useEffect } from "react"; @@ -7,8 +7,8 @@ import { useEffect } from "react"; type SnapshotContainerProps = { side: string; settingsPage?: boolean; - zoomLevel?: ZoomLevel; - onZoomLevelChange?: (level: ZoomLevel) => void; + zoomLevel?: number; + onZoomLevelChange?: (level: number) => void; }; export const SnapshotContainer = ({ @@ -18,50 +18,29 @@ export const SnapshotContainer = ({ onZoomLevelChange, }: SnapshotContainerProps) => { const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side); - const { mutation } = useCameraZoom(); const cameraControllerSide = side === "CameraA" ? "CameraControllerA" : "CameraControllerB"; + const { mutation } = useCameraZoom({ camera: cameraControllerSide }); - const handleZoomClick = (event: React.MouseEvent) => { - const bounds = canvasRef.current?.getBoundingClientRect(); - if (!bounds) return; - const left = bounds.left; - const top = bounds.top; - const x = event.pageX; - const y = event.pageY; - const cw = canvasRef.current?.clientWidth; - const ch = canvasRef.current?.clientHeight; - if (!cw || !ch) return; - const px = x / cw; - const py = y / ch; - - const baseLevel = zoomLevel?.level ?? 1; + const handleZoomClick = () => { + const baseLevel = zoomLevel ?? 1; const newLevel = baseLevel >= 8 ? 1 : baseLevel * 2; - if (onZoomLevelChange) - onZoomLevelChange({ - left, - top, - x, - y, - px, - py, - level: newLevel, - }); + if (onZoomLevelChange) onZoomLevelChange(newLevel); - if (!zoomLevel?.level) return; + if (!zoomLevel) return; }; useEffect(() => { - if (zoomLevel?.level) { + if (zoomLevel) { const zoomInOptions: ZoomInOptions = { camera: cameraControllerSide, - multiplier: zoomLevel.level, + multiplier: zoomLevel, }; mutation.mutate(zoomInOptions); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [zoomLevel?.level]); + }, [zoomLevel]); 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 8b5c42e..d530db3 100644 --- a/src/components/CameraSettings/CameraSettingFields.tsx +++ b/src/components/CameraSettings/CameraSettingFields.tsx @@ -4,20 +4,18 @@ import type { CameraSettingErrorValues, CameraSettingValues, ZoomInOptions, - ZoomLevel, } from "../../types/types"; -import { useMemo, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons"; import CardHeader from "../UI/CardHeader"; import { useCameraZoom } from "../../hooks/useCameraZoom"; -import { useCameraBlackboard } from "../../hooks/useCameraBlackboard"; type CameraSettingsProps = { initialData: CameraConfig; updateCameraConfig: (values: CameraSettingValues) => Promise | void; - zoomLevel?: ZoomLevel; - onZoomLevelChange?: (level: ZoomLevel) => void; + zoomLevel?: number; + onZoomLevelChange?: (level: number) => void; }; const CameraSettingFields = ({ @@ -27,9 +25,38 @@ const CameraSettingFields = ({ onZoomLevelChange, }: CameraSettingsProps) => { const [showPwd, setShowPwd] = useState(false); - const { mutation } = useCameraZoom(); - const { mutation: blackboardMuation, query: blackboardQuery } = - useCameraBlackboard(); + const cameraControllerSide = + initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB"; + const { mutation, query } = useCameraZoom({ camera: cameraControllerSide }); + const zoomOptions = [1, 2, 4, 8]; + + useEffect(() => { + if (!query.data) return; + const apiZoom = getZoomLevel(query.data); + onZoomLevelChange?.(apiZoom); + }, [query.data, onZoomLevelChange]); + + const getZoomLevel = (levelstring: string | undefined) => { + switch (levelstring) { + case "1x": + return 1; + break; + case "2x": + return 2; + break; + case "4x": + return 4; + break; + case "8x": + return 8; + default: + return 1; + } + }; + const level = getZoomLevel(query.data); + + console.log("level from get", level); + console.log("zoomLevel state", zoomLevel); const initialValues = useMemo( () => ({ friendlyName: initialData?.id ?? "", @@ -37,10 +64,10 @@ const CameraSettingFields = ({ userName: "", password: "", id: initialData?.id, - //TODO: update zoomlevel to query data - zoom: zoomLevel?.level ? zoomLevel.level : 1, + + zoom: zoomLevel, }), - [initialData?.id, initialData?.propURI?.value, zoomLevel?.level] + [initialData?.id, initialData?.propURI?.value, zoomLevel] ); const validateValues = (values: CameraSettingValues) => { @@ -56,12 +83,7 @@ const CameraSettingFields = ({ const handleRadioButtonChange = async (levelNumber: number) => { if (!onZoomLevelChange || !zoomLevel) return; - onZoomLevelChange({ - ...zoomLevel, - level: zoomLevel?.level !== levelNumber ? levelNumber : zoomLevel?.level, - }); - const cameraControllerSide = - initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB"; + onZoomLevelChange(levelNumber); const zoomInOptions: ZoomInOptions = { camera: cameraControllerSide, @@ -69,28 +91,16 @@ const CameraSettingFields = ({ }; mutation.mutate(zoomInOptions); - - if (!blackboardQuery.data.cameraZoom) { - blackboardMuation.mutate({ - operation: "INSERT", - path: "cameraZoom", - value: zoomInOptions, - }); - } else { - blackboardMuation.mutate({ - operation: "APPEND", - path: "cameraZoom", - value: zoomInOptions, - }); - } }; - + const selectedZoom = zoomLevel ?? 1; + console.log(selectedZoom); return ( {({ errors, touched }) => (
@@ -169,78 +179,28 @@ const CameraSettingFields = ({
-
-
- handleRadioButtonChange(1)} - /> - -
- -
- handleRadioButtonChange(2)} - /> - -
- -
- handleRadioButtonChange(4)} - /> - -
- -
- handleRadioButtonChange(8)} - /> - -
+
+ {zoomOptions.map((zoom) => ( +
+ handleRadioButtonChange(zoom)} + /> + +
+ ))}