refactor: migrate fullscreen to mantine (#819)

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",

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 ? <IoContract /> : <IoExpand />}
+                {fullscreen ? <IoContract /> : <IoExpand />}
               </div>
               <div
                 className={style.link}

apps/client/src/common/hooks/useFullscreen.ts

@@ -1,68 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-nocheck -- working on it
-import { useCallback, useEffect, useState } from 'react';
-
-interface WebkitDocument extends Document {
-  webkitFullscreenElement?: Element | null;
-  webkitIsFullScreen?: boolean;
-  webkitExitFullscreen?: () => Promise<void>;
-  webkitRequestFullscreen?: () => Promise<void>;
-}
-
-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 };
-}

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
           </span>
         </Tooltip>
         <Tooltip openDelay={tooltipDelayFast} label='Toggle Fullscreen'>
-          <span onClick={() => toggleFullScreen()} className={style.actionIcon}>
-            {isFullScreen ? <IoContract /> : <IoExpand />}
+          <span onClick={() => toggle()} className={style.actionIcon}>
+            {fullscreen ? <IoContract /> : <IoExpand />}
           </span>
         </Tooltip>
         <Tooltip openDelay={tooltipDelayFast} label='Export rundown'>

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'}