/**
 * @file 章節-button.js
 */
從 './text-track-button.js' 導入 TextTrackButton；
從 '../../component.js' 導入組件；
從“./chapters-track-menu-item.js”導入 ChaptersTrackMenuItem；
從 '../../utils/string-cases.js' 導入 {toTitleCase}；

/**
 * 用於切換和選擇章節的按鈕組件
 * 章節的行為與其他文本軌道大不相同
 * 線索是導航與其他替代語言的曲目
 *
 * @extends 文本跟踪按鈕
 */
類 ChaptersButton 擴展 TextTrackButton {

  /**
   * 創建此類的一個實例。
   *
   * @param {Player} 播放器
   * 此類應附加到的 `Player`。
   *
   * @param {對象} [選項]
   * 播放器選項的鍵/值存儲。
   *
   * @param {Component~ReadyCallback} [就緒]
   * 函數就緒時調用的函數。
   */
  構造函數（播放器，選項，準備就緒）{
    超級（播放器，選項，準備就緒）；

    this.selectCurrentItem_ = () => {
      this.items.forEach(item => {
        item.selected(this.track_.activeCues[0] === item.cue);
      }）；
    };
  }

  /**
   * 構建默認的 DOM `className`。
   *
   * @return {字符串}
   * 此對象的 DOM `className`。
   */
  buildCSSClass() {
    返回`vjs-chapters-button ${super.buildCSSClass()}`；
  }

  buildWrapperCSSClass() {
    返回`vjs-chapters-button ${super.buildWrapperCSSClass()}`;
  }

  /**
   * 根據項目的當前狀態更新菜單。
   *
   * @param {EventTarget~Event} [事件]
   * 觸發此函數運行的事件。
   *
   * @listens TextTrackList#addtrack
   * @listens TextTrackList#removetrack
   * @listens TextTrackList#change
   */
  更新（事件）{
    if (event && event.track && event.track.kind !== 'chapters') {
      返回;
    }

    const track = this.findChaptersTrack();

    如果（跟踪！== this.track_）{
      this.setTrack(track);
      超級更新（）；
    } else if (!this.items || (track && track.cues && track.cues.length !== this.items.length)) {
      // 最初更新菜單，或者如果設置後提示的數量發生變化
      超級更新（）；
    }
  }

  /**
   * 為章節按鈕設置當前選擇的曲目。
   *
   * @param {TextTrack} 軌道
   * 要選擇的新曲目。如果這是當前選擇的，則不會發生任何變化
   * 追踪。
   */
  設置軌道（軌道）{
    如果（this.track_ === track）{
      返回;
    }

    如果（！this.updateHandler_）{
      this.updateHandler_ = this.update.bind(this);
    }

    // 這裡的 this.track_ 指的是舊的軌道實例
    如果（this.track_）{
      const remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_);

      如果 (remoteTextTrackEl) {
        remoteTextTrackEl.removeEventListener('load', this.updateHandler_);
      }

      this.track_.removeEventListener('cuechange', this.selectCurrentItem_);

      this.track_ = null;
    }

    this.track_ = 軌道；

    // 這裡this.track_指的是新的track實例
    如果（this.track_）{
      this.track_.mode = '隱藏';

      const remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_);

      如果 (remoteTextTrackEl) {
        remoteTextTrackEl.addEventListener('load', this.updateHandler_);
      }

      this.track_.addEventListener('cuechange', this.selectCurrentItem_);
    }
  }

  /**
   * 找到當前被這個 ChaptersButton 使用的軌道對象
   *
   * @return {TextTrack|undefined}
   * 當前曲目或未定義，如果未找到。
   */
  findChaptersTrack() {
    const tracks = this.player_.textTracks() || [];

    對於（讓 i = tracks.length - 1; i >= 0; i--）{
      // 我們將始終選擇最後一首曲目作為我們的章節曲目
      const track = tracks[i];

      如果（track.kind === this.kind_）{
        返回軌道；
      }
    }
  }

  /**
   * 根據曲目標籤獲取 ChaptersButton 的標題。這也將
   * 如果標籤不存在，則使用當前曲目本地化類型作為後備。
   *
   * @return {字符串}
   * 曲目當前標籤或本地化的曲目種類。
   */
  getMenuCaption() {
    如果（this.track_ && this.track_.label）{
      返回 this.track_.label；
    }
    返回 this.localize(toTitleCase(this.kind_));
  }

  /**
   * 從章節軌道創建菜單
   *
   * @return {菜單}
   * 章節按鈕的新菜單
   */
  創建菜單（）{
    this.options_.title = this.getMenuCaption();
    返回 super.createMenu();
  }

  /**
   * 為每個文本軌道創建一個菜單項
   *
   * @return {TextTrackMenuItem[]}
   * 菜單項數組
   */
  創建項目（）{
    常量項 = [];

    如果（！this.track_）{
      退換貨品;
    }

    const cues = this.track_.cues;

    如果（！提示）{
      退換貨品;
    }

    for (let i = 0, l = cues.length; i < l; i++) {
      const cue = 提示[i];
      const mi = new ChaptersTrackMenuItem(this.player_, { track: this.track_, cue });

      items.push(mi);
    }

    退換貨品;
  }

}

/**
 * `kind` 的 TextTrack 來尋找它與這個菜單相關聯。
 *
 * @type {字符串}
 * @私人的
 */
ChaptersButton.prototype.kind_ = '章節';

/**
 * 應顯示在 `ChaptersButton` 控件上的文本。添加本地化。
 *
 * @type {字符串}
 * @私人的
 */
ChaptersButton.prototype.controlText_ = '章節';

Component.registerComponent('ChaptersButton', ChaptersButton);
導出默認章節按鈕；