diff --git a/apps/client/src/common/hooks/useFullscreen.js b/apps/client/src/common/hooks/useFullscreen.js deleted file mode 100644 index 45a5f2a22..000000000 --- a/apps/client/src/common/hooks/useFullscreen.js +++ /dev/null @@ -1,43 +0,0 @@ -import { useCallback, useEffect, useState } from 'react'; - - -export default function useFullscreen() { - const [isFullScreen, setFullScreen] = useState(document.fullscreenElement); - - useEffect(() => { - const handleChange = () => { - setFullScreen(document.fullscreenElement); - }; - document.addEventListener('fullscreenchange', handleChange, { passive: true }); - document.addEventListener('resize', handleChange, { passive: true }); - - return () => { - document.removeEventListener('fullscreenchange', handleChange, { passive: true }); - document.removeEventListener('resize', handleChange, { passive: true }); - }; - }, []); - - const toggleFullScreen = useCallback(() => { - if (!document.fullscreenElement && !document.webkitIsFullScreen) { - // Fullscreen mode is not active, so we can enter fullscreen mode - if (document.documentElement.requestFullscreen) { - // Standard fullscreen API is supported - document.documentElement.requestFullscreen(); - } else if (document.documentElement.webkitRequestFullscreen) { - // iOS Safari fullscreen API is supported - document.documentElement.webkitRequestFullscreen(); - } - } else { - // Fullscreen mode is active, so we can exit fullscreen mode - if (document.exitFullscreen) { - // Standard fullscreen API is supported - document.exitFullscreen(); - } else if (document.webkitCancelFullscreen) { - // iOS Safari fullscreen API is supported - document.webkitCancelFullscreen(); - } - } - }, []); - - return { isFullScreen, toggleFullScreen }; -} diff --git a/apps/client/src/common/hooks/useFullscreen.ts b/apps/client/src/common/hooks/useFullscreen.ts new file mode 100644 index 000000000..965f74204 --- /dev/null +++ b/apps/client/src/common/hooks/useFullscreen.ts @@ -0,0 +1,60 @@ +import { useCallback, useEffect, useState } from 'react'; + +interface WebkitDocument extends Document { + webkitFullscreenElement?: Element | null; + webkitIsFullScreen?: boolean; + webkitExitFullscreen?: () => 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 + if (document.documentElement.requestFullscreen) { + // Standard fullscreen API is supported + document.documentElement.requestFullscreen(); + // @ts-expect-error -- the whole casting dance is not worth it + } else if (document.documentElement.webkitRequestFullscreen) { + // iOS Safari fullscreen API is supported + // @ts-expect-error -- we know this is not undefined now + (document.documentElement as WebkitDocument).webkitRequestFullscreen(); + } + } else { + // Fullscreen mode is active, so we can exit fullscreen mode + if (document.exitFullscreen) { + // Standard fullscreen API is supported + document.exitFullscreen(); + } else if ((document as WebkitDocument).webkitExitFullscreen) { + // iOS Safari fullscreen API is supported + // @ts-expect-error -- we know this is not undefined now + (document as WebkitDocument).webkitExitFullscreen(); + } + } + }, []); + + return { isFullScreen, toggleFullScreen }; +} diff --git a/apps/client/src/features/modals/quick-start/QuickStart.tsx b/apps/client/src/features/modals/quick-start/QuickStart.tsx index d8569f806..396563875 100644 --- a/apps/client/src/features/modals/quick-start/QuickStart.tsx +++ b/apps/client/src/features/modals/quick-start/QuickStart.tsx @@ -1,6 +1,10 @@ import { useEffect } from 'react'; import { useForm } from 'react-hook-form'; import { + Alert, + AlertDescription, + AlertIcon, + AlertTitle, Button, Input, Modal, @@ -41,9 +45,15 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) { }, [reset, data]); const onSubmit = async (data: Partial) => { - await postNew(data); - await ontimeQueryClient.invalidateQueries(EVENT_DATA); - await ontimeQueryClient.invalidateQueries(RUNDOWN_TABLE); + try { + await postNew(data); + await ontimeQueryClient.invalidateQueries(EVENT_DATA); + await ontimeQueryClient.invalidateQueries(RUNDOWN_TABLE); + + onClose(); + } catch (_) { + /* WE DO NOT HANDLE ERRORS */ + } }; const onReset = () => reset(eventDataPlaceholder); @@ -66,6 +76,15 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
+ + +
+ Note + + On submit, application options will be kept but rundown and event data will be reset + +
+
-
- Note: Application options will be kept but rundown and event data will be reset
-