/**
* @文件描述-button.js
*/
從 './text-track-button.js' 導入 TextTrackButton;
從 '../../component.js' 導入組件;
從 '../../utils/fn.js' 導入 * 作為 Fn;
/**
* 用於切換和選擇描述的按鈕組件
*
* @extends 文本跟踪按鈕
*/
類 DescriptionsButton 擴展 TextTrackButton {
/**
* 創建此類的一個實例。
*
* @param {Player} 播放器
* 此類應附加到的 `Player`。
*
* @param {對象} [選項]
* 播放器選項的鍵/值存儲。
*
* @param {Component~ReadyCallback} [就緒]
* 此組件準備就緒時調用的函數。
*/
構造函數(播放器,選項,準備就緒){
超級(播放器,選項,準備就緒);
const tracks = player.textTracks();
const changeHandler = Fn.bind(this, this.handleTracksChange);
tracks.addEventListener('change', changeHandler);
this.on('處置', function() {
tracks.removeEventListener('change', changeHandler);
});
}
/**
* 處理文本軌道變化
*
* @param {EventTarget~Event} 事件
* 導致該函數運行的事件
*
* @listens TextTrackList#change
*/
handleTracksChange(事件){
const tracks = this.player().textTracks();
讓禁用=假;
// 檢查是否顯示了不同類型的曲目
for (let i = 0, l = tracks.length; i < l; i++) {
const track = tracks[i];
if (track.kind !== this.kind_ && track.mode === 'showing') {
禁用=真;
休息;
}
}
// 如果顯示另一個曲目,則禁用此菜單按鈕
如果(禁用){
這個。禁用();
}其他{
這個。啟用();
}
}
/**
* 構建默認的 DOM `className`。
*
* @return {字符串}
* 此對象的 DOM `className`。
*/
buildCSSClass() {
return `vjs-descriptions-button ${super.buildCSSClass()}`;
}
buildWrapperCSSClass() {
return `vjs-descriptions-button ${super.buildWrapperCSSClass()}`;
}
}
/**
* `kind` 的 TextTrack 來尋找它與這個菜單相關聯。
*
* @type {字符串}
* @私人的
*/
DescriptionsButton.prototype.kind_ = '描述';
/**
* 應顯示在 `DescriptionsButton` 控件上的文本。添加本地化。
*
* @type {字符串}
* @私人的
*/
DescriptionsButton.prototype.controlText_ = '描述';
Component.registerComponent('DescriptionsButton', DescriptionsButton);
導出默認 DescriptionsButton;