/**
 * @Datei time-tooltip.js
 * /
importiere Komponente von '../../komponente';
import * as Dom from '../../utils/dom.js';
import formatTime from '../../utils/format-time.js';
import * as Fn from '../../utils/fn.js';

/**
 * Zeit-Tooltips zeigen eine Zeit über dem Fortschrittsbalken an.
 *
 * @erweitert Komponente
 * /
class TimeTooltip extends Component {

  /**
   * Erzeugt eine Instanz dieser Klasse.
   *
   * @param {Player} Spieler
   *        Der {@link Player}, dem diese Klasse zugeordnet werden soll.
   *
   * @param {Object} [Optionen]
   *        Der Schlüssel/Wertspeicher der Playeroptionen.
   * /
  constructor(spieler, optionen) {
    super(Spieler, Optionen);
    this.update = Fn.throttle(Fn.bind(this, this.update), Fn.UPDATE_REFRESH_INTERVAL);
  }

  /**
   * Erstellen Sie das DOM-Element "Zeit-Tooltip"
   *
   * @return {Element}
   *         Das Element, das erstellt wurde.
   * /
  createEl() {
    return super.createEl('div', {
      className: 'vjs-time-tooltip'
    }, {
      aria-hidden": "true
    });
  }

  /**
   * Aktualisiert die Position des Zeit-Tooltips relativ zur `SeekBar`.
   *
   * @param {Object} seekBarRect
   *        Der `ClientRect` für das Element {@link SeekBar}.
   *
   * @param {Nummer} seekBarPoint
   *        Eine Zahl von 0 bis 1, die einen horizontalen Bezugspunkt darstellt
   *        vom linken Rand der {@link SeekBar}
   * /
  update(seekBarRect, seekBarPoint, content) {
    const tooltipRect = Dom.findPosition(this.el_);
    const playerRect = Dom.getBoundingClientRect(this.player_.el());
    const seekBarPointPx = seekBarRect.width * seekBarPoint;

    // nichts tun, wenn eines der beiden Rects nicht verfügbar ist
    // zum Beispiel, wenn der Player zum Testen nicht im DOM ist
    if (!playerRect || !tooltipRect) {
      rückkehr;
    }

    // Dies ist der innerhalb der Grenzen verfügbare Platz links vom `seekBarPoint`
    // des Spielers. Wir berechnen jede Lücke zwischen dem linken Rand des Players
    // und die linke Kante der `SeekBar` und addieren die Anzahl der Pixel im
    // `SeekBar`, bevor man den `seekBarPoint` trifft
    const spaceLeftOfPoint = (seekBarRect.left - playerRect.left) + seekBarPointPx;

    // Dies ist der innerhalb der Grenzen verfügbare Platz rechts vom `seekBarPoint`
    // des Spielers. Wir berechnen die Anzahl der Pixel vom `seekBarPoint`
    // zum rechten Rand des "Suchbalkens" und addiere dazu die Lücke zwischen den
    // rechte Kante der `SeekBar` und des Players.
    const spaceRightOfPoint = (seekBarRect.width - seekBarPointPx) +
      (playerRect.right - seekBarRect.right);

    // Dies ist die Anzahl der Pixel, um die der Tooltip gezogen werden muss
    // weiter nach rechts, um ihn über dem `seekBarPoint` zu zentrieren.
    let pullTooltipBy = tooltipRect.width / 2;

    // Passen Sie den `pullTooltipBy`-Abstand nach links oder rechts an, je nach
    // die Ergebnisse der obigen Raumberechnungen.
    if (spaceLeftOfPoint < pullTooltipBy) {
      pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
    } else if (spaceRightOfPoint < pullTooltipBy) {
      pullTooltipBy = spaceRightOfPoint;
    }

    // Aufgrund der Ungenauigkeit von dezimal/ratio-basierten Berechnungen und unterschiedlicher
    // Rundungsverhalten, es gibt Fälle, in denen die Anpassung der Abstände nicht stimmt
    // um ein oder zwei Pixel. Dadurch werden diese Berechnungen durch eine zusätzliche Versicherung ergänzt.
    wenn (pullTooltipBy < 0) {
      pullTooltipBy = 0;
    } else if (pullTooltipBy > tooltipRect.width) {
      pullTooltipBy = tooltipRect.width;
    }

    // verhindern kleine Breitenschwankungen innerhalb von 0,4px von
    // Ändern Sie den Wert unten.
    // Das hilft wirklich live, um das Spiel zu verhindern
    // Fortschrittszeit-Tooltip von Jittering
    pullTooltipBy = Math.round(pullTooltipBy);

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

  /**
   * Schreiben Sie die Uhrzeit in das DOM-Element "Tooltip".
   *
   * @param {string} Inhalt
   *        Die formatierte Zeit für den Tooltip.
   * /
  write(content) {
    Dom.textInhalt(this.el_, Inhalt);
  }

  /**
   * Aktualisiert die Position des Zeit-Tooltips relativ zur `SeekBar`.
   *
   * @param {Object} seekBarRect
   *        Der `ClientRect` für das Element {@link SeekBar}.
   *
   * @param {Nummer} seekBarPoint
   *        Eine Zahl von 0 bis 1, die einen horizontalen Bezugspunkt darstellt
   *        vom linken Rand der {@link SeekBar}
   *
   * @param {Nummer} time
   *        Die Zeit, auf die der Tooltip aktualisiert werden soll, wird bei der Live-Wiedergabe nicht verwendet
   *
   * @param {Funktion} cb
   *        Eine Funktion, die während der Anforderung eines Animationsrahmens aufgerufen wird
   *        für Tooltips, die zusätzliche Animationen zum Standard benötigen
   * /
  updateTime(seekBarRect, seekBarPoint, time, cb) {
    this.requestNamedAnimationFrame('TimeTooltip#updateTime', () => {
      inhalt lassen;
      const duration = this.player_.duration();

      if (this.player_.liveTracker && this.player_.liveTracker.isLive()) {
        const liveWindow = this.player_.liveTracker.liveWindow();
        const secondsBehind = liveWindow - (seekBarPoint * liveWindow);

        content = (secondsBehind < 1 ? '' : '-') + formatTime(secondsBehind, liveWindow);
      } else {
        content = formatTime(time, duration);
      }

      this.update(seekBarRect, seekBarPoint, content);
      wenn (cb) {
        cb();
      }
    });
  }
}

Component.registerComponent('TimeTooltip', TimeTooltip);
standard TimeTooltip exportieren;