/**
 * @file abspielen-umschalten.js
 * /
importiere Button aus '../button.js';
importiere Komponente aus '../component.js';
importiere {silencePromise} von '../utils/promise';

/**
 * Taste zum Umschalten zwischen Wiedergabe und Pause.
 *
 * @erweitert Button
 * /
class PlayToggle extends Button {

  /**
   * Erzeugt eine Instanz dieser Klasse.
   *
   * @param {Player} Spieler
   *        Der `Player`, dem diese Klasse zugeordnet werden soll.
   *
   * @param {Object} [options={}]
   *        Der Schlüssel/Wertspeicher der Playeroptionen.
   * /
  constructor(player, options = {}) {
    super(Spieler, Optionen);

    // Wiedergabesymbol ein- oder ausblenden
    options.replay = options.replay === undefiniert || options.replay;

    this.on(player, 'play', (e) => this.handlePlay(e));
    this.on(player, 'pause', (e) => this.handlePause(e));

    if (options.replay) {
      this.on(player, 'ended', (e) => this.handleEnded(e));
    }
  }

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

  /**
   * Diese Funktion wird aufgerufen, wenn ein `PlayToggle` "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) {
    if (this.player_.paused()) {
      silencePromise(this.player_.play());
    } else {
      this.player_.pause();
    }
  }

  /**
   * Diese Funktion wird einmal aufgerufen, nachdem das Video beendet ist und der Benutzer nach einer Lösung sucht
   * können wir die Wiedergabetaste wieder in eine Abspieltaste umwandeln.
   *
   * @param {EventTarget~Event} [event]
   *        Das Ereignis, das diese Funktion ausgelöst hat.
   *
   * @hört Spieler#gesucht
   * /
  handleSeeked(event) {
    this.removeClass('vjs-ended');

    if (this.player_.paused()) {
      this.handlePause(event);
    } else {
      this.handlePlay(event);
    }
  }

  /**
   * Fügen Sie dem Element die Klasse vjs-playing hinzu, damit es sein Aussehen ändern kann.
   *
   * @param {EventTarget~Event} [event]
   *        Das Ereignis, das diese Funktion ausgelöst hat.
   *
   * @listens Spieler#spielen
   * /
  handlePlay(event) {
    this.removeClass('vjs-ended');
    this.removeClass('vjs-paused');
    this.addClass('vjs-playing');
    // Ändern Sie den Text der Schaltfläche in "Pause"
    this.controlText('Pause');
  }

  /**
   * Fügen Sie dem Element die Klasse vjs-paused hinzu, damit es sein Aussehen ändern kann.
   *
   * @param {EventTarget~Event} [event]
   *        Das Ereignis, das diese Funktion ausgelöst hat.
   *
   * @hörtSpieler#Pause
   * /
  handlePause(event) {
    this.removeClass('vjs-playing');
    this.addClass('vjs-paused');
    // Ändern Sie den Text der Schaltfläche in "Abspielen"
    this.controlText('Play');
  }

  /**
   * Fügen Sie dem Element die Klasse vjs-ended hinzu, damit es sein Aussehen ändern kann
   *
   * @param {EventTarget~Event} [event]
   *        Das Ereignis, das diese Funktion ausgelöst hat.
   *
   * @listens Player#endete
   * /
  handleEnded(event) {
    this.removeClass('vjs-playing');
    this.addClass('vjs-ended');
    // Ändern Sie den Text der Schaltfläche in "Replay"
    this.controlText('Replay');

    // bei der nächsten Suche die Schaltfläche "Wiederholen" entfernen
    this.one(this.player_, 'seeked', (e) => this.handleSeeked(e));
  }
}

/**
 * Der Text, der über den Steuerelementen "PlayToggle" angezeigt werden soll. Für die Lokalisierung hinzugefügt.
 *
 * @Typ {String}
 * @privat
 * /
PlayToggle.prototype.controlText_ = 'Play';

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