/**
* @Datei kapitel-button.js
* /
importieren Sie TextTrackButton aus './text-track-button.js';
importiere Komponente aus '../../component.js';
import ChaptersTrackMenuItem from './chapters-track-menu-item.js';
import {toTitleCase} from '../../utils/string-cases.js';
/**
* Die Schaltflächenkomponente zum Umschalten und Auswählen von Kapiteln
* Kapitel verhalten sich ganz anders als andere Textspuren
* Cues sind Navigation im Vergleich zu anderen Spuren alternativer Sprachen
*
* @erweitert TextTrackButton
* /
class ChaptersButton extends TextTrackButton {
/**
* 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.
*
* @param {Component~ReadyCallback} [ready]
* Die Funktion, die aufgerufen werden soll, wenn diese Funktion bereit ist.
* /
constructor(player, options, ready) {
super(Spieler, Optionen, bereit);
this.selectCurrentItem_ = () => {
this.items.forEach(item => {
item.selected(this.track_.activeCues[0] === item.cue);
});
};
}
/**
* Erzeugt den Standard-DOM "Klassenname".
*
* @return {string}
* Der DOM `className` für dieses Objekt.
* /
buildCSSClass() {
return `vjs-chapters-button ${super.buildCSSClass()}`;
}
buildWrapperCSSClass() {
return `vjs-chapters-button ${super.buildWrapperCSSClass()}`;
}
/**
* Aktualisierung des Menüs auf der Grundlage des aktuellen Zustands seiner Elemente.
*
* @param {EventTarget~Event} [event]
* Ein Ereignis, das die Ausführung dieser Funktion ausgelöst hat.
*
* @listens TextTrackList#addtrack
* @listens TextTrackList#removetrack
* @listens TextTrackList#ändern
* /
update(event) {
if (event && event.track && event.track.kind !== 'chapters') {
rückkehr;
}
const track = this.findChaptersTrack();
if (track !== this.track_) {
this.setTrack(track);
super.update();
} else if (!this.items || (track && track.cues && track.cues.length !== this.items.length)) {
// Aktualisieren Sie das Menü beim ersten Mal oder wenn sich die Anzahl der Stichwörter seit der Einstellung geändert hat
super.update();
}
}
/**
* Legen Sie den aktuell ausgewählten Titel für die Kapiteltaste fest.
*
* @param {TextTrack} track
* Der neu auszuwählende Titel. Es ändert sich nichts, wenn dies die aktuell ausgewählte
* titel.
* /
setTrack(track) {
if (this.track_ === track) {
rückkehr;
}
if (!this.updateHandler_) {
this.updateHandler_ = this.update.bind(this);
}
// hier verweist this.track_ auf die alte Track-Instanz
if (this.track_) {
const remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_);
if (remoteTextTrackEl) {
remoteTextTrackEl.removeEventListener('load', this.updateHandler_);
}
this.track_.removeEventListener('cuechange', this.selectCurrentItem_);
this.track_ = null;
}
this.track_ = track;
// hier verweist this.track_ auf die neue Track-Instanz
if (this.track_) {
this.track_.mode = 'versteckt';
const remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_);
if (remoteTextTrackEl) {
remoteTextTrackEl.addEventListener('load', this.updateHandler_);
}
this.track_.addEventListener('cuechange', this.selectCurrentItem_);
}
}
/**
* Suche nach dem Track-Objekt, das derzeit von diesem ChaptersButton verwendet wird
*
* @return {TextTrack|undefined}
* Der aktuelle Track oder undefiniert, wenn keiner gefunden wurde.
* /
findChaptersTrack() {
const tracks = this.player_.textTracks() || [];
for (let i = tracks.length - 1; i >= 0; i--) {
// Wir wählen immer den letzten Track als unseren ChaptersTrack
const track = tracks[i];
if (track.kind === this.kind_) {
rückweg;
}
}
}
/**
* Ermittelt die Beschriftung für die Schaltfläche ChaptersButton auf der Grundlage der Titelbezeichnung. Dies wird auch
* die lokalisierte Art des aktuellen Titels als Ausweichmöglichkeit verwenden, wenn kein Label vorhanden ist.
*
* @return {string}
* Das aktuelle Label des Tracks oder die lokalisierte Trackart.
* /
getMenuCaption() {
if (this.track_ && this.track_.label) {
return this.track_.label;
}
return this.localize(toTitleCase(this.kind_));
}
/**
* Menü aus Kapitelspur erstellen
*
* @return {Menu}
* Neues Menü für die Kapiteltasten
* /
createMenu() {
this.options_.title = this.getMenuCaption();
return super.createMenu();
}
/**
* Erstellen Sie für jede Textspur einen Menüpunkt
*
* @return {TextTrackMenuItem[]}
* Array von Menüpunkten
* /
createItems() {
const items = [];
if (!this.track_) {
rücksendungen;
}
const cues = this.track_.cues;
if (!cues) {
rücksendungen;
}
for (let i = 0, l = cues.length; i < l; i++) {
const cue = cues[i];
const mi = new ChaptersTrackMenuItem(this.player_, { track: this.track_, cue });
items.push(mi);
}
rücksendungen;
}
}
/**
* art" von TextTrack, nach dem gesucht werden soll, um ihn mit diesem Menü zu verknüpfen.
*
* @Typ {String}
* @privat
* /
ChaptersButton.prototype.kind_ = 'chapters';
/**
* Der Text, der über den "ChaptersButton"-Steuerelementen angezeigt werden soll. Für die Lokalisierung hinzugefügt.
*
* @Typ {String}
* @privat
* /
ChaptersButton.prototype.controlText_ = 'Chapters';
Component.registerComponent('ChaptersButton', ChaptersButton);
export default ChaptersButton;