/**
 * @file imagen-en-imagen-toggle.js
 * /
importar botón desde '../button.js';
importar componente desde '../component.js';
importar documento desde 'global/document';

/**
 * Cambiar el modo de imagen en imagen
 *
 * Botón @extiende
 * /
clase PictureInPictureToggle extiende Botón {

  /**
   * Crea una instancia de esta clase.
   *
   * @param {Jugador} jugador
   * El `Jugador` al que se debe adjuntar esta clase.
   *
   * @param {Objeto} [opciones]
   * El almacén de clave/valor de las opciones del jugador.
   *
   * @escucha Player#enterpictureinpicture
   * @escucha Player#dejarimagenenimagen
   * /
  constructor(jugador, opciones) {
    super(jugador, opciones);
    this.on(jugador, ['ingresar imagen en imagen', 'dejar imagen en imagen'], (e) => this.handlePictureInPictureChange(e));
    this.on(jugador, ['deshabilitar imagen en imagen cambiada', 'metadatos cargados'], (e) => this.handlePictureInPictureEnabledChange(e));

    this.on(player, ['loadedmetadata', 'audioonlymodechange', 'audiopostermodechange'], () => {
      // Esta detección de audio no detectará transmisiones de solo audio HLS o DASH porque no había una forma confiable de detectarlas en ese momento
      const isSourceAudio = player.currentType().substring(0, 5) === 'audio';

      if (isSourceAudio || player.audioPosterMode() || player.audioOnlyMode()) {
        if (jugador.isInPictureInPicture()) {
          player.exitPictureInPicture();
        }
        esto. ocultar ();
      } else {
        este espectáculo();
      }

    });

    // HACER: Botón de desactivación en caso de jugador vacío.
    esto.deshabilitar();
  }

  /**
   * Construye el DOM predeterminado `className`.
   *
   * @return {cadena}
   * El DOM `className` para este objeto.
   * /
  construirClaseCSS() {
    devuelve `vjs-imagen-en-imagen-control ${super.buildCSSClass()}`;
  }

  /**
   * Habilita o deshabilita el botón según el valor de la propiedad document.pictureInPictureEnabled
   * o en el valor devuelto por el método player.disablePictureInPicture().
   * /
  handlePictureInPictureEnabledChange() {
    si (document.pictureInPictureEnabled && this.player_.disablePictureInPicture() === falso) {
      esto.habilitar();
    } else {
      esto.deshabilitar();
    }
  }

  /**
   * Maneja ingresar imagen en imagen y dejar imagen en imagen en el reproductor y cambiar el texto de control en consecuencia.
   *
   * @param {Objetivo de evento~Evento} [evento]
   * El evento {@link Player#enterpictureinpicture} o {@link Player#leavepictureinpicture} que hizo que esta función se desactivara.
   * llamado.
   *
   * @escucha Player#enterpictureinpicture
   * @escucha Player#dejarimagenenimagen
   * /
  handlePictureInPictureChange(evento) {
    if (this.player_.isInPictureInPicture()) {
      this.controlText('Salir de imagen en imagen');
    } else {
      this.controlText('Imagen en imagen');
    }
    this.handlePictureInPictureEnabledChange();
  }

  /**
   * Esto se llama cuando se "hace clic" en `PictureInPictureToggle`. Ver
   * {@link ClickableComponent} para obtener información más detallada sobre lo que puede ser un clic.
   *
   * @param {Objetivo de evento~Evento} [evento]
   * El evento `keydown`, `top` o `click` que hizo que esta función se desactivara
   * llamado.
   *
   * @escucha toca
   * @escucha clic
   * /
  handleClick(evento) {
    if (!this.player_.isInPictureInPicture()) {
      this.player_.requestPictureInPicture();
    } else {
      this.player_.exitPictureInPicture();
    }
  }

}

/**
 * El texto que debería mostrarse sobre los controles `PictureInPictureToggle`s. Añadido para la localización.
 *
 * @tipo {cadena}
 * @privado
 * /
PictureInPictureToggle.prototype.controlText_ = 'Imagen en imagen';

Component.registerComponent('PictureInPictureToggle', PictureInPictureToggle);
exportar PictureInPictureToggle predeterminado;