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