shaka-player 4.4.2 → 4.5.0

package/ui/controls.js

@@ -643,6 +643,131 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     }
   }
 
+  /**
+   * @return {boolean}
+   * @export
+   */
+  isPiPAllowed() {
+    if ('documentPictureInPicture' in window &&
+        this.config_.preferDocumentPictureInPicture) {
+      return true;
+    }
+    if (document.pictureInPictureEnabled) {
+      const video = /** @type {HTMLVideoElement} */(this.localVideo_);
+      return !video.disablePictureInPicture;
+    }
+    return false;
+  }
+
+  /**
+   * @return {boolean}
+   * @export
+   */
+  isPiPEnabled() {
+    if ('documentPictureInPicture' in window &&
+        this.config_.preferDocumentPictureInPicture) {
+      return !!window.documentPictureInPicture.window;
+    } else {
+      return !!document.pictureInPictureElement;
+    }
+  }
+
+  /** @export */
+  async togglePiP() {
+    try {
+      if ('documentPictureInPicture' in window &&
+        this.config_.preferDocumentPictureInPicture) {
+        await this.toggleDocumentPictureInPicture_();
+      } else if (!document.pictureInPictureElement) {
+        // If you were fullscreen, leave fullscreen first.
+        if (document.fullscreenElement) {
+          document.exitFullscreen();
+        }
+        const video = /** @type {HTMLVideoElement} */(this.localVideo_);
+        await video.requestPictureInPicture();
+      } else {
+        await document.exitPictureInPicture();
+      }
+    } catch (error) {
+      this.dispatchEvent(new shaka.util.FakeEvent(
+          'error', (new Map()).set('detail', error)));
+    }
+  }
+
+  /**
+   * The Document Picture-in-Picture API makes it possible to open an
+   * always-on-top window that can be populated with arbitrary HTML content.
+   * https://developer.chrome.com/docs/web-platform/document-picture-in-picture
+   * @private
+   */
+  async toggleDocumentPictureInPicture_() {
+    // Close Picture-in-Picture window if any.
+    if (window.documentPictureInPicture.window) {
+      window.documentPictureInPicture.window.close();
+      return;
+    }
+
+    // Open a Picture-in-Picture window.
+    const pipPlayer = this.videoContainer_;
+    const rectPipPlayer = pipPlayer.getBoundingClientRect();
+    const pipWindow = await window.documentPictureInPicture.requestWindow({
+      width: rectPipPlayer.width,
+      height: rectPipPlayer.height,
+    });
+
+    // Copy style sheets to the Picture-in-Picture window.
+    this.copyStyleSheetsToWindow_(pipWindow);
+
+    // Add placeholder for the player.
+    const parentPlayer = pipPlayer.parentNode || document.body;
+    const placeholder = this.videoContainer_.cloneNode(true);
+    placeholder.style.visibility = 'hidden';
+    placeholder.style.height = getComputedStyle(pipPlayer).height;
+    parentPlayer.appendChild(placeholder);
+
+    // Make sure player fits in the Picture-in-Picture window.
+    const styles = document.createElement('style');
+    styles.append(`[data-shaka-player-container] {
+      width: 100% !important; max-height: 100%}`);
+    pipWindow.document.head.append(styles);
+
+    // Move player to the Picture-in-Picture window.
+    pipWindow.document.body.append(pipPlayer);
+
+    // Listen for the PiP closing event to move the player back.
+    this.eventManager_.listenOnce(pipWindow, 'pagehide', () => {
+      placeholder.replaceWith(/** @type {!Node} */(pipPlayer));
+    });
+  }
+
+  /** @private */
+  copyStyleSheetsToWindow_(win) {
+    const styleSheets = /** @type {!Iterable<*>} */(document.styleSheets);
+    const allCSS = [...styleSheets]
+        .map((sheet) => {
+          try {
+            return [...sheet.cssRules].map((rule) => rule.cssText).join('');
+          } catch (e) {
+            const link = /** @type {!HTMLLinkElement} */(
+              document.createElement('link'));
+
+            link.rel = 'stylesheet';
+            link.type = sheet.type;
+            link.media = sheet.media;
+            link.href = sheet.href;
+            win.document.head.appendChild(link);
+          }
+          return '';
+        })
+        .filter(Boolean)
+        .join('\n');
+    const style = document.createElement('style');
+
+    style.textContent = allCSS;
+    win.document.head.appendChild(style);
+  }
+
+
   /** @export */
   showAdUI() {
     shaka.ui.Utils.setDisplay(this.adPanel_, true);

package/ui/externs/ui.js

@@ -87,7 +87,8 @@ shaka.extern.UIVolumeBarColors;
  *   enableTooltips: boolean,
  *   keyboardSeekDistance: number,
  *   keyboardLargeSeekDistance: number,
- *   fullScreenElement: HTMLElement
+ *   fullScreenElement: HTMLElement,
+ *   preferDocumentPictureInPicture: boolean
  * }}
  *
  * @property {!Array.<string>} controlPanelElements
@@ -193,6 +194,12 @@ shaka.extern.UIVolumeBarColors;
  * @property {HTMLElement} fullScreenElement
  *   DOM element on which fullscreen will be done.
  *   Defaults to Shaka Player Container.
+ * @property {boolean} preferDocumentPictureInPicture
+ *   Indicates whether the Document Picture in Picture API is preferred or the
+ *   Video Element Picture in Picture API is preferred.
+ *   Changing this property in mid-playback may produce undesired behavior if
+ *   you are already in PiP.
+ *   Defaults to true.
  * @exportDoc
  */
 shaka.extern.UIConfiguration;

package/ui/pip_button.js

@@ -16,7 +16,6 @@ goog.require('shaka.ui.Localization');
 goog.require('shaka.ui.OverflowMenu');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
-goog.require('shaka.util.FakeEvent');
 goog.requireType('shaka.ui.Controls');
 
 
@@ -73,7 +72,7 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
     // Don't display the button if PiP is not supported or not allowed.
     // TODO: Can this ever change? Is it worth creating the button if the below
     // condition is true?
-    if (!this.isPipAllowed_()) {
+    if (!this.controls.isPiPAllowed()) {
       shaka.ui.Utils.setDisplay(this.pipButton_, false);
     }
 
@@ -88,7 +87,7 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
         });
 
     this.eventManager.listen(this.pipButton_, 'click', () => {
-      this.onPipClick_();
+      this.controls.togglePiP();
     });
 
     this.eventManager.listen(this.localVideo_, 'enterpictureinpicture', () => {
@@ -106,119 +105,21 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
     this.eventManager.listen(this.player, 'trackschanged', () => {
       this.onTracksChanged_();
     });
-  }
-
-
-  /**
-   * @return {boolean}
-   * @private
-   */
-  isPipAllowed_() {
-    return ('documentPictureInPicture' in window) ||
-      (document.pictureInPictureEnabled && !this.video.disablePictureInPicture);
-  }
-
 
-  /**
-   * @return {!Promise}
-   * @private
-   */
-  async onPipClick_() {
-    try {
-      if ('documentPictureInPicture' in window) {
-        await this.toggleDocumentPictureInPicture_();
-        return;
-      }
-      if (!document.pictureInPictureElement) {
-        // If you were fullscreen, leave fullscreen first.
-        if (document.fullscreenElement) {
-          document.exitFullscreen();
-        }
-        await this.video.requestPictureInPicture();
-      } else {
-        await document.exitPictureInPicture();
-      }
-    } catch (error) {
-      this.controls.dispatchEvent(new shaka.util.FakeEvent(
-          'error', (new Map()).set('detail', error)));
+    if ('documentPictureInPicture' in window) {
+      this.eventManager.listen(window.documentPictureInPicture, 'enter',
+          (e) => {
+            this.onEnterPictureInPicture_();
+
+            const event = /** @type {DocumentPictureInPictureEvent} */(e);
+            const pipWindow = event.window;
+            this.eventManager.listenOnce(pipWindow, 'pagehide', () => {
+              this.onLeavePictureInPicture_();
+            });
+          });
     }
   }
 
-  /**
-   * The Document Picture-in-Picture API makes it possible to open an
-   * always-on-top window that can be populated with arbitrary HTML content.
-   * https://developer.chrome.com/docs/web-platform/document-picture-in-picture
-   * @private
-   */
-  async toggleDocumentPictureInPicture_() {
-    // Close Picture-in-Picture window if any.
-    if (window.documentPictureInPicture.window) {
-      window.documentPictureInPicture.window.close();
-      this.onLeavePictureInPicture_();
-      return;
-    }
-
-    // Open a Picture-in-Picture window.
-    const pipPlayer = this.videoContainer_;
-    const rectPipPlayer = pipPlayer.getBoundingClientRect();
-    const pipWindow = await window.documentPictureInPicture.requestWindow({
-      width: rectPipPlayer.width,
-      height: rectPipPlayer.height,
-    });
-
-    // Copy style sheets to the Picture-in-Picture window.
-    this.copyStyleSheetsToWindow_(pipWindow);
-
-    // Add placeholder for the player.
-    const parentPlayer = pipPlayer.parentNode || document.body;
-    const placeholder = this.videoContainer_.cloneNode(true);
-    placeholder.style.visibility = 'hidden';
-    placeholder.style.height = getComputedStyle(pipPlayer).height;
-    parentPlayer.appendChild(placeholder);
-
-    // Make sure player fits in the Picture-in-Picture window.
-    const styles = document.createElement('style');
-    styles.append(`[data-shaka-player-container] {
-      width: 100% !important; max-height: 100%}`);
-    pipWindow.document.head.append(styles);
-
-    // Move player to the Picture-in-Picture window.
-    pipWindow.document.body.append(pipPlayer);
-    this.onEnterPictureInPicture_();
-
-    // Listen for the PiP closing event to move the player back.
-    this.eventManager.listenOnce(pipWindow, 'pagehide', () => {
-      placeholder.replaceWith(/** @type {!Node} */(pipPlayer));
-    });
-  }
-
-  /** @private */
-  copyStyleSheetsToWindow_(win) {
-    const styleSheets = /** @type {!Iterable<*>} */(document.styleSheets);
-    const allCSS = [...styleSheets]
-        .map((sheet) => {
-          try {
-            return [...sheet.cssRules].map((rule) => rule.cssText).join('');
-          } catch (e) {
-            const link = /** @type {!HTMLLinkElement} */(
-              document.createElement('link'));
-
-            link.rel = 'stylesheet';
-            link.type = sheet.type;
-            link.media = sheet.media;
-            link.href = sheet.href;
-            win.document.head.appendChild(link);
-          }
-          return '';
-        })
-        .filter(Boolean)
-        .join('\n');
-    const style = document.createElement('style');
-
-    style.textContent = allCSS;
-    win.document.head.appendChild(style);
-  }
-
   /** @private */
   onEnterPictureInPicture_() {
     const LocIds = shaka.ui.Locales.Ids;
@@ -250,13 +151,14 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
     this.pipNameSpan_.textContent =
       this.localization.resolve(LocIds.PICTURE_IN_PICTURE);
 
-    const ariaLabel = document.pictureInPictureElement ?
+    const enabled = this.controls.isPiPEnabled();
+
+    const ariaLabel = enabled ?
         LocIds.EXIT_PICTURE_IN_PICTURE :
         LocIds.ENTER_PICTURE_IN_PICTURE;
     this.pipButton_.ariaLabel = this.localization.resolve(ariaLabel);
 
-    const currentPipState = document.pictureInPictureElement ?
-        LocIds.ON : LocIds.OFF;
+    const currentPipState = enabled ? LocIds.ON : LocIds.OFF;
 
     this.currentPipState_.textContent =
         this.localization.resolve(currentPipState);
@@ -271,11 +173,11 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
 
     if (isCasting) {
       // Picture-in-picture is not applicable if we're casting
-      if (this.isPipAllowed_()) {
+      if (this.controls.isPiPAllowed()) {
         shaka.ui.Utils.setDisplay(this.pipButton_, false);
       }
     } else {
-      if (this.isPipAllowed_()) {
+      if (this.controls.isPiPAllowed()) {
         shaka.ui.Utils.setDisplay(this.pipButton_, true);
       }
     }
@@ -290,12 +192,12 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
    * @private
    */
   async onTracksChanged_() {
-    if (!this.isPipAllowed_()) {
+    if (!this.controls.isPiPAllowed()) {
       shaka.ui.Utils.setDisplay(this.pipButton_, false);
     } else if (this.player && this.player.isAudioOnly()) {
       shaka.ui.Utils.setDisplay(this.pipButton_, false);
-      if (document.pictureInPictureElement) {
-        await document.exitPictureInPicture();
+      if (this.controls.isPiPEnabled()) {
+        await this.controls.togglePiP();
       }
     } else {
       shaka.ui.Utils.setDisplay(this.pipButton_, true);

package/ui/remote_button.js

@@ -0,0 +1,201 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+goog.provide('shaka.ui.RemoteButton');
+
+goog.require('shaka.Player');
+goog.require('shaka.ui.Controls');
+goog.require('shaka.ui.Element');
+goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Locales');
+goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.OverflowMenu');
+goog.require('shaka.ui.Utils');
+goog.require('shaka.util.Dom');
+goog.require('shaka.util.Platform');
+goog.requireType('shaka.ui.Controls');
+
+
+/**
+ * @extends {shaka.ui.Element}
+ * @final
+ * @export
+ */
+shaka.ui.RemoteButton = class extends shaka.ui.Element {
+  /**
+   * @param {!HTMLElement} parent
+   * @param {!shaka.ui.Controls} controls
+   */
+  constructor(parent, controls) {
+    super(parent, controls);
+
+    /** @private {!HTMLButtonElement} */
+    this.remoteButton_ = shaka.util.Dom.createButton();
+    this.remoteButton_.classList.add('shaka-remote-button');
+    this.remoteButton_.classList.add('shaka-tooltip');
+    this.remoteButton_.ariaPressed = 'false';
+
+    /** @private {!HTMLElement} */
+    this.remoteIcon_ = shaka.util.Dom.createHTMLElement('i');
+    this.remoteIcon_.classList.add('material-icons-round');
+    let icon = shaka.ui.Enums.MaterialDesignIcons.CAST;
+    const safariVersion = shaka.util.Platform.safariVersion();
+    if (safariVersion && safariVersion >= 13) {
+      icon = shaka.ui.Enums.MaterialDesignIcons.AIRPLAY;
+    }
+    this.remoteIcon_.textContent = icon;
+    this.remoteButton_.appendChild(this.remoteIcon_);
+
+    const label = shaka.util.Dom.createHTMLElement('label');
+    label.classList.add('shaka-overflow-button-label');
+    label.classList.add('shaka-overflow-menu-only');
+    this.remoteNameSpan_ = shaka.util.Dom.createHTMLElement('span');
+    label.appendChild(this.remoteNameSpan_);
+
+    this.remoteCurrentSelectionSpan_ =
+      shaka.util.Dom.createHTMLElement('span');
+    this.remoteCurrentSelectionSpan_.classList.add(
+        'shaka-current-selection-span');
+    label.appendChild(this.remoteCurrentSelectionSpan_);
+    this.remoteButton_.appendChild(label);
+    this.parent.appendChild(this.remoteButton_);
+
+    /** @private {number} */
+    this.callbackId_ = -1;
+
+    // Setup strings in the correct language
+    this.updateLocalizedStrings_();
+
+    shaka.ui.Utils.setDisplay(this.remoteButton_, false);
+
+    if (!this.video.remote || this.video.disableRemotePlayback) {
+      this.remoteButton_.classList.add('shaka-hidden');
+    } else {
+      this.eventManager.listen(
+          this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
+            this.updateLocalizedStrings_();
+          });
+
+      this.eventManager.listen(
+          this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
+            this.updateLocalizedStrings_();
+          });
+
+      this.eventManager.listen(this.controls, 'caststatuschanged', () => {
+        this.updateRemoteState_();
+      });
+
+      this.eventManager.listen(this.remoteButton_, 'click', () => {
+        this.video.remote.prompt();
+      });
+
+      this.eventManager.listen(this.video.remote, 'connect', () => {
+        this.updateRemoteState_();
+      });
+
+      this.eventManager.listen(this.video.remote, 'connecting', () => {
+        this.updateRemoteState_();
+      });
+
+      this.eventManager.listen(this.video.remote, 'disconnect', () => {
+        this.updateRemoteState_();
+      });
+
+      this.eventManager.listen(this.player, 'loaded', () => {
+        this.updateRemoteState_();
+      });
+
+      this.updateRemoteState_();
+    }
+  }
+
+  /** @override */
+  release() {
+    if (this.video.remote && this.callbackId_ != -1) {
+      this.video.remote.cancelWatchAvailability(this.callbackId_);
+    }
+
+    super.release();
+  }
+
+  /**
+   * @private
+   */
+  async updateRemoteState_() {
+    if (this.controls.getCastProxy().canCast() &&
+        this.controls.isCastAllowed()) {
+      shaka.ui.Utils.setDisplay(this.remoteButton_, false);
+      if (this.callbackId_ != -1) {
+        this.video.remote.cancelWatchAvailability(this.callbackId_);
+        this.callbackId_ = -1;
+      }
+    } else if (this.video.remote.state == 'disconnected') {
+      const handleAvailabilityChange = (availability) => {
+        if (this.player) {
+          const loadMode = this.player.getLoadMode();
+          const srcMode = loadMode == shaka.Player.LoadMode.SRC_EQUALS;
+          shaka.ui.Utils.setDisplay(
+              this.remoteButton_, srcMode && availability);
+        } else {
+          shaka.ui.Utils.setDisplay(this.remoteButton_, false);
+        }
+      };
+      try {
+        if (this.callbackId_ != -1) {
+          await this.video.remote.cancelWatchAvailability(this.callbackId_);
+          this.callbackId_ = -1;
+        }
+      } catch (e) {
+        // Ignore this error.
+      }
+      try {
+        const id = await this.video.remote.watchAvailability(
+            handleAvailabilityChange);
+        this.callbackId_ = id;
+      } catch (e) {
+        handleAvailabilityChange(/* availability= */ true);
+      }
+    } else if (this.callbackId_ != -1) {
+      // If remote device is connecting or connected, we should stop
+      // watching remote device availability to save power.
+      await this.video.remote.cancelWatchAvailability(this.callbackId_);
+      this.callbackId_ = -1;
+    }
+  }
+
+  /**
+   * @private
+   */
+  updateLocalizedStrings_() {
+    const LocIds = shaka.ui.Locales.Ids;
+    let text = this.localization.resolve(LocIds.CAST);
+    const safariVersion = shaka.util.Platform.safariVersion();
+    if (safariVersion && safariVersion >= 13) {
+      text = this.localization.resolve(LocIds.AIRPLAY);
+    }
+    this.remoteButton_.ariaLabel = text;
+    this.remoteNameSpan_.textContent = text;
+  }
+};
+
+
+/**
+ * @implements {shaka.extern.IUIElement.Factory}
+ * @final
+ */
+shaka.ui.RemoteButton.Factory = class {
+  /** @override */
+  create(rootElement, controls) {
+    return new shaka.ui.RemoteButton(rootElement, controls);
+  }
+};
+
+shaka.ui.OverflowMenu.registerElement(
+    'remote', new shaka.ui.RemoteButton.Factory());
+
+shaka.ui.Controls.registerElement(
+    'remote', new shaka.ui.RemoteButton.Factory());

package/ui/ui.js

@@ -245,10 +245,13 @@ shaka.ui.Overlay = class {
       keyboardSeekDistance: 5,
       keyboardLargeSeekDistance: 60,
       fullScreenElement: this.videoContainer_,
+      preferDocumentPictureInPicture: true,
     };
 
-    // Check AirPlay support
-    if (window.WebKitPlaybackTargetAvailabilityEvent) {
+    // eslint-disable-next-line no-restricted-syntax
+    if ('remote' in HTMLMediaElement.prototype) {
+      config.overflowMenuButtons.push('remote');
+    } else if (window.WebKitPlaybackTargetAvailabilityEvent) {
       config.overflowMenuButtons.push('airplay');
     }