/**
 * @file mouse-volume-level-display.js
 */
從 '../../component.js' 導入組件；
從 '../../utils/fn.js' 導入 * 作為 Fn；

導入“./volume-level-tooltip”；

/**
 * {@link MouseVolumeLevelDisplay} 組件跟踪鼠標在
 * {@link 音量控制}。它顯示一個指示器和一個 {@link VolumeLevelTooltip}
 * 指示由給定點表示的音量級別
 * {@link 音量欄}。
 *
 * @extends 組件
 */
類 MouseVolumeLevelDisplay 擴展組件 {

  /**
   * 創建此類的一個實例。
   *
   * @param {Player} 播放器
   * 此類應附加到的 {@link Player}。
   *
   * @param {對象} [選項]
   * 播放器選項的鍵/值存儲。
   */
  構造函數（播放器，選項）{
    超級（播放器，選項）；
    this.update = Fn.throttle(Fn.bind(this, this.update), Fn.UPDATE_REFRESH_INTERVAL);
  }

  /**
   * 為這個類創建 DOM 元素。
   *
   * @return {元素}
   * 創建的元素。
   */
  創建El() {
    返回 super.createEl('div', {
      className: 'vjs-mouse-display'
    }）；
  }

  /**
   * 查詢更新自己的 DOM 以及它的 DOM
   * {@link VolumeLevelTooltip} 孩子。
   *
   * @param {Object} rangeBarRect
   * {@link VolumeBar} 元素的 `ClientRect`。
   *
   * @param {number} rangeBarPoint
   * 0到1之間的數字，代表水平/垂直參考點
   * 從 {@link VolumeBar} 的左邊緣
   *
   * @param {boolean} 垂直
   * 音量控制位置的裁判
   * 在控制欄中{@link VolumeControl}
   *
   */
  更新（rangeBarRect，rangeBarPoint，垂直）{
    const volume = 100 * rangeBarPoint;

    this.getChild('volumeLevelTooltip').updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, () => {
      如果（垂直）{
        this.el_.style.bottom = `${rangeBarRect.height * rangeBarPoint}px`;
      }其他{
        this.el_.style.left = `${rangeBarRect.width * rangeBarPoint}px`;
      }
    }）；
  }
}

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

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