/**
 * @file volumen-nivel-tooltip.js
 * /
importar componente desde '../../componente';
importar * como Dom desde '../../utils/dom.js';
importar * como Fn desde '../../utils/fn.js';

/**
 * La información sobre herramientas de nivel de volumen muestra un volumen encima o al lado de la barra de volumen.
 *
 * Componente @extiende
 * /
class VolumeLevelTooltip 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 de información sobre herramientas de volumen
   *
   * @return {Elemento}
   * El elemento que se creó.
   * /
  crearEl() {
    return super.createEl('div', {
      className: 'vjs-volumen-información sobre herramientas'
    }, {
      'aria-oculto': 'verdadero'
    });
  }

  /**
   * Actualiza la posición de la información sobre herramientas en relación con `VolumeBar` y
   * su contenido de texto.
   *
   * @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, contenido) {
    si (! vertical) {
      const tooltipRect = Dom.getBoundingClientRect(this.el_);
      const playerRect = Dom.getBoundingClientRect(this.player_.el());
      const volumenBarPointPx = rangeBarRect.width * rangeBarPoint;

      if (!playerRect || !tooltipRect) {
        devolver;
      }

      const spaceLeftOfPoint = (rangeBarRect.left - playerRect.left) + volumeBarPointPx;
      const spaceRightOfPoint = (rangeBarRect.width - volumeBarPointPx) +
        (playerRect.right - rangeBarRect.right);
      let pullTooltipBy = tooltipRect.width / 2;

      si (espacioIzquierdoDePunto < pullTooltipBy) {
        pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
      } else if (spaceRightOfPoint < pullTooltipBy) {
        pullTooltipBy = espacioDerechoDePunto;
      }

      si (pullTooltipBy < 0) {
        tirar TooltipBy = 0;
      } else if (pullTooltipBy > tooltipRect.width) {
        pullTooltipBy = tooltipRect.width;
      }

      this.el_.style.right = `-${pullTooltipBy}px`;
    }
    this.write(`${contenido}%`);
  }

  /**
   * Escriba el volumen en el elemento DOM de información sobre herramientas.
   *
   * @param {cadena} contenido
   * El volumen formateado para la información sobre herramientas.
   * /
  escribir (contenido) {
    Dom.textContent(este.el_, contenido);
  }

  /**
   * Actualiza la posición de la información sobre herramientas de volumen en relación con la `VolumenBar`.
   *
   * @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}
   *
   * @param {número} volumen
   * El nivel de volumen para actualizar la información sobre herramientas a
   *
   * @param {Función} cb
   * Una función que se llamará durante el cuadro de animación de solicitud
   * para información sobre herramientas que necesitan hacer animaciones adicionales desde el valor predeterminado
   * /
  updateVolume(rangeBarRect, rangeBarPoint, vertical, volumen, cb) {
    this.requestNamedAnimationFrame('VolumeLevelTooltip#updateVolume', () => {
      this.update(rangeBarRect, rangeBarPoint, vertical, volume.toFixed(0));
      si (cb) {
        cb();
      }
    });
  }
}

Component.registerComponent('Información sobre herramientas de nivel de volumen', Información sobre herramientas de nivel de volumen);
exportar información sobre herramientas de nivel de volumen predeterminado;