/**
 * @file mouse-time-display.js
 */
'../../component.js'에서 컴포넌트 가져오기;
import * as Fn from '../../utils/fn.js';

import './time-tooltip';

/**
 * {@link MouseTimeDisplay} 구성 요소는 마우스 움직임을 추적합니다.
 * {@link ProgressControl}. 표시기와 {@link TimeTooltip}을 표시합니다.
 * 주어진 지점에 의해 표현되는 시간을 나타냅니다.
 * {@link ProgressControl}.
 *
 * @extends 컴포넌트
 */
클래스 MouseTimeDisplay 확장 구성 요소 {

  /**
   * 이 클래스의 인스턴스를 만듭니다.
   *
   * @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-마우스-디스플레이'
    });
  }

  /**
   * 자신의 DOM뿐만 아니라 자신의 DOM에 대한 업데이트를 큐에 넣습니다.
   * {@link TimeTooltip} 자식.
   *
   * @param {객체} seekBarRect
   * {@link SeekBar} 요소에 대한 `ClientRect`.
   *
   * @param {숫자} seekBarPoint
   * 수평 기준점을 나타내는 0에서 1 사이의 숫자
   * {@link SeekBar}의 왼쪽 가장자리에서
   */
  업데이트(seekBarRect, seekBarPoint) {
    const 시간 = seekBarPoint * this.player_.duration();

    this.getChild('timeTooltip').updateTime(seekBarRect, seekBarPoint, 시간, () => {
      this.el_.style.left = `${seekBarRect.width * seekBarPoint}px`;
    });
  }
}

/**
 * `MouseTimeDisplay`의 기본 옵션
 *
 * @type {객체}
 * @사적인
 */
MouseTimeDisplay.prototype.options_ = {
  어린이들: [
    'timeTooltip'
  ]
};

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