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.ContextMenu');
  11. goog.require('shaka.ui.Controls');
  12. goog.require('shaka.ui.Element');
  13. goog.require('shaka.ui.Enums');
  14. goog.require('shaka.ui.Locales');
  15. goog.require('shaka.ui.Localization');
  16. goog.require('shaka.ui.OverflowMenu');
  17. goog.require('shaka.ui.Utils');
  18. goog.require('shaka.util.Dom');
  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.     /** @private {HTMLElement } */
  39.     this.videoContainer_ = this.controls.getVideoContainer();
  41.     const LocIds = shaka.ui.Locales.Ids;
  42.     /** @private {!HTMLButtonElement} */
  43.     this.pipButton_ = shaka.util.Dom.createButton();
  44.     this.pipButton_.classList.add('shaka-pip-button');
  45.     this.pipButton_.classList.add('shaka-tooltip');
  47.     /** @private {!HTMLElement} */
  48.     this.pipIcon_ = shaka.util.Dom.createHTMLElement('i');
  49.     this.pipIcon_.classList.add('material-icons-round');
  50.     this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.PIP;
  51.     this.pipButton_.appendChild(this.pipIcon_);
  53.     const label = shaka.util.Dom.createHTMLElement('label');
  54.     label.classList.add('shaka-overflow-button-label');
  55.     label.classList.add('shaka-overflow-menu-only');
  56.     label.classList.add('shaka-simple-overflow-button-label-inline');
  57.     this.pipNameSpan_ = shaka.util.Dom.createHTMLElement('span');
  58.     this.pipNameSpan_.textContent =
  59.       this.localization.resolve(LocIds.PICTURE_IN_PICTURE);
  60.     label.appendChild(this.pipNameSpan_);
  62.     /** @private {!HTMLElement} */
  63.     this.currentPipState_ = shaka.util.Dom.createHTMLElement('span');
  64.     this.currentPipState_.classList.add('shaka-current-selection-span');
  65.     label.appendChild(this.currentPipState_);
  67.     this.pipButton_.appendChild(label);
  69.     this.updateLocalizedStrings_();
  71.     this.parent.appendChild(this.pipButton_);
  73.     // Don't display the button if PiP is not supported or not allowed.
  74.     // TODO: Can this ever change? Is it worth creating the button if the below
  75.     // condition is true?
  76.     if (!this.controls.isPiPAllowed()) {
  77.       shaka.ui.Utils.setDisplay(this.pipButton_, false);
  78.     }
  80.     this.eventManager.listen(
  81.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  82.           this.updateLocalizedStrings_();
  83.         });
  85.     this.eventManager.listen(
  86.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  87.           this.updateLocalizedStrings_();
  88.         });
  90.     this.eventManager.listen(this.pipButton_, 'click', () => {
  91.       if (!this.controls.isOpaque()) {
  92.         return;
  93.       }
  94.       this.controls.togglePiP();
  95.     });
  97.     this.eventManager.listen(this.localVideo_, 'enterpictureinpicture', () => {
  98.       this.onEnterPictureInPicture_();
  99.     });
  101.     this.eventManager.listen(this.localVideo_, 'leavepictureinpicture', () => {
  102.       this.onLeavePictureInPicture_();
  103.     });
  105.     this.eventManager.listen(this.controls, 'caststatuschanged', () => {
  106.       this.onTracksChanged_();
  107.     });
  109.     this.eventManager.listen(this.player, 'trackschanged', () => {
  110.       this.onTracksChanged_();
  111.     });
  113.     if ('documentPictureInPicture' in window) {
  114.       this.eventManager.listen(window.documentPictureInPicture, 'enter',
  115.           (e) => {
  116.             this.onEnterPictureInPicture_();
  118.             const event = /** @type {DocumentPictureInPictureEvent} */(e);
  119.             const pipWindow = event.window;
  120.             this.eventManager.listenOnce(pipWindow, 'pagehide', () => {
  121.               this.onLeavePictureInPicture_();
  122.             });
  123.           });
  124.     }
  125.   }
  127.   /** @private */
  128.   onEnterPictureInPicture_() {
  129.     const LocIds = shaka.ui.Locales.Ids;
  130.     this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.EXIT_PIP;
  131.     this.pipButton_.ariaLabel =
  132.         this.localization.resolve(LocIds.EXIT_PICTURE_IN_PICTURE);
  133.     this.currentPipState_.textContent =
  134.         this.localization.resolve(LocIds.ON);
  135.   }
  138.   /** @private */
  139.   onLeavePictureInPicture_() {
  140.     const LocIds = shaka.ui.Locales.Ids;
  141.     this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.PIP;
  142.     this.pipButton_.ariaLabel =
  143.         this.localization.resolve(LocIds.ENTER_PICTURE_IN_PICTURE);
  144.     this.currentPipState_.textContent =
  145.         this.localization.resolve(LocIds.OFF);
  146.   }
  149.   /**
  150.    * @private
  151.    */
  152.   updateLocalizedStrings_() {
  153.     const LocIds = shaka.ui.Locales.Ids;
  155.     this.pipNameSpan_.textContent =
  156.       this.localization.resolve(LocIds.PICTURE_IN_PICTURE);
  158.     const enabled = this.controls.isPiPEnabled();
  160.     const ariaLabel = enabled ?
  161.         LocIds.EXIT_PICTURE_IN_PICTURE :
  162.         LocIds.ENTER_PICTURE_IN_PICTURE;
  163.     this.pipButton_.ariaLabel = this.localization.resolve(ariaLabel);
  165.     const currentPipState = enabled ? LocIds.ON : LocIds.OFF;
  167.     this.currentPipState_.textContent =
  168.         this.localization.resolve(currentPipState);
  169.   }
  172.   /**
  173.    * Display the picture-in-picture button only when the content contains video.
  174.    * If it's displaying in picture-in-picture mode, and an audio only content is
  175.    * loaded, exit the picture-in-picture display.
  176.    * @return {!Promise}
  177.    * @private
  178.    */
  179.   async onTracksChanged_() {
  180.     if (!this.controls.isPiPAllowed()) {
  181.       shaka.ui.Utils.setDisplay(this.pipButton_, false);
  182.       if (this.controls.isPiPEnabled()) {
  183.         await this.controls.togglePiP();
  184.       }
  185.     } else if (this.player && this.player.isAudioOnly()) {
  186.       shaka.ui.Utils.setDisplay(this.pipButton_, false);
  187.       if (this.controls.isPiPEnabled()) {
  188.         await this.controls.togglePiP();
  189.       }
  190.     } else {
  191.       shaka.ui.Utils.setDisplay(this.pipButton_, true);
  192.     }
  193.   }
  194. };
  197. /**
  198.  * @implements {shaka.extern.IUIElement.Factory}
  199.  * @final
  200.  */
  201. shaka.ui.PipButton.Factory = class {
  202.   /** @override */
  203.   create(rootElement, controls) {
  204.     return new shaka.ui.PipButton(rootElement, controls);
  205.   }
  206. };
  208. shaka.ui.OverflowMenu.registerElement(
  209.     'picture_in_picture', new shaka.ui.PipButton.Factory());
  211. shaka.ui.Controls.registerElement(
  212.     'picture_in_picture', new shaka.ui.PipButton.Factory());
  214. shaka.ui.ContextMenu.registerElement(
  215.     'picture_in_picture', new shaka.ui.PipButton.Factory());