Source: ui/airplay_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.AirPlayButton');
  10. goog.require('goog.asserts');
  11. goog.require('shaka.Player');
  12. goog.require('shaka.ui.Controls');
  13. goog.require('shaka.ui.Element');
  14. goog.require('shaka.ui.Enums');
  15. goog.require('shaka.ui.Locales');
  16. goog.require('shaka.ui.Localization');
  17. goog.require('shaka.ui.OverflowMenu');
  18. goog.require('shaka.ui.Utils');
  19. goog.require('shaka.util.Dom');
  20. goog.requireType('shaka.ui.Controls');
  23. /**
  24.  * @extends {shaka.ui.Element}
  25.  * @final
  26.  * @export
  27.  */
  28. shaka.ui.AirPlayButton = class extends shaka.ui.Element {
  29.   /**
  30.    * @param {!HTMLElement} parent
  31.    * @param {!shaka.ui.Controls} controls
  32.    */
  33.   constructor(parent, controls) {
  34.     super(parent, controls);
  36.     /** @private {!HTMLButtonElement} */
  37.     this.airplayButton_ = shaka.util.Dom.createButton();
  38.     this.airplayButton_.classList.add('shaka-airplay-button');
  39.     this.airplayButton_.classList.add('shaka-tooltip');
  40.     this.airplayButton_.ariaPressed = 'false';
  42.     /** @private {!HTMLElement} */
  43.     this.airplayIcon_ = shaka.util.Dom.createHTMLElement('i');
  44.     this.airplayIcon_.classList.add('material-icons-round');
  45.     this.airplayIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.AIRPLAY;
  46.     this.airplayButton_.appendChild(this.airplayIcon_);
  48.     // Don't show the button if AirPlay is not supported.
  49.     if (!window.WebKitPlaybackTargetAvailabilityEvent) {
  50.       this.airplayButton_.classList.add('shaka-hidden');
  51.     }
  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.airplayNameSpan_ = shaka.util.Dom.createHTMLElement('span');
  57.     label.appendChild(this.airplayNameSpan_);
  59.     this.airplayCurrentSelectionSpan_ =
  60.       shaka.util.Dom.createHTMLElement('span');
  61.     this.airplayCurrentSelectionSpan_.classList.add(
  62.         'shaka-current-selection-span');
  63.     label.appendChild(this.airplayCurrentSelectionSpan_);
  64.     this.airplayButton_.appendChild(label);
  65.     this.parent.appendChild(this.airplayButton_);
  67.     // Setup strings in the correct language
  68.     this.updateLocalizedStrings_();
  70.     // Setup button display and state according to the current airplay status
  71.     this.onAirPlayStatusChange_();
  73.     this.eventManager.listen(
  74.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  75.           this.updateLocalizedStrings_();
  76.         });
  78.     this.eventManager.listen(
  79.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  80.           this.updateLocalizedStrings_();
  81.         });
  83.     this.eventManager.listen(this.airplayButton_, 'click', () => {
  84.       if (!this.controls.isOpaque()) {
  85.         return;
  86.       }
  87.       this.onAirPlayClick_();
  88.     });
  90.     const video = this.controls.getVideo();
  91.     goog.asserts.assert(video != null, 'Should have a video!');
  93.     this.eventManager.listen(video,
  94.         'webkitplaybacktargetavailabilitychanged', (e) => {
  95.           const event = /** @type {!AirPlayEvent} */ (e);
  96.           this.onAirPlayAvailabilityChange_(event);
  97.         });
  99.     this.eventManager.listen(video,
  100.         'webkitcurrentplaybacktargetiswirelesschanged', () => {
  101.           this.onAirPlayStatusChange_();
  102.         });
  103.   }
  106.   /**
  107.    * @private
  108.    */
  109.   onAirPlayClick_() {
  110.     const video = this.controls.getVideo();
  111.     goog.asserts.assert(video != null, 'Should have a video!');
  112.     video.webkitShowPlaybackTargetPicker();
  113.   }
  115.   /**
  116.    * @param {!AirPlayEvent} e
  117.    * @private
  118.    */
  119.   onAirPlayAvailabilityChange_(e) {
  120.     const canCast = e.availability == 'available';
  121.     const loadMode = this.player.getLoadMode();
  122.     const srcMode = loadMode == shaka.Player.LoadMode.SRC_EQUALS;
  123.     shaka.ui.Utils.setDisplay(this.airplayButton_, canCast && srcMode);
  124.   }
  127.   /**
  128.    * @private
  129.    */
  130.   onAirPlayStatusChange_() {
  131.     const video = this.controls.getVideo();
  132.     goog.asserts.assert(video != null, 'Should have a video!');
  133.     const isCasting = video && video.webkitCurrentPlaybackTargetIsWireless;
  135.     // Aria-pressed set to true when casting, set to false otherwise.
  136.     if (isCasting) {
  137.       this.airplayButton_.ariaPressed = 'true';
  138.     } else {
  139.       this.airplayButton_.ariaPressed = 'false';
  140.     }
  141.   }
  144.   /**
  145.    * @private
  146.    */
  147.   updateLocalizedStrings_() {
  148.     const LocIds = shaka.ui.Locales.Ids;
  150.     this.airplayButton_.ariaLabel = this.localization.resolve(LocIds.AIRPLAY);
  151.     this.airplayNameSpan_.textContent =
  152.         this.localization.resolve(LocIds.AIRPLAY);
  153.   }
  154. };
  157. /**
  158.  * @implements {shaka.extern.IUIElement.Factory}
  159.  * @final
  160.  */
  161. shaka.ui.AirPlayButton.Factory = class {
  162.   /** @override */
  163.   create(rootElement, controls) {
  164.     return new shaka.ui.AirPlayButton(rootElement, controls);
  165.   }
  166. };
  168. shaka.ui.OverflowMenu.registerElement(
  169.     'airplay', new shaka.ui.AirPlayButton.Factory());
  171. shaka.ui.Controls.registerElement(
  172.     'airplay', new shaka.ui.AirPlayButton.Factory());