39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
import { useIsClient } from "usehooks-ts";
|
|
import { isDefined } from "helpers/others";
|
|
|
|
export const useFullscreen = (
|
|
id: string
|
|
): {
|
|
isFullscreen: boolean;
|
|
requestFullscreen: () => void;
|
|
exitFullscreen: () => void;
|
|
toggleFullscreen: () => void;
|
|
} => {
|
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
const isClient = useIsClient();
|
|
|
|
const elem = useMemo(() => (isClient ? document.querySelector(`#${id}`) : null), [id, isClient]);
|
|
|
|
const requestFullscreen = useCallback(() => elem?.requestFullscreen(), [elem]);
|
|
const exitFullscreen = useCallback(
|
|
async () => isFullscreen && document.exitFullscreen(),
|
|
[isFullscreen]
|
|
);
|
|
|
|
const toggleFullscreen = useCallback(
|
|
() => (isFullscreen ? exitFullscreen() : requestFullscreen()),
|
|
[exitFullscreen, isFullscreen, requestFullscreen]
|
|
);
|
|
|
|
useEffect(() => {
|
|
const onFullscreenChanged = () => {
|
|
setIsFullscreen(isDefined(document.fullscreenElement));
|
|
};
|
|
addEventListener("fullscreenchange", onFullscreenChanged);
|
|
return () => removeEventListener("fullscreenchange", onFullscreenChanged);
|
|
}, []);
|
|
|
|
return { isFullscreen, requestFullscreen, exitFullscreen, toggleFullscreen };
|
|
};
|