diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx index d0bbb7caa62b735363d0d52b219499404ac84e41..8210c83b5e44494a6744be2b93e0806ce1cc9768 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 4c44d27569e060d89649cf725e96297fa969a4d4..987921bc8c79f04a5ce42075741f512698f758bd 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);