/**
 * @file time-tooltip.js
 */
從 '../../component' 導入組件；
import * as Dom from '../../utils/dom.js';
從 '../../utils/format-time.js' 導入格式時間；
從 '../../utils/fn.js' 導入 * 作為 Fn；

/**
 * 時間工具提示在進度條上方顯示時間。
 *
 * @extends 組件
 */
類 TimeTooltip 擴展組件 {

  /**
   * 創建此類的一個實例。
   *
   * @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-time-tooltip'
    }，{
      'aria-hidden': 'true'
    }）；
  }

  /**
   * 更新時間工具提示相對於 `SeekBar` 的位置。
   *
   * @param {Object} seekBarRect
   * {@link SeekBar} 元素的 `ClientRect`。
   *
   * @param {number} seekBarPoint
   * 0到1之間的數字，代表水平參考點
   * 從 {@link SeekBar} 的左邊緣
   */
  更新（seekBarRect，seekBarPoint，內容）{
    const tooltipRect = Dom.findPosition(this.el_);
    const playerRect = Dom.getBoundingClientRect(this.player_.el());
    const seekBarPointPx = seekBarRect.width * seekBarPoint;

    // 如果 rect 不可用則什麼都不做
    // 例如，如果播放器不在 DOM 中進行測試
    如果（！playerRect ||！tooltipRect）{
      返回;
    }

    // 這是邊界內可用的 `seekBarPoint` 左邊的空間
    // 玩家的。我們計算玩家左邊緣之間的任何間隙
    // 和 `SeekBar` 的左邊緣並添加像素數
    // `SeekBar` 在點擊 `seekBarPoint` 之前
    const spaceLeftOfPoint = (seekBarRect.left - playerRect.left) + seekBarPointPx;

    // 這是邊界內可用的 `seekBarPoint` 的空間右邊
    // 玩家的。我們從 `seekBarPoint` 計算像素數
    // 到 `SeekBar` 的右邊緣並添加到它之間的任何間隙
    // `SeekBar` 和播放器的右邊緣。
    const spaceRightOfPoint = (seekBarRect.width - seekBarPointPx) +
      (playerRect.right - seekBarRect.right);

    // 這是工具提示需要拉動的像素數
    // 更靠右，使其在 `seekBarPoint` 上居中。
    讓 pullTooltipBy = tooltipRect.width / 2;

    // 根據需要調整 `pullTooltipBy` 向左或向右的距離
    // 上面空間計算的結果。
    如果 (spaceLeftOfPoint < pullTooltipBy) {
      pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
    } else if (spaceRightOfPoint < pullTooltipBy) {
      pullTooltipBy = spaceRightOfPoint;
    }

    // 由於基於小數/比率的計算的不精確性和變化
    // 舍入行為，有些情況下間距調整關閉
    // 一兩個像素。這為這些計算增加了保險。
    如果（pullTooltipBy < 0）{
      pullTooltipBy = 0;
    } else if (pullTooltipBy > tooltipRect.width) {
      pullTooltipBy = tooltipRect.width;
    }

    // 防止0.4px以內的小寬度波動
    // 改變下面的值。
    // 這確實有助於防止播放
    // 抖動的進度時間工具提示
    pullTooltipBy = Math.round(pullTooltipBy);

    this.el_.style.right = `-${pullTooltipBy}px`;
    這個。寫（內容）；
  }

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

  /**
   * 更新時間工具提示相對於 `SeekBar` 的位置。
   *
   * @param {Object} seekBarRect
   * {@link SeekBar} 元素的 `ClientRect`。
   *
   * @param {number} seekBarPoint
   * 0到1之間的數字，代表水平參考點
   * 從 {@link SeekBar} 的左邊緣
   *
   * @param {number} 時間
   * tooltip 更新時間，直播時不使用
   *
   * @param {函數} cb
   * 將在請求動畫幀期間調用的函數
   * 對於需要在默認情況下執行額外動畫的工具提示
   */
  更新時間（seekBarRect，seekBarPoint，時間，cb）{
    this.requestNamedAnimationFrame('TimeTooltip#updateTime', () => {
      讓內容；
      const duration = this.player_.duration();

      如果 (this.player_.liveTracker && this.player_.liveTracker.isLive()) {
        const liveWindow = this.player_.liveTracker.liveWindow();
        const secondsBehind = liveWindow - (seekBarPoint * liveWindow);

        content = (secondsBehind < 1 ? '' : '-') + formatTime(secondsBehind, liveWindow);
      }其他{
        內容=格式時間（時間，持續時間）；
      }

      this.update(seekBarRect, seekBarPoint, content);
      如果（cb）{
        cb();
      }
    }）；
  }
}

Component.registerComponent('TimeTooltip', TimeTooltip);
導出默認時間工具提示；