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.     this.pipNameSpan_ = shaka.util.Dom.createHTMLElement('span');
  57.     this.pipNameSpan_.textContent =
  58.       this.localization.resolve(LocIds.PICTURE_IN_PICTURE);
  59.     label.appendChild(this.pipNameSpan_);
  61.     /** @private {!HTMLElement} */
  62.     this.currentPipState_ = shaka.util.Dom.createHTMLElement('span');
  63.     this.currentPipState_.classList.add('shaka-current-selection-span');
  64.     label.appendChild(this.currentPipState_);
  66.     this.pipButton_.appendChild(label);
  68.     this.updateLocalizedStrings_();
  70.     this.parent.appendChild(this.pipButton_);
  72.     // Don't display the button if PiP is not supported or not allowed.
  73.     // TODO: Can this ever change? Is it worth creating the button if the below
  74.     // condition is true?
  75.     if (!this.controls.isPiPAllowed()) {
  76.       shaka.ui.Utils.setDisplay(this.pipButton_, false);
  77.     }
  79.     this.eventManager.listen(
  80.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  81.           this.updateLocalizedStrings_();
  82.         });
  84.     this.eventManager.listen(
  85.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  86.           this.updateLocalizedStrings_();
  87.         });
  89.     this.eventManager.listen(this.pipButton_, 'click', () => {
  90.       this.controls.togglePiP();
  91.     });
  93.     this.eventManager.listen(this.localVideo_, 'enterpictureinpicture', () => {
  94.       this.onEnterPictureInPicture_();
  95.     });
  97.     this.eventManager.listen(this.localVideo_, 'leavepictureinpicture', () => {
  98.       this.onLeavePictureInPicture_();
  99.     });
  101.     this.eventManager.listen(this.controls, 'caststatuschanged', () => {
  102.       this.onTracksChanged_();
  103.     });
  105.     this.eventManager.listen(this.player, 'trackschanged', () => {
  106.       this.onTracksChanged_();
  107.     });
  109.     if ('documentPictureInPicture' in window) {
  110.       this.eventManager.listen(window.documentPictureInPicture, 'enter',
  111.           (e) => {
  112.             this.onEnterPictureInPicture_();
  114.             const event = /** @type {DocumentPictureInPictureEvent} */(e);
  115.             const pipWindow = event.window;
  116.             this.eventManager.listenOnce(pipWindow, 'pagehide', () => {
  117.               this.onLeavePictureInPicture_();
  118.             });
  119.           });
  120.     }
  121.   }
  123.   /** @private */
  124.   onEnterPictureInPicture_() {
  125.     const LocIds = shaka.ui.Locales.Ids;
  126.     this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.EXIT_PIP;
  127.     this.pipButton_.ariaLabel =
  128.         this.localization.resolve(LocIds.EXIT_PICTURE_IN_PICTURE);
  129.     this.currentPipState_.textContent =
  130.         this.localization.resolve(LocIds.ON);
  131.   }
  134.   /** @private */
  135.   onLeavePictureInPicture_() {
  136.     const LocIds = shaka.ui.Locales.Ids;
  137.     this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.PIP;
  138.     this.pipButton_.ariaLabel =
  139.         this.localization.resolve(LocIds.ENTER_PICTURE_IN_PICTURE);
  140.     this.currentPipState_.textContent =
  141.         this.localization.resolve(LocIds.OFF);
  142.   }
  145.   /**
  146.    * @private
  147.    */
  148.   updateLocalizedStrings_() {
  149.     const LocIds = shaka.ui.Locales.Ids;
  151.     this.pipNameSpan_.textContent =
  152.       this.localization.resolve(LocIds.PICTURE_IN_PICTURE);
  154.     const enabled = this.controls.isPiPEnabled();
  156.     const ariaLabel = enabled ?
  157.         LocIds.EXIT_PICTURE_IN_PICTURE :
  158.         LocIds.ENTER_PICTURE_IN_PICTURE;
  159.     this.pipButton_.ariaLabel = this.localization.resolve(ariaLabel);
  161.     const currentPipState = enabled ? LocIds.ON : LocIds.OFF;
  163.     this.currentPipState_.textContent =
  164.         this.localization.resolve(currentPipState);
  165.   }
  168.   /**
  169.    * Display the picture-in-picture button only when the content contains video.
  170.    * If it's displaying in picture-in-picture mode, and an audio only content is
  171.    * loaded, exit the picture-in-picture display.
  172.    * @return {!Promise}
  173.    * @private
  174.    */
  175.   async onTracksChanged_() {
  176.     if (!this.controls.isPiPAllowed()) {
  177.       shaka.ui.Utils.setDisplay(this.pipButton_, false);
  178.       if (this.controls.isPiPEnabled()) {
  179.         await this.controls.togglePiP();
  180.       }
  181.     } else if (this.player && this.player.isAudioOnly()) {
  182.       shaka.ui.Utils.setDisplay(this.pipButton_, false);
  183.       if (this.controls.isPiPEnabled()) {
  184.         await this.controls.togglePiP();
  185.       }
  186.     } else {
  187.       shaka.ui.Utils.setDisplay(this.pipButton_, true);
  188.     }
  189.   }
  190. };
  193. /**
  194.  * @implements {shaka.extern.IUIElement.Factory}
  195.  * @final
  196.  */
  197. shaka.ui.PipButton.Factory = class {
  198.   /** @override */
  199.   create(rootElement, controls) {
  200.     return new shaka.ui.PipButton(rootElement, controls);
  201.   }
  202. };
  204. shaka.ui.OverflowMenu.registerElement(
  205.     'picture_in_picture', new shaka.ui.PipButton.Factory());
  207. shaka.ui.Controls.registerElement(
  208.     'picture_in_picture', new shaka.ui.PipButton.Factory());
  210. shaka.ui.ContextMenu.registerElement(
  211.     'picture_in_picture', new shaka.ui.PipButton.Factory());