/**
* @Datei mute-toggle.js
* /
importiere Button von '../button';
importiere Komponente von '../komponente';
import * as Dom from '../utils/dom.js';
import checkMuteSupport from './volume-control/check-mute-support';
import * as browser from '../utils/browser.js';
/**
* Eine Tastenkomponente zum Stummschalten des Tons.
*
* @erweitert Button
* /
class MuteToggle extends Button {
/**
* Erzeugt eine Instanz dieser Klasse.
*
* @param {Player} Spieler
* Der `Player`, dem diese Klasse zugeordnet werden soll.
*
* @param {Object} [Optionen]
* Der Schlüssel/Wertspeicher der Playeroptionen.
* /
constructor(spieler, optionen) {
super(Spieler, Optionen);
// dieses Steuerelement ausblenden, wenn keine Lautstärkeunterstützung vorhanden ist
checkMuteSupport(this, player);
this.on(player, ['loadstart', 'volumechange'], (e) => this.update(e));
}
/**
* Erzeugt den Standard-DOM "Klassenname".
*
* @return {string}
* Der DOM `className` für dieses Objekt.
* /
buildCSSClass() {
return `vjs-mute-control ${super.buildCSSClass()}`;
}
/**
* Diese Funktion wird aufgerufen, wenn ein `MuteToggle` "angeklickt" wird. Sehen
* {@link ClickableComponent} für genauere Informationen darüber, was ein Klick sein kann.
*
* @param {EventTarget~Event} [event]
* Das `Keydown`-, `Tap`- oder `Click`-Ereignis, das diese Funktion ausgelöst hat
* genannt.
*
* @listens tap
* @listens klicken
* /
handleClick(event) {
const vol = this.player_.volume();
const lastVolume = this.player_.lastVolume_();
if (vol === 0) {
const volumeToSet = lastVolume < 0.1 ? 0.1 : letztesVolumen;
this.player_.volume(volumeToSet);
this.player_.muted(false);
} else {
this.player_.muted(this.player_.muted() ? false : true);
}
}
/**
* Aktualisieren Sie die Schaltfläche "MuteToggle" basierend auf dem Zustand von "Volume" und "Muted"
* auf dem Player.
*
* @param {EventTarget~Event} [event]
* Das Ereignis {@link Player#loadstart}, wenn diese Funktion aufgerufen wurde
* durch ein Ereignis.
*
* @listens Player#loadstart
* @listens Player#Lautstärkeänderung
* /
update(event) {
this.updateIcon_();
this.updateControlText_();
}
/**
* Aktualisierung des Aussehens des Symbols "MuteToggle".
*
* Mögliche Zustände (siehe unten die Variable "Level"):
* - 0: durchgestrichen
* - 1: Null Barren Volumen
* - 2: ein Barren Volumen
* - 3: zwei Takte Volumen
*
* @privat
* /
updateIcon_() {
const vol = this.player_.volume();
let level = 3;
// in iOS, wenn ein Player mit dem Attribut "stumm" geladen wird
// und die Lautstärke wird mit einer eigenen Stummschalttaste geändert
// wir wollen sicherstellen, dass der Stummschaltstatus aktualisiert wird
if (browser.IS_IOS && this.player_.tech_ && this.player_.tech_.el_) {
this.player_.muted(this.player_.tech_.el_.muted);
}
if (vol === 0 || this.player_.muted()) {
niveau = 0;
} else if (vol < 0.33) {
niveau = 1;
} else if (vol < 0.67) {
stufe = 2;
}
// TODO Verbesserung der stummen Symbolklassen
for (let i = 0; i < 4; i++) {
Dom.removeClass(this.el_, `vjs-vol-${i}`);
}
Dom.addClass(this.el_, `vjs-vol-${level}`);
}
/**
* Wenn "stumm" auf dem Player geändert wurde, aktualisieren Sie den Kontrolltext
* (Attribut "title" des Elements "vjs-mute-control" und Inhalt von
* element "vjs-control-text").
*
* @privat
* /
updateControlText_() {
const soundOff = this.player_.muted() || this.player_.volume() === 0;
const text = soundOff ? stummschaltung aufheben": stumm";
if (this.controlText() !== text) {
this.controlText(text);
}
}
}
/**
* Der Text, der über den "MuteToggle"-Bedienelementen angezeigt werden soll. Für die Lokalisierung hinzugefügt.
*
* @Typ {String}
* @privat
* /
MuteToggle.prototype.controlText_ = 'Stummschaltung';
Component.registerComponent('MuteToggle', MuteToggle);
standard MuteToggle exportieren;