/**
 * @file volume-level-tooltip.js
 */
從 '../../component' 導入組件；
import * as Dom from '../../utils/dom.js';
從 '../../utils/fn.js' 導入 * 作為 Fn；

/**
 * 音量級別工具提示在音量條上方或併排顯示音量。
 *
 * @extends 組件
 */
類 VolumeLevelTooltip 擴展組件 {

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

  /**
   * 創建體積工具提示 DOM 元素
   *
   * @return {元素}
   * 創建的元素。
   */
  創建El() {
    返回 super.createEl('div', {
      類名：'vjs-volume-tooltip'
    }，{
      'aria-hidden': 'true'
    }）；
  }

  /**
   * 更新工具提示相對於 `VolumeBar` 的位置和
   * 其內容文本。
   *
   * @param {Object} rangeBarRect
   * {@link VolumeBar} 元素的 `ClientRect`。
   *
   * @param {number} rangeBarPoint
   * 0到1之間的數字，代表水平/垂直參考點
   * 從 {@link VolumeBar} 的左邊緣
   *
   * @param {boolean} 垂直
   * 音量控制位置的裁判
   * 在控制欄中{@link VolumeControl}
   *
   */
  更新（rangeBarRect，rangeBarPoint，垂直，內容）{
    如果（！垂直）{
      const tooltipRect = Dom.getBoundingClientRect(this.el_);
      const playerRect = Dom.getBoundingClientRect(this.player_.el());
      const volumeBarPointPx = rangeBarRect.width * rangeBarPoint;

      如果（！playerRect ||！tooltipRect）{
        返回;
      }

      const spaceLeftOfPoint = (rangeBarRect.left - playerRect.left) + volumeBarPointPx;
      常量 spaceRightOfPoint = (rangeBarRect.width - volumeBarPointPx) +
        (playerRect.right - rangeBarRect.right);
      讓 pullTooltipBy = tooltipRect.width / 2;

      if (spaceLeftOfPoint < pullTooltipBy) {
        pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
      } else if (spaceRightOfPoint < pullTooltipBy) {
        pullTooltipBy = spaceRightOfPoint;
      }

      if (pullTooltipBy < 0) {
        pullTooltipBy = 0;
      } else if (pullTooltipBy > tooltipRect.width) {
        pullTooltipBy = tooltipRect.width;
      }

      this.el_.style.right = `-${pullTooltipBy}px`;
    }
    this.write(`${content}%`);
  }

  /**
   * 將音量寫入工具提示 DOM 元素。
   *
   * @param {string} 內容
   * 工具提示的格式化體積。
   */
  寫（內容）{
    Dom.textContent(this.el_, content);
  }

  /**
   * 更新音量工具提示相對於 `VolumeBar` 的位置。
   *
   * @param {Object} rangeBarRect
   * {@link VolumeBar} 元素的 `ClientRect`。
   *
   * @param {number} rangeBarPoint
   * 0到1之間的數字，代表水平/垂直參考點
   * 從 {@link VolumeBar} 的左邊緣
   *
   * @param {boolean} 垂直
   * 音量控制位置的裁判
   * 在控制欄中{@link VolumeControl}
   *
   * @param {number} 音量
   * 將工具提示更新到的音量級別
   *
   * @param {函數} cb
   * 將在請求動畫幀期間調用的函數
   * 對於需要在默認情況下執行額外動畫的工具提示
   */
  updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, cb) {
    this.requestNamedAnimationFrame('VolumeLevelTooltip#updateVolume', () => {
      this.update(rangeBarRect, rangeBarPoint, vertical, volume.toFixed(0));
      如果（cb）{
        cb();
      }
    }）；
  }
}

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