/**
 * @file load-progress-bar.js
 */
'../../component.js'에서 컴포넌트 가져오기;
import * as Dom from '../../utils/dom.js';
'../../utils/clamp'에서 클램프 가져오기;
'글로벌/문서'에서 문서 가져오기;

// 총 끝과 비교하여 시간의 백분율 너비를 얻습니다.
const percentify = (시간, 종료) => clamp((시간 / 종료) * 100, 0, 100).toFixed(2) + '%';

/**
 * 로딩 진행률 표시
 *
 * @extends 컴포넌트
 */
클래스 LoadProgressBar 확장 구성 요소 {

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

  /**
   * `Component`의 DOM 요소 생성
   *
   * @return {요소}
   * 생성된 요소입니다.
   */
  createEl() {
    const el = super.createEl('div', {className: 'vjs-load-progress'});
    const wrapper = Dom.createEl('span', {className: 'vjs-control-text'});
    const loadedText = Dom.createEl('span', {textContent: this.localize('Loaded')});
    const 구분 기호 = document.createTextNode(': ');

    this.percentageEl_ = Dom.createEl('스팬', {
      className: 'vjs-control-text-loaded-percentage',
      텍스트 내용: '0%'
    });

    el.appendChild(래퍼);
    wrapper.appendChild(loadedText);
    wrapper.appendChild(구분자);
    wrapper.appendChild(this.percentageEl_);

    반환 엘;
  }

  폐기() {
    this.partEls_ = null;
    this.percentageEl_ = null;

    super.dispose();
  }

  /**
   * 진행률 표시줄 업데이트
   *
   * @param {이벤트대상~이벤트} [이벤트]
   * 이 함수를 실행하게 만든 `progress` 이벤트.
   *
   * @listens Player#progress
   */
  업데이트(이벤트) {
    this.requestNamedAnimationFrame('LoadProgressBar#update', () => {
      const liveTracker = this.player_.liveTracker;
      const buffered = this.player_.buffered();
      지속 시간 = (liveTracker && liveTracker.isLive()) ? liveTracker.seekableEnd() : this.player_.duration();
      const bufferedEnd = this.player_.bufferedEnd();
      const children = this.partEls_;
      const 퍼센트 = percentify(bufferedEnd, 기간);

      if (this.percent_ !== 퍼센트) {
        // 진행률 표시줄의 너비를 업데이트합니다.
        this.el_.style.width = 퍼센트;
        // 제어 텍스트 업데이트
        Dom.textContent(this.percentageEl_, 퍼센트);
        this.percent_ = 퍼센트;
      }

      // 버퍼링된 개별 시간 범위를 나타내는 자식 요소를 추가합니다.
      에 대한 (하자 i = 0; i < 버퍼링된 길이; i++) {
        const 시작 = buffered.start(i);
        const end = buffered.end(i);
        let part = children[i];

        경우 (! 부분) {
          part = this.el_.appendChild(Dom.createEl());
          children[i] = 부분;
        }

        // 변경된 경우에만 업데이트
        if (part.dataset.start === 시작 && part.dataset.end === end) {
          계속하다;
        }

        part.dataset.start = 시작;
        part.dataset.end = 끝;

        // 진행률 표시줄의 너비를 기준으로 백분율을 설정합니다(bufferedEnd).
        part.style.left = percentify(start, bufferedEnd);
        part.style.width = percentify(end - start, bufferedEnd);
      }

      // 사용하지 않는 버퍼링된 범위 요소 제거
      for (let i = children.length; i > 버퍼링된 길이; 나--) {
        this.el_.removeChild(어린이[i - 1]);
      }
      children.length = buffered.length;
    });
  }
}

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