/**
 * @file 볼륨-bar.js
 */
'../../slider/slider.js'에서 슬라이더 가져오기;
'../../component.js'에서 컴포넌트 가져오기;
import * as Dom from '../../utils/dom.js';
'../../utils/clamp.js'에서 클램프 가져오기;
'../../utils/browser.js'에서 {IS_IOS, IS_ANDROID} 가져오기;

// 필수 자식
import './volume-level.js';
import './mouse-volume-level-display.js';

/**
 * 볼륨 레벨을 포함하고 레벨을 조정하기 위해 클릭할 수 있는 막대
 *
 * @extends 슬라이더
 */
클래스 VolumeBar 확장 슬라이더 {

  /**
   * 이 클래스의 인스턴스를 만듭니다.
   *
   * @param {플레이어} 플레이어
   * 이 클래스가 연결되어야 하는 `Player`.
   *
   * @param {객체} [옵션]
   * 플레이어 옵션의 키/값 저장소.
   */
  생성자(플레이어, 옵션) {
    super(플레이어, 옵션);
    this.on('슬라이더액티브', (e) => this.updateLastVolume_(e));
    this.on(플레이어, '볼륨 변경', (e) => this.updateARIAAttributes(e));
    플레이어.레디(() => this.updateARIAAttributes());
  }

  /**
   * `Component`의 DOM 요소 생성
   *
   * @return {요소}
   * 생성된 요소입니다.
   */
  createEl() {
    return super.createEl('div', {
      className: 'vjs-볼륨-바 vjs-슬라이더-바'
    }, {
      'aria-label': this.localize('볼륨 레벨'),
      'aria-live': '정중한'
    });
  }

  /**
   * 볼륨 바에서 마우스를 아래로 처리
   *
   * @param {EventTarget~Event} 이벤트
   * 이것을 실행하게 만든 `mousedown` 이벤트.
   *
   * @listens mousedown
   */
  handleMouseDown(이벤트) {
    if (!Dom.isSingleLeftClick(이벤트)) {
      반품;
    }

    super.handleMouseDown(event);
  }

  /**
   * {@link VolumeMenuButton}에서 이동 이벤트를 처리합니다.
   *
   * @param {EventTarget~Event} 이벤트
   * 이 기능을 실행하게 만든 이벤트.
   *
   * @listens mousemove
   */
  handleMouseMove(이벤트) {
    const mouseVolumeLevelDisplay = this.getChild('mouseVolumeLevelDisplay');

    if (mouseVolumeLevelDisplay) {
      const volumeBarEl = this.el();
      const volumeBarRect = Dom.getBoundingClientRect(volumeBarEl);
      const vertical = this.vertical();
      let volumeBarPoint = Dom.getPointerPosition(volumeBarEl, 이벤트);

      volumeBarPoint = 수직 ? 볼륨바포인트.y : 볼륨바포인트.x;
      // 기본 스킨은 `VolumeBar` 양쪽에 간격이 있습니다. 이것은 의미합니다
      // 경계 외부에서 이 동작을 트리거할 수 있습니다.
      // `볼륨바`. 이를 통해 우리는 항상 그 안에 머물 수 있습니다.
      volumeBarPoint = 클램프(volumeBarPoint, 0, 1);

      mouseVolumeLevelDisplay.update(volumeBarRect, volumeBarPoint, vertical);
    }

    if (!Dom.isSingleLeftClick(이벤트)) {
      반품;
    }

    this.checkMuted();
    this.player_.volume(this.calculateDistance(event));
  }

  /**
   * 플레이어가 음소거된 경우 음소거를 해제합니다.
   */
  체크음소거() {
    if (this.player_.muted()) {
      this.player_.muted(false);
    }
  }

  /**
   * 볼륨 수준의 백분율 얻기
   *
   * @return {숫자}
   * 10진수로 나타낸 볼륨 레벨 퍼센트.
   */
  getPercent() {
    if (this.player_.muted()) {
      0을 반환합니다.
    }
    return this.player_.volume();
  }

  /**
   * 키보드 사용자를 위한 볼륨 레벨 증가
   */
  앞으로 단계() {
    this.checkMuted();
    this.player_.volume(this.player_.volume() + 0.1);
  }

  /**
   * 키보드 사용자를 위한 음량 감소
   */
  스텝백() {
    this.checkMuted();
    this.player_.volume(this.player_.volume() - 0.1);
  }

  /**
   * ARIA 접근성 속성 업데이트
   *
   * @param {이벤트대상~이벤트} [이벤트]
   * 이 기능을 실행하게 만든 `volumechange` 이벤트.
   *
   * @listens Player#volumechange
   */
  업데이트ARIA속성(이벤트) {
    const ariaValue = this.player_.muted() ? 0 : this.volumeAsPercentage_();

    this.el_.setAttribute('aria-valuenow', ariaValue);
    this.el_.setAttribute('aria-valuetext', ariaValue + '%');
  }

  /**
   * 플레이어 볼륨의 현재 값을 백분율로 반환
   *
   * @사적인
   */
  volumeAsPercentage_() {
    return Math.round(this.player_.volume() * 100);
  }

  /**
   * 사용자가 VolumeBar를 끌기 시작하면 볼륨을 저장하고
   * 끌기 끝. 드래그가 종료되면 볼륨이 0으로 설정되어 있었다면,
   * lastVolume을 저장된 볼륨으로 설정합니다.
   *
   * @listens 슬라이더 활성
   * @사적인
   */
  updateLastVolume_() {
    const volumeBeforeDrag = this.player_.volume();

    this.one('sliderinactive', () => {
      if (this.player_.volume() === 0) {
        this.player_.lastVolume_(volumeBeforeDrag);
      }
    });
  }

}

/**
 * `VolumeBar`의 기본 옵션
 *
 * @type {객체}
 * @사적인
 */
VolumeBar.prototype.options_ = {
  어린이들: [
    '볼륨레벨'
  ],
  barName: '볼륨 레벨'
};

// MouseVolumeLevelDisplay 도구 설명은 모바일 장치의 플레이어에 추가하면 안 됩니다.
만약 (!IS_IOS && !IS_ANDROID) {
  VolumeBar.prototype.options_.children.splice(0, 0, 'mouseVolumeLevelDisplay');
}

/**
 * 플레이어에서 이 이벤트가 발생하면 이 슬라이더에 대한 업데이트 이벤트를 호출합니다.
 *
 * @유형 {문자열}
 */
VolumeBar.prototype.playerEvent = '볼륨 변경';

Component.registerComponent('볼륨바', 볼륨바);
기본 VolumeBar 내보내기;