Fullscreen Detection broken

[netAction]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

Affects: HTML5 export.

Both fullscreen detection and fullscreen switch methods are broken when the user leaves fullscreen on Chrome/Windows via Esc key or on Chrome/Android via < button or on Safari/IOs via swipe down.

After executing the Activate fullscreen action, GDevelop thinks it is in fullscreen. Even if it is not, because fullscreen has been left manually. Then running Activate fullscreen again might crash. And worse, the condition The game is in fullscreen says true but it is not.

The Javascript code if (document.fullscreenElement != null) returns the correct value on all three browsers, no matter if the fullscreen has been closed via Activate fullscreen action or via the intended browser way.

Minimal project for reproduction:

Steps to reproduce

1. Create a button and bind Activate fullscreen on click.
2. Leave Fullscreen in the way your browser suggests.
3. Check The game is in fullscreen or use the Activate fullscreen action again. Both don't work correctly.
4. Check if (document.fullscreenElement != null). It does work.

GDevelop platform

Desktop

GDevelop version

5.3.195

Platform info

IDE: GDevelop via Microsoft Store on Windows 11

Browser: Chrome/Windows, Chrome/Android, Safari/IOs

Additional context

No response

[ClementPasteau]

Hi @netAction does this happen when you publish on gd.games too?
If so, can you share a link so we can see the problem in action?
Thanks

[netAction]

Yes the bug is reproducable in gd.games. https://gd.games/netaction/fullscreen-bug

[ClementPasteau]

Thanks, that's very helpful and detailed, we're probably missing an event not being listened properly or using a wrong logic

[ClementPasteau]

This is the function being used in the runtime to set the full screen (it's quite old), saving the variable in the state.

GDevelop/GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.ts

Lines 390 to 446 in 5c66623

	setFullScreen(enable): void {
	if (this._forceFullscreen) {
	return;
	}
	if (this._isFullscreen !== enable) {
	this._isFullscreen = !!enable;
	const remote = this.getElectronRemote();
	if (remote) {
	// Use Electron BrowserWindow API
	const browserWindow = remote.getCurrentWindow();
	if (browserWindow) {
	browserWindow.setFullScreen(this._isFullscreen);
	}
	} else {
	// Use HTML5 Fullscreen API
	//TODO: Do this on a user gesture, otherwise most browsers won't activate fullscreen
	if (this._isFullscreen) {
	// @ts-ignore
	if (document.documentElement.requestFullscreen) {
	// @ts-ignore
	document.documentElement.requestFullscreen();
	} else {
	// @ts-ignore
	if (document.documentElement.mozRequestFullScreen) {
	// @ts-ignore
	document.documentElement.mozRequestFullScreen();
	} else {
	// @ts-ignore
	if (document.documentElement.webkitRequestFullScreen) {
	// @ts-ignore
	document.documentElement.webkitRequestFullScreen();
	}
	}
	}
	} else {
	// @ts-ignore
	if (document.exitFullscreen) {
	// @ts-ignore
	document.exitFullscreen();
	} else {
	// @ts-ignore
	if (document.mozCancelFullScreen) {
	// @ts-ignore
	document.mozCancelFullScreen();
	} else {
	// @ts-ignore
	if (document.webkitCancelFullScreen) {
	// @ts-ignore
	document.webkitCancelFullScreen();
	}
	}
	}
	}
	}
	this._resizeCanvas();
	}
	}

There are indeed no listeners on wether the full screen has been left.
We could try adding a listener on https://developer.mozilla.org/en-US/docs/Web/API/Element/fullscreenchange_event in this method to see if it catches it or not