2023-01-09 21:51:24 +01:00
|
|
|
import { Icons } from "@/components/Icon";
|
2023-01-08 16:23:42 +01:00
|
|
|
import { useCallback } from "react";
|
2023-01-09 21:51:24 +01:00
|
|
|
import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton";
|
2023-01-08 16:23:42 +01:00
|
|
|
import { useVideoPlayerState } from "../VideoContext";
|
2023-01-08 13:15:32 +01:00
|
|
|
|
2023-01-08 20:36:46 +01:00
|
|
|
const canFullscreen = document.fullscreenEnabled;
|
|
|
|
|
2023-01-09 21:51:24 +01:00
|
|
|
interface Props {
|
|
|
|
className?: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
export function FullscreenControl(props: Props) {
|
2023-01-08 16:23:42 +01:00
|
|
|
const { videoState } = useVideoPlayerState();
|
2023-01-08 13:15:32 +01:00
|
|
|
|
2023-01-08 16:23:42 +01:00
|
|
|
const handleClick = useCallback(() => {
|
|
|
|
if (videoState.isFullscreen) videoState.exitFullscreen();
|
|
|
|
else videoState.enterFullscreen();
|
|
|
|
}, [videoState]);
|
2023-01-08 13:15:32 +01:00
|
|
|
|
2023-01-08 20:36:46 +01:00
|
|
|
if (!canFullscreen) return null;
|
|
|
|
|
2023-01-08 16:23:42 +01:00
|
|
|
return (
|
2023-01-09 21:51:24 +01:00
|
|
|
<VideoPlayerIconButton
|
|
|
|
className={props.className}
|
2023-01-08 16:23:42 +01:00
|
|
|
onClick={handleClick}
|
2023-01-09 21:51:24 +01:00
|
|
|
icon={videoState.isFullscreen ? Icons.COMPRESS : Icons.EXPAND}
|
|
|
|
/>
|
2023-01-08 16:23:42 +01:00
|
|
|
);
|
2023-01-08 13:15:32 +01:00
|
|
|
}
|