refactor: better fullscreen handling

examples/web/react/app.tsx

@@ -326,6 +326,11 @@ export const App: FC<AppProps> = ({
         }
     }, [keyaction]);
     useEffect(() => {
+        const onFullChange = (event: Event) => {
+            if (!document.fullscreenElement) {
+                setFullscreenState(false);
+            }
+        };
         const onKeyDown = (event: KeyboardEvent) => {
             switch (event.key) {
                 case "+":
@@ -360,10 +365,12 @@ export const App: FC<AppProps> = ({
         ) => {
             showToast(params.text, params.error, params.timeout);
         };
+        document.addEventListener("fullscreenchange", onFullChange);
         document.addEventListener("keydown", onKeyDown);
         emulator.bind("booted", onBooted);
         emulator.bind("message", onMessage);
         return () => {
+            document.removeEventListener("fullscreenchange", onFullChange);
             document.removeEventListener("keydown", onKeyDown);
             emulator.unbind("booted", onBooted);
             emulator.unbind("message", onMessage);

examples/web/react/components/display/display.tsx

@@ -97,7 +97,8 @@ export const Display: FC<DisplayProps> = ({
 
             // requests the browser to go fullscreen using the
             // body of the document as the entry HTML element
-            nativeFullscreen && document.body?.requestFullscreen();
+            nativeFullscreen &&
+                document.body?.requestFullscreen().catch(() => {});
         } else {
             setWidth(undefined);
             setHeight(undefined);
@@ -108,7 +109,7 @@ export const Display: FC<DisplayProps> = ({
 
             // restores the window mode, returning from the
             // fullscreen browser
-            nativeFullscreen && document?.exitFullscreen();
+            nativeFullscreen && document?.exitFullscreen().catch(() => {});
         }
         return () => {
             window.removeEventListener("resize", resizeRef.current);