/**
 * @file time-tooltip.js
 * /
importar componente desde '../../componente';
importar * como Dom desde '../../utils/dom.js';
importar formatTime desde '../../utils/format-time.js';
importar * como Fn desde '../../utils/fn.js';

/**
 * La información sobre herramientas de tiempo muestra un tiempo encima de la barra de progreso.
 *
 * Componente @extiende
 * /
clase TimeTooltip 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 tiempo
   *
   * @return {Elemento}
   * El elemento que se creó.
   * /
  crearEl() {
    return super.createEl('div', {
      className: 'vjs-time-tooltip'
    }, {
      'aria-oculto': 'verdadero'
    });
  }

  /**
   * Actualiza la posición de la información sobre herramientas de tiempo en relación con `SeekBar`.
   *
   * @param {Objeto} buscarBarRect
   * El `ClientRect` para el elemento {@link SeekBar}.
   *
   * @param {número} buscarBarPoint
   * Un número del 0 al 1, que representa un punto de referencia horizontal
   * desde el borde izquierdo de la {@link SeekBar}
   * /
  actualizar (buscarBarRect, buscarBarPoint, contenido) {
    const tooltipRect = Dom.findPosition(this.el_);
    const playerRect = Dom.getBoundingClientRect(this.player_.el());
    const buscarBarPointPx = buscarBarRect.ancho * buscarBarPoint;

    // no hacer nada si rect no está disponible
    // por ejemplo, si el jugador no está en el DOM para probar
    if (!playerRect || !tooltipRect) {
      devolver;
    }

    // Este es el espacio que queda del `seekBarPoint` disponible dentro de los límites
    // del jugador. Calculamos cualquier espacio entre el borde izquierdo del jugador
    // y el borde izquierdo de `SeekBar` y agrega el número de píxeles en el
    // `SeekBar` antes de presionar `seekBarPoint`
    const spaceLeftOfPoint = (buscarBarRect.izquierda - jugadorRect.izquierda) + buscarBarPuntoPx;

    // Este es el espacio a la derecha del `seekBarPoint` disponible dentro de los límites
    // del jugador. Calculamos el número de píxeles del `seekBarPoint`
    // hasta el borde derecho de `SeekBar` y añada a eso cualquier espacio entre el
    // borde derecho de `SeekBar` y el jugador.
    const spaceRightOfPoint = (buscarBarRect.ancho - buscarBarPuntoPx) +
      (playerRect.right - seekBarRect.right);

    // Esta es la cantidad de píxeles por los que se deberá extraer la información sobre herramientas
    // más a la derecha para centrarlo sobre `seekBarPoint`.
    let pullTooltipBy = tooltipRect.width / 2;

    // Ajuste la distancia `pullTooltipBy` a la izquierda o derecha dependiendo de
    // los resultados de los cálculos de espacio anteriores.
    si (espacioIzquierdoDePunto < pullTooltipBy) {
      pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
    } else if (spaceRightOfPoint < pullTooltipBy) {
      pullTooltipBy = espacioDerechoDePunto;
    }

    // Debido a la imprecisión de los cálculos basados en decimales/razones y la variación
    // comportamientos de redondeo, hay casos en los que el ajuste de espaciado está desactivado
    // por un píxel o dos. Esto añade seguridad a estos cálculos.
    si (pullTooltipBy < 0) {
      tirar TooltipBy = 0;
    } else if (pullTooltipBy > tooltipRect.width) {
      pullTooltipBy = tooltipRect.width;
    }

    // evita pequeñas fluctuaciones de ancho dentro de 0.4px de
    // cambiando el valor de abajo.
    // Esto realmente ayuda a vivir para prevenir el juego.
    // información sobre herramientas de tiempo de progreso de jittering
    pullTooltipBy = Math.round(pullTooltipBy);

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

  /**
   * Escriba la hora en el elemento DOM de información sobre herramientas.
   *
   * @param {cadena} contenido
   * El tiempo 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 tiempo en relación con `SeekBar`.
   *
   * @param {Objeto} buscarBarRect
   * El `ClientRect` para el elemento {@link SeekBar}.
   *
   * @param {número} buscarBarPoint
   * Un número del 0 al 1, que representa un punto de referencia horizontal
   * desde el borde izquierdo de la {@link SeekBar}
   *
   * @param {número} tiempo
   * El tiempo para actualizar la información sobre herramientas, no se usa durante la reproducción en vivo
   *
   * @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
   * /
  actualizarTiempo(buscarBarRect, buscarBarPunto, tiempo, cb) {
    this.requestNamedAnimationFrame('TimeTooltip#updateTime', () => {
      dejar contenido;
      const duracion = this.player_.duration();

      si (this.player_.liveTracker && this.player_.liveTracker.isLive()) {
        const liveWindow = this.player_.liveTracker.liveWindow();
        const segundos detrás = ventana en vivo - (buscarPuntoBarra * ventana en vivo);

        contenido = (segundos detrás < 1? '' : '-') + formatTime(segundos atrás, ventana en vivo);
      } else {
        contenido = formatTime(tiempo, duración);
      }

      this.update(seekBarRect, seekBarPoint, contenido);
      si (cb) {
        cb();
      }
    });
  }
}

Component.registerComponent('TiempoTooltip', TimeTooltip);
exportar TimeTooltip predeterminado;