/**
 * @Datei load-progress-bar.js
 * /
importiere Komponente aus '../../component.js';
import * as Dom from '../../utils/dom.js';
import clamp from '../../utils/clamp';
dokument aus 'global/document' importieren;

// Ermittelt die prozentuale Breite einer Zeit im Vergleich zum Gesamtende
const percentify = (time, end) => clamp((time / end) * 100, 0, 100).toFixed(2) + '%';

/**
 * Zeigt den Ladefortschritt an
 *
 * @erweitert Komponente
 * /
class LoadProgressBar extends Component {

  /**
   * Erzeugt eine Instanz dieser Klasse.
   *
   * @param {Player} Spieler
   *        Der `Player`, dem diese Klasse zugeordnet werden soll.
   *
   * @param {Object} [Optionen]
   *        Der Schlüssel/Wertspeicher der Playeroptionen.
   * /
  constructor(spieler, optionen) {
    super(Spieler, Optionen);
    this.partEls_ = [];
    this.on(player, 'progress', (e) => this.update(e));
  }

  /**
   * Das DOM-Element der Komponente erstellen
   *
   * @return {Element}
   *         Das Element, das erstellt wurde.
   * /
  createEl() {
    const el = super.createEl('div', {className: 'vjs-load-progress'});
    const wrapper = Dom.createEl('span', {className: 'vjs-control-text'});
    const loadedText = Dom.createEl('span', {textContent: this.localize('Loaded')});
    const separator = document.createTextNode(': ');

    this.percentageEl_ = Dom.createEl('span', {
      className: 'vjs-control-text-loaded-percentage',
      textInhalt: '0%'
    });

    el.appendChild(wrapper);
    wrapper.appendChild(loadedText);
    wrapper.appendChild(separator);
    wrapper.appendChild(this.percentageEl_);

    zurück el;
  }

  dispose() {
    this.partEls_ = null;
    this.percentageEl_ = null;

    super.dispose();
  }

  /**
   * Fortschrittsbalken aktualisieren
   *
   * @param {EventTarget~Event} [event]
   *        Das "Progress"-Ereignis, das die Ausführung dieser Funktion ausgelöst hat.
   *
   * @listens Spieler#Fortschritt
   * /
  update(event) {
    this.requestNamedAnimationFrame('LoadProgressBar#update', () => {
      const liveTracker = this.player_.liveTracker;
      const buffered = this.player_.buffered();
      const duration = (liveTracker && liveTracker.isLive()) ? liveTracker.seekableEnd() : this.player_.duration();
      const bufferedEnd = this.player_.bufferedEnd();
      const children = this.partEls_;
      const percent = percentify(bufferedEnd, duration);

      if (this.percent_ !== percent) {
        // Aktualisieren Sie die Breite des Fortschrittsbalkens
        this.el_.style.width = percent;
        // Aktualisierung des Kontrolltextes
        Dom.textContent(this.percentageEl_, percent);
        this.percent_ = percent;
      }

      // Hinzufügen von untergeordneten Elementen zur Darstellung der einzelnen gepufferten Zeitbereiche
      for (let i = 0; i < buffered.length; i++) {
        const start = buffered.start(i);
        const end = buffered.end(i);
        let part = Kinder[i];

        if (!part) {
          part = this.el_.appendChild(Dom.createEl());
          kinder[i] = Teil;
        }

        // nur aktualisieren, wenn geändert
        if (part.dataset.start === start && part.dataset.end === end) {
          weiter;
        }

        part.dataset.start = start;
        part.dataset.end = end;

        // Festlegen des Prozentsatzes auf der Grundlage der Breite des Fortschrittsbalkens (bufferedEnd)
        part.style.left = percentify(start, bufferedEnd);
        part.style.width = percentify(end - start, bufferedEnd);
      }

      // Ungenutzte gepufferte Bereichselemente entfernen
      for (let i = children.length; i > buffered.length; i--) {
        this.el_.removeChild(children[i - 1]);
      }
      children.length = buffered.length;
    });
  }
}

Component.registerComponent('LoadProgressBar', LoadProgressBar);
exportieren Standard LoadProgressBar;