52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
|
'use client'
|
||
|
|
import { FC, MouseEventHandler } from "react";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Maximize } from "lucide-react";
|
||
|
|
|
||
|
|
|
||
|
|
type CustomDocument = Document & {
|
||
|
|
mozCancelFullScreen?: () => void;
|
||
|
|
};
|
||
|
|
const FullScreenToggle: FC = () => {
|
||
|
|
const toggleFullScreen: MouseEventHandler<HTMLButtonElement> = () => {
|
||
|
|
const doc = document;
|
||
|
|
const docEl = doc.documentElement;
|
||
|
|
|
||
|
|
const requestFullScreen =
|
||
|
|
docEl.requestFullscreen ||
|
||
|
|
docEl.requestFullscreen ||
|
||
|
|
docEl.requestFullscreen ||
|
||
|
|
docEl.requestFullscreen;
|
||
|
|
const cancelFullScreen =
|
||
|
|
doc.exitFullscreen ||
|
||
|
|
(doc as CustomDocument).mozCancelFullScreen ||
|
||
|
|
doc.exitFullscreen ||
|
||
|
|
doc.exitFullscreen;
|
||
|
|
|
||
|
|
if (
|
||
|
|
!doc.fullscreenElement &&
|
||
|
|
!doc.fullscreenElement &&
|
||
|
|
!doc.fullscreenElement &&
|
||
|
|
!doc.fullscreenElement
|
||
|
|
) {
|
||
|
|
requestFullScreen?.call(docEl);
|
||
|
|
} else {
|
||
|
|
cancelFullScreen?.call(doc);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Button
|
||
|
|
onClick={toggleFullScreen}
|
||
|
|
variant="outline"
|
||
|
|
color="secondary"
|
||
|
|
className="border-default-600 "
|
||
|
|
fullWidth
|
||
|
|
>
|
||
|
|
Fullscreen Mode
|
||
|
|
<Maximize className="ms-2 h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default FullScreenToggle;
|