/**
 * @file load-progress-bar.js
 */
從 '../../component.js' 導入組件；
import * as Dom from '../../utils/dom.js';
從 '../../utils/clamp' 導入夾具；
從“全局/文檔”導入文檔；

// 獲取時間佔總結束時間的百分比寬度
const percentify = (time, end) => clamp((time / end) * 100, 0, 100).toFixed(2) + '%';

/**
 * 顯示加載進度
 *
 * @extends 組件
 */
類 LoadProgressBar 擴展組件 {

  /**
   * 創建此類的一個實例。
   *
   * @param {Player} 播放器
   * 此類應附加到的 `Player`。
   *
   * @param {對象} [選項]
   * 播放器選項的鍵/值存儲。
   */
  構造函數（播放器，選項）{
    超級（播放器，選項）；
    this.partEls_ = [];
    this.on(player, 'progress', (e) => this.update(e));
  }

  /**
   * 創建 `Component` 的 DOM 元素
   *
   * @return {元素}
   * 創建的元素。
   */
  創建El() {
    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 separator = document.createTextNode(': ');

    this.percentageEl_ = Dom.createEl('span', {
      className: 'vjs-control-text-loaded-percentage',
      文字內容：'0%'
    }）；

    el.appendChild（包裝器）；
    wrapper.appendChild(loadedText);
    wrapper.appendChild（分隔符）；
    wrapper.appendChild(this.percentageEl_);

    返回 el;
  }

  處置（）{
    this.partEls_ = null;
    this.percentageEl_ = null;

    super.dispose();
  }

  /**
   * 更新進度條
   *
   * @param {EventTarget~Event} [事件]
   * 導致此函數運行的 `progress` 事件。
   *
   * @listens Player#progress
   */
  更新（事件）{
    this.requestNamedAnimationFrame('LoadProgressBar#update', () => {
      const liveTracker = this.player_.liveTracker;
      const buffered = this.player_.buffered();
      const duration = (liveTracker && liveTracker.isLive()) ? liveTracker.seekableEnd() : this.player_.duration();
      const bufferedEnd = this.player_.bufferedEnd();
      const children = this.partEls_;
      const percent = percentify(bufferedEnd, duration);

      如果（this.percent_！==百分比）{
        //更新進度條的寬度
        this.el_.style.width = 百分比；
        // 更新控製文本
        Dom.textContent(this.percentageEl_, percent);
        this.percent_ = 百分比；
      }

      // 添加子元素來表示各個緩衝時間範圍
      對於（讓 i = 0；i < buffered.length；i++）{
        const start = buffered.start(i);
        const end = buffered.end(i);
        讓 part = children[i];

        如果（！部分）{
          part = this.el_.appendChild(Dom.createEl());
          孩子[i] = 部分；
        }

        // 僅在更改時更新
        如果（part.dataset.start === 開始 && part.dataset.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 > buffered.length; i--) {
        this.el_.removeChild(children[i - 1]);
      }
      children.length = buffered.length;
    }）；
  }
}

Component.registerComponent('LoadProgressBar', LoadProgressBar);
導出默認 LoadProgressBar；