From dd48ca3591b44dece37cefff6fcf2d859cd4ec14 Mon Sep 17 00:00:00 2001
From: aliraza556 <alirazaakhtar1122@gmail.com>
Date: Mon, 12 Aug 2024 00:18:56 +0500
Subject: [PATCH] v2

---
 src/ui/fullscreen.ts | 47 +++++++++++++++++++++++++++++++-------------
 1 file changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/ui/fullscreen.ts b/src/ui/fullscreen.ts
index 4f20ae3c6..d0e8f7c54 100644
--- a/src/ui/fullscreen.ts
+++ b/src/ui/fullscreen.ts
@@ -1,36 +1,55 @@
 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.button.classList.remove('fullscreenMode');
-			this.button
-				.querySelectorAll('.fullscreen__title')
-				.forEach((el) => (el.textContent = 'FullScreen'));
-			document.exitFullscreen();
+			this.exitFullscreen();
 		} else if (!isAppInNativeFullscreenMode() && window.innerHeight === screen.height) {
 			alert('Use F11 to exit fullscreen');
 		} else {
-			this.button.classList.add('fullscreenMode');
-			this.button
-				.querySelectorAll('.fullscreen__title')
-				.forEach((el) => (el.textContent = 'Contract'));
-			document.getElementById('AncientBeast').requestFullscreen();
+			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;
 		}
 	}
 
-	private onFullscreenChange() {
-		if (!isAppInNativeFullscreenMode() && window.innerHeight !== screen.height) {
-			this.button.classList.add('fullscreenMode');
-			document.getElementById('AncientBeast').requestFullscreen();
+	onKeyDown(event: KeyboardEvent) {
+		if (this.isFullscreen && event.key === 'Escape') {
+			event.preventDefault();
 		}
 	}
 }