/**
 * @file 시간-tooltip.js
 */
'../../component'에서 컴포넌트 가져오기;
import * as Dom from '../../utils/dom.js';
import formatTime from '../../utils/format-time.js';
import * as Fn from '../../utils/fn.js';

/**
 * 시간 도구 설명은 진행률 표시줄 위에 시간을 표시합니다.
 *
 * @extends 컴포넌트
 */
클래스 TimeTooltip 확장 구성 요소 {

  /**
   * 이 클래스의 인스턴스를 만듭니다.
   *
   * @param {플레이어} 플레이어
   * 이 클래스가 연결되어야 하는 {@link Player}입니다.
   *
   * @param {객체} [옵션]
   * 플레이어 옵션의 키/값 저장소.
   */
  생성자(플레이어, 옵션) {
    super(플레이어, 옵션);
    this.update = Fn.throttle(Fn.bind(this, this.update), Fn.UPDATE_REFRESH_INTERVAL);
  }

  /**
   * 시간 툴팁 DOM 요소 생성
   *
   * @return {요소}
   * 생성된 요소입니다.
   */
  createEl() {
    return super.createEl('div', {
      className: 'vjs-time-tooltip'
    }, {
      'aria-hidden': '참'
    });
  }

  /**
   * 'SeekBar'를 기준으로 시간 도구 설명의 위치를 업데이트합니다.
   *
   * @param {객체} seekBarRect
   * {@link SeekBar} 요소에 대한 `ClientRect`.
   *
   * @param {숫자} 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에 있지 않은 경우
    if (!playerRect || !tooltipRect) {
      반품;
    }

    // 이것은 경계 내에서 사용 가능한 `seekBarPoint`의 왼쪽 공간입니다.
    // 플레이어의 . 플레이어의 왼쪽 가장자리 사이의 간격을 계산합니다.
    // 및 `SeekBar`의 왼쪽 가장자리에 픽셀 수를 더합니다.
    // `seekBarPoint`를 누르기 전에 `SeekBar`
    const spaceLeftOfPoint = (seekBarRect.left - playerRect.left) + seekBarPointPx;

    // 범위 내에서 사용할 수 있는 `seekBarPoint`의 오른쪽 공간입니다.
    // 플레이어의 . `seekBarPoint`에서 픽셀 수를 계산합니다.
    // `SeekBar`의 오른쪽 가장자리에 추가하고
    // `SeekBar`와 플레이어의 오른쪽 가장자리.
    const spaceRightOfPoint = (seekBarRect.width - seekBarPointPx) +
      (playerRect.right - seekBarRect.right);

    // 툴팁을 당겨야 하는 픽셀 수입니다.
    // 오른쪽으로 더 이동하여 `seekBarPoint` 위에 중앙에 배치합니다.
    let pullTooltipBy = tooltipRect.width / 2;

    // `pullTooltipBy` 거리를 왼쪽 또는 오른쪽으로 조정합니다.
    // 위의 공간 계산 결과.
    if (spaceLeftOfPoint < pullTooltipBy) {
      pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
    } 그렇지 않으면 (spaceRightOfPoint < pullTooltipBy) {
      pullTooltipBy = spaceRightOfPoint;
    }

    // 십진수/비율 기반 계산의 부정확성 및 다양한
    // 반올림 동작, 간격 조정이 해제된 경우가 있음
    // 1픽셀 또는 2픽셀씩. 이것은 이러한 계산에 보험을 추가합니다.
    if (pullTooltipBy < 0) {
      pullTooltipBy = 0;
    } 그렇지 않으면 (pullTooltipBy > tooltipRect.width) {
      pullTooltipBy = tooltipRect.width;
    }

    // 0.4px 이내의 작은 너비 변동을 방지합니다.
    // 아래 값을 변경합니다.
    // 이것은 라이브가 플레이를 방지하는 데 정말 도움이 됩니다.
    // 지터링으로 인한 진행 시간 툴팁
    pullTooltipBy = Math.round(pullTooltipBy);

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

  /**
   * 툴팁 DOM 요소에 시간을 씁니다.
   *
   * @param {문자열} 내용
   * 툴팁의 형식화된 시간입니다.
   */
  쓰기(내용) {
    Dom.textContent(this.el_, 내용);
  }

  /**
   * 'SeekBar'를 기준으로 시간 도구 설명의 위치를 업데이트합니다.
   *
   * @param {객체} seekBarRect
   * {@link SeekBar} 요소에 대한 `ClientRect`.
   *
   * @param {숫자} seekBarPoint
   * 수평 기준점을 나타내는 0에서 1 사이의 숫자
   * {@link SeekBar}의 왼쪽 가장자리에서
   *
   * @param {숫자} 시간
   * 라이브 재생시 사용하지 않는 툴팁 업데이트 시간
   *
   * @param {함수} cb
   * 요청 애니메이션 프레임 동안 호출되는 함수
   * 기본에서 추가 애니메이션을 수행해야 하는 툴팁용
   */
  updateTime(seekBarRect, seekBarPoint, 시간, cb) {
    this.requestNamedAnimationFrame('TimeTooltip#updateTime', () => {
      내용을 보자;
      지속 시간 = this.player_.duration();

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

        내용 = (secondsBehind < 1 ? '' : '-') + formatTime(secondsBehind, liveWindow);
      } else {
        내용 = formatTime(시간, 기간);
      }

      this.update(seekBarRect, seekBarPoint, content);
      경우 (cb) {
        cb();
      }
    });
  }
}

Component.registerComponent('TimeTooltip', TimeTooltip);
기본 TimeTooltip 내보내기;