/**
 * @file time-display.js
 * /
importar documento desde 'global/document';
importar componente desde '../../component.js';
importar * como Dom desde '../../utils/dom.js';
importar formatTime desde '../../utils/format-time.js';
importar registro desde '../../utils/log.js';

/**
 * Muestra información de tiempo sobre el video
 *
 * Componente @extiende
 * /
clase TimeDisplay extiende Componente {

  /**
   * Crea una instancia de esta clase.
   *
   * @param {Jugador} jugador
   * El `Jugador` al que se debe adjuntar esta clase.
   *
   * @param {Objeto} [opciones]
   * El almacén de clave/valor de las opciones del jugador.
   * /
  constructor(jugador, opciones) {
    super(jugador, opciones);

    this.on(jugador, ['actualización de tiempo', 'terminado'], (e) => este.updateContent(e));
    this.updateTextNode_();
  }

  /**
   * Crear el elemento DOM del 'Componente'
   *
   * @return {Elemento}
   * El elemento que se creó.
   * /
  crearEl() {
    const className = this.buildCSSClass();
    const el = super.createEl('div', {
      className: `${className} vjs-time-control vjs-control`
    });
    const span = Dom.createEl('span', {
      className: 'vjs-control-texto',
      textContent: `${this.localize(this.labelText_)}\u00a0`
    }, {
      papel: 'presentación'
    });

    el.appendChild(span);

    this.contentEl_ = Dom.createEl('span', {
      className: `${className}-display`
    }, {
      // decirle a los lectores de pantalla que no lean automáticamente la hora a medida que cambia
      'aria-en vivo': 'apagado',
      // los elementos de distribución no tienen una función implícita, pero algunos lectores de pantalla (especialmente VoiceOver)
      // trátelos como una ruptura entre elementos en el DOM cuando use las teclas de flecha
      // (o deslizamientos de izquierda a derecha en iOS) para leer el contenido de una página. Usando
      // role='presentation' hace que VoiceOver NO trate este intervalo como una pausa.
      'rol': 'presentación'
    });

    el.appendChild(this.contentEl_);
    volver el;
  }

  disponer () {
    this.contentEl_ = null;
    este.textNode_ = nulo;

    super.dispose();
  }

  /**
   * Actualiza el nodo de texto de visualización de la hora con una nueva hora
   *
   * @param {number} [time=0] el tiempo para actualizar a
   *
   * @privado
   * /
  actualizarTextNode_(tiempo = 0) {
    tiempo = formatoTiempo(tiempo);

    if (this.formattedTime_ === hora) {
      devolver;
    }

    this.formattedTime_ = hora;

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

      let oldNode = this.textNode_;

      si (antiguoNodo && this.contentEl_.firstChild !== oldNode) {
        nodoantiguo = nulo;

        log.warn('TimeDisplay#updateTextnode_: Se evitó el reemplazo del elemento de nodo de texto porque ya no era un elemento secundario de este nodo. Agregando un nuevo nodo en su lugar.');
      }

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

      if (!este.textNode_) {
        devolver;
      }

      si (nodoantiguo) {
        this.contentEl_.replaceChild(this.textNode_, oldNode);
      } else {
        this.contentEl_.appendChild(this.textNode_);
      }
    });
  }

  /**
   * Para ser llenado en la clase infantil, se debe actualizar el tiempo mostrado
   * de acuerdo con el hecho de que la hora actual ha cambiado.
   *
   * @param {Objetivo de evento~Evento} [evento]
   * El evento `timeupdate` que causó que esto se ejecutara.
   *
   * @escucha Player#timeupdate
   * /
  actualizar contenido (evento) {}
}

/**
 * El texto que se agrega a `TimeDisplay` para usuarios de lectores de pantalla.
 *
 * @tipo {cadena}
 * @privado
 * /
TimeDisplay.prototype.labelText_ = 'Tiempo';

/**
 * El texto que debería mostrarse sobre los controles `TimeDisplay`. Añadido a para la localización.
 *
 * @tipo {cadena}
 * @privado
 *
 * @obsoleto en v7; controlText_ no se usa en componentes de visualización no activos
 * /
TimeDisplay.prototype.controlText_ = 'Tiempo';

Component.registerComponent('Pantalla de tiempo', Pantalla de tiempo);
exportar TimeDisplay predeterminado;