Engine VisibleEvent is not firing on visibility change

[mattjennings]

Steps to Reproduce

This is reproducible with the sample platformer

• Start game
• Switch tabs or unfocus window
• Go back to game and it remains paused
• console log only shows "pause", no "start", which means the visible event never fired

Expected Result

Engine should emit the "visible" event when window is focused

Actual Result

It does not emit the "visible" event

Environment

• browsers and versions: Chrome 103.0.5060.114 , FireFox 102.0.1, Safari 15.5
• operating system: macOS 12.4
• Excalibur versions: 0.27

Current Workaround

I see that we have some browser-specific behaviour here

Excalibur/src/engine/Engine.ts

Lines 1112 to 1133 in 88a30ce

	let hidden: keyof HTMLDocument, visibilityChange: string;
	if (typeof document.hidden !== 'undefined') {
	// Opera 12.10 and Firefox 18 and later support
	hidden = 'hidden';
	visibilityChange = 'visibilitychange';
	} else if ('msHidden' in document) {
	hidden = <keyof HTMLDocument>'msHidden';
	visibilityChange = 'msvisibilitychange';
	} else if ('webkitHidden' in document) {
	hidden = <keyof HTMLDocument>'webkitHidden';
	visibilityChange = 'webkitvisibilitychange';
	}
	this.browser.document.on(visibilityChange, () => {
	if (document[hidden]) {
	this.eventDispatcher.emit('hidden', new HiddenEvent(this));
	this._logger.debug('Window hidden');
	} else {
	this.eventDispatcher.emit('visible', new VisibleEvent(this));
	this._logger.debug('Window visible');
	}
	});

but I am currently doing this instead:

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    engine.stop()
  } else if (document.visibilityState === 'visible') {
    engine.start()
  }
})

which seems to have good browser support

[eonarheim]

@mattjennings Thanks for the bug! Good find!

It definitely seems the browsers have improved their support for visibility. I would also support simplifying the code to remove the old prefixed polyfills.