/**
 * @archivo de carga-progreso-bar.js
 * /
importar componente desde '../../component.js';
importar * como Dom desde '../../utils/dom.js';
importar abrazadera desde '../../utils/clamp';
importar documento desde 'global/document';

// obtener el ancho porcentual de un tiempo en comparación con el final total
const percentify = (tiempo, fin) => clamp((tiempo/fin) * 100, 0, 100).toFixed(2) + '%';

/**
 * Muestra el progreso de carga
 *
 * Componente @extiende
 * /
clase LoadProgressBar extiende Componente {

  /**
   * Crea una instancia de esta clase.
   *
   * @param {Jugador} jugador
   * El `Jugador` 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.partEls_ = [];
    this.on(jugador, 'progreso', (e) => esta.actualización(e));
  }

  /**
   * Crear el elemento DOM del 'Componente'
   *
   * @return {Elemento}
   * El elemento que se creó.
   * /
  crearEl() {
    const el = super.createEl('div', {className: 'vjs-load-progress'});
    const wrapper = Dom.createEl('span', {className: 'vjs-control-text'});
    const texto cargado = Dom.createEl('span', {textContent: this.localize('Loaded')});
    const separador = documento.createTextNode(': ');

    this.percentageEl_ = Dom.createEl('span', {
      className: 'vjs-control-texto-cargado-porcentaje',
      contenido del texto: '0%'
    });

    el.appendChild(contenedor);
    contenedor.appendChild(loadedText);
    contenedor.appendChild(separador);
    contenedor.appendChild(this.percentageEl_);

    volver el;
  }

  disponer () {
    this.partEls_ = null;
    este.porcentajeEl_ = nulo;

    super.dispose();
  }

  /**
   * Actualizar barra de progreso
   *
   * @param {Objetivo de evento~Evento} [evento]
   * El evento `progress` que provocó la ejecución de esta función.
   *
   * @escucha Jugador#progreso
   * /
  actualizar (evento) {
    this.requestNamedAnimationFrame('LoadProgressBar#update', () => {
      const liveTracker = this.player_.liveTracker;
      const buffered = this.player_.buffered();
      duración constante = (liveTracker && liveTracker.isLive()) ? liveTracker.seekableEnd() : this.player_.duration();
      const bufferedEnd = this.player_.bufferedEnd();
      const niños = this.partEls_;
      const porcentaje = porcentaje (bufferedEnd, duración);

      if (this.percent_ !== percent) {
        // actualiza el ancho de la barra de progreso
        this.el_.style.width = porcentaje;
        // actualiza el texto de control
        Dom.textContent(this.percentageEl_, percent);
        this.percent_ = porcentaje;
      }

      // agregar elementos secundarios para representar los intervalos de tiempo almacenados en búfer individuales
      para (sea i = 0; i < buffered.length; i++) {
        const start = buffered.start(i);
        const end = buffered.end(i);
        let part = hijos[i];

        si (! parte) {
          parte = this.el_.appendChild(Dom.createEl());
          hijos[i] = parte;
        }

        // solo actualiza si cambia
        if (part.dataset.start === inicio && part.dataset.end === end) {
          continuar;
        }

        part.dataset.start = inicio;
        part.dataset.end = fin;

        // establecer el porcentaje basado en el ancho de la barra de progreso (bufferedEnd)
        part.style.left = percentify(start, bufferedEnd);
        part.style.width = percentify(end - start, bufferedEnd);
      }

      // eliminar elementos de rango almacenados en búfer no utilizados
      for (sea i = niños.longitud; i > buffered.length; i--) {
        this.el_.removeChild(hijos[i - 1]);
      }
      niños.longitud = buffered.longitud;
    });
  }
}

Component.registerComponent('LoadProgressBar', LoadProgressBar);
exportar LoadProgressBar por defecto;