Add video fullscreen support for iOS

ui/controls.js

@@ -553,33 +553,74 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     this.hideSettingsMenusTimer_.tickNow();
   }
 
+  /**
+   * @return {boolean}
+   * @export
+   */
+  isFullScreenSupported() {
+    if (document.fullscreenEnabled) {
+      return true;
+    }
+    const video = /** @type {HTMLVideoElement} */(this.localVideo_);
+    if (video.webkitSupportsFullscreen) {
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * @return {boolean}
+   * @export
+   */
+  isFullScreenEnabled() {
+    if (document.fullscreenEnabled) {
+      return !!document.fullscreenElement;
+    }
+    const video = /** @type {HTMLVideoElement} */(this.localVideo_);
+    if (video.webkitSupportsFullscreen) {
+      return video.webkitDisplayingFullscreen;
+    }
+    return false;
+  }
+
   /** @export */
   async toggleFullScreen() {
-    if (document.fullscreenElement) {
-      if (screen.orientation) {
-        screen.orientation.unlock();
-      }
-      await document.exitFullscreen();
-    } else {
-      // If we are in PiP mode, leave PiP mode first.
-      try {
-        if (document.pictureInPictureElement) {
-          await document.exitPictureInPicture();
+    if (document.fullscreenEnabled) {
+      if (document.fullscreenElement) {
+        if (screen.orientation) {
+          screen.orientation.unlock();
         }
-        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.
+        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)));
+        }
+      }
+    } else {
+      const video = /** @type {HTMLVideoElement} */(this.localVideo_);
+      if (video.webkitSupportsFullscreen) {
+        if (video.webkitDisplayingFullscreen) {
+          video.webkitExitFullscreen();
+        } else {
+          video.webkitEnterFullscreen();
         }
-      } catch (error) {
-        this.dispatchEvent(new shaka.util.FakeEvent(
-            'error', (new Map()).set('detail', error)));
       }
     }
   }
@@ -699,7 +740,8 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     });
 
     this.eventManager_.listen(this.controlsContainer_, 'dblclick', () => {
-      if (this.config_.doubleClickForFullscreen && document.fullscreenEnabled) {
+      if (this.config_.doubleClickForFullscreen &&
+          this.isFullScreenSupported()) {
         this.toggleFullScreen();
       }
     });

ui/fullscreen_button.js

@@ -28,16 +28,16 @@ shaka.ui.FullscreenButton = class extends shaka.ui.Element {
   constructor(parent, controls) {
     super(parent, controls);
 
+    /** @private {HTMLMediaElement} */
+    this.localVideo_ = this.controls.getLocalVideo();
+
     /** @private {!HTMLButtonElement} */
     this.button_ = shaka.util.Dom.createButton();
     this.button_.classList.add('shaka-fullscreen-button');
     this.button_.classList.add('material-icons-round');
     this.button_.classList.add('shaka-tooltip');
 
-    // Don't show the button if fullscreen is not supported
-    if (!document.fullscreenEnabled) {
-      this.button_.classList.add('shaka-hidden');
-    }
+    this.checkSupport_();
 
     this.button_.textContent = shaka.ui.Enums.MaterialDesignIcons.FULLSCREEN;
     this.parent.appendChild(this.button_);
@@ -61,14 +61,34 @@ shaka.ui.FullscreenButton = class extends shaka.ui.Element {
       this.updateIcon_();
       this.updateAriaLabel_();
     });
+
+    this.eventManager.listen(this.localVideo_, 'loadedmetadata', () => {
+      this.checkSupport_();
+    });
+
+    this.eventManager.listen(this.localVideo_, 'loadeddata', () => {
+      this.checkSupport_();
+    });
+  }
+
+  /**
+   * @private
+   */
+  checkSupport_() {
+    // Don't show the button if fullscreen is not supported
+    if (!this.controls.isFullScreenSupported()) {
+      this.button_.classList.add('shaka-hidden');
+    } else {
+      this.button_.classList.remove('shaka-hidden');
+    }
   }
 
   /**
    * @private
    */
   updateAriaLabel_() {
     const LocIds = shaka.ui.Locales.Ids;
-    const label = document.fullscreenElement ?
+    const label = this.controls.isFullScreenEnabled() ?
         LocIds.EXIT_FULL_SCREEN : LocIds.FULL_SCREEN;
 
     this.button_.ariaLabel = this.localization.resolve(label);
@@ -79,7 +99,7 @@ shaka.ui.FullscreenButton = class extends shaka.ui.Element {
    */
   updateIcon_() {
     this.button_.textContent =
-      document.fullscreenElement ?
+      this.controls.isFullScreenEnabled() ?
       shaka.ui.Enums.MaterialDesignIcons.EXIT_FULLSCREEN :
       shaka.ui.Enums.MaterialDesignIcons.FULLSCREEN;
   }