/**
 * @file playback-rate-menu-button.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} 播放器
   * 此類應附加到的 `Player`。
   *
   * @param {對象} [選項]
   * 播放器選項的鍵/值存儲。
   */
  構造函數（播放器，選項）{
    超級（播放器，選項）；

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

    這個.updateVisibility();
    這個.updateLabel();

    this.on(player, 'loadstart', (e) => this.updateVisibility(e));
    this.on(player, 'ratechange', (e) => this.updateLabel(e));
    this.on(player, 'playbackrateschange', (e) => this.handlePlaybackRateschange(e));
  }

  /**
   * 創建 `Component` 的 DOM 元素
   *
   * @return {元素}
   * 創建的元素。
   */
  創建El() {
    const el = super.createEl();

    this.labelElId_ = 'vjs-playback-rate-value-label-' + this.id_;

    this.labelEl_ = Dom.createEl('div', {
      className: 'vjs-playback-rate-value',
      id: this.labelElId_,
      文字內容：'1x'
    }）；

    el.appendChild(this.labelEl_);

    返回 el;
  }

  處置（）{
    this.labelEl_ = null;

    super.dispose();
  }

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

  buildWrapperCSSClass() {
    返回`vjs-播放率${super.buildWrapperCSSClass()}`；
  }

  /**
   * 創建菜單項列表。具體到每個子類。
   *
   */
  創建項目（）{
    const rates = this.playbackRates();
    常量項 = [];

    對於（讓 i = rates.length - 1; i >= 0; i--）{
      items.push(new PlaybackRateMenuItem(this.player(), {rate: rates[i] + 'x'}));
    }

    退換貨品;
  }

  /**
   * 更新 ARIA 輔助功能屬性
   */
  更新 ARIAAttributes() {
    // 當前播放速率
    this.el().setAttribute('aria-valuenow', this.player().playbackRate());
  }

  /**
   * 當 `PlaybackRateMenuButton` 被“點擊”時調用。看
   * {@link ClickableComponent} 以獲取有關點擊的更多詳細信息。
   *
   * @param {EventTarget~Event} [事件]
   * 導致此功能被執行的 `keydown`、`tap` 或 `click` 事件
   * 打電話。
   *
   * @listens 水龍頭
   * @listens 點擊
   */
  handleClick（事件）{
    // 選擇下一個利率選項
    const currentRate = this.player().playbackRate();
    const rates = this.playbackRates();
    const currentIndex = rates.indexOf(currentRate);
    // 這將獲得下一個速率，如果當前選擇的是最後一個，它將選擇第一個
    const newIndex = (currentIndex + 1) % rates.length;

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

  /**
   * 在 playbackrateschange 上，更新菜單以說明新項目。
   *
   * @listens Player#playbackrateschange
   */
  handlePlaybackRateschange（事件）{
    這個.更新（）；
  }

  /**
   * 獲取可能的播放速率
   *
   * @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 {EventTarget~Event} [事件]
   * 導致此函數運行的事件。
   *
   * @listens Player#loadstart
   */
  更新可見性（事件）{
    如果（this.playbackRateSupported（））{
      this.removeClass('vjs-hidden');
    }其他{
      this.addClass('vjs-hidden');
    }
  }

  /**
   * 匯率變化時更新按鈕標籤
   *
   * @param {EventTarget~Event} [事件]
   * 導致此函數運行的事件。
   *
   * @listens Player#ratechange
   */
  更新標籤（事件）{
    如果（this.playbackRateSupported（））{
      this.labelEl_.textContent = this.player().playbackRate() + 'x';
    }
  }

}

/**
 * 應顯示在 `FullscreenToggle` 控件上的文本。添加本地化。
 *
 * @type {字符串}
 * @私人的
 */
PlaybackRateMenuButton.prototype.controlText_ = '播放速率';

Component.registerComponent('PlaybackRateMenuButton', PlaybackRateMenuButton);
導出默認 PlaybackRateMenuButton；