47 lines
1.2 KiB
TypeScript
47 lines
1.2 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(() => {
|
|
const handleFullScreenChange = () => {
|
|
onFullScreenChange(!!document.fullscreenElement);
|
|
};
|
|
|
|
document.addEventListener("fullscreenchange", handleFullScreenChange);
|
|
|
|
return () => {
|
|
document.removeEventListener("fullscreenchange", handleFullScreenChange);
|
|
};
|
|
}, [onFullScreenChange]);
|
|
|
|
if (isMobileSafari) return null;
|
|
|
|
return (
|
|
<Button
|
|
onlyIcon
|
|
size={innerWidth >= 768 ? "small" : "medium"}
|
|
variant="secondary"
|
|
onClick={handleClick}
|
|
>
|
|
<span className="2xl:size-[1.389vw] size-5">
|
|
{isFullScreen ? <CloseFullscreenIcon /> : <FullScreenIcon />}
|
|
</span>
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
export default FullScreenButton;
|