diff --git a/src/ui/fullscreen.ts b/src/ui/fullscreen.ts index d0e8f7c54..9d210f1b2 100644 --- a/src/ui/fullscreen.ts +++ b/src/ui/fullscreen.ts @@ -1,55 +1,35 @@ export class Fullscreen { private button: HTMLElement; - private isFullscreen: boolean; constructor(button: HTMLElement, isFullscreen = false) { this.button = button; - this.isFullscreen = isFullscreen; if (isFullscreen) { button.classList.add('fullscreenMode'); } - document.addEventListener('fullscreenchange', this.onFullscreenChange.bind(this)); - document.addEventListener('keydown', this.onKeyDown.bind(this)); } toggle() { if (isAppInNativeFullscreenMode()) { - this.exitFullscreen(); + this.button.classList.remove('fullscreenMode'); + this.button + .querySelectorAll('.fullscreen__title') + .forEach((el) => (el.textContent = 'FullScreen')); + document.exitFullscreen(); } else if (!isAppInNativeFullscreenMode() && window.innerHeight === screen.height) { alert('Use F11 to exit fullscreen'); } else { - this.enterFullscreen(); - } - } - - enterFullscreen() { - this.button.classList.add('fullscreenMode'); - this.button - .querySelectorAll('.fullscreen__title') - .forEach((el) => (el.textContent = 'Contract')); - document.getElementById('AncientBeast').requestFullscreen(); - this.isFullscreen = true; - } - - exitFullscreen() { - this.button.classList.remove('fullscreenMode'); - this.button - .querySelectorAll('.fullscreen__title') - .forEach((el) => (el.textContent = 'FullScreen')); - document.exitFullscreen(); - this.isFullscreen = false; - } - - onFullscreenChange() { - if (!document.fullscreenElement) { - this.isFullscreen = false; + this.button.classList.add('fullscreenMode'); + this.button + .querySelectorAll('.fullscreen__title') + .forEach((el) => (el.textContent = 'Contract')); + document.getElementById('AncientBeast').requestFullscreen(); } } - onKeyDown(event: KeyboardEvent) { - if (this.isFullscreen && event.key === 'Escape') { - event.preventDefault(); + private onFullscreenChange() { + if (!isAppInNativeFullscreenMode() && this.button.classList.contains('fullscreenMode')) { + document.getElementById('AncientBeast').requestFullscreen(); } } }