/**
 * @archivo volumen-bar.js
 * /
importar control deslizante desde '../../slider/slider.js';
importar componente desde '../../component.js';
importar * como Dom desde '../../utils/dom.js';
importar abrazadera desde '../../utils/clamp.js';
importar {IS_IOS, IS_ANDROID} desde '../../utils/browser.js';

// Hijos requeridos
importar './nivel-de-volumen.js';
import './mouse-volume-level-display.js';

/**
 * La barra que contiene el nivel de volumen y se puede hacer clic para ajustar el nivel
 *
 * @extiende el control deslizante
 * /
clase VolumeBar extiende el control deslizante {

  /**
   * 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) {
    super(jugador, opciones);
    this.on('deslizador activo', (e) => this.updateLastVolume_(e));
    this.on(jugador, 'cambio de volumen', (e) => this.updateARIAAttributes(e));
    jugador.listo(() => this.updateARIAAttributes());
  }

  /**
   * Crear el elemento DOM del 'Componente'
   *
   * @return {Elemento}
   * El elemento que se creó.
   * /
  crearEl() {
    return super.createEl('div', {
      className: 'vjs-volumen-bar vjs-slider-bar'
    }, {
      'aria-label': this.localize('Nivel de volumen'),
      'aria-live': 'educado'
    });
  }

  /**
   * Maneje el mouse hacia abajo en la barra de volumen
   *
   * @param {EventTarget~Evento} evento
   * El evento `mousedown` que causó que esto se ejecutara.
   *
   * @escucha mousedown
   * /
  manejarRatónAbajo(evento) {
    if (!Dom.isSingleLeftClick(evento)) {
      devolver;
    }

    super.handleMouseDown(evento);
  }

  /**
   * Manejar eventos de movimiento en {@link VolumeMenuButton}.
   *
   * @param {EventTarget~Evento} evento
   * El evento que provocó la ejecución de esta función.
   *
   * @escucha movimiento del ratón
   * /
  manejarMouseMove(evento) {
    const mouseVolumeLevelDisplay = this.getChild('mouseVolumeLevelDisplay');

    if (mouseVolumeLevelDisplay) {
      const volumenBarEl = this.el();
      const volumenBarRect = Dom.getBoundingClientRect(volumeBarEl);
      const vertical = this.vertical();
      let volumeBarPoint = Dom.getPointerPosition(volumeBarEl, event);

      volumenBarPoint = vertical? volumenBarPoint.y : volumenBarPoint.x;
      // La máscara predeterminada tiene un espacio a cada lado de la `VolumenBar`. Esto significa
      // que es posible desencadenar este comportamiento fuera de los límites de
      // la `Barra de Volumen`. Esto asegura que permanezcamos dentro de él en todo momento.
      volumenBarPoint = abrazadera(volumenBarPoint, 0, 1);

      mouseVolumeLevelDisplay.update(volumeBarRect, volumeBarPoint, vertical);
    }

    if (!Dom.isSingleLeftClick(evento)) {
      devolver;
    }

    this.checkMuted();
    this.player_.volume(this.calculateDistance(evento));
  }

  /**
   * Si el reproductor está silenciado, desactívelo.
   * /
  verificar silenciado () {
    if (este.jugador_.silenciado()) {
      este.jugador_.silenciado(falso);
    }
  }

  /**
   * Obtener porcentaje del nivel de volumen
   *
   * @return {número}
   * Porcentaje de nivel de volumen como un número decimal.
   * /
  obtenerPorcentaje() {
    if (este.jugador_.silenciado()) {
      devolver 0;
    }
    devuelve este.player_.volume();
  }

  /**
   * Aumentar el nivel de volumen para usuarios de teclado
   * /
  un paso adelante() {
    this.checkMuted();
    este.jugador_.volumen(este.jugador_.volumen() + 0.1);
  }

  /**
   * Disminuir el nivel de volumen para usuarios de teclado
   * /
  Paso atrás() {
    this.checkMuted();
    este.jugador_.volumen(este.jugador_.volumen() - 0.1);
  }

  /**
   * Actualizar los atributos de accesibilidad de ARIA
   *
   * @param {Objetivo de evento~Evento} [evento]
   * El evento `cambio de volumen` que hizo que se ejecutara esta función.
   *
   * @escucha Player#cambio de volumen
   * /
  actualizarARIAAttributes(evento) {
    const ariaValue = this.player_.muted() ? 0 : este.volumenComoPorcentaje_();

    this.el_.setAttribute('aria-valuenow', ariaValue);
    this.el_.setAttribute('aria-valuetext', ariaValue + '%');
  }

  /**
   * Devuelve el valor actual del volumen del jugador como porcentaje
   *
   * @privado
   * /
  volumenComoPorcentaje_() {
    return Math.round(this.player_.volume() * 100);
  }

  /**
   * Cuando el usuario comience a arrastrar la barra de volumen, almacene el volumen y escuche
   * el final del arrastre. Cuando termina el arrastre, si el volumen se estableció en cero,
   * establezca lastVolume en el volumen almacenado.
   *
   * @escucha slideractive
   * @privado
   * /
  actualizarÚltimoVolumen_() {
    const volumen antes de arrastrar = this.player_.volume();

    this.one('control deslizante inactivo', () => {
      if (este.jugador_.volumen() === 0) {
        this.player_.lastVolume_(volumeBeforeDrag);
      }
    });
  }

}

/**
 * Opciones predeterminadas para `VolumeBar`
 *
 * @type {Objeto}
 * @privado
 * /
Barra de volumen.prototipo.opciones_ = {
  niños: [
    'nivel de volumen'
  ],
  barName: 'nivel de volumen'
};

// La información sobre herramientas de MouseVolumeLevelDisplay no debe agregarse a un reproductor en dispositivos móviles
if (!IS_IOS && !IS_ANDROID) {
  VolumeBar.prototype.options_.children.splice(0, 0, 'mouseVolumeLevelDisplay');
}

/**
 * Llame al evento de actualización para este Control deslizante cuando este evento ocurra en el reproductor.
 *
 * @tipo {cadena}
 * /
VolumeBar.prototype.playerEvent = 'cambio de volumen';

Componente.registerComponent('VolumenBar', VolumenBar);
exportar la barra de volumen predeterminada;