/**
 * @file 볼륨 레벨-tooltip.js
 */
'../../component'에서 컴포넌트 가져오기;
import * as Dom from '../../utils/dom.js';
import * as Fn from '../../utils/fn.js';

/**
 * 볼륨 수준 도구 설명은 볼륨 막대 위 또는 옆에 볼륨을 표시합니다.
 *
 * @extends 컴포넌트
 */
클래스 VolumeLevelTooltip 확장 구성 요소 {

  /**
   * 이 클래스의 인스턴스를 만듭니다.
   *
   * @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-볼륨-툴팁'
    }, {
      'aria-hidden': '참'
    });
  }

  /**
   * `VolumeBar`를 기준으로 툴팁의 위치를 업데이트하고
   * 내용 텍스트.
   *
   * @param {객체} rangeBarRect
   * {@link VolumeBar} 요소에 대한 `ClientRect`.
   *
   * @param {숫자} rangeBarPoint
   * 가로/세로 기준점을 나타내는 0에서 1 사이의 숫자
   * {@link VolumeBar}의 왼쪽 가장자리에서
   *
   * @param {부울} 수직
   * 심판은 음량 조절 위치로
   * 컨트롤 바에서{@link VolumeControl}
   *
   */
  업데이트(rangeBarRect, rangeBarPoint, 수직, 콘텐츠) {
    if (!수직) {
      const tooltipRect = Dom.getBoundingClientRect(this.el_);
      const playerRect = Dom.getBoundingClientRect(this.player_.el());
      const volumeBarPointPx = rangeBarRect.width * rangeBarPoint;

      if (!playerRect || !tooltipRect) {
        반품;
      }

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

      if (spaceLeftOfPoint < pullTooltipBy) {
        pullTooltipBy += pullTooltipBy - spaceLeftOfPoint;
      } 그렇지 않으면 (spaceRightOfPoint < pullTooltipBy) {
        pullTooltipBy = spaceRightOfPoint;
      }

      if (pullTooltipBy < 0) {
        pullTooltipBy = 0;
      } 그렇지 않으면 (pullTooltipBy > tooltipRect.width) {
        pullTooltipBy = tooltipRect.width;
      }

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

  /**
   * 툴팁 DOM 요소에 볼륨을 씁니다.
   *
   * @param {문자열} 내용
   * 도구 설명에 대한 형식이 지정된 볼륨입니다.
   */
  쓰기(내용) {
    Dom.textContent(this.el_, 내용);
  }

  /**
   * `VolumeBar`를 기준으로 볼륨 툴팁의 위치를 업데이트합니다.
   *
   * @param {객체} rangeBarRect
   * {@link VolumeBar} 요소에 대한 `ClientRect`.
   *
   * @param {숫자} rangeBarPoint
   * 가로/세로 기준점을 나타내는 0에서 1 사이의 숫자
   * {@link VolumeBar}의 왼쪽 가장자리에서
   *
   * @param {부울} 수직
   * 심판은 음량 조절 위치로
   * 컨트롤 바에서{@link VolumeControl}
   *
   * @param {숫자} 볼륨
   * 툴팁을 업데이트할 볼륨 레벨
   *
   * @param {함수} cb
   * 요청 애니메이션 프레임 동안 호출되는 함수
   * 기본에서 추가 애니메이션을 수행해야 하는 툴팁용
   */
  updateVolume(rangeBarRect, rangeBarPoint, 수직, 볼륨, cb) {
    this.requestNamedAnimationFrame('VolumeLevelTooltip#updateVolume', () => {
      this.update(rangeBarRect, rangeBarPoint, 수직, 볼륨.toFixed(0));
      경우 (cb) {
        cb();
      }
    });
  }
}

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