74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
import { useEffect } from "react";
|
|
import type { CameraID } from "../../../../../app/config/cameraConfig";
|
|
import { useCameraFeedContext } from "../../../../../app/context/CameraFeedContext";
|
|
import SliderComponent from "../../../../../ui/SliderComponent";
|
|
import { useCameraZoom } from "../../../hooks/useCameraZoom";
|
|
import { useDebouncedCallback } from "use-debounce";
|
|
|
|
type CameraControlsProps = {
|
|
cameraFeedID: CameraID;
|
|
subTabIndex?: number;
|
|
};
|
|
|
|
const CameraControls = ({ cameraFeedID, subTabIndex }: CameraControlsProps) => {
|
|
const { state, dispatch } = useCameraFeedContext();
|
|
const { cameraZoomMutation, cameraZoomQuery } = useCameraZoom(cameraFeedID);
|
|
|
|
const zoomLevel = state.zoomLevel ? state.zoomLevel[cameraFeedID] : 0;
|
|
const currentZoomLevel = cameraZoomQuery.data ? cameraZoomQuery.data["propPhysCurrent"].value : 0;
|
|
const minLevel = cameraZoomQuery.data ? cameraZoomQuery.data["propPhysMin"].value : 0;
|
|
const maxLevel = cameraZoomQuery.data ? cameraZoomQuery.data["propPhysMax"].value : 0;
|
|
|
|
const normalizedZoomLevel = ((currentZoomLevel - minLevel) / (maxLevel - minLevel)).toFixed(2);
|
|
useEffect(() => {
|
|
if (subTabIndex === 1) {
|
|
dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID, mode: "controller" } });
|
|
}
|
|
}, [cameraFeedID, dispatch, subTabIndex]);
|
|
|
|
const debouncedMutation = useDebouncedCallback(async (value) => {
|
|
await cameraZoomMutation.mutateAsync({
|
|
cameraFeedID,
|
|
zoomLevel: value as number,
|
|
});
|
|
}, 1000);
|
|
|
|
const handleChange = (value: number | number[]) => {
|
|
const newZoom = value as number;
|
|
dispatch({
|
|
type: "SET_ZOOM_LEVEL",
|
|
payload: { cameraFeedID: cameraFeedID, zoomLevel: newZoom },
|
|
});
|
|
debouncedMutation(newZoom);
|
|
};
|
|
|
|
const handleOneShotClick = () => {
|
|
debouncedMutation(normalizedZoomLevel);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full mt-[5%]">
|
|
<h2 className="text-2xl mb-4">Camera {cameraFeedID}</h2>
|
|
<div className="w-[70%] ">
|
|
<label htmlFor="zoom">Zoom {zoomLevel}</label>
|
|
<SliderComponent id="zoom" onChange={handleChange} value={zoomLevel} min={0} max={1} step={0.1} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full mt-[5%]">
|
|
<h2>One Shot</h2>
|
|
<button
|
|
type="button"
|
|
className="p-2 bg-gray-500 rounded-xl w-[40%] mt-2 hover:bg-gray-700 cursor-pointer"
|
|
onClick={handleOneShotClick}
|
|
>
|
|
One Shot
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CameraControls;
|