fix(ui): Fix iOS fullscreen on rotation (#4679)

This refactors and cleans up fullscreen functionality in the UI so that all triggers are consistent and work correctly on all platforms. See also #4669 Co-authored-by: Joey Parrish <[email protected]>
shaka-project · Dec 8, 2022 · 04051fd · 04051fd
1 parent 655d080
commit 04051fd
Showing 1 changed file with 44 additions and 35 deletions.
diff --git a/ui/controls.js b/ui/controls.js
@@ -587,48 +587,57 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     return false;
   }
 
-  /** @export */
-  async toggleFullScreen() {
-    if (document.fullscreenEnabled) {
-      if (document.fullscreenElement) {
-        if (screen.orientation) {
-          screen.orientation.unlock();
+  /** @private */
+  async enterFullScreen_() {
+    try {
+      if (document.fullscreenEnabled) {
+        if (document.pictureInPictureElement) {
+          await document.exitPictureInPicture();
+        }
+        await this.videoContainer_.requestFullscreen({navigationUI: 'hide'});
+
+        if (this.config_.forceLandscapeOnFullscreen && screen.orientation) {
+          // Locking to 'landscape' should let it be either
+          // 'landscape-primary' or 'landscape-secondary' as appropriate.
+          await screen.orientation.lock('landscape');
         }
-        await document.exitFullscreen();
       } else {
-        // If we are in PiP mode, leave PiP mode first.
-        try {
-          if (document.pictureInPictureElement) {
-            await document.exitPictureInPicture();
-          }
-          await this.videoContainer_.requestFullscreen({navigationUI: 'hide'});
-          if (this.config_.forceLandscapeOnFullscreen && screen.orientation) {
-            try {
-              // Locking to 'landscape' should let it be either
-              // 'landscape-primary' or 'landscape-secondary' as appropriate.
-              await screen.orientation.lock('landscape');
-            } catch (error) {
-              // If screen.orientation.lock does not work on a device, it will
-              // be rejected with an error. Suppress that error.
-            }
-          }
-        } catch (error) {
-          this.dispatchEvent(new shaka.util.FakeEvent(
-              'error', (new Map()).set('detail', error)));
+        const video = /** @type {HTMLVideoElement} */(this.localVideo_);
+        if (video.webkitSupportsFullscreen) {
+          video.webkitEnterFullscreen();
         }
       }
+    } catch (error) {
+      // Entering fullscreen can fail without user interaction.
+      this.dispatchEvent(new shaka.util.FakeEvent(
+          'error', (new Map()).set('detail', error)));
+    }
+  }
+
+  /** @private */
+  async exitFullScreen_() {
+    if (document.fullscreenEnabled) {
+      if (screen.orientation) {
+        screen.orientation.unlock();
+      }
+      await document.exitFullscreen();
     } else {
       const video = /** @type {HTMLVideoElement} */(this.localVideo_);
       if (video.webkitSupportsFullscreen) {
-        if (video.webkitDisplayingFullscreen) {
-          video.webkitExitFullscreen();
-        } else {
-          video.webkitEnterFullscreen();
-        }
+        video.webkitExitFullscreen();
       }
     }
   }
 
+  /** @export */
+  async toggleFullScreen() {
+    if (this.isFullScreenEnabled()) {
+      await this.exitFullScreen_();
+    } else {
+      await this.enterFullScreen_();
+    }
+  }
+
   /** @export */
   showAdUI() {
     shaka.ui.Utils.setDisplay(this.adPanel_, true);
@@ -1030,11 +1039,11 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     }
 
     if (screen.orientation.type.includes('landscape') &&
-        !document.fullscreenElement) {
-      await this.videoContainer_.requestFullscreen({navigationUI: 'hide'});
+        !this.isFullScreenEnabled()) {
+      await this.enterFullScreen_();
     } else if (screen.orientation.type.includes('portrait') &&
-        document.fullscreenElement) {
-      await document.exitFullscreen();
+      this.isFullScreenEnabled()) {
+      await this.exitFullScreen_();
     }
   }