/**
 * @file 마우스 볼륨 레벨 디스플레이.js
 */
'../../component.js'에서 컴포넌트 가져오기;
import * as Fn from '../../utils/fn.js';

import './volume-level-tooltip';

/**
 * {@link MouseVolumeLevelDisplay} 구성 요소는 마우스 움직임을 추적합니다.
 * {@link VolumeControl}. 표시기와 {@link VolumeLevelTooltip}을 표시합니다.
 * 주어진 지점으로 표시되는 음량 수준을 나타냅니다.
 * {@link VolumeBar}.
 *
 * @extends 컴포넌트
 */
클래스 MouseVolumeLevelDisplay 확장 구성 요소 {

  /**
   * 이 클래스의 인스턴스를 만듭니다.
   *
   * @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 VolumeLevelTooltip} 자식.
   *
   * @param {객체} rangeBarRect
   * {@link VolumeBar} 요소에 대한 `ClientRect`.
   *
   * @param {숫자} rangeBarPoint
   * 가로/세로 기준점을 나타내는 0에서 1 사이의 숫자
   * {@link VolumeBar}의 왼쪽 가장자리에서
   *
   * @param {부울} 수직
   * 심판은 음량 조절 위치로
   * 컨트롤 바에서{@link VolumeControl}
   *
   */
  업데이트(rangeBarRect, rangeBarPoint, 수직) {
    const 볼륨 = 100 * rangeBarPoint;

    this.getChild('volumeLevelTooltip').updateVolume(rangeBarRect, rangeBarPoint, 수직, 볼륨, () => {
      if (수직) {
        this.el_.style.bottom = `${rangeBarRect.height * rangeBarPoint}px`;
      } else {
        this.el_.style.left = `${rangeBarRect.width * rangeBarPoint}px`;
      }
    });
  }
}

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

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