Improve full-screen mode

src/utils/full-screen-handler.ts

@@ -0,0 +1,41 @@
+export class FullScreenHandler {
+  public constructor(
+    private readonly minimizeButton: HTMLElement,
+    private readonly maximizeButton: HTMLElement,
+    target: HTMLElement
+  ) {
+    if (!document.fullscreenEnabled) {
+      minimizeButton.style.display = 'none';
+      maximizeButton.style.display = 'none';
+      return;
+    }
+
+    this.updateButtons();
+
+    addEventListener('keydown', (e) => {
+      // on full screen request, only apply it to the target
+      if (e.key === 'F11') {
+        e.preventDefault();
+        FullScreenHandler.isInFullScreenMode()
+          ? document.exitFullscreen()
+          : target.requestFullscreen();
+      }
+    });
+    addEventListener('fullscreenchange', this.updateButtons.bind(this));
+    maximizeButton.addEventListener('click', target.requestFullscreen.bind(target));
+    minimizeButton.addEventListener('click', document.exitFullscreen.bind(document));
+  }
+
+  public static isInFullScreenMode(): boolean {
+    return document.fullscreenElement !== null;
+  }
+
+  private updateButtons() {
+    this.minimizeButton.style.display = FullScreenHandler.isInFullScreenMode()
+      ? 'block'
+      : 'none';
+    this.maximizeButton.style.display = FullScreenHandler.isInFullScreenMode()
+      ? 'none'
+      : 'block';
+  }
+}

src/utils/handle-full-screen.ts

@@ -1,36 +0,0 @@
-export const handleFullScreen = ({
-  minimizeButton,
-  maximizeButton,
-  target,
-}: {
-  minimizeButton: HTMLElement;
-  maximizeButton: HTMLElement;
-  target: HTMLElement;
-}) => {
-  if (!document.fullscreenEnabled) {
-    minimizeButton.style.visibility = 'hidden';
-    maximizeButton.style.visibility = 'hidden';
-    return;
-  }
-
-  const isInFullScreen = (): boolean => document.fullscreenElement !== null;
-  const updateButtons = () => {
-    minimizeButton.style.visibility = isInFullScreen() ? 'visible' : 'hidden';
-    maximizeButton.style.visibility = isInFullScreen() ? 'hidden' : 'visible';
-  };
-
-  updateButtons();
-
-  addEventListener('keydown', (e) => {
-    // on full screen request, only apply it to the target
-    if (e.key === 'F11') {
-      e.preventDefault();
-      isInFullScreen() ? document.exitFullscreen() : target.requestFullscreen();
-    }
-  });
-
-  addEventListener('fullscreenchange', updateButtons);
-
-  maximizeButton.addEventListener('click', target.requestFullscreen.bind(target));
-  minimizeButton.addEventListener('click', document.exitFullscreen.bind(document));
-};