Source: ui/mute_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.MuteButton');
  7. goog.require('shaka.ads.AdManager');
  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.util.Dom');
  14. /**
  15. * @extends {shaka.ui.Element}
  16. * @final
  17. * @export
  18. */
  19. shaka.ui.MuteButton = class extends shaka.ui.Element {
  20. /**
  21. * @param {!HTMLElement} parent
  22. * @param {!shaka.ui.Controls} controls
  23. */
  24. constructor(parent, controls) {
  25. super(parent, controls);
  26. /** @private {!HTMLButtonElement} */
  27. this.button_ = shaka.util.Dom.createButton();
  28. this.button_.classList.add('shaka-mute-button');
  29. this.button_.classList.add('material-icons-round');
  30. this.parent.appendChild(this.button_);
  31. this.updateAriaLabel_();
  32. this.updateIcon_();
  33. this.eventManager.listen(
  34. this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  35. this.updateAriaLabel_();
  36. });
  37. this.eventManager.listen(
  38. this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  39. this.updateAriaLabel_();
  40. });
  41. this.eventManager.listen(this.button_, 'click', () => {
  42. if (this.ad) {
  43. this.ad.setMuted(!this.ad.isMuted());
  44. } else {
  45. this.video.muted = !this.video.muted;
  46. }
  47. });
  48. this.eventManager.listen(this.video, 'volumechange', () => {
  49. this.updateAriaLabel_();
  50. this.updateIcon_();
  51. });
  52. this.eventManager.listen(this.adManager,
  53. shaka.ads.AdManager.AD_VOLUME_CHANGED, () => {
  54. this.updateAriaLabel_();
  55. this.updateIcon_();
  56. });
  57. this.eventManager.listen(this.adManager,
  58. shaka.ads.AdManager.AD_MUTED, () => {
  59. this.updateAriaLabel_();
  60. this.updateIcon_();
  61. });
  62. this.eventManager.listen(this.adManager,
  63. shaka.ads.AdManager.AD_STOPPED, () => {
  64. // The base class also listens for this event and sets this.ad
  65. // to null. This is a safeguard in case of a race condition as
  66. // the label and icon code depends on this.ad being correctly
  67. // updated at the time it runs.
  68. this.ad = null;
  69. this.updateAriaLabel_();
  70. this.updateIcon_();
  71. });
  72. }
  73. /**
  74. * @private
  75. */
  76. updateAriaLabel_() {
  77. const LocIds = shaka.ui.Locales.Ids;
  78. let label;
  79. if (this.ad) {
  80. label = this.ad.isMuted() ? LocIds.UNMUTE : LocIds.MUTE;
  81. } else {
  82. label = this.video.muted ? LocIds.UNMUTE : LocIds.MUTE;
  83. }
  84. this.button_.ariaLabel = this.localization.resolve(label);
  85. }
  86. /**
  87. * @private
  88. */
  89. updateIcon_() {
  90. const Icons = shaka.ui.Enums.MaterialDesignIcons;
  91. let icon;
  92. if (this.ad) {
  93. icon = this.ad.isMuted() ? Icons.UNMUTE : Icons.MUTE;
  94. } else {
  95. icon = this.video.muted ? Icons.UNMUTE : Icons.MUTE;
  96. }
  97. this.button_.textContent = icon;
  98. }
  99. };
  100. /**
  101. * @implements {shaka.extern.IUIElement.Factory}
  102. * @final
  103. */
  104. shaka.ui.MuteButton.Factory = class {
  105. /** @override */
  106. create(rootElement, controls) {
  107. return new shaka.ui.MuteButton(rootElement, controls);
  108. }
  109. };
  110. shaka.ui.Controls.registerElement('mute', new shaka.ui.MuteButton.Factory());