Source: ui/volume_bar.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  8. goog.provide('shaka.ui.VolumeBar');
  10. goog.require('goog.asserts');
  11. goog.require('shaka.ads.Utils');
  12. goog.require('shaka.ui.Controls');
  13. goog.require('shaka.ui.Locales');
  14. goog.require('shaka.ui.Localization');
  15. goog.require('shaka.ui.RangeElement');
  18. /**
  19.  * @extends {shaka.ui.RangeElement}
  20.  * @final
  21.  * @export
  22.  */
  23. shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
  24.   /**
  25.    * @param {!HTMLElement} parent
  26.    * @param {!shaka.ui.Controls} controls
  27.    */
  28.   constructor(parent, controls) {
  29.     super(parent, controls,
  30.         ['shaka-volume-bar-container'], ['shaka-volume-bar']);
  32.     /** @private {!shaka.extern.UIConfiguration} */
  33.     this.config_ = this.controls.getConfig();
  35.     // We use a range of 100 to avoid problems with Firefox.
  36.     // See https://github.com/shaka-project/shaka-player/issues/3987
  37.     this.setRange(0, 100);
  39.     this.eventManager.listen(this.video,
  40.         'volumechange',
  41.         () => this.onPresentationVolumeChange_());
  43.     this.eventManager.listen(this.player,
  44.         'loading',
  45.         () => this.onPresentationVolumeChange_());
  47.     this.eventManager.listen(this.controls,
  48.         'caststatuschanged',
  49.         () => this.onPresentationVolumeChange_());
  51.     this.eventManager.listen(this.adManager,
  52.         shaka.ads.Utils.AD_VOLUME_CHANGED,
  53.         () => this.onAdVolumeChange_());
  55.     this.eventManager.listen(this.adManager,
  56.         shaka.ads.Utils.AD_MUTED,
  57.         () => this.onAdVolumeChange_());
  59.     this.eventManager.listen(this.adManager,
  60.         shaka.ads.Utils.AD_STOPPED,
  61.         () => this.onPresentationVolumeChange_());
  63.     this.eventManager.listen(this.localization,
  64.         shaka.ui.Localization.LOCALE_UPDATED,
  65.         () => this.updateAriaLabel_());
  67.     this.eventManager.listen(this.localization,
  68.         shaka.ui.Localization.LOCALE_CHANGED,
  69.         () => this.updateAriaLabel_());
  71.     // Initialize volume display and label.
  72.     this.onPresentationVolumeChange_();
  73.     this.updateAriaLabel_();
  75.     if (this.ad) {
  76.       // There was already an ad.
  77.       this.onChange();
  78.     }
  79.   }
  81.   /**
  82.    * Update the video element's state to match the input element's state.
  83.    * Called by the base class when the input element changes.
  84.    *
  85.    * @override
  86.    */
  87.   onChange() {
  88.     if (this.ad && this.ad.isLinear()) {
  89.       this.ad.setVolume(this.getValue() / 100);
  90.     } else {
  91.       this.video.volume = this.getValue() / 100;
  92.       if (this.video.volume > 0) {
  93.         this.video.muted = false;
  94.       }
  95.     }
  96.   }
  98.   /** @private */
  99.   onPresentationVolumeChange_() {
  100.     if (this.video.muted) {
  101.       this.setValue(0);
  102.     } else {
  103.       this.setValue(this.video.volume * 100);
  104.     }
  106.     this.updateColors_();
  107.   }
  109.   /** @private */
  110.   onAdVolumeChange_() {
  111.     goog.asserts.assert(this.ad != null,
  112.         'This.ad should exist at this point!');
  114.     const volume = this.ad.getVolume();
  115.     this.setValue(volume * 100);
  116.     this.updateColors_();
  117.   }
  119.   /** @private */
  120.   updateColors_() {
  121.     const colors = this.config_.volumeBarColors;
  122.     const gradient = ['to right'];
  123.     gradient.push(colors.level + this.getValue() + '%');
  124.     gradient.push(colors.base + this.getValue() + '%');
  125.     gradient.push(colors.base + '100%');
  127.     this.container.style.background =
  128.         'linear-gradient(' + gradient.join(',') + ')';
  129.   }
  131.   /** @private */
  132.   updateAriaLabel_() {
  133.     this.bar.ariaLabel = this.localization.resolve(shaka.ui.Locales.Ids.VOLUME);
  134.   }
  135. };
  137. /**
  138.  * @implements {shaka.extern.IUIElement.Factory}
  139.  * @final
  140.  */
  141. shaka.ui.VolumeBar.Factory = class {
  142.   /** @override */
  143.   create(rootElement, controls) {
  144.     return new shaka.ui.VolumeBar(rootElement, controls);
  145.   }
  146. };
  148. shaka.ui.Controls.registerElement('volume', new shaka.ui.VolumeBar.Factory());