/**
 * @file 음소거-토글.js
 */
'../버튼'에서 버튼 가져오기;
'../component'에서 컴포넌트 가져오기;
import * as Dom from '../utils/dom.js';
'./volume-control/check-mute-support'에서 checkMuteSupport 가져오기;
* '../utils/browser.js'에서 브라우저로 가져오기;

/**
 * 오디오를 음소거하기 위한 버튼 구성 요소입니다.
 *
 * @extends 버튼
 */
클래스 MuteToggle 확장 버튼 {

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

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

    this.on(플레이어, ['loadstart', 'volumechange'], (e) => this.update(e));
  }

  /**
   * 기본 DOM `className`을 빌드합니다.
   *
   * @return {문자열}
   * 이 개체의 DOM `className`입니다.
   */
  buildCSSClass() {
    `vjs-mute-control ${super.buildCSSClass()}` 반환;
  }

  /**
   * 이것은 `MuteToggle`이 "클릭"될 때 호출됩니다. 보다
   * {@link ClickableComponent}에서 클릭이 무엇인지 자세히 알아보세요.
   *
   * @param {이벤트대상~이벤트} [이벤트]
   * 이 함수를 실행하게 만든 `keydown`, `tap` 또는 `click` 이벤트
   * 라고 불리는.
   *
   * @listens 탭
   * @듣기 클릭
   */
  handleClick(이벤트) {
    const vol = this.player_.volume();
    const lastVolume = this.player_.lastVolume_();

    경우 (볼륨 === 0) {
      const volumeToSet = lastVolume < 0.1? 0.1 : 마지막 볼륨;

      this.player_.volume(volumeToSet);
      this.player_.muted(false);
    } else {
      this.player_.muted(this.player_.muted() ? false : true);
    }
  }

  /**
   * `볼륨` 및 `음소거` 상태에 따라 `MuteToggle` 버튼 업데이트
   * 플레이어에서.
   *
   * @param {이벤트대상~이벤트} [이벤트]
   * 이 함수가 호출된 경우 {@link Player#loadstart} 이벤트
   * 이벤트를 통해
   *
   * @listens Player#loadstart
   * @listens Player#volumechange
   */
  업데이트(이벤트) {
    this.updateIcon_();
    this.updateControlText_();
  }

  /**
   * 'MuteToggle' 아이콘의 모양을 업데이트합니다.
   *
   * 가능한 상태(아래에 주어진 `level` 변수):
   * - 0: 줄이 그어진
   * - 1: 볼륨 막대가 0임
   * - 2: 음량 바 1개
   * - 3: 볼륨 바 2개
   *
   * @사적인
   */
  updateIcon_() {
    const vol = this.player_.volume();
    레벨 = 3으로 하자;

    // 플레이어가 muted 속성으로 로드될 때 iOS에서
    // 기본 음소거 버튼으로 볼륨이 변경됩니다.
    // 음소거 상태가 업데이트되었는지 확인하고 싶습니다.
    경우 (브라우저.IS_IOS && this.player_.tech_ && this.player_.tech_.el_) {
      this.player_.muted(this.player_.tech_.el_.muted);
    }

    if (vol === 0 || this.player_.muted()) {
      레벨 = 0;
    } 그렇지 않으면 (권 < 0.33) {
      레벨 = 1;
    } 그렇지 않으면 (권 < 0.67) {
      레벨 = 2;
    }

    // TODO 음소거 아이콘 클래스 개선
    에 대한 (하자 i = 0; i < 4; i++) {
      Dom.removeClass(this.el_, `vjs-vol-${i}`);
    }
    Dom.addClass(this.el_, `vjs-vol-${level}`);
  }

  /**
   * 플레이어에서 `음소거됨`이 변경된 경우 제어 텍스트를 업데이트하십시오.
   * (`vjs-mute-control` 요소의 `title` 속성 및
   * `vjs-control-text` 요소).
   *
   * @사적인
   */
  updateControlText_() {
    const soundOff = this.player_.muted() || this.player_.volume() === 0;
    const 텍스트 = soundOff ? '음소거 해제': '무음';

    if (this.controlText() !== 텍스트) {
      this.controlText(텍스트);
    }
  }

}

/**
 * `MuteToggle` 컨트롤 위에 표시되어야 하는 텍스트입니다. 현지화를 위해 추가되었습니다.
 *
 * @유형 {문자열}
 * @사적인
 */
MuteToggle.prototype.controlText_ = '음소거';

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