fullscreen: convert fullscreen handing to a class

Make the source code easier to manage.
jnikula · Mar 2, 2024 · 8847467 · 8847467
1 parent eb257d4
commit 8847467
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 47 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -2,7 +2,7 @@
 <!-- Copyright (c) 2022 Jani Nikula <jani@nikula.org> -->
 <script lang='ts'>
   import { flip } from 'svelte/animate';
-  import * as fullscreen from './lib/fullscreen';
+  import { Fullscreen } from './lib/Fullscreen';
   import * as timeutil from './lib/time-util';
   import Ball from './lib/Ball.svelte';
   import Break from './lib/Break.svelte';
@@ -11,11 +11,13 @@
   import type Player from './lib/Player';
   import type { SaveGameId } from './lib/Game';
 
+  let fullscreen: Fullscreen = new Fullscreen(document.documentElement);
+
   function ui_toggle_fullscreen() {
     if (fullscreen.is_fullscreen())
       fullscreen.exit_fullscreen();
     else
-      fullscreen.request_fullscreen(document.documentElement);
+      fullscreen.request_fullscreen();
   }
 
   // Hack to "live update" generic stuff once per second

diff --git a/src/lib/Fullscreen.ts b/src/lib/Fullscreen.ts
@@ -0,0 +1,53 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+// Copyright (c) 2022 Jani Nikula <jani@nikula.org>
+
+// Meh, augment types to avoid type errors
+declare global {
+  interface Document {
+    webkitFullscreenElement?: Element;
+    msFullscreenElement?: Element;
+    webkitExitFullscreen?: () => Promise<void>;
+    msExitFullscreen?: () => Promise<void>;
+  }
+
+  interface Element {
+    webkitRequestFullscreen?: () => Promise<void>;
+    msRequestFullscreen?: () => Promise<void>;
+  }
+}
+
+export class Fullscreen {
+  _elem: Element;
+
+  constructor(elem: Element) {
+    this._elem = elem;
+  }
+
+  is_fullscreen() {
+    return document.fullscreenElement ||
+      document.webkitFullscreenElement ||
+      document.msFullscreenElement;
+  }
+
+  request_fullscreen() {
+    if (this._elem.requestFullscreen) {
+      this._elem.requestFullscreen();
+    } else if (this._elem.webkitRequestFullscreen) {
+      this._elem.webkitRequestFullscreen();
+    } else if (this._elem.msRequestFullscreen) {
+      this._elem.msRequestFullscreen();
+    }
+  }
+
+  exit_fullscreen() {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    } else if (document.webkitExitFullscreen) {
+      document.webkitExitFullscreen();
+    } else if (document.msExitFullscreen) {
+      document.msExitFullscreen();
+    }
+  }
+}
+
+export default Fullscreen;
diff --git a/src/lib/fullscreen.ts b/src/lib/fullscreen.ts