/**
 * @file 재생 속도-메뉴-버튼.js
 */
'../../menu/menu-button.js'에서 MenuButton 가져오기;
'./playback-rate-menu-item.js'에서 PlaybackRateMenuItem 가져오기;
'../../component.js'에서 컴포넌트 가져오기;
import * as Dom from '../../utils/dom.js';

/**
 * 재생 속도를 제어하는 구성 요소입니다.
 *
 * @extends 메뉴버튼
 */
클래스 PlaybackRateMenuButton 확장 MenuButton {

  /**
   * 이 클래스의 인스턴스를 만듭니다.
   *
   * @param {플레이어} 플레이어
   * 이 클래스가 연결되어야 하는 `Player`.
   *
   * @param {객체} [옵션]
   * 플레이어 옵션의 키/값 저장소.
   */
  생성자(플레이어, 옵션) {
    super(플레이어, 옵션);

    this.menuButton_.el_.setAttribute('aria-describedby', this.labelElId_);

    this.updateVisibility();
    this.updateLabel();

    this.on(플레이어, '로드스타트', (e) => this.updateVisibility(e));
    this.on(플레이어, 'ratechange', (e) => this.updateLabel(e));
    this.on(player, 'playbackrateschange', (e) => this.handlePlaybackRateschange(e));
  }

  /**
   * `Component`의 DOM 요소 생성
   *
   * @return {요소}
   * 생성된 요소입니다.
   */
  createEl() {
    const el = super.createEl();

    this.labelElId_ = 'vjs-재생 속도-값-레이블-' + this.id_;

    this.labelEl_ = Dom.createEl('div', {
      className: 'vjs-재생 속도-값',
      id: this.labelElId_,
      텍스트 내용: '1x'
    });

    el.appendChild(this.labelEl_);

    반환 엘;
  }

  폐기() {
    this.labelEl_ = null;

    super.dispose();
  }

  /**
   * 기본 DOM `className`을 빌드합니다.
   *
   * @return {문자열}
   * 이 개체의 DOM `className`입니다.
   */
  buildCSSClass() {
    `vjs-playback-rate ${super.buildCSSClass()}` 반환;
  }

  buildWrapperCSSClass() {
    `vjs-playback-rate ${super.buildWrapperCSSClass()}` 반환;
  }

  /**
   * 메뉴 항목 목록을 만듭니다. 각 하위 클래스에 따라 다릅니다.
   *
   */
  createItems() {
    const rate = this.playbackRates();
    const 항목 = [];

    for (let i = rate.length - 1; i > = 0; 나--) {
      items.push(new PlaybackRateMenuItem(this.player(), {rate: rates[i] + 'x'}));
    }

    항목을 반환;
  }

  /**
   * ARIA 접근성 속성 업데이트
   */
  업데이트ARIAAttributes() {
    // 현재 재생 속도
    this.el().setAttribute('aria-valuenow', this.player().playbackRate());
  }

  /**
   * 이것은 `PlaybackRateMenuButton`이 "클릭"될 때 호출됩니다. 보다
   * {@link ClickableComponent}에서 클릭이 무엇인지 자세히 알아보세요.
   *
   * @param {이벤트대상~이벤트} [이벤트]
   * 이 함수를 실행하게 만든 `keydown`, `tap` 또는 `click` 이벤트
   * 라고 불리는.
   *
   * @listens 탭
   * @듣기 클릭
   */
  handleClick(이벤트) {
    // 다음 속도 옵션 선택
    const currentRate = this.player().playbackRate();
    const rate = this.playbackRates();
    const currentIndex = rate.indexOf(currentRate);
    // 이것은 다음 비율을 가져오고 현재 선택된 마지막 비율인 경우 첫 번째 비율을 선택합니다.
    const newIndex = (currentIndex + 1) % 비율.길이;

    this.player().playbackRate(rates[newIndex]);
  }

  /**
   * 재생률 변경 시 새 항목을 고려하여 메뉴를 업데이트합니다.
   *
   * @listens Player#playbackrateschange
   */
  handlePlaybackRateschange(이벤트) {
    this.update();
  }

  /**
   * 가능한 재생 속도 얻기
   *
   * @return {배열}
   * 가능한 모든 재생 속도
   */
  재생 속도() {
    const player = this.player();

    반환 (player.playbackRates && player.playbackRates()) || [];
  }

  /**
   * 기술에서 재생 속도를 지원하는지 확인
   * 재생 속도 배열이 존재합니다.
   *
   * @return {부울}
   * 재생 속도 변경 지원 여부
   */
  playbackRateSupported() {
    this.player().tech_를 반환합니다. &&
      this.player().tech_.featuresPlaybackRate &&
      this.playbackRates() &&
      this.playbackRates().length > 0
    ;
  }

  /**
   * 선택할 재생 속도 옵션이 없을 때 재생 속도 컨트롤 숨기기
   *
   * @param {이벤트대상~이벤트} [이벤트]
   * 이 기능을 실행하게 만든 이벤트.
   *
   * @listens Player#loadstart
   */
  업데이트 가시성(이벤트) {
    if (this.playbackRateSupported()) {
      this.removeClass('vjs-hidden');
    } else {
      this.addClass('vjs-hidden');
    }
  }

  /**
   * 속도가 변경되면 버튼 레이블 업데이트
   *
   * @param {이벤트대상~이벤트} [이벤트]
   * 이 기능을 실행하게 만든 이벤트.
   *
   * @listens Player#ratechange
   */
  updateLabel(이벤트) {
    if (this.playbackRateSupported()) {
      this.labelEl_.textContent = this.player().playbackRate() + 'x';
    }
  }

}

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

Component.registerComponent('PlaybackRateMenuButton', PlaybackRateMenuButton);
기본 PlaybackRateMenuButton 내보내기;