/**
* @Datei zeit-anzeige.js
* /
dokument aus 'global/document' importieren;
importiere Komponente aus '../../component.js';
import * as Dom from '../../utils/dom.js';
import formatTime from '../../utils/format-time.js';
import log from '../../utils/log.js';
/**
* Zeigt Zeitinformationen über das Video an
*
* @erweitert Komponente
* /
class TimeDisplay extends Component {
/**
* 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);
this.on(player, ['timeupdate', 'ended'], (e) => this.updateContent(e));
this.updateTextNode_();
}
/**
* Das DOM-Element der Komponente erstellen
*
* @return {Element}
* Das Element, das erstellt wurde.
* /
createEl() {
const className = this.buildCSSClass();
const el = super.createEl('div', {
klassenname: `${className} vjs-time-control vjs-control`
});
const span = Dom.createEl('span', {
className: 'vjs-control-text',
textInhalt: "${this.localize(this.labelText_)}\u00a0
}, {
rolle: 'Präsentation'
});
el.appendChild(span);
this.contentEl_ = Dom.createEl('span', {
klassenname: `${className}-display`
}, {
// Bildschirmlesegeräte sollen die Uhrzeit nicht automatisch lesen, wenn sie sich ändert
aria-live": "aus",
// span-Elemente haben keine implizite Rolle, aber einige Bildschirmleser (insbesondere VoiceOver)
// bei Verwendung von Pfeiltasten als Unterbrechung zwischen Elementen im DOM behandeln
// (oder Wischen von links nach rechts auf iOS), um den Inhalt einer Seite zu lesen. Verwendung von
// role='presentation' veranlasst VoiceOver, diesen Bereich NICHT als Unterbrechung zu behandeln.
rolle": 'Präsentation'
});
el.appendChild(this.contentEl_);
zurück el;
}
dispose() {
this.contentEl_ = null;
this.textNode_ = null;
super.dispose();
}
/**
* Aktualisiert den Textknoten der Zeitanzeige mit einer neuen Zeit
*
* @param {number} [time=0] die Zeit, auf die aktualisiert werden soll
*
* @privat
* /
updateTextNode_(time = 0) {
time = formatTime(time);
if (this.formattedTime_ === time) {
rückkehr;
}
this.formattedTime_ = time;
this.requestNamedAnimationFrame('TimeDisplay#updateTextNode_', () => {
if (!this.contentEl_) {
rückkehr;
}
let oldNode = this.textNode_;
if (oldNode && this.contentEl_.firstChild !== oldNode) {
oldNode = null;
log.warn('TimeDisplay#updateTextnode_: Das Ersetzen eines Textknotenelements wurde verhindert, da es nicht mehr ein Kind dieses Knotens war. Stattdessen wird ein neuer Knoten angehängt.');
}
this.textNode_ = document.createTextNode(this.formattedTime_);
if (!this.textNode_) {
rückkehr;
}
if (alterKnoten) {
this.contentEl_.replaceChild(this.textNode_, oldNode);
} else {
this.contentEl_.appendChild(this.textNode_);
}
});
}
/**
* Wird in der untergeordneten Klasse ausgefüllt und soll die angezeigte Zeit aktualisieren
* in Übereinstimmung mit der Tatsache, dass sich die aktuelle Zeit geändert hat.
*
* @param {EventTarget~Event} [event]
* Das "timeupdate"-Ereignis, das diesen Vorgang ausgelöst hat.
*
* @listens Player#timeupdate
* /
updateContent(event) {}
}
/**
* Der Text, der der "TimeDisplay"-Anzeige für Benutzer von Bildschirmlesegeräten hinzugefügt wird.
*
* @Typ {String}
* @privat
* /
TimeDisplay.prototype.labelText_ = 'Zeit';
/**
* Der Text, der über den Steuerelementen von `TimeDisplay` angezeigt werden soll. Zugefügt für die Lokalisierung.
*
* @Typ {String}
* @privat
*
* @veraltet in v7; controlText_ wird in nicht aktiven Anzeigekomponenten nicht verwendet
* /
TimeDisplay.prototype.controlText_ = 'Zeit';
Component.registerComponent('TimeDisplay', TimeDisplay);
standard TimeDisplay exportieren;