Revert "remove support for old "webkitFullscreen""

This reverts commit a746b7f.
mistic100 · May 18, 2024 · 3cf5470 · 3cf5470
1 parent 8f5ce07
commit 3cf5470
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/packages/core/src/data/system.ts b/packages/core/src/data/system.ts
@@ -33,6 +33,11 @@ export const SYSTEM = {
      */
     isTouchEnabled: null as ResolvableBoolean,
 
+    /**
+     * Name of the fullscreen event
+     */
+    fullscreenEvent: null as string,
+
     /**
      * @internal
      */
@@ -65,6 +70,7 @@ export const SYSTEM = {
             this.isWebGLSupported = ctx !== null;
             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;
         }
@@ -189,3 +195,16 @@ function getMaxCanvasWidth(maxWidth: number): number {
         throw new PSVError('Unable to detect system capabilities');
     }
 }
+
+/**
+ * Gets the event name for fullscreen
+ */
+function getFullscreenEvent(): string {
+    if ('exitFullscreen' in document) {
+        return 'fullscreenchange';
+    }
+    if ('webkitExitFullscreen' in document) {
+        return 'webkitfullscreenchange';
+    }
+    return null;
+}
diff --git a/packages/core/src/services/EventsHandler.ts b/packages/core/src/services/EventsHandler.ts
@@ -116,7 +116,7 @@ export class EventsHandler extends AbstractService {
         window.addEventListener('touchmove', this, { passive: false });
         window.addEventListener('touchend', this, { passive: false });
         this.viewer.container.addEventListener('wheel', this, { passive: false });
-        document.addEventListener('fullscreenchange', this);
+        document.addEventListener(SYSTEM.fullscreenEvent, this);
         this.resizeObserver.observe(this.viewer.container);
     }
 
@@ -130,7 +130,7 @@ export class EventsHandler extends AbstractService {
         window.removeEventListener('touchmove', this);
         window.removeEventListener('touchend', this);
         this.viewer.container.removeEventListener('wheel', this);
-        document.removeEventListener('fullscreenchange', this);
+        document.removeEventListener(SYSTEM.fullscreenEvent, this);
         this.resizeObserver.disconnect();
 
         clearTimeout(this.data.dblclickTimeout);
@@ -153,7 +153,7 @@ export class EventsHandler extends AbstractService {
             case 'mouseup': this.__onMouseUp(evt as MouseEvent); break;
             case 'touchmove': this.__onTouchMove(evt as TouchEvent); break;
             case 'touchend': this.__onTouchEnd(evt as TouchEvent); break;
-            case 'fullscreenchange': this.__onFullscreenChange(); break;
+            case SYSTEM.fullscreenEvent: this.__onFullscreenChange(); break;
         }
 
         if (!getClosest(evt.target as HTMLElement, '.' + CAPTURE_EVENTS_CLASS)) {

diff --git a/packages/core/src/utils/browser.ts b/packages/core/src/utils/browser.ts
@@ -134,7 +134,7 @@ export function isFullscreenEnabled(elt: HTMLElement, isIphone = false): boolean
     if (isIphone) {
         return elt === fullscreenElement;
     } else {
-        return document.fullscreenElement === elt;
+        return (document.fullscreenElement || (document as any).webkitFullscreenElement) === elt;
     }
 }
 
@@ -145,9 +145,9 @@ export function requestFullscreen(elt: HTMLElement, isIphone = false) {
     if (isIphone) {
         fullscreenElement = elt;
         elt.classList.add('psv-fullscreen-emulation');
-        document.dispatchEvent(new Event('fullscreenchange'));
+        document.dispatchEvent(new Event(SYSTEM.fullscreenEvent));
     } else {
-        elt.requestFullscreen();
+        (elt.requestFullscreen || (elt as any).webkitRequestFullscreen).call(elt);
     }
 }
 
@@ -158,8 +158,8 @@ export function exitFullscreen(isIphone = false) {
     if (isIphone) {
         fullscreenElement.classList.remove('psv-fullscreen-emulation');
         fullscreenElement = null;
-        document.dispatchEvent(new Event('fullscreenchange'));
+        document.dispatchEvent(new Event(SYSTEM.fullscreenEvent));
     } else {
-        document.exitFullscreen();
+        (document.exitFullscreen || (document as any).webkitExitFullscreen).call(document);
     }
 }