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.       this.onAirPlayClick_();
  85.     });
  87.     const video = this.controls.getVideo();
  88.     goog.asserts.assert(video != null, 'Should have a video!');
  90.     this.eventManager.listen(video,
  91.         'webkitplaybacktargetavailabilitychanged', (e) => {
  92.           const event = /** @type {!AirPlayEvent} */ (e);
  93.           this.onAirPlayAvailabilityChange_(event);
  94.         });
  96.     this.eventManager.listen(video,
  97.         'webkitcurrentplaybacktargetiswirelesschanged', () => {
  98.           this.onAirPlayStatusChange_();
  99.         });
  100.   }
  103.   /**
  104.    * @private
  105.    */
  106.   onAirPlayClick_() {
  107.     const video = this.controls.getVideo();
  108.     goog.asserts.assert(video != null, 'Should have a video!');
  109.     video.webkitShowPlaybackTargetPicker();
  110.   }
  112.   /**
  113.    * @param {!AirPlayEvent} e
  114.    * @private
  115.    */
  116.   onAirPlayAvailabilityChange_(e) {
  117.     const canCast = e.availability == 'available';
  118.     const loadMode = this.player.getLoadMode();
  119.     const srcMode = loadMode == shaka.Player.LoadMode.SRC_EQUALS;
  120.     shaka.ui.Utils.setDisplay(this.airplayButton_, canCast && srcMode);
  121.   }
  124.   /**
  125.    * @private
  126.    */
  127.   onAirPlayStatusChange_() {
  128.     const video = this.controls.getVideo();
  129.     goog.asserts.assert(video != null, 'Should have a video!');
  130.     const isCasting = video && video.webkitCurrentPlaybackTargetIsWireless;
  132.     // Aria-pressed set to true when casting, set to false otherwise.
  133.     if (isCasting) {
  134.       this.airplayButton_.ariaPressed = 'true';
  135.     } else {
  136.       this.airplayButton_.ariaPressed = 'false';
  137.     }
  138.   }
  141.   /**
  142.    * @private
  143.    */
  144.   updateLocalizedStrings_() {
  145.     const LocIds = shaka.ui.Locales.Ids;
  147.     this.airplayButton_.ariaLabel = this.localization.resolve(LocIds.AIRPLAY);
  148.     this.airplayNameSpan_.textContent =
  149.         this.localization.resolve(LocIds.AIRPLAY);
  150.   }
  151. };
  154. /**
  155.  * @implements {shaka.extern.IUIElement.Factory}
  156.  * @final
  157.  */
  158. shaka.ui.AirPlayButton.Factory = class {
  159.   /** @override */
  160.   create(rootElement, controls) {
  161.     return new shaka.ui.AirPlayButton(rootElement, controls);
  162.   }
  163. };
  165. shaka.ui.OverflowMenu.registerElement(
  166.     'airplay', new shaka.ui.AirPlayButton.Factory());
  168. shaka.ui.Controls.registerElement(
  169.     'airplay', new shaka.ui.AirPlayButton.Factory());