/**
 * @file 시간-디스플레이.js
 */
'글로벌/문서'에서 문서 가져오기;
'../../component.js'에서 컴포넌트 가져오기;
import * as Dom from '../../utils/dom.js';
import formatTime from '../../utils/format-time.js';
'../../utils/log.js'에서 로그 가져오기;

/**
 * 비디오에 대한 시간 정보를 표시합니다.
 *
 * @extends 컴포넌트
 */
클래스 TimeDisplay 확장 구성 요소 {

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

    this.on(플레이어, ['timeupdate', 'ended'], (e) => this.updateContent(e));
    this.updateTextNode_();
  }

  /**
   * `Component`의 DOM 요소 생성
   *
   * @return {요소}
   * 생성된 요소입니다.
   */
  createEl() {
    const className = this.buildCSSClass();
    const el = super.createEl('div', {
      className: `${className} vjs-time-control vjs-control`
    });
    const span = Dom.createEl('스팬', {
      className: 'vjs-control-text',
      textContent: `${this.localize(this.labelText_)}\u00a0`
    }, {
      역할: '발표'
    });

    el.appendChild(스팬);

    this.contentEl_ = Dom.createEl('스팬', {
      클래스 이름: `${className}-display`
    }, {
      // 시간이 변경될 때 자동으로 시간을 읽지 않도록 화면 판독기에 지시합니다.
      'aria-live': '끄기',
      // span 요소에는 암시적 역할이 없지만 일부 스크린 리더(특히 VoiceOver)
      // 화살표 키를 사용할 때 DOM의 항목 사이의 중단으로 처리합니다.
      // (또는 iOS에서는 왼쪽에서 오른쪽으로 스와이프) 페이지의 콘텐츠를 읽습니다. 사용
      // role='presentation'은 VoiceOver가 이 범위를 중단으로 처리하지 않도록 합니다.
      '역할': '발표'
    });

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

  폐기() {
    this.contentEl_ = null;
    this.textNode_ = null;

    super.dispose();
  }

  /**
   * 시간 표시 텍스트 노드를 새로운 시간으로 업데이트
   *
   * @param {number} [time=0] 업데이트할 시간
   *
   * @사적인
   */
  updateTextNode_(시간 = 0) {
    시간 = 형식시간(시간);

    if (this.formattedTime_ === 시간) {
      반품;
    }

    this.formattedTime_ = 시간;

    this.requestNamedAnimationFrame('TimeDisplay#updateTextNode_', () => {
      if (!this.contentEl_) {
        반품;
      }

      let oldNode = this.textNode_;

      if (oldNode && this.contentEl_.firstChild !== oldNode) {
        oldNode = null;

        log.warn('TimeDisplay#updateTextnode_: 더 이상 이 노드의 자식이 아니므로 텍스트 노드 요소의 교체가 금지되었습니다. 대신 새 노드를 추가합니다.');
      }

      this.textNode_ = document.createTextNode(this.formattedTime_);

      if (!this.textNode_) {
        반품;
      }

      if(올드노드) {
        this.contentEl_.replaceChild(this.textNode_, oldNode);
      } else {
        this.contentEl_.appendChild(this.textNode_);
      }
    });
  }

  /**
   * 자식 클래스에서 작성하려면 표시된 시간을 업데이트해야 합니다.
   * 현재 시간이 변경된 사실에 따라.
   *
   * @param {이벤트대상~이벤트} [이벤트]
   * 이것을 실행하게 만든 `timeupdate` 이벤트.
   *
   * @listens Player#timeupdate
   */
  업데이트 콘텐츠(이벤트) {}
}

/**
 * 스크린 리더 사용자를 위해 'TimeDisplay'에 추가되는 텍스트입니다.
 *
 * @유형 {문자열}
 * @사적인
 */
TimeDisplay.prototype.labelText_ = '시간';

/**
 * `TimeDisplay` 컨트롤 위에 표시되어야 하는 텍스트입니다. 현지화를 위해 추가되었습니다.
 *
 * @유형 {문자열}
 * @사적인
 *
 * @v7에서는 더 이상 사용되지 않습니다. controlText_는 비활성 디스플레이 구성 요소에서 사용되지 않습니다.
 */
TimeDisplay.prototype.controlText_ = '시간';

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