47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import clsx from "clsx";
|
|
import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
|
|
import Card from "../UI/Card";
|
|
import { useNavigate, useLocation } from "react-router";
|
|
import { useSwipeable } from "react-swipeable";
|
|
|
|
const OverviewVideoContainer = ({
|
|
side,
|
|
settingsPage,
|
|
zoomLevel,
|
|
onZoomLevelChange,
|
|
}: {
|
|
title: string;
|
|
side: string;
|
|
settingsPage?: boolean;
|
|
zoomLevel?: number;
|
|
onZoomLevelChange?: (level: number) => void;
|
|
}) => {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const handlers = useSwipeable({
|
|
onSwipedLeft: () => {
|
|
if (location.pathname === "/b-camera-settings") return;
|
|
navigate("/");
|
|
},
|
|
onSwipedRight: () => {
|
|
if (location.pathname === "/a-camera-settings") return;
|
|
navigate("/");
|
|
},
|
|
trackMouse: true,
|
|
});
|
|
return (
|
|
<Card className={clsx("relative min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[70%] overflow-y-hidden")}>
|
|
<div className="w-full" {...handlers}>
|
|
<SnapshotContainer
|
|
side={side}
|
|
settingsPage={settingsPage}
|
|
zoomLevel={zoomLevel}
|
|
onZoomLevelChange={onZoomLevelChange}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default OverviewVideoContainer;
|