add fullscreen emulation for iPhone

mistic100 · May 17, 2024 · ea0260a · ea0260a
1 parent 0eb2842
commit ea0260a
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 3 deletions.
diff --git a/packages/core/src/data/system.ts b/packages/core/src/data/system.ts
@@ -43,6 +43,11 @@ export const SYSTEM = {
      */
     __maxCanvasWidth: null as number | null,
 
+    /**
+     * If the current device is an iPhone
+     */
+    isIphone: false,
+
     /**
      * Maximum canvas width
      */
@@ -66,6 +71,7 @@ export const SYSTEM = {
             this.maxTextureWidth = ctx ? ctx.getParameter(ctx.MAX_TEXTURE_SIZE) : 0;
             this.isTouchEnabled = isTouchEnabled();
             this.fullscreenEvent = getFullscreenEvent();
+            this.isIphone = /iPhone/i.test(navigator.userAgent);
             this.loaded = true;
         }
 

diff --git a/packages/core/src/styles/viewer.scss b/packages/core/src/styles/viewer.scss
@@ -25,3 +25,11 @@
 .psv-canvas {
     display: block;
 }
+
+.psv-fullscreen-emulation {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+}
diff --git a/packages/core/src/utils/browser.ts b/packages/core/src/utils/browser.ts
@@ -1,3 +1,4 @@
+import { SYSTEM } from '../data/system';
 import { Point } from '../model';
 import { angle, distance } from './math';
 
@@ -125,23 +126,41 @@ export function getTouchData(e: TouchEvent): TouchData {
     };
 }
 
+let fullscreenElement: HTMLElement;
+
 /**
  * Detects if fullscreen is enabled
  */
 export function isFullscreenEnabled(elt: HTMLElement): boolean {
-    return (document.fullscreenElement || (document as any).webkitFullscreenElement) === elt;
+    if (SYSTEM.isIphone) {
+        return elt === fullscreenElement;
+    } else {
+        return (document.fullscreenElement || (document as any).webkitFullscreenElement) === elt;
+    }
 }
 
 /**
  * Enters fullscreen mode
  */
 export function requestFullscreen(elt: HTMLElement) {
-    (elt.requestFullscreen || (elt as any).webkitRequestFullscreen).call(elt);
+    if (SYSTEM.isIphone) {
+        fullscreenElement = elt;
+        elt.classList.add('psv-fullscreen-emulation');
+        document.dispatchEvent(new Event(SYSTEM.fullscreenEvent));
+    } else {
+        (elt.requestFullscreen || (elt as any).webkitRequestFullscreen).call(elt);
+    }
 }
 
 /**
  * Exits fullscreen mode
  */
 export function exitFullscreen() {
-    (document.exitFullscreen || (document as any).webkitExitFullscreen).call(document);
+    if (SYSTEM.isIphone) {
+        fullscreenElement.classList.remove('psv-fullscreen-emulation');
+        fullscreenElement = null;
+        document.dispatchEvent(new Event(SYSTEM.fullscreenEvent));
+    } else {
+        (document.exitFullscreen || (document as any).webkitExitFullscreen).call(document);
+    }
 }