/**
 * @file mouse-volume-level-display.js
 * /
importar componente desde '../../component.js';
importar * como Fn desde '../../utils/fn.js';

importar './información sobre herramientas de nivel de volumen';

/**
 * El componente {@link MouseVolumeLevelDisplay} rastrea el movimiento del mouse sobre el
 * {@control de volumen del enlace}. Muestra un indicador y un {@link VolumeLevelTooltip}
 * indicando el nivel de volumen que está representado por un punto dado en el
 * {@link VolumeBar}.
 *
 * Componente @extiende
 * /
class MouseVolumeLevelDisplay extiende Componente {

  /**
   * Crea una instancia de esta clase.
   *
   * @param {Jugador} jugador
   * El {@link Player} al que se debe adjuntar esta clase.
   *
   * @param {Objeto} [opciones]
   * El almacén de clave/valor de las opciones del jugador.
   * /
  constructor(jugador, opciones) {
    super(jugador, opciones);
    this.update = Fn.throttle(Fn.bind(this, this.update), Fn.UPDATE_REFRESH_INTERVAL);
  }

  /**
   * Crear el elemento DOM para esta clase.
   *
   * @return {Elemento}
   * El elemento que se creó.
   * /
  crearEl() {
    return super.createEl('div', {
      className: 'vjs-mouse-display'
    });
  }

  /**
   * Consulta las actualizaciones de su propio DOM, así como el DOM de su
   * {@link VolumeLevelTooltip} hijo.
   *
   * @param {Objeto} rangeBarRect
   * El `ClientRect` para el elemento {@link VolumeBar}.
   *
   * @param {número} rangeBarPoint
   * Un número del 0 al 1, que representa un punto de referencia horizontal/vertical
   * desde el borde izquierdo de {@link VolumeBar}
   *
   * @param {booleano} verticales
   * Árbitros a la posición de control de volumen
   * en la barra de control{@link VolumeControl}
   *
   * /
  actualizar(rangeBarRect, rangeBarPoint, vertical) {
    volumen constante = 100 * rangeBarPoint;

    this.getChild('volumeLevelTooltip').updateVolume(rangeBarRect, rangeBarPoint, vertical, volumen, () => {
      si (vertical) {
        this.el_.style.bottom = `${rangeBarRect.height * rangeBarPoint}px`;
      } else {
        this.el_.style.left = `${rangeBarRect.width * rangeBarPoint}px`;
      }
    });
  }
}

/**
 * Opciones predeterminadas para `MouseVolumeLevelDisplay`
 *
 * @type {Objeto}
 * @privado
 * /
MouseVolumeLevelDisplay.prototype.options_ = {
  niños: [
    'sugerencia sobre herramientas de nivel de volumen'
  ]
};

Component.registerComponent('MouseVolumeLevelDisplay', MouseVolumeLevelDisplay);
exportar MouseVolumeLevelDisplay predeterminado;