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');
  16. goog.require('shaka.ui.Utils');
  19. /**
  20.  * @extends {shaka.ui.RangeElement}
  21.  * @final
  22.  * @export
  23.  */
  24. shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
  25.   /**
  26.    * @param {!HTMLElement} parent
  27.    * @param {!shaka.ui.Controls} controls
  28.    */
  29.   constructor(parent, controls) {
  30.     super(parent, controls,
  31.         ['shaka-volume-bar-container'], ['shaka-volume-bar']);
  33.     /** @private {!shaka.extern.UIConfiguration} */
  34.     this.config_ = this.controls.getConfig();
  36.     // We use a range of 100 to avoid problems with Firefox.
  37.     // See https://github.com/shaka-project/shaka-player/issues/3987
  38.     this.setRange(0, 100);
  40.     this.eventManager.listen(this.video,
  41.         'volumechange',
  42.         () => this.onPresentationVolumeChange_());
  44.     this.eventManager.listen(this.player,
  45.         'loading',
  46.         () => this.onPresentationVolumeChange_());
  48.     this.eventManager.listen(this.player,
  49.         'loaded',
  50.         () => this.checkAvailability_());
  52.     this.eventManager.listen(this.player,
  53.         'unloading',
  54.         () => this.checkAvailability_());
  56.     this.eventManager.listen(this.player,
  57.         'trackschanged',
  58.         () => this.checkAvailability_());
  60.     this.eventManager.listen(this.controls,
  61.         'caststatuschanged',
  62.         () => this.onPresentationVolumeChange_());
  64.     this.eventManager.listen(this.adManager,
  65.         shaka.ads.Utils.AD_VOLUME_CHANGED,
  66.         () => this.onAdVolumeChange_());
  68.     this.eventManager.listen(this.adManager,
  69.         shaka.ads.Utils.AD_MUTED,
  70.         () => this.onAdVolumeChange_());
  72.     this.eventManager.listen(this.adManager,
  73.         shaka.ads.Utils.AD_STARTED,
  74.         () => this.checkAvailability_());
  76.     this.eventManager.listen(this.adManager,
  77.         shaka.ads.Utils.AD_STOPPED, () => {
  78.           this.checkAvailability_();
  79.           this.onPresentationVolumeChange_();
  80.         });
  82.     this.eventManager.listen(this.localization,
  83.         shaka.ui.Localization.LOCALE_UPDATED,
  84.         () => this.updateAriaLabel_());
  86.     this.eventManager.listen(this.localization,
  87.         shaka.ui.Localization.LOCALE_CHANGED,
  88.         () => this.updateAriaLabel_());
  91.     // Initialize volume display and label.
  92.     this.onPresentationVolumeChange_();
  93.     this.updateAriaLabel_();
  95.     if (this.ad) {
  96.       // There was already an ad.
  97.       this.onChange();
  98.     }
  100.     this.checkAvailability_();
  101.   }
  103.   /**
  104.    * Update the video element's state to match the input element's state.
  105.    * Called by the base class when the input element changes.
  106.    *
  107.    * @override
  108.    */
  109.   onChange() {
  110.     if (this.ad && this.ad.isLinear()) {
  111.       this.ad.setVolume(this.getValue() / 100);
  112.     } else {
  113.       this.video.volume = this.getValue() / 100;
  114.       if (this.video.volume > 0) {
  115.         this.video.muted = false;
  116.       }
  117.     }
  118.   }
  120.   /** @private */
  121.   onPresentationVolumeChange_() {
  122.     if (this.video.muted) {
  123.       this.setValue(0);
  124.     } else {
  125.       this.setValue(this.video.volume * 100);
  126.     }
  128.     this.updateColors_();
  129.   }
  131.   /** @private */
  132.   onAdVolumeChange_() {
  133.     goog.asserts.assert(this.ad != null,
  134.         'This.ad should exist at this point!');
  136.     const volume = this.ad.getVolume();
  137.     this.setValue(volume * 100);
  138.     this.updateColors_();
  139.   }
  141.   /** @private */
  142.   updateColors_() {
  143.     const colors = this.config_.volumeBarColors;
  144.     const gradient = ['to right'];
  145.     gradient.push(colors.level + this.getValue() + '%');
  146.     gradient.push(colors.base + this.getValue() + '%');
  147.     gradient.push(colors.base + '100%');
  149.     this.container.style.background =
  150.         'linear-gradient(' + gradient.join(',') + ')';
  151.   }
  153.   /** @private */
  154.   updateAriaLabel_() {
  155.     this.bar.ariaLabel = this.localization.resolve(shaka.ui.Locales.Ids.VOLUME);
  156.   }
  158.   /** @private */
  159.   checkAvailability_() {
  160.     let available = true;
  161.     if (this.ad && this.ad.isLinear()) {
  162.       // We can't tell if the Ad has audio or not.
  163.       available = true;
  164.     } else if (this.player.isVideoOnly()) {
  165.       available = false;
  166.     }
  167.     shaka.ui.Utils.setDisplay(this.container, available);
  168.   }
  169. };
  171. /**
  172.  * @implements {shaka.extern.IUIElement.Factory}
  173.  * @final
  174.  */
  175. shaka.ui.VolumeBar.Factory = class {
  176.   /** @override */
  177.   create(rootElement, controls) {
  178.     return new shaka.ui.VolumeBar(rootElement, controls);
  179.   }
  180. };
  182. shaka.ui.Controls.registerElement('volume', new shaka.ui.VolumeBar.Factory());