/**
 * @文件音量控制.js
 */
從 '../../component.js' 導入組件；
從 './check-volume-support' 導入 checkVolumeSupport；
從 '../../utils/obj' 導入 {isPlain}；
從 '../../utils/fn.js' 導入 {throttle, bind, UPDATE_REFRESH_INTERVAL};

// 必需的孩子
導入'./volume-bar.js'；

/**
 * 音量控制組件
 *
 * @extends 組件
 */
類 VolumeControl 擴展組件 {

  /**
   * 創建此類的一個實例。
   *
   * @param {Player} 播放器
   * 此類應附加到的 `Player`。
   *
   * @param {對象} [選項={}]
   * 播放器選項的鍵/值存儲。
   */
  構造函數（播放器，選項= {}）{
    options.vertical = options.vertical ||錯誤的;

    // 將垂直選項向下傳遞給 VolumeBar 如果
    // 音量條打開。
    if (typeof options.volumeBar === 'undefined' || isPlain(options.volumeBar)) {
      options.volumeBar = options.volumeBar || {};
      options.volumeBar.vertical = options.vertical;
    }

    超級（播放器，選項）；

    // 如果缺少音量支持，則隱藏此控件
    檢查音量支持（這個，播放器）；

    this.throttledHandleMouseMove = throttle(bind(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
    this.handleMouseUpHandler_ = (e) => this.handleMouseUp(e);

    this.on('mousedown', (e) => this.handleMouseDown(e));
    this.on('touchstart', (e) => this.handleMouseDown(e));
    this.on('mousemove', (e) => this.handleMouseMove(e));

    // 當滑塊處於活動狀態時（鼠標已被按下並
    // 正在拖動）或處於焦點中我們不想隱藏 VolumeBar
    this.on(this.volumeBar, ['focus', 'slideractive'], () => {
      this.volumeBar.addClass('vjs-slider-active');
      this.addClass('vjs-slider-active');
      this.trigger('slideractive');
    }）；

    this.on(this.volumeBar, ['blur', 'sliderinactive'], () => {
      this.volumeBar.removeClass('vjs-slider-active');
      this.removeClass('vjs-slider-active');
      this.trigger('sliderinactive');
    }）；
  }

  /**
   * 創建 `Component` 的 DOM 元素
   *
   * @return {元素}
   * 創建的元素。
   */
  創建El() {
    讓 orientationClass = 'vjs-volume-horizontal';

    如果（this.options_.vertical）{
      orientationClass = 'vjs-volume-vertical';
    }

    返回 super.createEl('div', {
      類名：`vjs-volume-control vjs-control ${orientationClass}`
    }）；
  }

  /**
   * 處理 `VolumeControl` 上的 `mousedown` 或 `touchstart` 事件。
   *
   * @param {EventTarget~Event} 事件
   * 觸發此功能的 `mousedown` 或 `touchstart` 事件
   *
   * @listens mousedown
   * @listens touchstart
   */
  handleMouseDown（事件）{
    const doc = this.el_.ownerDocument;

    this.on(doc, 'mousemove', this.throttledHandleMouseMove);
    this.on(doc, 'touchmove', this.throttledHandleMouseMove);
    this.on(doc, 'mouseup', this.handleMouseUpHandler_);
    this.on(doc, 'touchend', this.handleMouseUpHandler_);
  }

  /**
   * 處理 `VolumeControl` 上的 `mouseup` 或 `touchend` 事件。
   *
   * @param {EventTarget~Event} 事件
   * 觸發此功能的 `mouseup` 或 `touchend` 事件。
   *
   * @listens touchend
   * @listens mouseup
   */
  handleMouseUp（事件）{
    const doc = this.el_.ownerDocument;

    this.off(doc, 'mousemove', this.throttledHandleMouseMove);
    this.off(doc, 'touchmove', this.throttledHandleMouseMove);
    this.off(doc, 'mouseup', this.handleMouseUpHandler_);
    this.off(doc, 'touchend', this.handleMouseUpHandler_);
  }

  /**
   * 處理 `VolumeControl` 上的 `mousedown` 或 `touchstart` 事件。
   *
   * @param {EventTarget~Event} 事件
   * 觸發此功能的 `mousedown` 或 `touchstart` 事件
   *
   * @listens mousedown
   * @listens touchstart
   */
  handleMouseMove（事件）{
    this.volumeBar.handleMouseMove（事件）；
  }
}

/**
 * `VolumeControl` 的默認選項
 *
 * @type {對象}
 * @私人的
 */
VolumeControl.prototype.options_ = {
  孩子們： [
    '音量條'
  ]
};

Component.registerComponent('VolumeControl', VolumeControl);
導出默認音量控制；