From bee7a8dcb48096afaddcb2920f9f438ade7d9d18 Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Fri, 21 Jul 2023 23:12:15 +0200
Subject: [PATCH] fix: prevent typerror on fullscreen request (#461)

---
 apps/client/index.html                        |  1 -
 apps/client/src/common/hooks/useFullscreen.ts | 24 ++++++++++++-------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/apps/client/index.html b/apps/client/index.html
index 88135e8ca..c6a234f36 100644
--- a/apps/client/index.html
+++ b/apps/client/index.html
@@ -6,7 +6,6 @@
   <meta name='viewport' content='width=device-width, initial-scale=1' />
   <meta name='theme-color' content='#121212' />
   <meta name='ontime' content='ontime - event timer manager' />
-  <meta http-equiv="Content-Security-Policy" content="fullscreen 'self';">
   <link rel='apple-touch-icon' href='/logo192.png' />
   <link
     rel='icon'
diff --git a/apps/client/src/common/hooks/useFullscreen.ts b/apps/client/src/common/hooks/useFullscreen.ts
index 965f74204..2beb1c2b5 100644
--- a/apps/client/src/common/hooks/useFullscreen.ts
+++ b/apps/client/src/common/hooks/useFullscreen.ts
@@ -34,24 +34,30 @@ export default function useFullscreen() {
   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) {
+      const element = document.documentElement;
+      if (element.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) {
+        element.requestFullscreen().catch(() => {
+          /* nothing to do */
+        });
+      } else if (element.webkitRequestFullscreen) {
         // iOS Safari fullscreen API is supported
-        // @ts-expect-error -- we know this is not undefined now
-        (document.documentElement as WebkitDocument).webkitRequestFullscreen();
+        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();
+        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
-        // @ts-expect-error -- we know this is not undefined now
-        (document as WebkitDocument).webkitExitFullscreen();
+        (document as WebkitDocument).webkitExitFullscreen().catch(() => {
+          /* nothing to do */
+        });
       }
     }
   }, []);