camera zoom handling across components; unify zoom level type and improve state management
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user