player.js

/**
 * OpenPlayer - a small, reusable HTML5 video player.
 *
 * Usage:
 *   const player = new OpenPlayer(document.querySelector('#my-video'), {
 *     controlsPosition: 'footer'
 *   });
 *
 * The video element remains the source of truth. Controls are generated by
 * this class and can be placed in the header or footer of the player wrapper.
 */
class OpenPlayer {
  /**
   * @param {HTMLVideoElement} video
   * @param {{controlsPosition?: 'header'|'footer'|'overlay', label?: string, lazyLoad?: boolean}} options
   */
  constructor(video, options = {}) {
    if (!(video instanceof HTMLVideoElement)) {
      throw new TypeError('OpenPlayer requires an HTMLVideoElement.');
    }

    this.video = video;
    this.options = {
      controlsPosition: 'footer',
      label: video.getAttribute('aria-label') || 'Video player',
      lazyLoad: true,
      ...options,
    };
    this.root = this.createRoot();
    this.lazyLoadVideo();
    this.status = this.createStatus();
    this.controls = this.createControls();
    this.bindEvents();
    this.update();
  }

  lazyLoadVideo() {
    if (!this.options.lazyLoad) return;
    const source = this.video.querySelector('source[data-src]');
    const videoSource = this.video.dataset.src;
    const sourceUrl = source?.dataset.src || videoSource;
    if (!sourceUrl) return;
    if (source) source.src = sourceUrl;
    else this.video.src = sourceUrl;
    this.video.load();
  }

  /** @returns {HTMLElement} The player root element. */
  createRoot() {
    const root = document.createElement('section');
    root.className = 'op-player';
    root.setAttribute('aria-label', this.options.label);
    const parent = this.video.parentNode;
    const existingControls = parent.querySelector(':scope > .op-controls');
    parent.insertBefore(root, this.video);
    root.append(this.video);
    if (existingControls) root.append(existingControls);
    this.video.classList.add('op-video');
    return root;
  }

  createStatus() {
    const status = document.createElement('div');
    status.className = 'op-status';
    status.setAttribute('role', 'status');
    status.setAttribute('aria-live', 'polite');
    status.innerHTML = '<span class="op-status-dot" aria-hidden="true">●</span><span class="op-status-text">ready</span>';
    this.statusText = status.querySelector('.op-status-text');
    this.elapsed = document.createElement('span');
    this.elapsed.className = 'op-elapsed';
    this.duration = document.createElement('span');
    this.duration.className = 'op-duration';
    const time = document.createElement('span');
    time.className = 'op-time';
    time.append(this.elapsed, document.createTextNode(' / '), this.duration);
    status.append(time);
    return status;
  }

  createButton(name, label, icon) {
    const button = document.createElement('button');
    button.type = 'button';
    button.className = `op-button op-${name}`;
    button.setAttribute('aria-label', label);
    button.append(OpenPlayer.createIcon(icon));
    return button;
  }

  static createIcon(name) {
    const paths = {
      play: '<path d="M8 5v14l11-7L8 5Z"/>',
      pause: '<path d="M7 5h3v14H7zM14 5h3v14h-3z"/>',
      stop: '<path d="M6 6h12v12H6z"/>',
      volume: '<path d="M4 10v4h3l4 3V7l-4 3H4Zm10.5-2.5a6 6 0 0 1 0 9M17 5a10 10 0 0 1 0 14"/>',
      muted: '<path d="m4 10 4-3 4 3v7l-4-3H4v-4Zm11-1 5 6m0-6-5 6"/>',
      fullscreen: '<path d="M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5"/>',
    };
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('viewBox', '0 0 24 24');
    svg.setAttribute('aria-hidden', 'true');
    svg.setAttribute('focusable', 'false');
    svg.innerHTML = paths[name];
    return svg;
  }

  createControls() {
    const controls = document.createElement('div');
    controls.className = `op-controls op-controls-${this.options.controlsPosition}`;
    this.playButton = this.createButton('play', 'Play video', 'play');
    this.stopButton = this.createButton('stop', 'Stop video', 'stop');
    this.muteButton = this.createButton('mute', 'Mute video', 'volume');
    this.fullscreenButton = this.createButton('fullscreen', 'Enter fullscreen', 'fullscreen');
    this.seek = document.createElement('input');
    this.seek.type = 'range';
    this.seek.className = 'op-seek';
    this.seek.min = '0';
    this.seek.max = '0';
    this.seek.step = '0.1';
    this.seek.value = '0';
    this.seek.setAttribute('aria-label', 'Seek video');
    controls.append(this.playButton, this.stopButton, this.seek, this.muteButton, this.fullscreenButton, this.status);
    if (!controls.parentNode) {
      this.root.insertAdjacentElement(this.options.controlsPosition === 'header' ? 'afterbegin' : 'beforeend', controls);
    }
    return controls;
  }

  bindEvents() {
    this.playButton.addEventListener('click', () => (this.video.paused ? this.video.play() : this.video.pause()));
    this.stopButton.addEventListener('click', () => { this.video.pause(); this.video.currentTime = 0; });
    this.muteButton.addEventListener('click', () => { this.video.muted = !this.video.muted; this.update(); });
    this.fullscreenButton.addEventListener('click', () => {
      if (document.fullscreenElement) return document.exitFullscreen();
      return this.root.requestFullscreen?.();
    });
    this.seek.addEventListener('input', () => { this.video.currentTime = Number(this.seek.value); });
    ['loadedmetadata', 'durationchange', 'timeupdate', 'play', 'pause', 'ended', 'volumechange', 'error'].forEach((event) => {
      this.video.addEventListener(event, () => this.update());
    });
  }

  update() {
    const { video } = this;
    const state = video.error ? 'error' : video.ended ? 'ended' : video.readyState === 0 ? 'ready' : video.paused ? 'paused' : 'playing';
    this.statusText.textContent = state;
    this.playButton.replaceChildren(OpenPlayer.createIcon(video.paused ? 'play' : 'pause'));
    this.playButton.setAttribute('aria-label', video.paused ? 'Play video' : 'Pause video');
    this.muteButton.replaceChildren(OpenPlayer.createIcon(video.muted ? 'muted' : 'volume'));
    this.muteButton.setAttribute('aria-label', video.muted ? 'Unmute video' : 'Mute video');
    this.elapsed.textContent = OpenPlayer.formatTime(video.currentTime);
    this.duration.textContent = Number.isFinite(video.duration) ? OpenPlayer.formatTime(video.duration) : '--';
    this.seek.max = Number.isFinite(video.duration) ? String(video.duration) : '0';
    this.seek.value = String(video.currentTime || 0);
  }

  /** @param {number} seconds @returns {string} */
  static formatTime(seconds) {
    if (!Number.isFinite(seconds)) return '00:00';
    const minutes = Math.floor(seconds / 60).toString().padStart(2, '0');
    const remainder = Math.floor(seconds % 60).toString().padStart(2, '0');
    return `${minutes}:${remainder}`;
  }
}

window.OpenPlayer = OpenPlayer;