Source: ui/volume_bar.js

  1. /**
  2.  * @license
  3.  * Copyright 2016 Google Inc.
  4.  *
  5.  * Licensed under the Apache License, Version 2.0 (the "License");
  6.  * you may not use this file except in compliance with the License.
  7.  * You may obtain a copy of the License at
  8.  *
  9.  *     http://www.apache.org/licenses/LICENSE-2.0
  10.  *
  11.  * Unless required by applicable law or agreed to in writing, software
  12.  * distributed under the License is distributed on an "AS IS" BASIS,
  13.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14.  * See the License for the specific language governing permissions and
  15.  * limitations under the License.
  16.  */
  19. goog.provide('shaka.ui.VolumeBar');
  21. goog.require('shaka.ui.Element');
  22. goog.require('shaka.ui.Locales');
  23. goog.require('shaka.ui.Localization');
  26. /**
  27.  * @extends {shaka.ui.Element}
  28.  * @final
  29.  * @export
  30.  */
  31. shaka.ui.VolumeBar = class extends shaka.ui.Element {
  32.   /**
  33.    * @param {!HTMLElement} parent
  34.    * @param {!shaka.ui.Controls} controls
  35.    */
  36.   constructor(parent, controls) {
  37.     super(parent, controls);
  39.     // This container is to support IE 11.  See detailed notes in
  40.     // less/range_elements.less for a complete explanation.
  41.     // TODO: Factor this into a range-element component.
  42.     /** @private {!HTMLElement} */
  43.     this.container_ = shaka.ui.Utils.createHTMLElement('div');
  44.     this.container_.classList.add('shaka-volume-bar-container');
  46.     this.bar_ =
  47.       /** @type {!HTMLInputElement} */ (document.createElement('input'));
  48.     this.bar_.classList.add('shaka-volume-bar');
  49.     this.bar_.setAttribute('type', 'range');
  50.     // NOTE: step=any causes keyboard nav problems on IE 11.
  51.     this.bar_.setAttribute('step', 'any');
  52.     this.bar_.setAttribute('min', '0');
  53.     this.bar_.setAttribute('max', '1');
  54.     this.bar_.setAttribute('value', '0');
  56.     this.container_.appendChild(this.bar_);
  57.     this.parent.appendChild(this.container_);
  58.     this.updateAriaLabel_();
  60.     this.eventManager.listen(this.video, 'volumechange', () => {
  61.       this.onVolumeStateChange_();
  62.     });
  64.     this.eventManager.listen(this.bar_, 'input', () => {
  65.       this.onVolumeInput_();
  66.     });
  68.     this.eventManager.listen(
  69.       this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  70.         this.updateAriaLabel_();
  71.       });
  73.     this.eventManager.listen(
  74.       this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  75.         this.updateAriaLabel_();
  76.       });
  78.     // Initialize volume display with a fake event.
  79.     this.onVolumeStateChange_();
  80.   }
  83.   /**
  84.    * @private
  85.    */
  86.   onVolumeStateChange_() {
  87.     if (this.video.muted) {
  88.         this.bar_.value = 0;
  89.     } else {
  90.         this.bar_.value = this.video.volume;
  91.     }
  93.     // TODO: Can we do this with LESS?
  94.     let gradient = ['to right'];
  95.     gradient.push(shaka.ui.Constants.VOLUME_BAR_VOLUME_LEVEL_COLOR +
  96.                  (this.bar_.value * 100) + '%');
  97.     gradient.push(shaka.ui.Constants.VOLUME_BAR_BASE_COLOR +
  98.                  (this.bar_.value * 100) + '%');
  99.     gradient.push(shaka.ui.Constants.VOLUME_BAR_BASE_COLOR + '100%');
  100.     this.container_.style.background =
  101.         'linear-gradient(' + gradient.join(',') + ')';
  102.   }
  105.   /**
  106.    * @private
  107.    */
  108.   onVolumeInput_() {
  109.     this.video.volume = parseFloat(this.bar_.value);
  110.     if (this.video.volume == 0) {
  111.       this.video.muted = true;
  112.     } else {
  113.       this.video.muted = false;
  114.     }
  115.   }
  118.   /**
  119.    * @private
  120.    */
  121.   updateAriaLabel_() {
  122.     this.bar_.setAttribute(shaka.ui.Constants.ARIA_LABEL,
  123.         this.localization.resolve(shaka.ui.Locales.Ids.ARIA_LABEL_VOLUME));
  124.   }
  125. };
  127. /**
  128.  * @implements {shaka.extern.IUIElement.Factory}
  129.  * @final
  130.  */
  131. shaka.ui.VolumeBar.Factory = class {
  132.   /** @override */
  133.   create(rootElement, controls) {
  134.     return new shaka.ui.VolumeBar(rootElement, controls);
  135.   }
  136. };
  138. shaka.ui.Controls.registerElement('volume', new shaka.ui.VolumeBar.Factory());