From 105f395e6eea0dcbea88f485e1bfb0526597eb28 Mon Sep 17 00:00:00 2001 From: Carlos Valente <34649812+cpvalente@users.noreply.github.com> Date: Thu, 14 Mar 2024 18:32:07 +0100 Subject: [PATCH] refactor: migrate fullscreen to mantine (#819) --- apps/client/package.json | 1 + .../navigation-menu/NavigationMenu.tsx | 8 +-- apps/client/src/common/hooks/useFullscreen.ts | 68 ------------------- .../CuesheetTableHeader.tsx | 8 +-- pnpm-lock.yaml | 11 +++ 5 files changed, 20 insertions(+), 76 deletions(-) delete mode 100644 apps/client/src/common/hooks/useFullscreen.ts diff --git a/apps/client/package.json b/apps/client/package.json index ac345170f..c397d0012 100644 --- a/apps/client/package.json +++ b/apps/client/package.json @@ -10,6 +10,7 @@ "@dnd-kit/utilities": "^3.2.2", "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", + "@mantine/hooks": "^7.6.2", "@react-icons/all-files": "^4.1.0", "@sentry/react": "^7.92.0", "@tanstack/react-query": "^5.17.9", diff --git a/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx b/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx index 8fa4bbf1e..bb28107bb 100644 --- a/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx +++ b/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx @@ -2,6 +2,7 @@ import { memo, useEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { Link, useLocation, useSearchParams } from 'react-router-dom'; import { useDisclosure } from '@chakra-ui/react'; +import { useFullscreen } from '@mantine/hooks'; import { IoApps } from '@react-icons/all-files/io5/IoApps'; import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp'; import { IoContract } from '@react-icons/all-files/io5/IoContract'; @@ -11,7 +12,6 @@ import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical'; import { navigatorConstants } from '../../../viewerConfig'; import useClickOutside from '../../hooks/useClickOutside'; -import useFullscreen from '../../hooks/useFullscreen'; import { useViewOptionsStore } from '../../stores/viewOptions'; import { isKeyEnter } from '../../utils/keyEvent'; @@ -22,7 +22,7 @@ import style from './NavigationMenu.module.scss'; function NavigationMenu() { const location = useLocation(); - const { isFullScreen, toggleFullScreen } = useFullscreen(); + const { fullscreen, toggle } = useFullscreen(); const { toggleMirror } = useViewOptionsStore(); const [showButton, setShowButton] = useState(false); const [searchParams, setSearchParams] = useSearchParams(); @@ -54,7 +54,7 @@ function NavigationMenu() { }; }, []); - const handleFullscreen = () => toggleFullScreen(); + const handleFullscreen = () => toggle(); const handleMirror = () => toggleMirror(); const showEditFormDrawer = () => { @@ -85,7 +85,7 @@ function NavigationMenu() { }} > Toggle Fullscreen - {isFullScreen ? : } + {fullscreen ? : }
Promise; - webkitRequestFullscreen?: () => Promise; -} - -export default function useFullscreen() { - const [isFullScreen, setFullScreen] = useState( - document.fullscreenElement || (document as WebkitDocument).webkitFullscreenElement, - ); - - useEffect(() => { - const handleChange = () => { - if (typeof (document as WebkitDocument).webkitFullscreenElement !== 'undefined') { - setFullScreen((document as WebkitDocument).webkitFullscreenElement); - } else { - setFullScreen(document.fullscreenElement); - } - }; - (document as WebkitDocument).addEventListener('webkitfullscreenchange', handleChange, { passive: true }); - document.addEventListener('fullscreenchange', handleChange, { passive: true }); - document.addEventListener('resize', handleChange, { passive: true }); - - return () => { - (document as WebkitDocument).removeEventListener('webkitfullscreenchange', handleChange); - document.removeEventListener('fullscreenchange', handleChange); - document.removeEventListener('resize', handleChange); - }; - }, []); - - const toggleFullScreen = useCallback(() => { - if (!document.fullscreenElement && !(document as WebkitDocument).webkitIsFullScreen) { - // Fullscreen mode is not active, so we can enter fullscreen mode - const element = document.documentElement; - if (element.requestFullscreen) { - // Standard fullscreen API is supported - element.requestFullscreen().catch(() => { - /* nothing to do */ - }); - } else if (element.webkitRequestFullscreen) { - // iOS Safari fullscreen API is supported - element.webkitRequestFullscreen?.().catch(() => { - /* nothing to do */ - }); - } - } else { - // Fullscreen mode is active, so we can exit fullscreen mode - if (document.exitFullscreen) { - // Standard fullscreen API is supported - document.exitFullscreen().catch((error) => { - console.error('Error while trying to exit fullscreen:', error); - }); - } else if ((document as WebkitDocument).webkitExitFullscreen) { - // iOS Safari fullscreen API is supported - (document as WebkitDocument).webkitExitFullscreen?.().catch(() => { - /* nothing to do */ - }); - } - } - }, []); - - return { isFullScreen, toggleFullScreen }; -} diff --git a/apps/client/src/features/cuesheet/cuesheet-table-header/CuesheetTableHeader.tsx b/apps/client/src/features/cuesheet/cuesheet-table-header/CuesheetTableHeader.tsx index 73e0da24a..3544d0033 100644 --- a/apps/client/src/features/cuesheet/cuesheet-table-header/CuesheetTableHeader.tsx +++ b/apps/client/src/features/cuesheet/cuesheet-table-header/CuesheetTableHeader.tsx @@ -1,4 +1,5 @@ import { Tooltip } from '@chakra-ui/react'; +import { useFullscreen } from '@mantine/hooks'; import { IoContract } from '@react-icons/all-files/io5/IoContract'; import { IoExpand } from '@react-icons/all-files/io5/IoExpand'; import { IoLocate } from '@react-icons/all-files/io5/IoLocate'; @@ -6,7 +7,6 @@ import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline' import { Playback, ProjectData } from 'ontime-types'; import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon'; -import useFullscreen from '../../../common/hooks/useFullscreen'; import useProjectData from '../../../common/hooks-query/useProjectData'; import { cx, enDash } from '../../../common/utils/styleUtils'; import { tooltipDelayFast } from '../../../ontimeConfig'; @@ -31,7 +31,7 @@ export default function CuesheetTableHeader({ handleExport, featureData }: Cuesh const showSettings = useCuesheetSettings((state) => state.showSettings); const toggleSettings = useCuesheetSettings((state) => state.toggleSettings); const toggleFollow = useCuesheetSettings((state) => state.toggleFollow); - const { isFullScreen, toggleFullScreen } = useFullscreen(); + const { fullscreen, toggle } = useFullscreen(); const { data: project } = useProjectData(); const exportProject = () => { @@ -75,8 +75,8 @@ export default function CuesheetTableHeader({ handleExport, featureData }: Cuesh - toggleFullScreen()} className={style.actionIcon}> - {isFullScreen ? : } + toggle()} className={style.actionIcon}> + {fullscreen ? : } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 302cb7952..f9691d090 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -68,6 +68,9 @@ importers: '@emotion/styled': specifier: ^11.10.6 version: 11.10.6(@emotion/react@11.10.6)(@types/react@18.0.26)(react@18.2.0) + '@mantine/hooks': + specifier: ^7.6.2 + version: 7.6.2(react@18.2.0) '@react-icons/all-files': specifier: ^4.1.0 version: 4.1.0(react@18.2.0) @@ -2427,6 +2430,14 @@ packages: - supports-color dev: true + /@mantine/hooks@7.6.2(react@18.2.0): + resolution: {integrity: sha512-ZrOgrZHoIGCDKrr2/9njDgK0al+jjusYQFlmR0YyEFyRtgY6eNSI4zuYLcAPx1haHmUm5RsLBrqY6Iy/TLdGXA==} + peerDependencies: + react: ^18.2.0 + dependencies: + react: 18.2.0 + dev: false + /@nodelib/fs.scandir@2.1.5: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'}