48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import { Dispatch, SetStateAction, useEffect } from "react";
|
|
import FullScreenIcon from "./icons/FullScreenIcon";
|
|
import Button from "./ui/Button";
|
|
import CloseFullscreenIcon from "./icons/CloseFullscreenIcon";
|
|
import { isMobileSafari } from "react-device-detect";
|
|
|
|
interface IFullScreenProps {
|
|
onFullScreenChange: Dispatch<SetStateAction<boolean>>;
|
|
onClick: () => void;
|
|
isFullScreen: boolean;
|
|
}
|
|
|
|
function FullScreenButton({
|
|
isFullScreen,
|
|
onFullScreenChange,
|
|
onClick: handleClick,
|
|
}: IFullScreenProps) {
|
|
useEffect(() => {
|
|
onFullScreenChange(!!document.fullscreenElement);
|
|
document.addEventListener("fullscreenchange", () =>
|
|
onFullScreenChange(!!document.fullscreenElement)
|
|
);
|
|
|
|
return () =>
|
|
document.removeEventListener("fullscreenchange", () =>
|
|
onFullScreenChange(!!document.fullscreenElement)
|
|
);
|
|
}, [onFullScreenChange]);
|
|
|
|
if (isMobileSafari) return null;
|
|
|
|
return (
|
|
<Button
|
|
onlyIcon
|
|
size="small"
|
|
variant="secondary"
|
|
className="absolute 2xl:top-[1.667vw] 2xl:right-[1.667vw] top-4 right-4"
|
|
onClick={handleClick}
|
|
>
|
|
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
|
|
{isFullScreen ? <CloseFullscreenIcon /> : <FullScreenIcon />}
|
|
</span>
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
export default FullScreenButton;
|