/**
 * @file poster-image.js
 */
import ClickableComponent de './clickable-component.js' ;
import Component from './component.js' ;
import * as Dom from './utils/dom.js' ;
import {silencePromise} from './utils/promesse' ;
import * as browser from './utils/browser.js' ;

/**
 * Un `ClickableComponent` qui gère l'affichage de l'image du poster pour le joueur.
 *
 * @extends ClickableComponent
 */
class PosterImage extends ClickableComponent {

  /**
   * Créer une instance de cette classe.
   *
   * @param {Player} player
   *        Le `Player` auquel cette classe doit s'attacher.
   *
   * @param {Objet} [options]
   *        La mémoire clé/valeur des options du lecteur.
   */
  constructor(player, options) {
    super(player, options) ;

    this.update() ;

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

  /**
   * Nettoyer et éliminer l'image `PosterImage`.
   */
  dispose() {
    this.player().off('posterchange', this.update_) ;
    super.dispose() ;
  }

  /**
   * Créer l'élément DOM `PosterImage`.
   *
   * @return {Element}
   *         L'élément qui est créé.
   */
  createEl() {
    const el = Dom.createEl('div', {
      className : 'vjs-poster',

      // Ne veut pas que le poster soit tabbable.
      tabIndex : -1
    }) ;

    return el ;
  }

  /**
   * Un {@link EventTarget~EventListener} pour les événements {@link Player#posterchange}.
   *
   * @listens Player#posterchange
   *
   * @param {EventTarget~Event} [event]
   *        L'événement `Player#posterchange` qui a déclenché cette fonction.
   */
  update(event) {
    const url = this.player().poster() ;

    this.setSrc(url) ;

    // S'il n'y a pas de source d'affichage, nous devrions afficher:none sur ce composant
    // pour qu'il ne soit pas encore cliquable ou cliquable avec le bouton droit de la souris
    if (url) {
      this.show() ;
    } else {
      this.hide() ;
    }
  }

  /**
   * Définit la source de l'image `PosterImage` en fonction de la méthode d'affichage.
   *
   * @param {string} url
   *        L'URL de la source de l'image `PosterImage`.
   */
  setSrc(url) {
    let backgroundImage = '' ;

    // Toute valeur fictive doit rester une chaîne vide, sinon
    // cela provoquera une erreur supplémentaire
    if (url) {
      backgroundImage = `url("${url}")` ;
    }

    this.el_.style.backgroundImage = backgroundImage ;
  }

  /**
   * Un {@link EventTarget~EventListener} pour les clics sur l'image `PosterImage`. Voir
   * {@link ClickableComponent#handleClick} pour les cas où cela sera déclenché.
   *
   * @listens tap
   * @listens click
   * @listens keydown
   *
   * @param {EventTarget~Event} event
   + L'événement `click`, `tap` ou `keydown` qui a provoqué l'appel de cette fonction.
   */
  handleClick(event) {
    // Nous ne voulons pas qu'un clic déclenche la lecture lorsque les contrôles sont désactivés
    if (!this.player_.controls())) {
      retour ;
    }

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

    si (this.player_.tech(true) &&
    // Nous avons observé un bug dans IE et Edge lors de la lecture de contenu DRM où
    // l'appel de .focus() sur l'élément vidéo entraîne le noir de la vidéo,
    // nous l'évitons donc dans ce cas précis
    !((browser.IE_VERSION || browser.IS_EDGE) && sourceIsEncrypted)) {
      this.player_.tech(true).focus() ;
    }

    if (this.player_.paused()) {
      silencePromesse(this.player_.play()) ;
    } else {
      ce.joueur_.pause() ;
    }
  }

}

Component.registerComponent('PosterImage', PosterImage) ;
export default PosterImage ;