/**
 * @archivo volumen-control.js
 * /
importar componente desde '../../component.js';
importar checkVolumeSupport desde './check-volume-support';
importar {isPlain} de '../../utils/obj';
importar {throttle, bind, UPDATE_REFRESH_INTERVAL} desde '../../utils/fn.js';

// Hijos requeridos
importar './volumen-bar.js';

/**
 * El componente para controlar el nivel de volumen
 *
 * Componente @extiende
 * /
clase VolumeControl 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 = {}) {
    opciones.vertical = opciones.vertical || FALSO;

    // Pase la opción vertical hacia abajo a la barra de volumen si
    // la barra de volumen está activada.
    if (typeof options.volumeBar === 'indefinido' || isPlain(options.volumeBar)) {
      opciones.barradevolumen = opciones.barradevolumen || {};
      opciones.barradevolumen.vertical = opciones.vertical;
    }

    super(jugador, opciones);

    // ocultar este control si falta el soporte de volumen
    checkVolumeSupport(esto, jugador);

    this.throttledHandleMouseMove = throttle(bind(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
    this.handleMouseUpHandler_ = (e) => this.handleMouseUp(e);

    this.on('mousedown', (e) => this.handleMouseDown(e));
    this.on('touchstart', (e) => this.handleMouseDown(e));
    this.on('movimiento del ratón', (e) => this.handleMouseMove(e));

    // mientras el control deslizante está activo (el mouse ha sido presionado y
    // está arrastrando) o en foco no queremos ocultar la barra de volumen
    this.on(this.volumeBar, ['focus', 'slideractive'], () => {
      this.volumeBar.addClass('vjs-slider-active');
      this.addClass('vjs-slider-active');
      this.trigger('control deslizante');
    });

    this.on(this.volumeBar, ['blur', 'sliderinactive'], () => {
      this.volumeBar.removeClass('vjs-slider-active');
      this.removeClass('vjs-slider-active');
      this.trigger('control deslizante inactivo');
    });
  }

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

    if (esta.opciones_.vertical) {
      OrientaciónClase = 'vjs-volumen-vertical';
    }

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

  /**
   * Manejar eventos `mousedown` o `touchstart` en `VolumeControl`.
   *
   * @param {EventTarget~Evento} evento
   * Evento `mousedown` o `touchstart` que activó esta función
   *
   * @escucha mousedown
   * @escucha inicio táctil
   * /
  manejarRatónAbajo(evento) {
    const doc = this.el_.ownerDocument;

    this.on(doc, 'movemouse', this.throttledHandleMouseMove);
    this.on(doc, 'touchmove', this.throttledHandleMouseMove);
    this.on(doc, 'mouseup', this.handleMouseUpHandler_);
    this.on(doc, 'touchend', this.handleMouseUpHandler_);
  }

  /**
   * Manejar eventos `mouseup` o `touchend` en `VolumeControl`.
   *
   * @param {EventTarget~Evento} evento
   * Evento `mouseup` o `touchend` que activó esta función.
   *
   * @escucha tocar el extremo
   * @escucha mouseup
   * /
  manejarMouseUp(evento) {
    const doc = this.el_.ownerDocument;

    this.off(doc, 'mousemove', this.throttledHandleMouseMove);
    this.off(doc, 'touchmove', this.throttledHandleMouseMove);
    this.off(doc, 'mouseup', this.handleMouseUpHandler_);
    this.off(doc, 'touchend', this.handleMouseUpHandler_);
  }

  /**
   * Manejar eventos `mousedown` o `touchstart` en `VolumeControl`.
   *
   * @param {EventTarget~Evento} evento
   * Evento `mousedown` o `touchstart` que activó esta función
   *
   * @escucha mousedown
   * @escucha inicio táctil
   * /
  manejarMouseMove(evento) {
    this.volumeBar.handleMouseMove(evento);
  }
}

/**
 * Opciones predeterminadas para `VolumeControl`
 *
 * @type {Objeto}
 * @privado
 * /
VolumeControl.prototipo.opciones_ = {
  niños: [
    'barra de volumen'
  ]
};

Componente.registerComponent('Control de Volumen', Control de Volumen);
exportar control de volumen predeterminado;