Source: ui/pip_button.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  8. goog.provide('shaka.ui.PipButton');
  10. goog.require('shaka.ui.Constants');
  11. goog.require('shaka.ui.Element');
  12. goog.require('shaka.ui.Enums');
  13. goog.require('shaka.ui.Locales');
  14. goog.require('shaka.ui.Localization');
  15. goog.require('shaka.ui.OverflowMenu');
  16. goog.require('shaka.ui.Utils');
  17. goog.require('shaka.util.Dom');
  18. goog.require('shaka.util.FakeEvent');
  19. goog.requireType('shaka.ui.Controls');
  22. /**
  23.  * @extends {shaka.ui.Element}
  24.  * @final
  25.  * @export
  26.  */
  27. shaka.ui.PipButton = class extends shaka.ui.Element {
  28.   /**
  29.    * @param {!HTMLElement} parent
  30.    * @param {!shaka.ui.Controls} controls
  31.    */
  32.   constructor(parent, controls) {
  33.     super(parent, controls);
  35.     /** @private {HTMLMediaElement} */
  36.     this.localVideo_ = this.controls.getLocalVideo();
  38.     const LocIds = shaka.ui.Locales.Ids;
  39.     /** @private {!HTMLButtonElement} */
  40.     this.pipButton_ = shaka.util.Dom.createButton();
  41.     this.pipButton_.classList.add('shaka-pip-button');
  43.     /** @private {!HTMLElement} */
  44.     this.pipIcon_ = shaka.util.Dom.createHTMLElement('i');
  45.     this.pipIcon_.classList.add('material-icons-round');
  46.     this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.PIP;
  47.     this.pipButton_.appendChild(this.pipIcon_);
  49.     const label = shaka.util.Dom.createHTMLElement('label');
  50.     label.classList.add('shaka-overflow-button-label');
  51.     this.pipNameSpan_ = shaka.util.Dom.createHTMLElement('span');
  52.     this.pipNameSpan_.textContent =
  53.       this.localization.resolve(LocIds.PICTURE_IN_PICTURE);
  54.     label.appendChild(this.pipNameSpan_);
  56.     /** @private {!HTMLElement} */
  57.     this.currentPipState_ = shaka.util.Dom.createHTMLElement('span');
  58.     this.currentPipState_.classList.add('shaka-current-selection-span');
  59.     label.appendChild(this.currentPipState_);
  61.     this.pipButton_.appendChild(label);
  63.     this.updateLocalizedStrings_();
  65.     this.parent.appendChild(this.pipButton_);
  67.     // Don't display the button if PiP is not supported or not allowed.
  68.     // TODO: Can this ever change? Is it worth creating the button if the below
  69.     // condition is true?
  70.     if (!this.isPipAllowed_()) {
  71.       shaka.ui.Utils.setDisplay(this.pipButton_, false);
  72.     }
  74.     this.eventManager.listen(
  75.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  76.           this.updateLocalizedStrings_();
  77.         });
  79.     this.eventManager.listen(
  80.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  81.           this.updateLocalizedStrings_();
  82.         });
  84.     this.eventManager.listen(this.pipButton_, 'click', () => {
  85.       this.onPipClick_();
  86.     });
  88.     this.eventManager.listen(this.localVideo_, 'enterpictureinpicture', () => {
  89.       this.onEnterPictureInPicture_();
  90.     });
  92.     this.eventManager.listen(this.localVideo_, 'leavepictureinpicture', () => {
  93.       this.onLeavePictureInPicture_();
  94.     });
  96.     this.eventManager.listen(this.controls, 'caststatuschanged', (e) => {
  97.       this.onCastStatusChange_(e);
  98.     });
  100.     this.eventManager.listen(this.player, 'trackschanged', () => {
  101.       this.onTracksChanged_();
  102.     });
  103.   }
  106.   /**
  107.    * @return {boolean}
  108.    * @private
  109.    */
  110.   isPipAllowed_() {
  111.     return document.pictureInPictureEnabled &&
  112.         !this.video.disablePictureInPicture;
  113.   }
  116.   /**
  117.    * @return {!Promise}
  118.    * @private
  119.    */
  120.   async onPipClick_() {
  121.     try {
  122.       if (!document.pictureInPictureElement) {
  123.         // If you were fullscreen, leave fullscreen first.
  124.         if (document.fullscreenElement) {
  125.           document.exitFullscreen();
  126.         }
  127.         await this.video.requestPictureInPicture();
  128.       } else {
  129.         await document.exitPictureInPicture();
  130.       }
  131.     } catch (error) {
  132.       this.controls.dispatchEvent(new shaka.util.FakeEvent('error', {
  133.         detail: error,
  134.       }));
  135.     }
  136.   }
  139.   /** @private */
  140.   onEnterPictureInPicture_() {
  141.     const LocIds = shaka.ui.Locales.Ids;
  142.     this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.EXIT_PIP;
  143.     this.pipButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
  144.         this.localization.resolve(LocIds.EXIT_PICTURE_IN_PICTURE));
  145.     this.currentPipState_.textContent =
  146.         this.localization.resolve(LocIds.ON);
  147.   }
  150.   /** @private */
  151.   onLeavePictureInPicture_() {
  152.     const LocIds = shaka.ui.Locales.Ids;
  153.     this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.PIP;
  154.     this.pipButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
  155.         this.localization.resolve(LocIds.ENTER_PICTURE_IN_PICTURE));
  156.     this.currentPipState_.textContent =
  157.         this.localization.resolve(LocIds.OFF);
  158.   }
  161.   /**
  162.    * @private
  163.    */
  164.   updateLocalizedStrings_() {
  165.     const LocIds = shaka.ui.Locales.Ids;
  167.     this.pipNameSpan_.textContent =
  168.       this.localization.resolve(LocIds.PICTURE_IN_PICTURE);
  170.     const ariaLabel = document.pictureInPictureElement ?
  171.         LocIds.EXIT_PICTURE_IN_PICTURE :
  172.         LocIds.ENTER_PICTURE_IN_PICTURE;
  173.     this.pipButton_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
  174.         this.localization.resolve(ariaLabel));
  176.     const currentPipState = document.pictureInPictureElement ?
  177.         LocIds.ON : LocIds.OFF;
  179.     this.currentPipState_.textContent =
  180.         this.localization.resolve(currentPipState);
  181.   }
  183.   /**
  184.    * @param {Event} e
  185.    * @private
  186.    */
  187.   onCastStatusChange_(e) {
  188.     const isCasting = e['newStatus'];
  190.     if (isCasting) {
  191.       // Picture-in-picture is not applicable if we're casting
  192.       if (this.isPipAllowed_()) {
  193.         shaka.ui.Utils.setDisplay(this.pipButton_, false);
  194.       }
  195.     } else {
  196.       if (this.isPipAllowed_()) {
  197.         shaka.ui.Utils.setDisplay(this.pipButton_, true);
  198.       }
  199.     }
  200.   }
  203.   /**
  204.    * Display the picture-in-picture button only when the content contains video.
  205.    * If it's displaying in picture-in-picture mode, and an audio only content is
  206.    * loaded, exit the picture-in-picture display.
  207.    * @return {!Promise}
  208.    * @private
  209.    */
  210.   async onTracksChanged_() {
  211.     if (!this.isPipAllowed_()) {
  212.       shaka.ui.Utils.setDisplay(this.pipButton_, false);
  213.     } else if (this.player && this.player.isAudioOnly()) {
  214.       shaka.ui.Utils.setDisplay(this.pipButton_, false);
  215.       if (document.pictureInPictureElement) {
  216.         await document.exitPictureInPicture();
  217.       }
  218.     } else {
  219.       shaka.ui.Utils.setDisplay(this.pipButton_, true);
  220.     }
  221.   }
  222. };
  225. /**
  226.  * @implements {shaka.extern.IUIElement.Factory}
  227.  * @final
  228.  */
  229. shaka.ui.PipButton.Factory = class {
  230.   /** @override */
  231.   create(rootElement, controls) {
  232.     return new shaka.ui.PipButton(rootElement, controls);
  233.   }
  234. };
  236. shaka.ui.OverflowMenu.registerElement(
  237.     'picture_in_picture', new shaka.ui.PipButton.Factory());