33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
|
import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
|
||
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
|
|
import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot";
|
||
|
|
import { useNavigate } from "react-router";
|
||
|
|
|
||
|
|
type SnapshotContainerProps = {
|
||
|
|
side: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const SnapshotContainer = ({ side }: SnapshotContainerProps) => {
|
||
|
|
const { canvasRef } = useGetOverviewSnapshot(side);
|
||
|
|
const navigate = useNavigate();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="relative w-full aspect-video">
|
||
|
|
{side === "CameraFront" || side === "Rear" ? (
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={faArrowLeft}
|
||
|
|
className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer"
|
||
|
|
onClick={() => navigate("/front-camera-settings")}
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={faArrowRight}
|
||
|
|
className="absolute top-[50%] right-[2%] backdrop-blur-md"
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<canvas ref={canvasRef} className="w-full h-full object-contain block" />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|