/**
 * @file 장-버튼.js
 */
'./text-track-button.js'에서 TextTrackButton 가져오기;
'../../component.js'에서 컴포넌트 가져오기;
'./chapters-track-menu-item.js'에서 ChaptersTrackMenuItem 가져오기;
'../../utils/string-cases.js'에서 {toTitleCase} 가져오기;

/**
 * 챕터 전환 및 선택을 위한 버튼 구성 요소
 * 챕터는 다른 텍스트 트랙과 매우 다르게 작동합니다.
 * 단서는 내비게이션 대 대체 언어의 다른 트랙입니다.
 *
 * @extends TextTrackButton
 */
클래스 ChaptersButton은 TextTrackButton을 확장합니다 {

  /**
   * 이 클래스의 인스턴스를 만듭니다.
   *
   * @param {플레이어} 플레이어
   * 이 클래스가 연결되어야 하는 `Player`.
   *
   * @param {객체} [옵션]
   * 플레이어 옵션의 키/값 저장소.
   *
   * @param {Component~ReadyCallback} [준비]
   * 이 함수가 준비되었을 때 호출할 함수.
   */
  생성자(플레이어, 옵션, 준비) {
    super(플레이어, 옵션, 준비);

    this.selectCurrentItem_ = () => {
      this.items.forEach(항목 => {
        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 {이벤트대상~이벤트} [이벤트]
   * 이 기능을 실행하도록 트리거한 이벤트입니다.
   *
   * @listens TextTrackList#addtrack
   * @listens TextTrackList#removetrack
   * @listens TextTrackList#change
   */
  업데이트(이벤트) {
    만약 (이벤트 && 이벤트.트랙 && event.track.kind !== '챕터') {
      반품;
    }

    const track = this.findChaptersTrack();

    if (트랙 !== this.track_) {
      this.setTrack(트랙);
      슈퍼.업데이트();
    } 그렇지 않으면 (!this.items || (트랙 && 트랙.큐 && track.cues.length !== this.items.length)) {
      // 처음에 메뉴를 업데이트하거나 설정 이후 큐 수가 변경된 경우
      슈퍼.업데이트();
    }
  }

  /**
   * 챕터 버튼에 현재 선택된 트랙을 설정합니다.
   *
   * @param {TextTrack} 트랙
   * 선택할 새 트랙. 이것이 현재 선택된 경우 아무것도 변경되지 않습니다.
   * 길.
   */
  setTrack(트랙) {
    if (this.track_ === 트랙) {
      반품;
    }

    if (!this.updateHandler_) {
      this.updateHandler_ = this.update.bind(this);
    }

    // 여기서 this.track_은 이전 트랙 인스턴스를 나타냅니다.
    if (this.track_) {
      const remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(this.track_);

      if (remoteTextTrackEl) {
        remoteTextTrackEl.removeEventListener('로드', this.updateHandler_);
      }

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

      this.track_ = null;
    }

    this.track_ = 트랙;

    // 여기서 this.track_은 새 트랙 인스턴스를 나타냅니다.
    if (this.track_) {
      this.track_.mode = '숨김';

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

      if (remoteTextTrackEl) {
        remoteTextTrackEl.addEventListener('로드', this.updateHandler_);
      }

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

  /**
   * 이 ChaptersButton에서 현재 사용 중인 트랙 개체 찾기
   *
   * @return {TextTrack|정의되지 않음}
   * 현재 트랙 또는 찾지 못한 경우 정의되지 않음.
   */
  findChaptersTrack() {
    const 트랙 = this.player_.textTracks() || [];

    for (let i = 트랙 길이 - 1; i > = 0; 나--) {
      // 항상 마지막 트랙을 chaptersTrack으로 선택합니다.
      const 트랙 = 트랙[i];

      if (track.kind === this.kind_) {
        리턴 트랙;
      }
    }
  }

  /**
   * 트랙 레이블을 기반으로 ChaptersButton에 대한 캡션을 가져옵니다. 이것은 또한
   * 라벨이 존재하지 않는 경우 현재 트랙의 현지화된 종류를 대체 수단으로 사용합니다.
   *
   * @return {문자열}
   * 트랙의 현재 레이블 또는 현지화된 트랙 종류입니다.
   */
  getMenuCaption() {
    if (이.트랙_ && this.track_.label) {
      this.track_.label을 반환합니다.
    }
    return this.localize(toTitleCase(this.kind_));
  }

  /**
   * 챕터 트랙에서 메뉴 만들기
   *
   * @return {메뉴}
   * 챕터 버튼의 새로운 메뉴
   */
  createMenu() {
    this.options_.title = this.getMenuCaption();
    return super.createMenu();
  }

  /**
   * 각 텍스트 트랙에 대한 메뉴 항목 만들기
   *
   * @return {TextTrackMenuItem[]}
   * 메뉴 항목 배열
   */
  createItems() {
    const 항목 = [];

    if (!this.track_) {
      항목을 반환;
    }

    const 큐 = this.track_.cues;

    if (!cues) {
      항목을 반환;
    }

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

      items.push(mi);
    }

    항목을 반환;
  }

}

/**
 * 이 메뉴와 연결하기 위해 찾을 TextTrack의 `종류`.
 *
 * @유형 {문자열}
 * @사적인
 */
ChaptersButton.prototype.kind_ = '챕터';

/**
 * `ChaptersButton` 컨트롤 위에 표시되어야 하는 텍스트입니다. 현지화를 위해 추가되었습니다.
 *
 * @유형 {문자열}
 * @사적인
 */
ChaptersButton.prototype.controlText_ = '챕터';

Component.registerComponent('챕터버튼', 챕터버튼);
기본 ChaptersButton 내보내기;