/**
 * @file 볼륨 제어.js
 */
'../component.js'에서 컴포넌트 가져오기;
'../utils/obj'에서 {isPlain} 가져오기;
import * as Events from '../utils/events.js';
'키코드'에서 키코드 가져오기;
'글로벌/문서'에서 문서 가져오기;

// 필수 자식
import './volume-control/volume-control.js';
import './mute-toggle.js';

/**
 * MuteToggle 및 VolumeControl을 포함하는 구성 요소
 * 그들은 함께 일할 수 있습니다.
 *
 * @extends 컴포넌트
 */
클래스 VolumePanel 확장 구성 요소 {

  /**
   * 이 클래스의 인스턴스를 만듭니다.
   *
   * @param {플레이어} 플레이어
   * 이 클래스가 연결되어야 하는 `Player`.
   *
   * @param {객체} [옵션={}]
   * 플레이어 옵션의 키/값 저장소.
   */
  생성자(플레이어, 옵션 = {}) {
    if (typeof options.inline !== '정의되지 않음') {
      옵션.인라인 = 옵션.인라인;
    } else {
      options.inline = 참;
    }

    // 인라인 옵션을 수직으로 VolumeControl에 전달합니다.
    // VolumeControl이 켜져 있습니다.
    if (typeof options.volumeControl === '정의되지 않음' || isPlain(options.volumeControl)) {
      options.volumeControl = options.volumeControl || {};
      options.volumeControl.vertical = !options.inline;
    }

    super(플레이어, 옵션);

    // 이 핸들러는 아래의 마우스 핸들러 메소드에서 사용됩니다.
    this.handleKeyPressHandler_ = (e) => this.handleKeyPress(e);

    this.on(플레이어, ['loadstart'], (e) => this.volumePanelState_(e));
    this.on(this.muteToggle, '키업', (e) => this.handleKeyPress(e));
    this.on(this.volumeControl, 'keyup', (e) => this.handleVolumeControlKeyUp(e));
    this.on('키다운', (e) => this.handleKeyPress(e));
    this.on('마우스오버', (e) => this.handleMouseOver(e));
    this.on('마우스아웃', (e) => this.handleMouseOut(e));

    // 슬라이더가 활성화되어 있는 동안(마우스가 눌려 있고
    // 드래그 중) VolumeBar를 숨기고 싶지 않습니다.
    this.on(this.volumeControl, ['slideractive'], this.sliderActive_);

    this.on(this.volumeControl, ['sliderinactive'], this.sliderInactive_);
  }

  /**
   * VolumePanel에 vjs-slider-active 클래스 추가
   *
   * @listens VolumeControl#slideractive
   * @사적인
   */
  슬라이더활성_() {
    this.addClass('vjs-slider-active');
  }

  /**
   * VolumePanel에 대한 vjs-slider-active 클래스 제거
   *
   * @listens VolumeControl#sliderinactive
   * @사적인
   */
  슬라이더비활성_() {
    this.removeClass('vjs-slider-active');
  }

  /**
   * VolumePanel에 vjs-hidden 또는 vjs-mute-toggle-only 추가
   * MuteToggle 및 VolumeControl 상태에 따라 다름
   *
   * @listens Player#loadstart
   * @사적인
   */
  volumePanelState_() {
    // 볼륨 컨트롤 또는 음소거 토글이 아닌 경우 볼륨 패널 숨기기
    // 표시됩니다
    if (this.volumeControl.hasClass('vjs-hidden') && this.muteToggle.hasClass('vjs-hidden')) {
      this.addClass('vjs-hidden');
    }

    // 음소거 토글만 보이는 경우 원하지 않음
    // 마우스를 올리거나 활성 상태일 때 확장되는 볼륨 패널
    if (this.volumeControl.hasClass('vjs-hidden') && !this.muteToggle.hasClass('vjs-hidden')) {
      this.addClass('vjs-mute-toggle-only');
    }
  }

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

    if (!this.options_.inline) {
      orientationClass = 'vjs-볼륨-패널-수직';
    }

    return super.createEl('div', {
      className: `vjs-volume-panel vjs-control ${orientationClass}`
    });
  }

  /**
   * `volume-panel` 및 모든 자식 구성 요소를 폐기하십시오.
   */
  폐기() {
    this.handleMouseOut();
    super.dispose();
  }

  /**
   * `VolumeControl`에서 `keyup` 이벤트를 처리하고 닫히는 ESC를 찾습니다.
   * 볼륨 패널 및 'MuteToggle'에 포커스를 설정합니다.
   *
   * @param {EventTarget~Event} 이벤트
   * 이 함수를 호출한 `keyup` 이벤트.
   *
   * @listens 키업
   */
  handleVolumeControlKeyUp(이벤트) {
    if (keycode.isEventKey(event, 'Esc')) {
      this.muteToggle.focus();
    }
  }

  /**
   * `VolumePanel`이 `mouseover` 이벤트를 통해 호버링될 때 호출됩니다.
   * `mouseover` 이벤트 수신을 켭니다. 그들이 일어날 때
   * `this.handleMouseOver`를 호출합니다.
   *
   * @param {EventTarget~Event} 이벤트
   * 이 함수를 호출한 `mouseover` 이벤트.
   *
   * @listens 마우스 오버
   */
  handleMouseOver(이벤트) {
    this.addClass('vjs-hover');
    Events.on(문서, '키업', this.handleKeyPressHandler_);
  }

  /**
   * `VolumePanel`이 `mouseout` 이벤트를 통해 호버링될 때 호출됩니다.
   * `mouseout` 이벤트 수신을 켭니다. 그들이 일어날 때
   * `this.handleMouseOut`을 호출합니다.
   *
   * @param {EventTarget~Event} 이벤트
   * 이 함수를 호출하게 만든 `mouseout` 이벤트.
   *
   * @listens 마우스아웃
   */
  handleMouseOut(이벤트) {
    this.removeClass('vjs-hover');
    Events.off(문서, '키업', this.handleKeyPressHandler_);
  }

  /**
   * 문서의 `keyup` 이벤트 또는 `VolumePanel`의 `keydown` 이벤트 처리,
   * `VolumeControl`을 숨기는 ESC를 찾습니다.
   *
   * @param {EventTarget~Event} 이벤트
   * 이 이벤트를 트리거한 키 누르기.
   *
   * @listens 키다운 | 키업
   */
  handleKeyPress(이벤트) {
    if (keycode.isEventKey(event, 'Esc')) {
      this.handleMouseOut();
    }
  }
}

/**
 * `VolumeControl`의 기본 옵션
 *
 * @type {객체}
 * @사적인
 */
VolumePanel.prototype.options_ = {
  어린이들: [
    '음소거 전환',
    '볼륨 조절'
  ]
};

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