From 4fa701c7a6249f29d6a150f92561b2ac291f40f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Sat, 12 Nov 2022 03:18:08 +0000
Subject: [PATCH] refactor: better fullscreen handling
---
examples/web/react/app.tsx | 7 +++++++
examples/web/react/components/display/display.tsx | 5 +++--
2 files changed, 10 insertions(+), 2 deletions(-)
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index d0bbb7ca..8210c83b 100644
--- a/examples/web/react/app.tsx
+++ b/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);
diff --git a/examples/web/react/components/display/display.tsx b/examples/web/react/components/display/display.tsx
index 4c44d275..987921bc 100644
--- a/examples/web/react/components/display/display.tsx
+++ b/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);
--
GitLab