Source: ui/cast_button.js

  1. /*! @license
  2. * Shaka Player
  3. * Copyright 2016 Google LLC
  4. * SPDX-License-Identifier: Apache-2.0
  5. */
  6. goog.provide('shaka.ui.CastButton');
  7. goog.require('shaka.cast.CastProxy');
  8. goog.require('shaka.ui.Controls');
  9. goog.require('shaka.ui.Element');
  10. goog.require('shaka.ui.Enums');
  11. goog.require('shaka.ui.Locales');
  12. goog.require('shaka.ui.Localization');
  13. goog.require('shaka.ui.OverflowMenu');
  14. goog.require('shaka.ui.Utils');
  15. goog.require('shaka.util.Dom');
  16. goog.require('shaka.util.Error');
  17. goog.require('shaka.util.FakeEvent');
  18. goog.requireType('shaka.cast.CastProxy');
  19. goog.requireType('shaka.ui.Controls');
  20. /**
  21. * @extends {shaka.ui.Element}
  22. * @final
  23. * @export
  24. */
  25. shaka.ui.CastButton = class extends shaka.ui.Element {
  26. /**
  27. * @param {!HTMLElement} parent
  28. * @param {!shaka.ui.Controls} controls
  29. */
  30. constructor(parent, controls) {
  31. super(parent, controls);
  32. /** @private {shaka.cast.CastProxy} */
  33. this.castProxy_ = this.controls.getCastProxy();
  34. /** @private {!HTMLButtonElement} */
  35. this.castButton_ = shaka.util.Dom.createButton();
  36. this.castButton_.classList.add('shaka-cast-button');
  37. this.castButton_.classList.add('shaka-tooltip');
  38. this.castButton_.ariaPressed = 'false';
  39. /** @private {!HTMLElement} */
  40. this.castIcon_ = shaka.util.Dom.createHTMLElement('i');
  41. this.castIcon_.classList.add('material-icons-round');
  42. this.castIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.CAST;
  43. this.castButton_.appendChild(this.castIcon_);
  44. const label = shaka.util.Dom.createHTMLElement('label');
  45. label.classList.add('shaka-overflow-button-label');
  46. label.classList.add('shaka-overflow-menu-only');
  47. this.castNameSpan_ = shaka.util.Dom.createHTMLElement('span');
  48. label.appendChild(this.castNameSpan_);
  49. this.castCurrentSelectionSpan_ =
  50. shaka.util.Dom.createHTMLElement('span');
  51. this.castCurrentSelectionSpan_.classList.add(
  52. 'shaka-current-selection-span');
  53. label.appendChild(this.castCurrentSelectionSpan_);
  54. this.castButton_.appendChild(label);
  55. this.parent.appendChild(this.castButton_);
  56. // Setup strings in the correct language
  57. this.updateLocalizedStrings_();
  58. // Setup button display and state according to the current cast status
  59. this.onCastStatusChange_();
  60. this.eventManager.listen(
  61. this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  62. this.updateLocalizedStrings_();
  63. });
  64. this.eventManager.listen(
  65. this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  66. this.updateLocalizedStrings_();
  67. });
  68. this.eventManager.listen(this.castButton_, 'click', () => {
  69. this.onCastClick_();
  70. });
  71. this.eventManager.listen(this.controls, 'caststatuschanged', () => {
  72. this.onCastStatusChange_();
  73. });
  74. }
  75. /** @private */
  76. async onCastClick_() {
  77. if (this.castProxy_.isCasting()) {
  78. this.castProxy_.suggestDisconnect();
  79. } else {
  80. try {
  81. this.castButton_.disabled = true;
  82. await this.castProxy_.cast();
  83. this.castButton_.disabled = false;
  84. } catch (error) {
  85. this.castButton_.disabled = false;
  86. if (error.code != shaka.util.Error.Code.CAST_CANCELED_BY_USER) {
  87. this.controls.dispatchEvent(new shaka.util.FakeEvent(
  88. 'error', (new Map()).set('detail', error)));
  89. }
  90. }
  91. }
  92. }
  93. /**
  94. * @private
  95. */
  96. onCastStatusChange_() {
  97. const canCast = this.castProxy_.canCast() && this.controls.isCastAllowed();
  98. const isCasting = this.castProxy_.isCasting();
  99. const materialDesignIcons = shaka.ui.Enums.MaterialDesignIcons;
  100. shaka.ui.Utils.setDisplay(this.castButton_, canCast);
  101. this.castIcon_.textContent = isCasting ?
  102. materialDesignIcons.EXIT_CAST :
  103. materialDesignIcons.CAST;
  104. // Aria-pressed set to true when casting, set to false otherwise.
  105. if (canCast) {
  106. if (isCasting) {
  107. this.castButton_.ariaPressed = 'true';
  108. } else {
  109. this.castButton_.ariaPressed = 'false';
  110. }
  111. }
  112. this.setCurrentCastSelection_();
  113. }
  114. /**
  115. * @private
  116. */
  117. setCurrentCastSelection_() {
  118. if (this.castProxy_.isCasting()) {
  119. this.castCurrentSelectionSpan_.textContent =
  120. this.castProxy_.receiverName();
  121. } else {
  122. this.castCurrentSelectionSpan_.textContent =
  123. this.localization.resolve(shaka.ui.Locales.Ids.OFF);
  124. }
  125. }
  126. /**
  127. * @private
  128. */
  129. updateLocalizedStrings_() {
  130. const LocIds = shaka.ui.Locales.Ids;
  131. this.castButton_.ariaLabel = this.localization.resolve(LocIds.CAST);
  132. this.castNameSpan_.textContent =
  133. this.localization.resolve(LocIds.CAST);
  134. // If we're not casting, string "not casting" will be displayed,
  135. // which needs localization.
  136. this.setCurrentCastSelection_();
  137. }
  138. };
  139. /**
  140. * @implements {shaka.extern.IUIElement.Factory}
  141. * @final
  142. */
  143. shaka.ui.CastButton.Factory = class {
  144. /** @override */
  145. create(rootElement, controls) {
  146. return new shaka.ui.CastButton(rootElement, controls);
  147. }
  148. };
  149. shaka.ui.OverflowMenu.registerElement(
  150. 'cast', new shaka.ui.CastButton.Factory());
  151. shaka.ui.Controls.registerElement(
  152. 'cast', new shaka.ui.CastButton.Factory());