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.       if (!this.controls.isOpaque()) {
  91.         return;
  92.       }
  93.       this.controls.togglePiP();
  94.     });
  96.     this.eventManager.listen(this.localVideo_, 'enterpictureinpicture', () => {
  97.       this.onEnterPictureInPicture_();
  98.     });
  100.     this.eventManager.listen(this.localVideo_, 'leavepictureinpicture', () => {
  101.       this.onLeavePictureInPicture_();
  102.     });
  104.     this.eventManager.listen(this.controls, 'caststatuschanged', () => {
  105.       this.onTracksChanged_();
  106.     });
  108.     this.eventManager.listen(this.player, 'trackschanged', () => {
  109.       this.onTracksChanged_();
  110.     });
  112.     if ('documentPictureInPicture' in window) {
  113.       this.eventManager.listen(window.documentPictureInPicture, 'enter',
  114.           (e) => {
  115.             this.onEnterPictureInPicture_();
  117.             const event = /** @type {DocumentPictureInPictureEvent} */(e);
  118.             const pipWindow = event.window;
  119.             this.eventManager.listenOnce(pipWindow, 'pagehide', () => {
  120.               this.onLeavePictureInPicture_();
  121.             });
  122.           });
  123.     }
  124.   }
  126.   /** @private */
  127.   onEnterPictureInPicture_() {
  128.     const LocIds = shaka.ui.Locales.Ids;
  129.     this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.EXIT_PIP;
  130.     this.pipButton_.ariaLabel =
  131.         this.localization.resolve(LocIds.EXIT_PICTURE_IN_PICTURE);
  132.     this.currentPipState_.textContent =
  133.         this.localization.resolve(LocIds.ON);
  134.   }
  137.   /** @private */
  138.   onLeavePictureInPicture_() {
  139.     const LocIds = shaka.ui.Locales.Ids;
  140.     this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.PIP;
  141.     this.pipButton_.ariaLabel =
  142.         this.localization.resolve(LocIds.ENTER_PICTURE_IN_PICTURE);
  143.     this.currentPipState_.textContent =
  144.         this.localization.resolve(LocIds.OFF);
  145.   }
  148.   /**
  149.    * @private
  150.    */
  151.   updateLocalizedStrings_() {
  152.     const LocIds = shaka.ui.Locales.Ids;
  154.     this.pipNameSpan_.textContent =
  155.       this.localization.resolve(LocIds.PICTURE_IN_PICTURE);
  157.     const enabled = this.controls.isPiPEnabled();
  159.     const ariaLabel = enabled ?
  160.         LocIds.EXIT_PICTURE_IN_PICTURE :
  161.         LocIds.ENTER_PICTURE_IN_PICTURE;
  162.     this.pipButton_.ariaLabel = this.localization.resolve(ariaLabel);
  164.     const currentPipState = enabled ? LocIds.ON : LocIds.OFF;
  166.     this.currentPipState_.textContent =
  167.         this.localization.resolve(currentPipState);
  168.   }
  171.   /**
  172.    * Display the picture-in-picture button only when the content contains video.
  173.    * If it's displaying in picture-in-picture mode, and an audio only content is
  174.    * loaded, exit the picture-in-picture display.
  175.    * @return {!Promise}
  176.    * @private
  177.    */
  178.   async onTracksChanged_() {
  179.     if (!this.controls.isPiPAllowed()) {
  180.       shaka.ui.Utils.setDisplay(this.pipButton_, false);
  181.       if (this.controls.isPiPEnabled()) {
  182.         await this.controls.togglePiP();
  183.       }
  184.     } else if (this.player && this.player.isAudioOnly()) {
  185.       shaka.ui.Utils.setDisplay(this.pipButton_, false);
  186.       if (this.controls.isPiPEnabled()) {
  187.         await this.controls.togglePiP();
  188.       }
  189.     } else {
  190.       shaka.ui.Utils.setDisplay(this.pipButton_, true);
  191.     }
  192.   }
  193. };
  196. /**
  197.  * @implements {shaka.extern.IUIElement.Factory}
  198.  * @final
  199.  */
  200. shaka.ui.PipButton.Factory = class {
  201.   /** @override */
  202.   create(rootElement, controls) {
  203.     return new shaka.ui.PipButton(rootElement, controls);
  204.   }
  205. };
  207. shaka.ui.OverflowMenu.registerElement(
  208.     'picture_in_picture', new shaka.ui.PipButton.Factory());
  210. shaka.ui.Controls.registerElement(
  211.     'picture_in_picture', new shaka.ui.PipButton.Factory());
  213. shaka.ui.ContextMenu.registerElement(
  214.     'picture_in_picture', new shaka.ui.PipButton.Factory());