From 647fd201a3899464eaa5bffa6ed636de21357e00 Mon Sep 17 00:00:00 2001 From: Toba Ojo Date: Tue, 4 Nov 2025 16:09:24 +0000 Subject: [PATCH] - minor tweaks on zoom and navigation arrow --- src/App.tsx | 4 +- .../CameraOverview/SnapshotContainer.tsx | 23 +-- .../FrontCameraOverviewCard.tsx | 4 +- .../OverviewVideoContainer.tsx | 4 +- .../RearCameraOverviewCard.tsx | 2 +- .../SettingForms/WiFi&Modem/ModemSettings.tsx | 141 +++++++++--------- src/components/UI/NavigationArrow.tsx | 8 +- src/hooks/useCameraWifiandModem.ts | 9 +- src/hooks/useCameraZoom.ts | 1 + 9 files changed, 90 insertions(+), 106 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 980e322..5aaa5a7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -19,8 +19,8 @@ function App() { }> } /> - } /> - } /> + } /> + } /> } /> } /> } /> diff --git a/src/components/CameraOverview/SnapshotContainer.tsx b/src/components/CameraOverview/SnapshotContainer.tsx index 7500a46..3065c3e 100644 --- a/src/components/CameraOverview/SnapshotContainer.tsx +++ b/src/components/CameraOverview/SnapshotContainer.tsx @@ -1,12 +1,8 @@ import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot"; -import type { ZoomInOptions } from "../../types/types"; import NavigationArrow from "../UI/NavigationArrow"; -import { useCameraZoom } from "../../hooks/useCameraZoom"; -import { useEffect } from "react"; + import Loading from "../UI/Loading"; import ErrorState from "../UI/ErrorState"; -import { reverseZoomMapping, zoomMapping } from "../../utils/utils"; - type SnapshotContainerProps = { side: string; settingsPage?: boolean; @@ -16,10 +12,6 @@ type SnapshotContainerProps = { export const SnapshotContainer = ({ side, settingsPage, zoomLevel, onZoomLevelChange }: SnapshotContainerProps) => { const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side); - const cameraControllerSide = side === "CameraA" ? "CameraControllerA" : "CameraControllerB"; - const { mutation, query } = useCameraZoom({ camera: cameraControllerSide }); - const magnification = query?.data?.propMagnification?.value; - const apiZoom = reverseZoomMapping(magnification); const handleZoomClick = () => { const baseLevel = zoomLevel ?? 1; @@ -30,19 +22,6 @@ export const SnapshotContainer = ({ side, settingsPage, zoomLevel, onZoomLevelCh if (!zoomLevel) return; }; - useEffect(() => { - if (zoomLevel) { - const text = zoomMapping(apiZoom); - const zoomInOptions: ZoomInOptions = { - camera: cameraControllerSide, - multiplier: zoomLevel, - multiplierText: text, - }; - console.log(zoomInOptions); - mutation.mutate(zoomInOptions); - } - }, [cameraControllerSide, apiZoom, zoomLevel]); - return (
diff --git a/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx b/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx index 0aa1787..255c979 100644 --- a/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx +++ b/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx @@ -8,8 +8,8 @@ import SightingOverview from "../SightingOverview/SightingOverview"; const FrontCameraOverviewCard = () => { const navigate = useNavigate(); const handlers = useSwipeable({ - onSwipedRight: () => navigate("/camera-settings"), - onSwipedLeft: () => navigate("/rear-camera-settings"), + onSwipedRight: () => navigate("/a-camera-settings"), + onSwipedLeft: () => navigate("/b-camera-settings"), trackMouse: true, }); diff --git a/src/components/FrontCameraSettings/OverviewVideoContainer.tsx b/src/components/FrontCameraSettings/OverviewVideoContainer.tsx index 379f95b..3f0be06 100644 --- a/src/components/FrontCameraSettings/OverviewVideoContainer.tsx +++ b/src/components/FrontCameraSettings/OverviewVideoContainer.tsx @@ -20,11 +20,11 @@ const OverviewVideoContainer = ({ const location = useLocation(); const handlers = useSwipeable({ onSwipedLeft: () => { - if (location.pathname === "/rear-camera-settings") return; + if (location.pathname === "/b-camera-settings") return; navigate("/"); }, onSwipedRight: () => { - if (location.pathname === "/camera-settings") return; + if (location.pathname === "/a-camera-settings") return; navigate("/"); }, trackMouse: true, diff --git a/src/components/RearCameraOverview/RearCameraOverviewCard.tsx b/src/components/RearCameraOverview/RearCameraOverviewCard.tsx index 883d096..9fa608e 100644 --- a/src/components/RearCameraOverview/RearCameraOverviewCard.tsx +++ b/src/components/RearCameraOverview/RearCameraOverviewCard.tsx @@ -13,7 +13,7 @@ type CardProps = React.HTMLAttributes; const RearCameraOverviewCard = ({ className }: CardProps) => { const navigate = useNavigate(); const handlers = useSwipeable({ - onSwipedLeft: () => navigate("/rear-camera-settings"), + onSwipedLeft: () => navigate("/b-camera-settings"), trackMouse: true, }); const { mostRecent } = useSightingFeedContext(); diff --git a/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx b/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx index d84618f..56cc831 100644 --- a/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx +++ b/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx @@ -57,78 +57,81 @@ const ModemSettings = () => { return ( <> - {!showSettings && ( - - {({ isSubmitting }) => ( -
- - - - - - - - - - -
+ + + {({ isSubmitting }) => ( + + {!showSettings && ( + <> + + - setShowPwd((s) => !s)} - icon={showPwd ? faEyeSlash : faEye} + + + + -
- - - - - - - - - - -
- )} - - )} + + + +
+ + setShowPwd((s) => !s)} + icon={showPwd ? faEyeSlash : faEye} + /> +
+ + + + + + + + + + + )} + + + )} + ); }; diff --git a/src/components/UI/NavigationArrow.tsx b/src/components/UI/NavigationArrow.tsx index 92e3ee4..f3011ae 100644 --- a/src/components/UI/NavigationArrow.tsx +++ b/src/components/UI/NavigationArrow.tsx @@ -17,9 +17,9 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => { } if (side === "Front") { - navigate("/camera-settings"); + navigate("/a-camera-settings"); } else if (side === "Rear") { - navigate("/Rear-Camera-settings"); + navigate("/b-Camera-settings"); } }; @@ -31,14 +31,14 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => { size="2xl" icon={faArrowRight} className="absolute top-[50%] right-[2%] backdrop-blur-lg hover:cursor-pointer animate-bounce z-30" - onClick={() => navigationDest("Front")} + onClick={() => navigationDest("a")} /> ) : ( navigationDest("Rear")} + onClick={() => navigationDest("b")} /> )} diff --git a/src/hooks/useCameraWifiandModem.ts b/src/hooks/useCameraWifiandModem.ts index 6e5edce..f881f54 100644 --- a/src/hooks/useCameraWifiandModem.ts +++ b/src/hooks/useCameraWifiandModem.ts @@ -3,9 +3,10 @@ import { CAM_BASE } from "../utils/config"; import type { ModemConfig, WifiConfig } from "../types/types"; import { useEffect } from "react"; import { toast } from "sonner"; +const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : ""; const getWiFiSettings = async () => { - const response = await fetch(`${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-wifi`, { + const response = await fetch(`${camBase}/api/fetch-config?id=ModemAndWifiManager-wifi`, { signal: AbortSignal.timeout(500), }); if (!response.ok) { @@ -15,7 +16,7 @@ const getWiFiSettings = async () => { }; const updateWifiSettings = async (wifiConfig: WifiConfig) => { - const response = await fetch(`${CAM_BASE}/api/update-config?id=ModemAndWifiManager-wifi`, { + const response = await fetch(`${camBase}/api/update-config?id=ModemAndWifiManager-wifi`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(wifiConfig), @@ -27,7 +28,7 @@ const updateWifiSettings = async (wifiConfig: WifiConfig) => { }; const getModemSettings = async () => { - const response = await fetch(`${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-modem`, { + const response = await fetch(`${camBase}/api/fetch-config?id=ModemAndWifiManager-modem`, { signal: AbortSignal.timeout(500), }); if (!response.ok) { @@ -37,7 +38,7 @@ const getModemSettings = async () => { }; const updateModemSettings = async (modemConfig: ModemConfig) => { - const response = await fetch(`${CAM_BASE}/api/update-config?id=ModemAndWifiManager-modem`, { + const response = await fetch(`${camBase}/api/update-config?id=ModemAndWifiManager-modem`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(modemConfig), diff --git a/src/hooks/useCameraZoom.ts b/src/hooks/useCameraZoom.ts index 817217c..497812b 100644 --- a/src/hooks/useCameraZoom.ts +++ b/src/hooks/useCameraZoom.ts @@ -5,6 +5,7 @@ import { toast } from "sonner"; import { useEffect } from "react"; async function zoomIn(options: ZoomInOptions) { + console.log(options); const response = await fetch( `${CAM_BASE}/Ip${options.camera}-command?magnification=${options.multiplierText?.toLowerCase()}`, {