feat(UI): Allow configure the fullscreen mode in VisionOS (#7540)

With this config we will use the fullscreen API of the video element
itself if it is available in Vision OS. This is useful to be able to
access 3D experiences that are only allowed with the fullscreen of the
video element itself.

lib/util/platform.js

@@ -489,6 +489,21 @@ shaka.util.Platform = class {
     return navigator.platform.toLowerCase().includes('mac');
   }
 
+  /**
+   * Return true if the platform is a VisionOS.
+   *
+   * @return {boolean}
+   */
+  static isVisionOS() {
+    if (!shaka.util.Platform.isMac()) {
+      return false;
+    }
+    if (!('xr' in navigator)) {
+      return false;
+    }
+    return true;
+  }
+
   /**
    * Return true if the platform is a Windows, regardless of the browser.
    *

ui/controls.js

@@ -29,6 +29,7 @@ goog.require('shaka.util.EventManager');
 goog.require('shaka.util.FakeEvent');
 goog.require('shaka.util.FakeEventTarget');
 goog.require('shaka.util.IDestroyable');
+goog.require('shaka.util.Platform');
 goog.require('shaka.util.Timer');
 
 goog.requireType('shaka.Player');
@@ -603,12 +604,32 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     this.hideSettingsMenusTimer_.tickNow();
   }
 
+  /**
+   * @return {boolean}
+   * @private
+   */
+  shouldUseDocumentFullscreen_() {
+    if (!document.fullscreenEnabled) {
+      return false;
+    }
+    // When the preferVideoFullScreenInVisionOS configuration value applies,
+    // we avoid using document fullscreen, even if it is available.
+    const video = /** @type {HTMLVideoElement} */(this.localVideo_);
+    if (video.webkitSupportsFullscreen) {
+      if (this.config_.preferVideoFullScreenInVisionOS &&
+          shaka.util.Platform.isVisionOS()) {
+        return false;
+      }
+    }
+    return true;
+  }
+
   /**
    * @return {boolean}
    * @export
    */
   isFullScreenSupported() {
-    if (document.fullscreenEnabled) {
+    if (this.shouldUseDocumentFullscreen_()) {
       return true;
     }
     if (!this.ad_ || !this.ad_.isUsingAnotherMediaElement()) {
@@ -625,7 +646,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
    * @export
    */
   isFullScreenEnabled() {
-    if (document.fullscreenEnabled) {
+    if (this.shouldUseDocumentFullscreen_()) {
       return !!document.fullscreenElement;
     }
     const video = /** @type {HTMLVideoElement} */(this.localVideo_);
@@ -638,7 +659,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
   /** @private */
   async enterFullScreen_() {
     try {
-      if (document.fullscreenEnabled) {
+      if (this.shouldUseDocumentFullscreen_()) {
         if (document.pictureInPictureElement) {
           await document.exitPictureInPicture();
         }
@@ -669,7 +690,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
 
   /** @private */
   async exitFullScreen_() {
-    if (document.fullscreenEnabled) {
+    if (this.shouldUseDocumentFullscreen_()) {
       if (screen.orientation) {
         screen.orientation.unlock();
       }

ui/externs/ui.js

@@ -97,7 +97,8 @@ shaka.extern.UIVolumeBarColors;
  *   refreshTickInSeconds: number,
  *   displayInVrMode: boolean,
  *   defaultVrProjectionMode: string,
- *   setupMediaSession: boolean
+ *   setupMediaSession: boolean,
+ *   preferVideoFullScreenInVisionOS: boolean
  * }}
  *
  * @property {!Array.<string>} controlPanelElements
@@ -254,6 +255,12 @@ shaka.extern.UIVolumeBarColors;
  *   the ID3 APIC and TIT2 as image and title in Media Session, and ID3 APIC
  *   will also be used to change video poster.
  *   Defaults to true.
+ * @property {boolean} preferVideoFullScreenInVisionOS
+ *   If true, we will use the fullscreen API of the video element itself if it
+ *   is available in Vision OS. This is useful to be able to access 3D
+ *   experiences that are only allowed with the fullscreen of the video element
+ *   itself.
+ *   Defaults to false.
  * @exportDoc
  */
 shaka.extern.UIConfiguration;

ui/ui.js

@@ -273,6 +273,7 @@ shaka.ui.Overlay = class {
       displayInVrMode: false,
       defaultVrProjectionMode: 'equirectangular',
       setupMediaSession: true,
+      preferVideoFullScreenInVisionOS: false,
     };
 
     // eslint-disable-next-line no-restricted-syntax