/**
 * @Datei wiedergabe-rate-menu-button.js
 * /
importiere MenuButton aus '../../menu/menu-button.js';
import PlaybackRateMenuItem from './playback-rate-menu-item.js';
importiere Komponente aus '../../component.js';
import * as Dom from '../../utils/dom.js';

/**
 * Die Komponente zur Steuerung der Wiedergaberate.
 *
 * @extends MenuButton
 * /
class PlaybackRateMenuButton extends MenuButton {

  /**
   * 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.menuButton_.el_.setAttribute('aria-describedby', this.labelElId_);

    this.updateVisibility();
    this.updateLabel();

    this.on(player, 'loadstart', (e) => this.updateVisibility(e));
    this.on(player, 'ratechange', (e) => this.updateLabel(e));
    this.on(player, 'playbackrateschange', (e) => this.handlePlaybackRateschange(e));
  }

  /**
   * Das DOM-Element der Komponente erstellen
   *
   * @return {Element}
   *         Das Element, das erstellt wurde.
   * /
  createEl() {
    const el = super.createEl();

    this.labelElId_ = 'vjs-playback-rate-value-label-' + this.id_;

    this.labelEl_ = Dom.createEl('div', {
      className: 'vjs-playback-rate-value',
      id: this.labelElId_,
      textInhalt: '1x'
    });

    el.appendChild(this.labelEl_);

    zurück el;
  }

  dispose() {
    this.labelEl_ = null;

    super.dispose();
  }

  /**
   * Erzeugt den Standard-DOM "Klassenname".
   *
   * @return {string}
   *         Der DOM `className` für dieses Objekt.
   * /
  buildCSSClass() {
    return `vjs-playback-rate ${super.buildCSSClass()}`;
  }

  buildWrapperCSSClass() {
    return `vjs-playback-rate ${super.buildWrapperCSSClass()}`;
  }

  /**
   * Erstellen Sie die Liste der Menüpunkte. Spezifisch für jede Unterklasse.
   *
   * /
  createItems() {
    const rates = this.playbackRates();
    const items = [];

    for (let i = rates.length - 1; i >= 0; i--) {
      items.push(new PlaybackRateMenuItem(this.player(), {rate: rates[i] + 'x'}));
    }

    rücksendungen;
  }

  /**
   * Aktualisiert ARIA-Zugänglichkeitsattribute
   * /
  updateARIAAttributes() {
    // Aktuelle Wiedergaberate
    this.el().setAttribute('aria-valuenow', this.player().playbackRate());
  }

  /**
   * Diese Funktion wird aufgerufen, wenn ein `PlaybackRateMenuButton` "angeklickt" wird. Sehen
   * {@link ClickableComponent} für genauere Informationen darüber, was ein Klick sein kann.
   *
   * @param {EventTarget~Event} [event]
   *        Das `Keydown`-, `Tap`- oder `Click`-Ereignis, das diese Funktion ausgelöst hat
   *        genannt.
   *
   * @listens tap
   * @listens klicken
   * /
  handleClick(event) {
    // Auswahl der nächsten Tarifoption
    const currentRate = this.player().playbackRate();
    const rates = this.playbackRates();
    const currentIndex = rates.indexOf(currentRate);
    // damit wird der nächste Tarif ermittelt und der erste gewählt, wenn der letzte gerade ausgewählt ist
    const newIndex = (currentIndex + 1) % rates.length;

    this.player().playbackRate(rates[newIndex]);
  }

  /**
   * Aktualisieren Sie auf playbackrateschange das Menü, um die neuen Elemente zu berücksichtigen.
   *
   * @listens Player#playbackrateschange
   * /
  handlePlaybackRateschange(event) {
    this.update();
  }

  /**
   * Mögliche Wiedergaberaten abfragen
   *
   * @return {Array}
   *         Alle möglichen Wiedergaberaten
   * /
  playbackRates() {
    const player = this.player();

    return (player.playbackRates && player.playbackRates()) || [];
  }

  /**
   * Abfragen, ob die Wiedergaberate von der Technik unterstützt wird
   * und eine Reihe von Wiedergaberaten existiert
   *
   * @return {boolean}
   *         Ob eine Änderung der Wiedergaberate unterstützt wird
   * /
  playbackRateSupported() {
    return this.player().tech_ &&
      this.player().tech_.featuresPlaybackRate &&
      this.playbackRates() &&
      this.playbackRates().length > 0
    ;
  }

  /**
   * Ausblenden der Steuerelemente für die Wiedergaberate, wenn keine Optionen für die Wiedergaberate zur Auswahl stehen
   *
   * @param {EventTarget~Event} [event]
   *        Das Ereignis, das diese Funktion ausgelöst hat.
   *
   * @listens Player#loadstart
   * /
  updateVisibility(event) {
    if (this.playbackRateSupported()) {
      this.removeClass('vjs-hidden');
    } else {
      this.addClass('vjs-hidden');
    }
  }

  /**
   * Schaltflächenbeschriftung bei Tarifänderung aktualisieren
   *
   * @param {EventTarget~Event} [event]
   *        Das Ereignis, das diese Funktion ausgelöst hat.
   *
   * @listens Spieler#Ratenänderung
   * /
  updateLabel(event) {
    if (this.playbackRateSupported()) {
      this.labelEl_.textContent = this.player().playbackRate() + 'x';
    }
  }

}

/**
 * Der Text, der über den `FullscreenToggle`-Steuerelementen angezeigt werden soll. Für die Lokalisierung hinzugefügt.
 *
 * @Typ {String}
 * @privat
 * /
PlaybackRateMenuButton.prototype.controlText_ = 'Wiedergaberate';

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