You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
28 lines
791 B
28 lines
791 B
import { Icons } from "@/components/Icon"; |
|
import { canFullscreen } from "@/utils/detectFeatures"; |
|
import { useCallback } from "react"; |
|
import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton"; |
|
import { useVideoPlayerState } from "../VideoContext"; |
|
|
|
interface Props { |
|
className?: string; |
|
} |
|
|
|
export function FullscreenControl(props: Props) { |
|
const { videoState } = useVideoPlayerState(); |
|
|
|
const handleClick = useCallback(() => { |
|
if (videoState.isFullscreen) videoState.exitFullscreen(); |
|
else videoState.enterFullscreen(); |
|
}, [videoState]); |
|
|
|
if (!canFullscreen()) return null; |
|
|
|
return ( |
|
<VideoPlayerIconButton |
|
className={props.className} |
|
onClick={handleClick} |
|
icon={videoState.isFullscreen ? Icons.COMPRESS : Icons.EXPAND} |
|
/> |
|
); |
|
}
|
|
|