/**
 * @file 라이브-디스플레이.js
 */
'../component'에서 컴포넌트 가져오기;
import * as Dom from '../utils/dom.js';
'글로벌/문서'에서 문서 가져오기;

// TODO - Future를 클릭하여 실시간으로 스냅합니다.

/**
 * 기간이 무한대일 때 라이브 표시기를 표시합니다.
 *
 * @extends 컴포넌트
 */
클래스 LiveDisplay 확장 구성 요소 {

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

    this.updateShowing();
    this.on(this.player(), 'durationchange', (e) => this.updateShowing(e));
  }

  /**
   * `Component`의 DOM 요소 생성
   *
   * @return {요소}
   * 생성된 요소입니다.
   */
  createEl() {
    const el = super.createEl('div', {
      className: 'vjs-라이브-컨트롤 vjs-컨트롤'
    });

    this.contentEl_ = Dom.createEl('div', {
      className: 'vjs-라이브-디스플레이'
    }, {
      'aria-live': '끄기'
    });

    this.contentEl_.appendChild(Dom.createEl('span', {
      className: 'vjs-control-text',
      textContent: `${this.localize('스트림 유형')}\u00a0`
    }));
    this.contentEl_.appendChild(document.createTextNode(this.localize('LIVE')));

    el.appendChild(this.contentEl_);
    반환 엘;
  }

  폐기() {
    this.contentEl_ = null;

    super.dispose();
  }

  /**
   * LiveDisplay가 표시되어야 하는지 여부를 확인하려면 기간을 확인하십시오. 그런 다음 표시/숨기기
   * 그에 따라
   *
   * @param {이벤트대상~이벤트} [이벤트]
   * 이 기능을 실행하게 만든 {@link Player#durationchange} 이벤트.
   *
   * @listens Player#durationchange
   */
  업데이트표시(이벤트) {
    if (this.player().duration() === Infinity) {
      this.show();
    } else {
      this.hide();
    }
  }

}

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