/**
 * @file 볼륨 제어.js
 */
'../../component.js'에서 컴포넌트 가져오기;
'./check-volume-support'에서 checkVolumeSupport 가져오기;
'../../utils/obj'에서 {isPlain} 가져오기;
import {throttle, bind, UPDATE_REFRESH_INTERVAL} from '../../utils/fn.js';

// 필수 자식
import './volume-bar.js';

/**
 * 음량 조절을 위한 구성 요소
 *
 * @extends 컴포넌트
 */
클래스 VolumeControl 확장 구성 요소 {

  /**
   * 이 클래스의 인스턴스를 만듭니다.
   *
   * @param {플레이어} 플레이어
   * 이 클래스가 연결되어야 하는 `Player`.
   *
   * @param {객체} [옵션={}]
   * 플레이어 옵션의 키/값 저장소.
   */
  생성자(플레이어, 옵션 = {}) {
    options.vertical = 옵션.수직 || 거짓;

    // 수직 옵션을 VolumeBar 아래로 전달 if
    // VolumeBar가 켜져 있습니다.
    if (typeof options.volumeBar === '정의되지 않음' || isPlain(options.volumeBar)) {
      options.volumeBar = options.volumeBar || {};
      options.volumeBar.vertical = 옵션.수직;
    }

    super(플레이어, 옵션);

    // 볼륨 지원이 없으면 이 컨트롤을 숨깁니다.
    checkVolumeSupport(this, 플레이어);

    this.throttledHandleMouseMove = throttle(bind(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
    this.handleMouseUpHandler_ = (e) => this.handleMouseUp(e);

    this.on('마우스다운', (e) => this.handleMouseDown(e));
    this.on('터치스타트', (e) => this.handleMouseDown(e));
    this.on('마우스무브', (e) => this.handleMouseMove(e));

    // 슬라이더가 활성화되어 있는 동안(마우스가 눌려 있고
    // 드래그 중) 또는 포커스가 있는 경우 VolumeBar를 숨기고 싶지 않습니다.
    this.on(this.volumeBar, ['focus', 'slideractive'], () => {
      this.volumeBar.addClass('vjs-slider-active');
      this.addClass('vjs-slider-active');
      this.trigger('slideractive');
    });

    this.on(this.volumeBar, ['blur', 'sliderinactive'], () => {
      this.volumeBar.removeClass('vjs-slider-active');
      this.removeClass('vjs-slider-active');
      this.trigger('sliderinactive');
    });
  }

  /**
   * `Component`의 DOM 요소 생성
   *
   * @return {요소}
   * 생성된 요소입니다.
   */
  createEl() {
    let orientationClass = 'vjs-볼륨-수평';

    if (this.options_.vertical) {
      orientationClass = 'vjs-볼륨-수직';
    }

    return super.createEl('div', {
      className: `vjs-볼륨-컨트롤 vjs-컨트롤 ${orientationClass}`
    });
  }

  /**
   * `VolumeControl`에서 `mousedown` 또는 `touchstart` 이벤트를 처리합니다.
   *
   * @param {EventTarget~Event} 이벤트
   * 이 기능을 트리거한 `mousedown` 또는 `touchstart` 이벤트
   *
   * @listens mousedown
   * @listens 터치스타트
   */
  handleMouseDown(이벤트) {
    const doc = this.el_.ownerDocument;

    this.on(doc, 'mousemove', this.throttledHandleMouseMove);
    this.on(doc, 'touchmove', this.throttledHandleMouseMove);
    this.on(doc, 'mouseup', this.handleMouseUpHandler_);
    this.on(doc, 'touchend', this.handleMouseUpHandler_);
  }

  /**
   * `VolumeControl`에서 `mouseup` 또는 `touchend` 이벤트를 처리합니다.
   *
   * @param {EventTarget~Event} 이벤트
   * 이 기능을 트리거한 `mouseup` 또는 `touchend` 이벤트.
   *
   * @listens 터치엔드
   * @listens mouseup
   */
  handleMouseUp(이벤트) {
    const doc = this.el_.ownerDocument;

    this.off(doc, 'mousemove', this.throttledHandleMouseMove);
    this.off(doc, 'touchmove', this.throttledHandleMouseMove);
    this.off(doc, 'mouseup', this.handleMouseUpHandler_);
    this.off(doc, 'touchend', this.handleMouseUpHandler_);
  }

  /**
   * `VolumeControl`에서 `mousedown` 또는 `touchstart` 이벤트를 처리합니다.
   *
   * @param {EventTarget~Event} 이벤트
   * 이 기능을 트리거한 `mousedown` 또는 `touchstart` 이벤트
   *
   * @listens mousedown
   * @listens 터치스타트
   */
  handleMouseMove(이벤트) {
    this.volumeBar.handleMouseMove(이벤트);
  }
}

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

Component.registerComponent('볼륨컨트롤', 볼륨컨트롤);
기본 VolumeControl 내보내기;