Optimise

src/page/full-screen-handler.ts

@@ -1,22 +1,24 @@
 export class FullScreenHandler {
   public constructor(
-    private readonly minimizeButton: HTMLElement,
-    private readonly maximizeButton: HTMLElement,
+    private readonly toggleButton: HTMLElement,
     target: HTMLElement
   ) {
     if (!document.fullscreenEnabled || typeof target.requestFullscreen !== 'function') {
-      minimizeButton.hidden = true;
-      maximizeButton.hidden = true;
+      toggleButton.hidden = true;
       return;
     }
 
     this.updateButtons();
 
     addEventListener('fullscreenchange', this.updateButtons.bind(this));
-    maximizeButton.addEventListener('click', () => {
+    toggleButton.addEventListener('click', () => {
+      if (FullScreenHandler.isInFullScreenMode()) {
+        void document.exitFullscreen();
+        return;
+      }
+
       void target.requestFullscreen().catch(() => undefined);
     });
-    minimizeButton.addEventListener('click', () => document.exitFullscreen());
   }
 
   public static isInFullScreenMode(): boolean {
@@ -25,7 +27,9 @@ export class FullScreenHandler {
 
   private updateButtons(): void {
     const isInFullScreenMode = FullScreenHandler.isInFullScreenMode();
-    this.minimizeButton.hidden = !isInFullScreenMode;
-    this.maximizeButton.hidden = isInFullScreenMode;
+    const label = isInFullScreenMode ? 'Exit fullscreen' : 'Enter fullscreen';
+    this.toggleButton.classList.toggle('active', isInFullScreenMode);
+    this.toggleButton.setAttribute('aria-label', label);
+    this.toggleButton.title = label;
   }
 }