TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

camera zoom handling across components; unify zoom level type and improve state management

Browse Source
This commit is contained in:
Toba Ojo
2025-10-02 16:07:05 +01:00
parent 4eeb368484
commit 82ef562046
7 changed files with 111 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/CameraOverview/SnapshotContainer.tsx
View File

@@ -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<HTMLCanvasElement>) => {
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 <p className="h-100">An error occurred</p>;
if (isPending) return <p className="h-100">Loading...</p>;

168
src/components/CameraSettings/CameraSettingFields.tsx
View File

@@ -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> | 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<CameraSettingValues>(
() => ({
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 (
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validate={validateValues}
validateOnChange={false}
enableReinitialize
>
{({ errors, touched }) => (
<Form className="flex flex-col space-y-6 p-2">
@@ -169,78 +179,28 @@ const CameraSettingFields = ({
</div>
<div className="my-3">
<CardHeader title="Zoom settings" />
<div className="mx-auto flex gap-10 items-center ">
<div>
<Field
type="radio"
name="zoom"
value={zoomLevel?.level ? zoomLevel.level.toString() : "1"}
checked={zoomLevel?.level === 1}
className="hidden peer"
id="zoom1"
onChange={() => handleRadioButtonChange(1)}
/>
<label
htmlFor="zoom1"
className="px-6 py-2 rounded-md border border-gray-300 peer-checked:border-2 peer-checked:border-blue-900 peer-checked:text-blue-600 peer-checked:bg-gray-100"
>
x1
</label>
</div>
<div>
<Field
type="radio"
name="zoom"
value={zoomLevel?.level ? zoomLevel.level.toString() : "2"}
checked={zoomLevel?.level === 2}
className="hidden peer"
id="zoom2"
onChange={() => handleRadioButtonChange(2)}
/>
<label
htmlFor="zoom2"
className="px-6 py-2 rounded-md border border-gray-300 peer-checked:border-2 peer-checked:border-blue-900 peer-checked:text-blue-600 peer-checked:bg-gray-100"
>
x2
</label>
</div>
<div>
<Field
type="radio"
name="zoom"
value={zoomLevel?.level ? zoomLevel.level.toString() : "4"}
checked={zoomLevel?.level === 4}
className="hidden peer"
id="zoom4"
onChange={() => handleRadioButtonChange(4)}
/>
<label
htmlFor="zoom4"
className="px-6 py-2 rounded-md border border-gray-300 peer-checked:border-2 peer-checked:border-blue-900 peer-checked:text-blue-600 peer-checked:bg-gray-100"
>
x4
</label>
</div>
<div>
<Field
type="radio"
name="zoom"
value={zoomLevel?.level ? zoomLevel.level.toString() : "8"}
checked={zoomLevel?.level === 8}
className="hidden peer"
id="zoom8"
onChange={() => handleRadioButtonChange(8)}
/>
<label
htmlFor="zoom8"
className="px-6 py-2 rounded-md border border-gray-300 peer-checked:border-2 peer-checked:border-blue-900 peer-checked:text-blue-600 peer-checked:bg-gray-100"
>
x8
</label>
</div>
<div className="mx-auto flex gap-10 items-center">
{zoomOptions.map((zoom) => (
<div key={zoom}>
<Field
type="radio"
name="zoom"
value={zoom.toString()}
checked={selectedZoom === zoom}
className="hidden peer"
id={`zoom${zoom}`}
onChange={() => handleRadioButtonChange(zoom)}
/>
<label
htmlFor={`zoom${zoom}`}
className="px-6 py-2 rounded-md border border-gray-300
peer-checked:border-2 peer-checked:border-blue-900
peer-checked:text-blue-600 peer-checked:bg-gray-100"
>
x{zoom}
</label>
</div>
))}
</div>
</div>
<button

6
src/components/CameraSettings/CameraSettings.tsx
View File

@@ -1,5 +1,5 @@
import { useFetchCameraConfig } from "../../hooks/useCameraConfig";
import type { ZoomLevel } from "../../types/types";
import Card from "../UI/Card";
import CardHeader from "../UI/CardHeader";
import CameraSettingFields from "./CameraSettingFields";
@@ -13,8 +13,8 @@ const CameraSettings = ({
}: {
title: string;
side: string;
zoomLevel?: ZoomLevel;
onZoomLevelChange?: (level: ZoomLevel) => void;
zoomLevel?: number;
onZoomLevelChange?: (level: number) => void;
}) => {
const { data, isError, isPending, updateCameraConfig } =
useFetchCameraConfig(side);

5
src/components/FrontCameraSettings/OverviewVideoContainer.tsx
View File

@@ -3,7 +3,6 @@ import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
import Card from "../UI/Card";
import { useNavigate, useLocation } from "react-router";
import { useSwipeable } from "react-swipeable";
import type { ZoomLevel } from "../../types/types";
const OverviewVideoContainer = ({
side,
@@ -14,8 +13,8 @@ const OverviewVideoContainer = ({
title: string;
side: string;
settingsPage?: boolean;
zoomLevel?: ZoomLevel;
onZoomLevelChange?: (level: ZoomLevel) => void;
zoomLevel?: number;
onZoomLevelChange?: (level: number) => void;
}) => {
const navigate = useNavigate();
const location = useLocation();

30
src/hooks/useCameraZoom.ts
View File

@@ -1,6 +1,10 @@
import { useMutation } from "@tanstack/react-query";
import {
useMutation,
useQuery,
type QueryFunctionContext,
} from "@tanstack/react-query";
import { CAM_BASE } from "../utils/config";
import type { ZoomInOptions } from "../types/types";
import type { zoomConfig, ZoomInOptions } from "../types/types";
async function zoomIn(options: ZoomInOptions) {
const response = await fetch(
@@ -9,14 +13,32 @@ async function zoomIn(options: ZoomInOptions) {
if (!response.ok) {
throw new Error("Cannot reach camera zoom endpoint");
}
const data = await response.json();
console.log(data);
return;
}
export const useCameraZoom = () => {
async function fetchZoomInConfig({
queryKey,
}: QueryFunctionContext<[string, zoomConfig]>) {
const [, { camera }] = queryKey;
console.log(camera);
const response = await fetch(`${CAM_BASE}/Ip${camera}-inspect`);
if (!response.ok) {
throw new Error("Cannot get camera zoom settings");
}
return response.text();
}
//change to string
export const useCameraZoom = (options: zoomConfig) => {
const mutation = useMutation({
mutationKey: ["zoomIn"],
mutationFn: (options: ZoomInOptions) => zoomIn(options),
});
return { mutation };
const query = useQuery({
queryKey: ["fetchZoomInConfig", options],
queryFn: fetchZoomInConfig,
});
return { mutation, query };
};

11
src/pages/FrontCamera.tsx
View File

@@ -2,18 +2,9 @@ import { useState } from "react";
import CameraSettings from "../components/CameraSettings/CameraSettings";
import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVideoContainer";
import { Toaster } from "sonner";
import type { ZoomLevel } from "../types/types";
const FrontCamera = () => {
const [zoomLevel, setZoomLevel] = useState<ZoomLevel>({
left: 0,
top: 0,
x: 0,
y: 0,
px: 0,
py: 0,
level: 1,
});
const [zoomLevel, setZoomLevel] = useState<number>(1);
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

4
src/types/types.ts
View File

@@ -266,3 +266,7 @@ export type ZoomInOptions = {
camera: string;
multiplier: number;
};
export type zoomConfig = {
camera: string;
};