/**
* @file mute-toggle.js
*/
import Button from '../button' ;
import Component from '../component' ;
import * as Dom from '../utils/dom.js' ;
import checkMuteSupport from './volume-control/check-mute-support' ;
import * as browser from '../utils/browser.js' ;
/**
* Bouton permettant de couper le son.
*
* bouton @extends
*/
class MuteToggle extends Button {
/**
* Crée une instance de cette classe.
*
* @param {Player} player
* Le `Player` auquel cette classe doit être attachée.
*
* @param {Objet} [options]
* La mémoire clé/valeur des options du lecteur.
*/
constructor(player, options) {
super(player, options) ;
// cacher ce contrôle si le volume n'est pas pris en charge
checkMuteSupport(this, player) ;
this.on(player, ['loadstart', 'volumechange'], (e) => this.update(e)) ;
}
/**
* Construit le DOM par défaut `className`.
*
* @return {string}
* Le `nom de classe` du DOM pour cet objet.
*/
buildCSSClass() {
return `vjs-mute-control ${super.buildCSSClass()}` ;
}
/**
* Cette fonction est appelée lorsqu'un `MuteToggle` est "cliqué". Voir
* {@link ClickableComponent} pour des informations plus détaillées sur ce que peut être un clic.
*
* @param {EventTarget~Event} [event]
* L'événement `keydown`, `tap` ou `click` qui a provoqué l'activation de cette fonction est le suivant
* appelé.
*
* @listens tap
* @listens click
*/
handleClick(event) {
const vol = this.player_.volume() ;
const lastVolume = this.player_.lastVolume_() ;
if (vol === 0) {
const volumeToSet = lastVolume < 0.1 ? 0.1 : lastVolume ;
this.player_.volume(volumeToSet) ;
ce.joueur_.muted(false) ;
} else {
this.player_.muted(this.player_.muted() ? false : true) ;
}
}
/**
* Mettre à jour le bouton `MuteToggle` en fonction de l'état de `volume` et de `muted`
* sur le lecteur.
*
* @param {EventTarget~Event} [event]
* L'événement {@link Player#loadstart} si cette fonction a été appelée
* par le biais d'un événement.
*
* @listens Player#loadstart
* @listens Player#volumechange
*/
update(event) {
this.updateIcon_() ;
this.updateControlText_() ;
}
/**
* Mise à jour de l'apparence de l'icône `MuteToggle`.
*
* États possibles (selon la variable `level` ci-dessous) :
* - 0 : barré
* - 1 : zéro barre de volume
* - 2 : un bar de volume
* - 3 : deux mesures de volume
*
* @private
*/
updateIcon_() {
const vol = this.player_.volume() ;
let level = 3 ;
// dans iOS lorsqu'un lecteur est chargé avec l'attribut muted
// et le volume est modifié à l'aide d'un bouton de mise en sourdine natif
// nous voulons nous assurer que l'état de sourdine est mis à jour
if (browser.IS_IOS && this.player_.tech_ && this.player_.tech_.el_) {
ce.joueur_.muted(ce.joueur_.tech_.el_.muted) ;
}
if (vol === 0 || this.player_.muted()) {
niveau = 0 ;
} else if (vol < 0.33) {
niveau = 1 ;
} else if (vol < 0.67) {
niveau = 2 ;
}
// Améliorer les classes d'icônes en sourdine
for (let i = 0 ; i < 4 ; i++) {
Dom.removeClass(this.el_, `vjs-vol-${i}`) ;
}
Dom.addClass(this.el_, `vjs-vol-${level}`) ;
}
/**
* Si `muted` a été modifié sur le lecteur, mettre à jour le texte de contrôle
* (Attribut `title` de l'élément `vjs-mute-control` et contenu de l'élément `vjs-mute-control`)
* `vjs-control-text`).
*
* @private
*/
updateControlText_() {
const soundOff = this.player_.muted() || this.player_.volume() === 0 ;
const text = soundOff ? 'Unmute' : muet" ;
if (this.controlText() !== text) {
this.controlText(text) ;
}
}
}
/**
* Le texte qui doit s'afficher au-dessus des contrôles `MuteToggle`s. Ajouté pour la localisation.
*
* @type {string}
* @private
*/
MuteToggle.prototype.controlText_ = 'Mute' ;
Component.registerComponent('MuteToggle', MuteToggle) ;
exporter la fonction MuteToggle par défaut ;