From 7dfaab9ec7789ffe8fc1b0fbe5bad75043e666f6 Mon Sep 17 00:00:00 2001 From: Kyle Baran Date: Sat, 15 Jun 2024 00:05:34 -0700 Subject: [PATCH] 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 --- .../src/components/Fullscreen/index.tsx | 16 ++-- .../src/components/FullscreenContainer.tsx | 70 ----------------- packages/client/package.json | 1 - packages/client/src/engine.tsx | 5 +- .../FullscreenContainer.test.tsx | 42 ---------- .../FullscreenContainer/index.stories.tsx | 44 ----------- .../tailwind/FullscreenContainer/index.tsx | 78 ------------------- 7 files changed, 12 insertions(+), 244 deletions(-) delete mode 100644 packages/client-core/src/components/FullscreenContainer.tsx delete mode 100644 packages/ui/src/components/tailwind/FullscreenContainer/FullscreenContainer.test.tsx delete mode 100644 packages/ui/src/components/tailwind/FullscreenContainer/index.stories.tsx delete mode 100644 packages/ui/src/components/tailwind/FullscreenContainer/index.tsx diff --git a/packages/client-core/src/components/Fullscreen/index.tsx b/packages/client-core/src/components/Fullscreen/index.tsx index 7bee38ebfb..402261c866 100644 --- a/packages/client-core/src/components/Fullscreen/index.tsx +++ b/packages/client-core/src/components/Fullscreen/index.tsx @@ -23,7 +23,7 @@ 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' @@ -31,13 +31,19 @@ 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 (
{fullScreenActive ? ( @@ -45,7 +51,7 @@ export const Fullscreen = () => { 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={} @@ -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={} diff --git a/packages/client-core/src/components/FullscreenContainer.tsx b/packages/client-core/src/components/FullscreenContainer.tsx deleted file mode 100644 index 1d4dc6cf0e..0000000000 --- a/packages/client-core/src/components/FullscreenContainer.tsx +++ /dev/null @@ -1,70 +0,0 @@ -/* -CPAL-1.0 License - -The contents of this file are subject to the Common Public Attribution License -Version 1.0. (the "License"); you may not use this file except in compliance -with the License. You may obtain a copy of the License at -https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE. -The License is based on the Mozilla Public License Version 1.1, but Sections 14 -and 15 have been added to cover use of software over a computer network and -provide for limited attribution for the Original Developer. In addition, -Exhibit A has been modified to be consistent with Exhibit B. - -Software distributed under the License is distributed on an "AS IS" basis, -WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the -specific language governing rights and limitations under the License. - -The Original Code is Ethereal Engine. - -The Original Developer is the Initial Developer. The Initial Developer of the -Original Code is the Ethereal Engine team. - -All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 -Ethereal Engine. All Rights Reserved. -*/ - -import React, { useEffect } from 'react' -import { FullScreen, useFullScreenHandle } from 'react-full-screen' - -import { FullscreenContext } from '@etherealengine/client-core/src/components/useFullscreen' -import { iOS } from '@etherealengine/spatial/src/common/functions/isMobile' - -type Props = { children: JSX.Element | JSX.Element[] } - -export const FullscreenContainer = React.forwardRef((props: Props, ref: any) => { - const handle = useFullScreenHandle() - - const renderEngineCanvas = () => { - const canvas = document.getElementById('engine-renderer-canvas') - if (!canvas) return - canvas.parentElement?.removeChild(canvas) - ref.current.appendChild(canvas) - } - - useEffect(() => { - renderEngineCanvas() - }, []) - - const setFullScreen = (value: boolean) => { - if (value) { - handle.enter().catch((err) => console.log(err)) - renderEngineCanvas() - } else { - handle.exit().catch((err) => console.log(err)) - } - } - - return iOS ? ( -
- {props.children} -
- ) : ( - - -
- {props.children} -
- - - ) -}) diff --git a/packages/client/package.json b/packages/client/package.json index bcdd0dc6ae..44cb7c5068 100644 --- a/packages/client/package.json +++ b/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", diff --git a/packages/client/src/engine.tsx b/packages/client/src/engine.tsx index 26f7531f65..26bf4581db 100755 --- a/packages/client/src/engine.tsx +++ b/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 ? ( - - }>{children} - + }>{children} ) : ( children ) diff --git a/packages/ui/src/components/tailwind/FullscreenContainer/FullscreenContainer.test.tsx b/packages/ui/src/components/tailwind/FullscreenContainer/FullscreenContainer.test.tsx deleted file mode 100644 index 3fd83b9404..0000000000 --- a/packages/ui/src/components/tailwind/FullscreenContainer/FullscreenContainer.test.tsx +++ /dev/null @@ -1,42 +0,0 @@ -/* -CPAL-1.0 License - -The contents of this file are subject to the Common Public Attribution License -Version 1.0. (the "License"); you may not use this file except in compliance -with the License. You may obtain a copy of the License at -https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE. -The License is based on the Mozilla Public License Version 1.1, but Sections 14 -and 15 have been added to cover use of software over a computer network and -provide for limited attribution for the Original Developer. In addition, -Exhibit A has been modified to be consistent with Exhibit B. - -Software distributed under the License is distributed on an "AS IS" basis, -WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the -specific language governing rights and limitations under the License. - -The Original Code is Ethereal Engine. - -The Original Developer is the Initial Developer. The Initial Developer of the -Original Code is the Ethereal Engine team. - -All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 -Ethereal Engine. All Rights Reserved. -*/ - -import { describe, expect, it } from '@jest/globals' -import { shallow } from 'enzyme' -import React, { createRef } from 'react' - -import FullscreenContainer from './index' -import { Default as story } from './index.stories' - -describe('FullscreenContainer', () => { - it('- should render', () => { - const wrapper = shallow( - -
hello
- - ) - expect(wrapper).toMatchSnapshot() - }) -}) diff --git a/packages/ui/src/components/tailwind/FullscreenContainer/index.stories.tsx b/packages/ui/src/components/tailwind/FullscreenContainer/index.stories.tsx deleted file mode 100644 index 6e85cf726c..0000000000 --- a/packages/ui/src/components/tailwind/FullscreenContainer/index.stories.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/* -CPAL-1.0 License - -The contents of this file are subject to the Common Public Attribution License -Version 1.0. (the "License"); you may not use this file except in compliance -with the License. You may obtain a copy of the License at -https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE. -The License is based on the Mozilla Public License Version 1.1, but Sections 14 -and 15 have been added to cover use of software over a computer network and -provide for limited attribution for the Original Developer. In addition, -Exhibit A has been modified to be consistent with Exhibit B. - -Software distributed under the License is distributed on an "AS IS" basis, -WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the -specific language governing rights and limitations under the License. - -The Original Code is Ethereal Engine. - -The Original Developer is the Initial Developer. The Initial Developer of the -Original Code is the Ethereal Engine team. - -All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 -Ethereal Engine. All Rights Reserved. -*/ - -import Component from './index' - -const argTypes = {} - -export default { - title: 'Primitives/Tailwind/FullscreenContainer', - component: Component, - parameters: { - componentSubtitle: 'FullscreenContainer', - jest: 'FullscreenContainer.test.tsx', - design: { - type: 'figma', - url: '' - } - }, - argTypes -} - -export const Default = { args: Component.defaultProps } diff --git a/packages/ui/src/components/tailwind/FullscreenContainer/index.tsx b/packages/ui/src/components/tailwind/FullscreenContainer/index.tsx deleted file mode 100644 index 41738317a3..0000000000 --- a/packages/ui/src/components/tailwind/FullscreenContainer/index.tsx +++ /dev/null @@ -1,78 +0,0 @@ -/* -CPAL-1.0 License - -The contents of this file are subject to the Common Public Attribution License -Version 1.0. (the "License"); you may not use this file except in compliance -with the License. You may obtain a copy of the License at -https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE. -The License is based on the Mozilla Public License Version 1.1, but Sections 14 -and 15 have been added to cover use of software over a computer network and -provide for limited attribution for the Original Developer. In addition, -Exhibit A has been modified to be consistent with Exhibit B. - -Software distributed under the License is distributed on an "AS IS" basis, -WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the -specific language governing rights and limitations under the License. - -The Original Code is Ethereal Engine. - -The Original Developer is the Initial Developer. The Initial Developer of the -Original Code is the Ethereal Engine team. - -All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 -Ethereal Engine. All Rights Reserved. -*/ - -import React, { useCallback, useEffect } from 'react' -import { FullScreen, useFullScreenHandle } from 'react-full-screen' - -import { FullscreenContext } from '@etherealengine/client-core/src/components/useFullscreen' -import { useHookstate } from '@etherealengine/hyperflux' -import { iOS } from '@etherealengine/spatial/src/common/functions/isMobile' - -type Props = { children: JSX.Element | JSX.Element[] } - -const FullscreenContainer = React.forwardRef((props: Props, ref: any) => { - const fullScreenActive = useHookstate(false) - const handle = useFullScreenHandle() - - useEffect(() => { - if (ref?.current) { - const canvas = document.getElementById('engine-renderer-canvas')! - canvas.parentElement?.removeChild(canvas) - ref.current.appendChild(canvas) - } - }, [ref]) - - const reportChange = useCallback((state) => { - if (state) { - fullScreenActive.set(state) - } else { - fullScreenActive.set(state) - } - }, []) - - useEffect(() => { - if (fullScreenActive.value) handle.enter() - else handle.exit() - }, [fullScreenActive.value]) - - return iOS ? ( -
- {props.children} -
- ) : ( - - - {props.children} - - - ) -}) - -FullscreenContainer.displayName = 'FullscreenContainer' - -FullscreenContainer.defaultProps = { - children:
FullscreenContainer
-} -export default FullscreenContainer