/**
 * @文件描述-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;