/**
 * @file bild-im-bild-umschalten.js
 * /
importiere Button aus '../button.js';
importiere Komponente aus '../component.js';
dokument aus 'global/document' importieren;

/**
 * Umschalten des Bild-in-Bild-Modus
 *
 * @erweitert Button
 * /
class PictureInPictureToggle extends Button {

  /**
   * 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.
   *
   * @listens Player#enterpictureinpicture
   * @listens Player#BildimBild lassen
   * /
  constructor(spieler, optionen) {
    super(Spieler, Optionen);
    this.on(player, ['enterpictureinpicture', 'leavepictureinpicture'], (e) => this.handlePictureInPictureChange(e));
    this.on(player, ['disablepictureinpicturechanged', 'loadedmetadata'], (e) => this.handlePictureInPictureEnabledChange(e));

    this.on(player, ['loadedmetadata', 'audioonlymodechange', 'audiopostermodechange'], () => {
      // Diese Audioerkennung erkennt keine reinen HLS- oder DASH-Audiostreams, da es zu diesem Zeitpunkt keine zuverlässige Möglichkeit gab, diese zu erkennen
      const isSourceAudio = player.currentType().substring(0, 5) === 'audio';

      if (isSourceAudio || player.audioPosterMode() || player.audioOnlyMode()) {
        if (player.isInPictureInPicture()) {
          player.exitPictureInPicture();
        }
        this.hide();
      } else {
        this.show();
      }

    });

    // TODO: Deaktivieren Sie die Schaltfläche beim Ereignis "Player leer".
    this.disable();
  }

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

  /**
   * Aktiviert oder deaktiviert die Schaltfläche basierend auf dem Wert der Eigenschaft document.pictureInPictureEnabled
   * oder auf den von der Methode player.disablePictureInPicture() zurückgegebenen Wert.
   * /
  handlePictureInPictureEnabledChange() {
    if (document.pictureInPictureEnabled && this.player_.disablePictureInPicture() === false) {
      this.enable();
    } else {
      this.disable();
    }
  }

  /**
   * Behandelt die Eingabe von Bild in Bild und das Verlassen von Bild in Bild auf dem Player und ändert den Kontrolltext entsprechend.
   *
   * @param {EventTarget~Event} [event]
   *        Das Ereignis {@link Player#enterpictureinpicture} oder {@link Player#leavepictureinpicture}, das diese Funktion ausgelöst hat
   *        genannt.
   *
   * @listens Player#enterpictureinpicture
   * @listens Player#BildimBild lassen
   * /
  handlePictureInPictureChange(event) {
    if (this.player_.isInPictureInPicture()) {
      this.controlText('Bild-im-Bild beenden');
    } else {
      this.controlText('Bild-im-Bild');
    }
    this.handlePictureInPictureEnabledChange();
  }

  /**
   * Diese Funktion wird aufgerufen, wenn ein `PictureInPictureToggle` "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_.isInPictureInPicture()) {
      this.player_.requestPictureInPicture();
    } else {
      this.player_.exitPictureInPicture();
    }
  }

}

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

Component.registerComponent('PictureInPictureToggle', PictureInPictureToggle);
standardmäßig PictureInPictureToggle exportieren;