/**
* @archivo mute-toggle.js
* /
Importar botón desde '../botón';
importar componente desde '../componente';
importar * como Dom desde '../utils/dom.js';
importar checkMuteSupport desde './volume-control/check-mute-support';
importar * como navegador desde '../utils/browser.js';
/**
* Un componente de botón para silenciar el audio.
*
* Botón @extiende
* /
class MuteToggle 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.
* /
constructor(jugador, opciones) {
super(jugador, opciones);
// ocultar este control si falta el soporte de volumen
checkMuteSupport(este, jugador);
this.on(player, ['loadstart', 'cambio de volumen'], (e) => esta.actualización(e));
}
/**
* Construye el DOM predeterminado `className`.
*
* @return {cadena}
* El DOM `className` para este objeto.
* /
construirClaseCSS() {
devuelve `vjs-mute-control ${super.buildCSSClass()}`;
}
/**
* Esto se llama cuando se "hace clic" en `MuteToggle`. 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) {
const vol = this.player_.volume();
const lastVolume = this.player_.lastVolume_();
si (vol === 0) {
const volumenToSet = lastVolume < 0.1? 0.1: último volumen;
this.player_.volume(volumeToSet);
este.jugador_.silenciado(falso);
} else {
this.player_.muted(this.player_.muted() ? false : true);
}
}
/**
* Actualice el botón `MuteToggle` en función del estado de `volumen` y `silenciado`
* en el reproductor.
*
* @param {Objetivo de evento~Evento} [evento]
* El evento {@link Player#loadstart} si se llamó a esta función
* a través de un evento.
*
* @escucha Player#loadstart
* @escucha Player#cambio de volumen
* /
actualizar (evento) {
este.updateIcon_();
this.updateControlText_();
}
/**
* Actualice la apariencia del icono `MuteToggle`.
*
* Estados posibles (dada la variable 'nivel' a continuación):
* - 0: tachado
* - 1: cero barras de volumen
* - 2: una barra de volumen
* - 3: dos barras de volumen
*
* @privado
* /
actualizarIcono_() {
const vol = this.player_.volume();
sea nivel = 3;
// en iOS cuando un jugador está cargado con un atributo silenciado
// y el volumen se cambia con un botón de silencio nativo
// queremos asegurarnos de que el estado silenciado se actualice
si (navegador.IS_IOS && este.jugador_.tecnología_ && este.jugador_.tech_.el_) {
this.player_.muted(this.player_.tech_.el_.muted);
}
if (vol === 0 || this.player_.muted()) {
nivel = 0;
} más si (vol < 0.33) {
nivel = 1;
} más si (vol < 0.67) {
nivel = 2;
}
// TODO mejorar las clases de iconos silenciados
para (sea i = 0; i < 4; i++) {
Dom.removeClass(this.el_, `vjs-vol-${i}`);
}
Dom.addClass(this.el_, `vjs-vol-${nivel}`);
}
/**
* Si "silenciado" ha cambiado en el reproductor, actualice el texto de control
* (atributo `title` en el elemento `vjs-mute-control` y contenido de
* elemento `vjs-control-text`).
*
* @privado
* /
actualizarTextoDeControl_() {
const soundOff = this.player_.muted() || este.jugador_.volumen() === 0;
const text = soundOff ? 'Desactivar silencio': 'Silenciar';
if (this.controlText() !== texto) {
this.controlText(texto);
}
}
}
/**
* El texto que debería mostrarse sobre los controles `MuteToggle`s. Añadido para la localización.
*
* @tipo {cadena}
* @privado
* /
MuteToggle.prototype.controlText_ = 'Silencio';
Component.registerComponent('MuteToggle', MuteToggle);
exportar MuteToggle predeterminado;