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 {!HTMLButtonElement} */
  37.     this.remoteButton_ = shaka.util.Dom.createButton();
  38.     this.remoteButton_.classList.add('shaka-remote-button');
  39.     this.remoteButton_.classList.add('shaka-tooltip');
  40.     this.remoteButton_.ariaPressed = 'false';
  42.     /** @private {!HTMLElement} */
  43.     this.remoteIcon_ = shaka.util.Dom.createHTMLElement('i');
  44.     this.remoteIcon_.classList.add('material-icons-round');
  45.     let icon = shaka.ui.Enums.MaterialDesignIcons.CAST;
  46.     const safariVersion = shaka.util.Platform.safariVersion();
  47.     if (safariVersion && safariVersion >= 13) {
  48.       icon = shaka.ui.Enums.MaterialDesignIcons.AIRPLAY;
  49.     }
  50.     this.remoteIcon_.textContent = icon;
  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 || this.video.disableRemotePlayback) {
  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.       });
  100.       this.eventManager.listen(this.video.remote, 'connecting', () => {
  101.         this.updateRemoteState_();
  102.       });
  104.       this.eventManager.listen(this.video.remote, 'disconnect', () => {
  105.         this.updateRemoteState_();
  106.       });
  108.       this.eventManager.listen(this.player, 'loaded', () => {
  109.         this.updateRemoteState_();
  110.       });
  112.       this.updateRemoteState_();
  113.     }
  114.   }
  116.   /** @override */
  117.   release() {
  118.     if (this.video.remote && this.callbackId_ != -1) {
  119.       this.video.remote.cancelWatchAvailability(this.callbackId_).catch(() => {
  120.         // Ignore this error.
  121.       });
  122.     }
  124.     super.release();
  125.   }
  127.   /**
  128.    * @private
  129.    */
  130.   async updateRemoteState_() {
  131.     if (this.controls.getCastProxy().canCast() &&
  132.         this.controls.isCastAllowed()) {
  133.       shaka.ui.Utils.setDisplay(this.remoteButton_, false);
  134.       if (this.callbackId_ != -1) {
  135.         this.video.remote.cancelWatchAvailability(this.callbackId_);
  136.         this.callbackId_ = -1;
  137.       }
  138.     } else if (this.video.remote.state == 'disconnected') {
  139.       const handleAvailabilityChange = (availability) => {
  140.         if (this.player) {
  141.           const loadMode = this.player.getLoadMode();
  142.           const srcMode = loadMode == shaka.Player.LoadMode.SRC_EQUALS;
  143.           shaka.ui.Utils.setDisplay(
  144.               this.remoteButton_, srcMode && availability);
  145.         } else {
  146.           shaka.ui.Utils.setDisplay(this.remoteButton_, false);
  147.         }
  148.       };
  149.       try {
  150.         if (this.callbackId_ != -1) {
  151.           await this.video.remote.cancelWatchAvailability(this.callbackId_);
  152.           this.callbackId_ = -1;
  153.         }
  154.       } catch (e) {
  155.         // Ignore this error.
  156.       }
  157.       try {
  158.         const id = await this.video.remote.watchAvailability(
  159.             handleAvailabilityChange);
  160.         this.callbackId_ = id;
  161.       } catch (e) {
  162.         handleAvailabilityChange(/* availability= */ true);
  163.       }
  164.     } else if (this.callbackId_ != -1) {
  165.       // If remote device is connecting or connected, we should stop
  166.       // watching remote device availability to save power.
  167.       await this.video.remote.cancelWatchAvailability(this.callbackId_);
  168.       this.callbackId_ = -1;
  169.     }
  170.   }
  172.   /**
  173.    * @private
  174.    */
  175.   updateLocalizedStrings_() {
  176.     const LocIds = shaka.ui.Locales.Ids;
  177.     let text = this.localization.resolve(LocIds.CAST);
  178.     const safariVersion = shaka.util.Platform.safariVersion();
  179.     if (safariVersion && safariVersion >= 13) {
  180.       text = this.localization.resolve(LocIds.AIRPLAY);
  181.     }
  182.     this.remoteButton_.ariaLabel = text;
  183.     this.remoteNameSpan_.textContent = text;
  184.   }
  185. };
  188. /**
  189.  * @implements {shaka.extern.IUIElement.Factory}
  190.  * @final
  191.  */
  192. shaka.ui.RemoteButton.Factory = class {
  193.   /** @override */
  194.   create(rootElement, controls) {
  195.     return new shaka.ui.RemoteButton(rootElement, controls);
  196.   }
  197. };
  199. shaka.ui.OverflowMenu.registerElement(
  200.     'remote', new shaka.ui.RemoteButton.Factory());
  202. shaka.ui.Controls.registerElement(
  203.     'remote', new shaka.ui.RemoteButton.Factory());