@guruhotel/aura-hooks/esm/use-fullscreen/use-fullscreen.js

🪝 Hooks library designed by the Guruhotel team for Aura UI

import{useCallback as e,useRef as n,useState as r,useEffect as t}from"react";function l(){const e=window.document;return e.fullscreenElement||e.webkitFullscreenElement||e.mozFullScreenElement||e.msFullscreenElement}const u=["","webkit","moz","ms"];function c(e,{onFullScreen:n,onError:r}){return u.forEach((t=>{e.addEventListener(`${t}fullscreenchange`,n),e.addEventListener(`${t}fullscreenerror`,r)})),()=>{u.forEach((t=>{e.removeEventListener(`${t}fullscreenchange`,n),e.removeEventListener(`${t}fullscreenerror`,r)}))}}export function useFullscreen(){const[u,o]=r(!1),s=n(),i=e((e=>{o(e.target===l())}),[o]),m=e((e=>{o(!1),console.error(`[@guruhotel/hooks] use-fullscreen: Error attempting full-screen mode method: ${e} (${e.target})`)}),[o]),f=e((async()=>{l()?await async function(){const e=window.document;return"function"==typeof e.exitFullscreen?e.exitFullscreen():"function"==typeof e.msExitFullscreen?e.msExitFullscreen():"function"==typeof e.webkitExitFullscreen?e.webkitExitFullscreen():"function"==typeof e.mozCancelFullScreen?e.mozCancelFullScreen():null}():await async function(e){const n=e;return(null==n.requestFullscreen?void 0:n.requestFullscreen())||(null==n.msRequestFullscreen?void 0:n.msRequestFullscreen())||(null==n.webkitRequestFullscreen?void 0:n.webkitRequestFullscreen())||(null==n.mozRequestFullscreen?void 0:n.mozRequestFullscreen())}(s.current)}),[]),d=e((e=>{s.current=null===e?window.document.documentElement:e}),[]);return t((()=>!s.current&&window.document?(s.current=window.document.documentElement,c(s.current,{onFullScreen:i,onError:m})):s.current?c(s.current,{onFullScreen:i,onError:m}):void 0),[]),{ref:d,toggle:f,fullscreen:u}}