/**
 * @file poster-image.js
 * /
importiere ClickableComponent aus './clickable-component.js';
importiere Komponente aus './component.js';
importiere * as Dom aus './utils/dom.js';
importiere {silencePromise} aus '. /utils/promise ';
importiere * as browser aus './utils/browser.js';

/**
 * Eine `ClickableComponent`, die das Anzeigen des Posterbilds für den Spieler übernimmt.
 *
 * @erweitert ClickableComponent
 * /
Klasse PosterImage erweitert ClickableComponent {

  /**
   * Erstellen Sie eine Instanz dieser Klasse.
   *
   * @param {Player} Spieler
   *        Der `Player`, an den diese Klasse angehängt werden soll.
   *
   * @param {Object} [Optionen]
   *        Der Schlüssel/Wertspeicher der Playeroptionen.
   * /
  constructor(spieler, optionen) {
    super(Spieler, Optionen);

    this.update();

    this.update_ = (e) => this.update(e);
    player.on ('posterchange', this.update_);
  }

  /**
   * Räum das `PosterImage` auf und entsorge es.
   * /
  dispose() {
    this.player () .off ('posterchange', this.update_);
    super.dispose();
  }

  /**
   * Erstellen Sie das DOM-Element `PosterImage`s.
   *
   * @return {Element}
   *         Das Element, das erstellt wird.
   * /
  createEl() {
    const el = dom.createEl ('div', {
      Klassenname: 'vjs-poster',

      //Ich möchte nicht, dass das Poster tabbierbar ist.
      tabIndex: -1
    });

    zurück el;
  }

  /**
   * Ein {@link EventTarget~EventListener} für {@link Player #posterchange} -Ereignisse.
   *
   * @listens Spieler #posterchange
   *
   * @param {EventTarget~Event} [event]
   * Das `Player #posterchange `-Ereignis, das diese Funktion ausgelöst hat.
   * /
  update(event) {
    const url = this.player () .poster ();

    this.setSrc (url);

    //Wenn es keine Poster-Quelle gibt, sollten wir:none für diese Komponente anzeigen
    //es ist also nicht immer noch anklickbar oder mit der rechten Maustaste anklickbar
    if (url) {
      this.show();
    } sonst {
      this.hide();
    }
  }

  /**
   * Stellen Sie die Quelle des `PosterImage` abhängig von der Darstellungsmethode ein.
   *
   * @param {string} url
   * Die URL zur Quelle für das `PosterImage`.
   * /
  setSrc (URL) {
    sei backgroundImage = „;

    //Jeder falsche Wert sollte als leere Zeichenfolge bleiben, andernfalls
    //das wird einen zusätzlichen Fehler auslösen
    if (url) {
      Hintergrundbild = `url („$ {url}“) `;
    }

    this.el_.style.backgroundImage = Hintergrundbild;
  }

  /**
   * Ein {@link eventTarget~eventListener} für Klicks auf das `PosterImage`. Sehen
   * {@link clickableComponent #handleClick} für Fälle, in denen dies ausgelöst wird.
   *
   * @listens tap
   * @listens klicken
   * @listens keydown
   *
   * @param {EventTarget~Event} event
   + Das `click`-, `tap`- oder `keydown`-Ereignis, das den Aufruf dieser Funktion verursacht hat.
   * /
  handleClick(event) {
    //Wir wollen nicht, dass ein Klick die Wiedergabe auslöst, wenn die Steuerung deaktiviert ist
    wenn (! this.player_.controls () {
      rückkehr;
    }

    const sourceIsEncrypted = this.player_.usingPlugin('eme') &&
                                this.player_.eme.sessions &&
                                this.player_.eme.sessions.length > 0;

    wenn (this.player_.tech(true) &&
    // Wir haben einen Fehler in IE und Edge bei der Wiedergabe von DRM-Inhalten beobachtet, bei dem
    // Der Aufruf von .focus() für das Videoelement führt dazu, dass das Video schwarz wird,
    // also vermeiden wir es in diesem speziellen Fall
    !((browser.IE_VERSION || browser.IS_EDGE) && sourceIsEncrypted)) {
      this.player_.tech(true).focus();
    }

    if (this.player_.paused()) {
      silencePromise(this.player_.play());
    } sonst {
      this.player_.pause();
    }
  }

}

component.registerComponent ('posteriImage', posteriImage);
exportiere Standard-PosterImage;