/**
 * @archivo volumen-control.js
 * /
importar componente desde '../component.js';
importar {isPlain} desde '../utils/obj';
importar * como Eventos desde '../utils/events.js';
importar código clave desde 'código clave';
importar documento desde 'global/document';

// Hijos requeridos
importar './control-de-volumen/control-de-volumen.js';
importar './mute-toggle.js';

/**
 * Un componente para contener MuteToggle y VolumeControl para que
 * pueden trabajar juntos.
 *
 * Componente @extiende
 * /
clase VolumePanel extiende Componente {

  /**
   * 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.
   * /
  constructor(jugador, opciones = {}) {
    if (typeof options.inline !== 'indefinido') {
      opciones.en línea = opciones.en línea;
    } else {
      opciones.en línea = verdadero;
    }

    // pasa la opción en línea al VolumeControl como vertical si
    // el control de volumen está activado.
    if (typeof options.volumeControl === 'indefinido' || isPlain(options.volumeControl)) {
      opciones.volumeControl = opciones.volumeControl || {};
      options.volumeControl.vertical = !options.inline;
    }

    super(jugador, opciones);

    // este controlador es utilizado por los métodos de controlador de mouse a continuación
    this.handleKeyPressHandler_ = (e) => esto.handleKeyPress(e);

    this.on(jugador, ['loadstart'], (e) => this.volumePanelState_(e));
    this.on(this.muteToggle, 'keyup', (e) => this.handleKeyPress(e));
    this.on(this.volumeControl, 'keyup', (e) => this.handleVolumeControlKeyUp(e));
    this.on('teclado abajo', (e) => this.handleKeyPress(e));
    this.on('mouseover', (e) => this.handleMouseOver(e));
    this.on('mouseout', (e) => this.handleMouseOut(e));

    // mientras el control deslizante está activo (el mouse ha sido presionado y
    // está arrastrando) no queremos ocultar la barra de volumen
    this.on(this.volumeControl, ['slideractive'], this.sliderActive_);

    this.on(this.volumeControl, ['sliderinactive'], this.sliderInactive_);
  }

  /**
   * Agregue la clase vjs-slider-active al VolumePanel
   *
   * @escucha VolumeControl#slideractive
   * @privado
   * /
  deslizadorActivo_() {
    this.addClass('vjs-slider-active');
  }

  /**
   * Elimina la clase vjs-slider-active al VolumePanel
   *
   * @escucha VolumeControl#sliderinactive
   * @privado
   * /
  deslizadorInactivo_() {
    this.removeClass('vjs-slider-active');
  }

  /**
   * Agrega vjs-hidden o vjs-mute-toggle-only al VolumePanel
   * dependiendo del estado de MuteToggle y VolumeControl
   *
   * @escucha Player#loadstart
   * @privado
   * /
  volumenPanelState_() {
    // ocultar el panel de volumen si ni el control de volumen ni el silencio alternan
    // son mostrados
    if (this.volumeControl.hasClass('vjs-hidden') && this.muteToggle.hasClass('vjs-hidden')) {
      this.addClass('vjs-hidden');
    }

    // si solo se ve la alternancia de silencio, no queremos
    // panel de volumen que se expande cuando se desplaza o está activo
    if (this.volumeControl.hasClass('vjs-hidden') && !this.muteToggle.hasClass('vjs-hidden')) {
      this.addClass('vjs-mute-toggle-only');
    }
  }

  /**
   * Crear el elemento DOM del 'Componente'
   *
   * @return {Elemento}
   * El elemento que se creó.
   * /
  crearEl() {
    let orientacionClase = 'vjs-volumen-panel-horizontal';

    if (!this.options_.inline) {
      OrientaciónClase = 'vjs-volumen-panel-vertical';
    }

    return super.createEl('div', {
      className: `vjs-volumen-panel vjs-control ${orientationClass}`
    });
  }

  /**
   * Deseche el `panel de volumen` y todos los componentes secundarios.
   * /
  disponer () {
    this.handleMouseOut();
    super.dispose();
  }

  /**
   * Maneja eventos `keyup` en `VolumeControl`, buscando ESC, que cierra
   * el panel de volumen y establece el foco en `MuteToggle`.
   *
   * @param {EventTarget~Evento} evento
   * El evento `keyup` que provocó la llamada de esta función.
   *
   * @escucha teclado
   * /
  handleVolumeControlKeyUp(evento) {
    if (keycode.isEventKey(evento, 'Esc')) {
      this.muteToggle.focus();
    }
  }

  /**
   * Esto se llama cuando un `VolumePanel` gana el desplazamiento a través de un evento `mouseover`.
   * Activa la escucha del evento `mouseover`. cuando lo pasan
   * llama a `this.handleMouseOver`.
   *
   * @param {EventTarget~Evento} evento
   * El evento `mouseover` que provocó la llamada de esta función.
   *
   * @escucha mouseover
   * /
  handleMouseOver(evento) {
    this.addClass('vjs-hover');
    Events.on(document, 'keyup', this.handleKeyPressHandler_);
  }

  /**
   * Esto se llama cuando un `VolumePanel` gana el desplazamiento a través de un evento `mouseout`.
   * Activa la escucha del evento `mouseout`. cuando lo pasan
   * llama a `this.handleMouseOut`.
   *
   * @param {EventTarget~Evento} evento
   * El evento `mouseout` que provocó la llamada de esta función.
   *
   * @escucha ratón fuera
   * /
  handleMouseOut(evento) {
    this.removeClass('vjs-hover');
    Events.off(document, 'keyup', this.handleKeyPressHandler_);
  }

  /**
   * Maneja el evento `keyup` en el documento o el evento `keydown` en el `VolumePanel`,
   * buscando ESC, que oculta el `VolumeControl`.
   *
   * @param {EventTarget~Evento} evento
   * La pulsación de tecla que desencadenó este evento.
   *
   * @escucha tecla abajo | tecla Arriba
   * /
  handleKeyPress(evento) {
    if (keycode.isEventKey(evento, 'Esc')) {
      this.handleMouseOut();
    }
  }
}

/**
 * Opciones predeterminadas para `VolumeControl`
 *
 * @type {Objeto}
 * @privado
 * /
VolumePanel.prototipo.opciones_ = {
  niños: [
    'alternar silencio',
    'control del volumen'
  ]
};

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