Source: ui/remote_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.RemoteButton');
  10. goog.require('shaka.Player');
  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.require('shaka.util.Platform');
  20. goog.requireType('shaka.ui.Controls');
  23. /**
  24.  * @extends {shaka.ui.Element}
  25.  * @final
  26.  * @export
  27.  */
  28. shaka.ui.RemoteButton = 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 {boolean} */
  37.     this.isAirPlay_ = shaka.util.Platform.isSafari();
  39.     /** @private {!HTMLButtonElement} */
  40.     this.remoteButton_ = shaka.util.Dom.createButton();
  41.     this.remoteButton_.classList.add('shaka-remote-button');
  42.     this.remoteButton_.classList.add('shaka-tooltip');
  43.     this.remoteButton_.ariaPressed = 'false';
  45.     /** @private {!HTMLElement} */
  46.     this.remoteIcon_ = shaka.util.Dom.createHTMLElement('i');
  47.     this.remoteIcon_.classList.add('material-icons-round');
  48.     this.remoteIcon_.textContent = this.isAirPlay_ ?
  49.         shaka.ui.Enums.MaterialDesignIcons.AIRPLAY :
  50.         shaka.ui.Enums.MaterialDesignIcons.CAST;
  51.     this.remoteButton_.appendChild(this.remoteIcon_);
  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.remoteNameSpan_ = shaka.util.Dom.createHTMLElement('span');
  57.     label.appendChild(this.remoteNameSpan_);
  59.     this.remoteCurrentSelectionSpan_ =
  60.       shaka.util.Dom.createHTMLElement('span');
  61.     this.remoteCurrentSelectionSpan_.classList.add(
  62.         'shaka-current-selection-span');
  63.     label.appendChild(this.remoteCurrentSelectionSpan_);
  64.     this.remoteButton_.appendChild(label);
  65.     this.parent.appendChild(this.remoteButton_);
  67.     /** @private {number} */
  68.     this.callbackId_ = -1;
  70.     // Setup strings in the correct language
  71.     this.updateLocalizedStrings_();
  73.     shaka.ui.Utils.setDisplay(this.remoteButton_, false);
  75.     if (!this.video.remote) {
  76.       this.remoteButton_.classList.add('shaka-hidden');
  77.     } else {
  78.       this.eventManager.listen(
  79.           this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  80.             this.updateLocalizedStrings_();
  81.           });
  83.       this.eventManager.listen(
  84.           this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  85.             this.updateLocalizedStrings_();
  86.           });
  88.       this.eventManager.listen(this.controls, 'caststatuschanged', () => {
  89.         this.updateRemoteState_();
  90.       });
  92.       this.eventManager.listen(this.remoteButton_, 'click', () => {
  93.         this.video.remote.prompt();
  94.       });
  96.       this.eventManager.listen(this.video.remote, 'connect', () => {
  97.         this.updateRemoteState_();
  98.         this.updateIcon_();
  99.       });
  101.       this.eventManager.listen(this.video.remote, 'connecting', () => {
  102.         this.updateRemoteState_();
  103.         this.updateIcon_();
  104.       });
  106.       this.eventManager.listen(this.video.remote, 'disconnect', () => {
  107.         this.updateRemoteState_();
  108.         this.updateIcon_();
  109.       });
  111.       this.eventManager.listen(this.player, 'loaded', () => {
  112.         this.updateRemoteState_();
  113.       });
  115.       this.updateRemoteState_(/* force= */ true);
  116.       this.updateIcon_();
  117.     }
  118.   }
  120.   /** @override */
  121.   release() {
  122.     if (this.video.remote && this.callbackId_ != -1) {
  123.       this.video.remote.cancelWatchAvailability(this.callbackId_).catch(() => {
  124.         // Ignore this error.
  125.       });
  126.     }
  128.     super.release();
  129.   }
  131.   /**
  132.    * @param {boolean=} force
  133.    * @private
  134.    */
  135.   async updateRemoteState_(force = false) {
  136.     if (this.controls.getCastProxy().canCast() &&
  137.         this.controls.isCastAllowed()) {
  138.       shaka.ui.Utils.setDisplay(this.remoteButton_, false);
  139.       if (this.callbackId_ != -1) {
  140.         this.video.remote.cancelWatchAvailability(this.callbackId_);
  141.         this.callbackId_ = -1;
  142.       }
  143.     } else if (this.video.remote.state == 'disconnected' || force) {
  144.       const handleAvailabilityChange = (availability) => {
  145.         if (this.player) {
  146.           const disableRemote = this.video.disableRemotePlayback;
  147.           let canCast = true;
  148.           if (shaka.util.Platform.isSafari()) {
  149.             const loadMode = this.player.getLoadMode();
  150.             const mseMode = loadMode == shaka.Player.LoadMode.MEDIA_SOURCE;
  151.             if (mseMode && this.player.getManifestType() != 'HLS') {
  152.               canCast = false;
  153.             }
  154.           }
  155.           shaka.ui.Utils.setDisplay(
  156.               this.remoteButton_, canCast && availability && !disableRemote);
  157.         } else {
  158.           shaka.ui.Utils.setDisplay(this.remoteButton_, false);
  159.         }
  160.       };
  161.       try {
  162.         if (this.callbackId_ != -1) {
  163.           await this.video.remote.cancelWatchAvailability(this.callbackId_);
  164.           this.callbackId_ = -1;
  165.         }
  166.       } catch (e) {
  167.         // Ignore this error.
  168.       }
  169.       try {
  170.         const id = await this.video.remote.watchAvailability(
  171.             handleAvailabilityChange);
  172.         this.callbackId_ = id;
  173.       } catch (e) {
  174.         handleAvailabilityChange(/* availability= */ true);
  175.       }
  176.     } else if (this.callbackId_ != -1) {
  177.       // If remote device is connecting or connected, we should stop
  178.       // watching remote device availability to save power.
  179.       await this.video.remote.cancelWatchAvailability(this.callbackId_);
  180.       this.callbackId_ = -1;
  181.     }
  182.   }
  184.   /**
  185.    * @private
  186.    */
  187.   updateLocalizedStrings_() {
  188.     const LocIds = shaka.ui.Locales.Ids;
  189.     const text = this.isAirPlay_ ?
  190.         this.localization.resolve(LocIds.AIRPLAY) :
  191.         this.localization.resolve(LocIds.CAST);
  192.     this.remoteButton_.ariaLabel = text;
  193.     this.remoteNameSpan_.textContent = text;
  194.   }
  196.   /**
  197.    * @private
  198.    */
  199.   updateIcon_() {
  200.     if (this.isAirPlay_) {
  201.       return;
  202.     }
  203.     if (this.video.remote.state == 'disconnected') {
  204.       this.remoteIcon_.textContent =
  205.           shaka.ui.Enums.MaterialDesignIcons.CAST;
  206.     } else {
  207.       this.remoteIcon_.textContent =
  208.           shaka.ui.Enums.MaterialDesignIcons.EXIT_CAST;
  209.     }
  210.   }
  211. };
  214. /**
  215.  * @implements {shaka.extern.IUIElement.Factory}
  216.  * @final
  217.  */
  218. shaka.ui.RemoteButton.Factory = class {
  219.   /** @override */
  220.   create(rootElement, controls) {
  221.     return new shaka.ui.RemoteButton(rootElement, controls);
  222.   }
  223. };
  225. shaka.ui.OverflowMenu.registerElement(
  226.     'remote', new shaka.ui.RemoteButton.Factory());
  228. shaka.ui.Controls.registerElement(
  229.     'remote', new shaka.ui.RemoteButton.Factory());