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.isApple();
  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.         if (!this.controls.isOpaque()) {
  94.           return;
  95.         }
  96.         this.video.remote.prompt();
  97.       });
  99.       this.eventManager.listen(this.video.remote, 'connect', () => {
  100.         this.updateRemoteState_();
  101.         this.updateIcon_();
  102.       });
  104.       this.eventManager.listen(this.video.remote, 'connecting', () => {
  105.         this.updateRemoteState_();
  106.         this.updateIcon_();
  107.       });
  109.       this.eventManager.listen(this.video.remote, 'disconnect', () => {
  110.         this.updateRemoteState_();
  111.         this.updateIcon_();
  112.       });
  114.       this.eventManager.listen(this.player, 'loaded', () => {
  115.         this.updateRemoteState_();
  116.       });
  118.       this.updateRemoteState_(/* force= */ true);
  119.       this.updateIcon_();
  120.     }
  121.   }
  123.   /** @override */
  124.   release() {
  125.     if (this.video.remote && this.callbackId_ != -1) {
  126.       this.video.remote.cancelWatchAvailability(this.callbackId_).catch(() => {
  127.         // Ignore this error.
  128.       });
  129.     }
  131.     super.release();
  132.   }
  134.   /**
  135.    * @param {boolean=} force
  136.    * @private
  137.    */
  138.   async updateRemoteState_(force = false) {
  139.     if (this.controls.getCastProxy().canCast() &&
  140.         this.controls.isCastAllowed()) {
  141.       shaka.ui.Utils.setDisplay(this.remoteButton_, false);
  142.       if (this.callbackId_ != -1) {
  143.         this.video.remote.cancelWatchAvailability(this.callbackId_);
  144.         this.callbackId_ = -1;
  145.       }
  146.     } else if (this.video.remote.state == 'disconnected' || force) {
  147.       const handleAvailabilityChange = (availability) => {
  148.         if (this.player) {
  149.           const disableRemote = this.video.disableRemotePlayback;
  150.           let canCast = true;
  151.           if (shaka.util.Platform.isApple()) {
  152.             const loadMode = this.player.getLoadMode();
  153.             const mseMode = loadMode == shaka.Player.LoadMode.MEDIA_SOURCE;
  154.             if (mseMode && this.player.getManifestType() != 'HLS') {
  155.               canCast = false;
  156.             }
  157.           }
  158.           shaka.ui.Utils.setDisplay(
  159.               this.remoteButton_, canCast && availability && !disableRemote);
  160.         } else {
  161.           shaka.ui.Utils.setDisplay(this.remoteButton_, false);
  162.         }
  163.       };
  164.       try {
  165.         if (this.callbackId_ != -1) {
  166.           await this.video.remote.cancelWatchAvailability(this.callbackId_);
  167.           this.callbackId_ = -1;
  168.         }
  169.       } catch (e) {
  170.         // Ignore this error.
  171.       }
  172.       try {
  173.         const id = await this.video.remote.watchAvailability(
  174.             handleAvailabilityChange);
  175.         this.callbackId_ = id;
  176.       } catch (e) {
  177.         handleAvailabilityChange(/* availability= */ true);
  178.       }
  179.     } else if (this.callbackId_ != -1) {
  180.       // If remote device is connecting or connected, we should stop
  181.       // watching remote device availability to save power.
  182.       await this.video.remote.cancelWatchAvailability(this.callbackId_);
  183.       this.callbackId_ = -1;
  184.     }
  185.   }
  187.   /**
  188.    * @private
  189.    */
  190.   updateLocalizedStrings_() {
  191.     const LocIds = shaka.ui.Locales.Ids;
  192.     const text = this.isAirPlay_ ?
  193.         this.localization.resolve(LocIds.AIRPLAY) :
  194.         this.localization.resolve(LocIds.CAST);
  195.     this.remoteButton_.ariaLabel = text;
  196.     this.remoteNameSpan_.textContent = text;
  197.   }
  199.   /**
  200.    * @private
  201.    */
  202.   updateIcon_() {
  203.     if (this.isAirPlay_) {
  204.       return;
  205.     }
  206.     if (this.video.remote.state == 'disconnected') {
  207.       this.remoteIcon_.textContent =
  208.           shaka.ui.Enums.MaterialDesignIcons.CAST;
  209.     } else {
  210.       this.remoteIcon_.textContent =
  211.           shaka.ui.Enums.MaterialDesignIcons.EXIT_CAST;
  212.     }
  213.   }
  214. };
  217. /**
  218.  * @implements {shaka.extern.IUIElement.Factory}
  219.  * @final
  220.  */
  221. shaka.ui.RemoteButton.Factory = class {
  222.   /** @override */
  223.   create(rootElement, controls) {
  224.     return new shaka.ui.RemoteButton(rootElement, controls);
  225.   }
  226. };
  228. shaka.ui.OverflowMenu.registerElement(
  229.     'remote', new shaka.ui.RemoteButton.Factory());
  231. shaka.ui.Controls.registerElement(
  232.     'remote', new shaka.ui.RemoteButton.Factory());