From 7162dc69b9ea8787aac37aadb94ecba65a442443 Mon Sep 17 00:00:00 2001
From: schmelczerandras <schmelczer.andras@simonyi.bme.hu>
Date: Wed, 28 Oct 2020 14:39:24 +0100
Subject: [PATCH] Fix fullscreen - f11

---
 frontend/src/scripts/handle-full-screen.ts | 39 ++++++++++++++++++----
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/frontend/src/scripts/handle-full-screen.ts b/frontend/src/scripts/handle-full-screen.ts
index 66a921c..791cd2f 100644
--- a/frontend/src/scripts/handle-full-screen.ts
+++ b/frontend/src/scripts/handle-full-screen.ts
@@ -1,3 +1,5 @@
+import { SoundHandler, Sounds } from './sound-handler';
+
 export const handleFullScreen = (
   minimizeButton: HTMLElement,
   maximizeButton: HTMLElement,
@@ -8,20 +10,43 @@ export const handleFullScreen = (
     return;
   }
 
-  let isInFullScreen = document.fullscreenElement !== null;
+  let isInFullScreen = (): boolean => document.fullscreenElement !== null;
 
   const showButtons = () => {
-    minimizeButton.style.visibility = isInFullScreen ? 'visible' : 'hidden';
-    maximizeButton.style.visibility = isInFullScreen ? 'hidden' : 'visible';
+    minimizeButton.style.visibility = isInFullScreen() ? 'visible' : 'hidden';
+    maximizeButton.style.visibility = isInFullScreen() ? 'hidden' : 'visible';
   };
 
   showButtons();
 
-  maximizeButton.addEventListener('click', () => document.body.requestFullscreen());
-  minimizeButton.addEventListener('click', () => document.exitFullscreen());
+  let currentWindowHeight = innerHeight;
 
-  document.addEventListener('fullscreenchange', () => {
-    isInFullScreen = !isInFullScreen;
+  const followToggle = () => {
+    SoundHandler.play(Sounds.click);
     showButtons();
+    currentWindowHeight = innerHeight;
+  };
+
+  const triggerToggle = async () => {
+    await (isInFullScreen()
+      ? document.exitFullscreen()
+      : document.body.requestFullscreen());
+    followToggle();
+  };
+
+  addEventListener('keydown', (e) => {
+    if (e.key === 'F11') {
+      triggerToggle();
+      e.preventDefault();
+    }
   });
+
+  addEventListener('resize', () => {
+    if (isInFullScreen && currentWindowHeight > innerHeight) {
+      followToggle();
+    }
+  });
+
+  maximizeButton.addEventListener('click', triggerToggle);
+  minimizeButton.addEventListener('click', triggerToggle);
 };