/**
 * @file time-display.js
 */
從“全局/文檔”導入文檔；
從 '../../component.js' 導入組件；
import * as Dom from '../../utils/dom.js';
從 '../../utils/format-time.js' 導入格式時間；
從 '../../utils/log.js' 導入日誌；

/**
 * 顯示有關視頻的時間信息
 *
 * @extends 組件
 */
類 TimeDisplay 擴展組件 {

  /**
   * 創建此類的一個實例。
   *
   * @param {Player} 播放器
   * 此類應附加到的 `Player`。
   *
   * @param {對象} [選項]
   * 播放器選項的鍵/值存儲。
   */
  構造函數（播放器，選項）{
    超級（播放器，選項）；

    this.on(player, ['timeupdate', 'ended'], (e) => this.updateContent(e));
    this.updateTextNode_();
  }

  /**
   * 創建 `Component` 的 DOM 元素
   *
   * @return {元素}
   * 創建的元素。
   */
  創建El() {
    const className = this.buildCSSClass();
    const el = super.createEl('div', {
      類名：`${className} vjs-time-control vjs-control`
    }）；
    const span = Dom.createEl('span', {
      className: 'vjs-control-text',
      textContent: `${this.localize(this.labelText_)}\u00a0`
    }，{
      角色：'演示'
    }）；

    el.appendChild(span);

    this.contentEl_ = Dom.createEl('span', {
      類名：`${className}-display`
    }，{
      // 告訴屏幕閱讀器不要在時間變化時自動讀取時間
      'aria-live'：'關閉'，
      // span 元素沒有隱含的作用，但有一些屏幕閱讀器（特別是 VoiceOver）
      // 使用箭頭鍵時，將它們視為 DOM 中項目之間的中斷
      //（或在 iOS 上從左向右滑動）讀取頁面內容。使用
      // role='presentation' 導致 VoiceOver 不將此跨度視為中斷。
      '角色'：'演示'
    }）；

    el.appendChild(this.contentEl_);
    返回 el;
  }

  處置（）{
    this.contentEl_ = null;
    this.textNode_ = null;

    super.dispose();
  }

  /**
   * 用新時間更新時間顯示文本節點
   *
   * @param {number} [time=0] 更新時間
   *
   * @私人的
   */
  updateTextNode_(time = 0) {
    時間 = 格式時間（時間）；

    如果（this.formattedTime_ === 時間）{
      返回;
    }

    this.formattedTime_ = 時間；

    this.requestNamedAnimationFrame('TimeDisplay#updateTextNode_', () => {
      如果（！this.contentEl_）{
        返回;
      }

      讓 oldNode = this.textNode_;

      if (oldNode && this.contentEl_.firstChild !== oldNode) {
        舊節點=空；

        log.warn('TimeDisplay#updateTextnode_:防止替換文本節點元素，因為它不再是該節點的子節點。而是附加一個新節點。');
      }

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

      如果（！this.textNode_）{
        返回;
      }

      如果（舊節點）{
        this.contentEl_.replaceChild(this.textNode_, oldNode);
      }其他{
        this.contentEl_.appendChild(this.textNode_);
      }
    }）；
  }

  /**
   * 要在子班填寫，應該更新顯示的時間
   * 根據當前時間已更改的事實。
   *
   * @param {EventTarget~Event} [事件]
   * 導致此運行的 `timeupdate` 事件。
   *
   * @listens Player#timeupdate
   */
  更新內容（事件）{}
}

/**
 * 為屏幕閱讀器用戶添加到 `TimeDisplay` 的文本。
 *
 * @type {字符串}
 * @私人的
 */
TimeDisplay.prototype.labelText_ = '時間';

/**
 * 應該顯示在 `TimeDisplay` 控件上的文本。添加到本地化。
 *
 * @type {字符串}
 * @私人的
 *
 * @在 v7 中已棄用； controlText_ 不用於非活動顯示組件
 */
TimeDisplay.prototype.controlText_ = '時間';

Component.registerComponent('TimeDisplay', TimeDisplay);
導出默認時間顯示；