42 lines
1.2 KiB
TypeScript
42 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(() => {
|
|
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' onClick={handleClick}>
|
|
<span className='2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5'>
|
|
{isFullScreen ? <CloseFullscreenIcon /> : <FullScreenIcon />}
|
|
</span>
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
export default FullScreenButton;
|