Removed FullscreenContainer, replaced with fullscreen on document.body (

#10352)

Previous use of FullscreenContainer was causing modals to not appear in
fullscreen, as they were not descendants of FullscreenContainer.
Now just manually requesting fullscreen on document.body when fullscreen
button is clicked, or exiting fullscreen if currently fullscreened.

Resolves IR-1647

Co-authored-by: Josh Field <[email protected]>

packages/client-core/src/components/Fullscreen/index.tsx

@@ -23,29 +23,35 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import React from 'react'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { AudioEffectPlayer } from '@etherealengine/engine/src/audio/systems/MediaSystem'
 import Icon from '@etherealengine/ui/src/primitives/mui/Icon'
 import IconButtonWithTooltip from '@etherealengine/ui/src/primitives/mui/IconButtonWithTooltip'
 
 import { useShelfStyles } from '../Shelves/useShelfStyles'
-import { useFullscreen } from '../useFullscreen'
 import styles from './index.module.scss'
 
 export const Fullscreen = () => {
   const { t } = useTranslation()
-  const [fullScreenActive, setFullScreenActive] = useFullscreen()
+  const [fullScreenActive, setFullScreenActive] = useState(false)
   const { bottomShelfStyle } = useShelfStyles()
+
+  const setFullscreen = (input: boolean) => {
+    setFullScreenActive(input)
+    if (input) document.body.requestFullscreen()
+    else document.exitFullscreen()
+  }
+
   return (
     <div className={styles.fullScreen}>
       {fullScreenActive ? (
         <IconButtonWithTooltip
           title={t('user:menu.exitFullScreen')}
           className={`${styles.btn} ${bottomShelfStyle}`}
           background="white"
-          onClick={() => setFullScreenActive(false)}
+          onClick={() => setFullscreen(false)}
           onPointerUp={() => AudioEffectPlayer.instance.play(AudioEffectPlayer.SOUNDS.ui)}
           onPointerEnter={() => AudioEffectPlayer.instance.play(AudioEffectPlayer.SOUNDS.ui)}
           icon={<Icon type="FullscreenExit" />}
@@ -55,7 +61,7 @@ export const Fullscreen = () => {
           title={t('user:menu.enterFullScreen')}
           className={`${styles.btn} ${bottomShelfStyle}`}
           background="white"
-          onClick={() => setFullScreenActive(true)}
+          onClick={() => setFullscreen(true)}
           onPointerUp={() => AudioEffectPlayer.instance.play(AudioEffectPlayer.SOUNDS.ui)}
           onPointerEnter={() => AudioEffectPlayer.instance.play(AudioEffectPlayer.SOUNDS.ui)}
           icon={<Icon type="ZoomOutMap" />}

packages/client/package.json

@@ -63,7 +63,6 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-file-drop": "3.1.6",
-    "react-full-screen": "1.1.1",
     "react-i18next": "11.16.6",
     "react-icons": "^5.0.1",
     "react-json-tree": "^0.18.0",

packages/client/src/engine.tsx

@@ -27,7 +27,6 @@ import React, { createRef, Suspense } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { API } from '@etherealengine/client-core/src/API'
-import { FullscreenContainer } from '@etherealengine/client-core/src/components/FullscreenContainer'
 import { LoadingCircle } from '@etherealengine/client-core/src/components/LoadingCircle'
 import waitForClientAuthenticated from '@etherealengine/client-core/src/util/wait-for-client-authenticated'
 import { pipeLogs } from '@etherealengine/common/src/logger'
@@ -58,9 +57,7 @@ export default function ({ children, tailwind = false }): JSX.Element {
   const ref = createRef()
   const { t } = useTranslation()
   return !tailwind ? (
-    <FullscreenContainer ref={ref}>
-      <Suspense fallback={<LoadingCircle message={t('common:loader.loadingClient')} />}>{children}</Suspense>
-    </FullscreenContainer>
+    <Suspense fallback={<LoadingCircle message={t('common:loader.loadingClient')} />}>{children}</Suspense>
   ) : (
     children
   )