ts-video-player 0.1.0

package/src/elements/media-remote-playback-button.ts

@@ -0,0 +1,108 @@
+/**
+ * ts-video-player <media-remote-playback-button> Custom Element
+ *
+ * Uses the browser Remote Playback API for native device pickers such as
+ * Google Cast without loading a vendor SDK.
+ *
+ * @module elements/media-remote-playback-button
+ */
+
+import { HTMLElementBase } from './base'
+import { resolvePlayer } from './utils'
+
+const REMOTE_ICON = 'M1 18v3h3a3 3 0 0 0-3-3zm0-4v2a5 5 0 0 1 5 5h2a7 7 0 0 0-7-7zm0-4v2c5 0 9 4 9 9h2c0-6.1-4.9-11-11-11zm18-7H5a2 2 0 0 0-2 2v3h2V5h14v10h-5v2h5a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'
+
+interface RemotePlaybackHandle extends EventTarget {
+  state: 'connecting' | 'connected' | 'disconnected'
+  prompt: () => Promise<void>
+  watchAvailability: (_callback: (_available: boolean) => void) => Promise<number>
+  cancelWatchAvailability: (_id: number) => Promise<void>
+}
+
+export class MediaRemotePlaybackButton extends HTMLElementBase {
+  private cleanup: (() => void) | null = null
+
+  connectedCallback(): void {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: 'open' })
+      shadow.innerHTML = `
+        <style>
+          :host { display: none; }
+          :host([available]) { display: inline-flex; }
+          button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; }
+          button:hover { opacity: 0.8; }
+          :host([connected]) button { color: var(--media-remote-active-color, #38bdf8); }
+        </style>
+        <button part="button" type="button" aria-label="Play on another device">
+          <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon"><path d="${REMOTE_ICON}"/></svg>
+        </button>
+      `
+    }
+    queueMicrotask(() => this.attach())
+  }
+
+  disconnectedCallback(): void {
+    this.cleanup?.()
+    this.cleanup = null
+  }
+
+  private attach(): void {
+    const player = resolvePlayer(this)
+    const button = this.shadowRoot?.querySelector('button')
+    if (!player || !button) return
+    let remote: RemotePlaybackHandle | null = null
+    let watchId: number | null = null
+    let generation = 0
+
+    const stateChanged = (): void => {
+      const connected = remote?.state === 'connected'
+      this.toggleAttribute('connected', connected)
+      button.setAttribute('aria-pressed', String(connected))
+    }
+    const detachRemote = (): void => {
+      generation++
+      remote?.removeEventListener('connecting', stateChanged)
+      remote?.removeEventListener('connect', stateChanged)
+      remote?.removeEventListener('disconnect', stateChanged)
+      if (remote && watchId !== null) void remote.cancelWatchAvailability(watchId).catch(() => {})
+      remote = null
+      watchId = null
+      this.removeAttribute('available')
+      this.removeAttribute('connected')
+    }
+    const update = (): void => {
+      const media = player.provider?.mediaElement
+      const nextRemote = media instanceof HTMLMediaElement
+        ? (media as HTMLMediaElement & { remote?: RemotePlaybackHandle }).remote ?? null
+        : null
+      if (nextRemote === remote) return
+      detachRemote()
+      if (!nextRemote) return
+      remote = nextRemote
+      const currentGeneration = generation
+      remote.addEventListener('connecting', stateChanged)
+      remote.addEventListener('connect', stateChanged)
+      remote.addEventListener('disconnect', stateChanged)
+      stateChanged()
+      void remote.watchAvailability((available) => {
+        if (generation === currentGeneration && remote === nextRemote) this.toggleAttribute('available', available)
+      })
+        .then((id) => {
+          if (generation === currentGeneration && remote === nextRemote) watchId = id
+          else void nextRemote.cancelWatchAvailability(id).catch(() => {})
+        })
+        .catch(() => this.removeAttribute('available'))
+    }
+    const click = (): void => {
+      void remote?.prompt().catch(() => {})
+    }
+    button.addEventListener('click', click)
+    const unsubscribe = player.subscribe(update)
+    update()
+    this.cleanup = () => {
+      unsubscribe()
+      button.removeEventListener('click', click)
+      detachRemote()
+    }
+  }
+}

package/src/elements/media-seek-button.ts

@@ -0,0 +1,50 @@
+import { resolvePlayer } from './utils'
+import type { PlayerState } from '../types'
+
+import { HTMLElementBase } from './base'
+
+export class MediaSeekButton extends HTMLElementBase {
+  private cleanup: (() => void) | null = null
+  private onClick: (() => void) | null = null
+
+  connectedCallback(): void {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: 'open' })
+      shadow.innerHTML = `
+        <style>
+          :host { display: inline-flex; }
+          button { min-width: 40px; height: 40px; padding: 0 8px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; }
+          button:hover { opacity: .8; }
+          button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
+          button:disabled { cursor: default; opacity: .45; }
+        </style>
+        <button part="button" type="button"></button>
+      `
+    }
+    queueMicrotask(() => this.attach())
+  }
+
+  disconnectedCallback(): void {
+    const button = this.shadowRoot?.querySelector('button')
+    if (button && this.onClick) button.removeEventListener('click', this.onClick)
+    this.cleanup?.()
+    this.cleanup = null
+    this.onClick = null
+  }
+
+  private attach(): void {
+    const player = resolvePlayer(this)
+    const button = this.shadowRoot?.querySelector('button')
+    if (!player || !button) return
+    const seconds = Number.parseFloat(this.getAttribute('seconds') ?? '10')
+    const offset = Number.isFinite(seconds) && seconds !== 0 ? seconds : 10
+    const label = offset > 0 ? `Forward ${offset} seconds` : `Back ${Math.abs(offset)} seconds`
+    button.textContent = offset > 0 ? `+${offset}` : String(offset)
+    button.setAttribute('aria-label', label)
+    this.onClick = () => player.seekBy(offset)
+    button.addEventListener('click', this.onClick)
+    this.cleanup = player.subscribe((state: PlayerState) => {
+      button.disabled = offset < 0 ? state.currentTime <= 0 : state.duration > 0 && state.currentTime >= state.duration
+    })
+  }
+}

package/src/elements/media-settings-menu.ts

@@ -0,0 +1,302 @@
+/**
+ * ts-video-player <media-settings-menu> Custom Element
+ *
+ * Settings dropdown with quality, speed, captions, and audio track options.
+ * Uses collision-aware popover positioning.
+ *
+ * @module elements/media-settings-menu
+ */
+
+import { resolvePlayer } from './utils'
+import { computePosition } from '../core/popover'
+
+const GEAR_ICON = 'M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'
+
+const SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
+
+import { HTMLElementBase } from './base'
+
+export class MediaSettingsMenu extends HTMLElementBase {
+  private _cleanup: (() => void) | null = null
+  private _isOpen = false
+  private _currentPanel: 'main' | 'speed' | 'quality' | 'captions' | 'audio' = 'main'
+
+  connectedCallback(): void {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: 'open' })
+      shadow.innerHTML = `
+        <style>
+          :host { display: inline-flex; position: relative; }
+          button.trigger {
+            display: inline-flex; align-items: center; justify-content: center;
+            width: 40px; height: 40px; padding: 8px;
+            background: transparent; border: none; color: inherit; cursor: pointer;
+          }
+          button.trigger:hover { opacity: 0.8; }
+          .menu {
+            position: fixed; z-index: 9999;
+            min-width: 160px; max-height: 250px; overflow-y: auto;
+            background: rgba(28,28,28,0.95); border-radius: 4px;
+            padding: 4px 0; opacity: 0; visibility: hidden;
+            transform: translateY(4px);
+            transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
+          }
+          :host([open]) .menu {
+            opacity: 1; visibility: visible; transform: translateY(0);
+          }
+          .item {
+            display: flex; align-items: center; gap: 8px;
+            width: 100%; padding: 8px 16px;
+            background: none; border: none; color: white;
+            text-align: left; cursor: pointer; font-size: 14px;
+          }
+          .item:hover { background: rgba(255,255,255,0.1); }
+          .item[aria-checked="true"]::before { content: '\\2713'; }
+          .item[aria-checked="false"]::before { content: ''; min-width: 12px; display: inline-block; }
+          .back { font-weight: bold; border-bottom: 1px solid rgba(255,255,255,0.2); }
+        </style>
+        <button class="trigger" part="trigger" type="button"
+                aria-label="Settings" aria-haspopup="true" aria-expanded="false">
+          <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
+            <path d="${GEAR_ICON}"/>
+          </svg>
+        </button>
+        <div class="menu" part="menu" role="menu" aria-hidden="true"></div>
+      `
+    }
+
+    const trigger = this.shadowRoot!.querySelector('.trigger')!
+    this._onTriggerClick = () => this.toggle()
+    trigger.addEventListener('click', this._onTriggerClick)
+
+    // Close on outside click
+    this._onDocClick = (e: MouseEvent) => {
+      if (this._isOpen && !this.contains(e.target as Node)) this.close()
+    }
+    document.addEventListener('click', this._onDocClick)
+
+    // Close on escape
+    this._onDocKeydown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && this._isOpen) this.close()
+    }
+    document.addEventListener('keydown', this._onDocKeydown)
+
+    queueMicrotask(() => this.attach())
+  }
+
+  private _onTriggerClick: (() => void) | null = null
+  // eslint-disable-next-line pickier/no-unused-vars
+  private _onDocClick: ((e: MouseEvent) => void) | null = null
+  // eslint-disable-next-line pickier/no-unused-vars
+  private _onDocKeydown: ((e: KeyboardEvent) => void) | null = null
+
+  disconnectedCallback(): void {
+    this._cleanup?.()
+    this._cleanup = null
+    if (this._onTriggerClick) {
+      this.shadowRoot?.querySelector('.trigger')?.removeEventListener('click', this._onTriggerClick)
+    }
+    if (this._onDocClick) document.removeEventListener('click', this._onDocClick)
+    if (this._onDocKeydown) document.removeEventListener('keydown', this._onDocKeydown)
+  }
+
+  toggle(): void {
+    if (this._isOpen) this.close()
+    else this.open()
+  }
+
+  open(): void {
+    this._isOpen = true
+    this._currentPanel = 'main'
+    this.setAttribute('open', '')
+    this.shadowRoot!.querySelector('.trigger')!.setAttribute('aria-expanded', 'true')
+    this.shadowRoot!.querySelector('.menu')!.setAttribute('aria-hidden', 'false')
+    this.renderPanel()
+    this.positionMenu()
+  }
+
+  close(): void {
+    this._isOpen = false
+    this.removeAttribute('open')
+    this.shadowRoot!.querySelector('.trigger')!.setAttribute('aria-expanded', 'false')
+    this.shadowRoot!.querySelector('.menu')!.setAttribute('aria-hidden', 'true')
+  }
+
+  private positionMenu(): void {
+    const trigger = this.shadowRoot!.querySelector('.trigger') as HTMLElement
+    const menu = this.shadowRoot!.querySelector('.menu') as HTMLElement
+    if (!trigger || !menu) return
+
+    // Find the player container as boundary (for fullscreen)
+    const playerEl = this.closest('video-player, .ts-video-player') as HTMLElement | null
+
+    const result = computePosition(trigger, menu, {
+      placement: 'top-end',
+      offset: 4,
+      boundary: playerEl,
+      padding: 8,
+    })
+
+    menu.style.top = `${result.top}px`
+    menu.style.left = `${result.left}px`
+  }
+
+  private attach(): void {
+    const player = resolvePlayer(this)
+    if (!player) return
+
+    const unsub = player.subscribe(() => {
+      if (this._isOpen) this.renderPanel()
+    })
+
+    this._cleanup = unsub
+  }
+
+  private renderPanel(): void {
+    const player = resolvePlayer(this)
+    if (!player) return
+
+    const menu = this.shadowRoot!.querySelector('.menu')!
+    menu.innerHTML = ''
+
+    switch (this._currentPanel) {
+      case 'main': this.renderMain(menu, player); break
+      case 'speed': this.renderSpeed(menu, player); break
+      case 'quality': this.renderQuality(menu, player); break
+      case 'captions': this.renderCaptions(menu, player); break
+      case 'audio': this.renderAudio(menu, player); break
+    }
+
+    // Re-position after content changes
+    if (this._isOpen) {
+      queueMicrotask(() => this.positionMenu())
+    }
+  }
+
+  private renderMain(menu: Element, player: any): void {
+    const state = player.state
+
+    // Speed
+    this.addItem(menu, `Speed: ${state.playbackRate}x`, () => {
+      this._currentPanel = 'speed'
+      this.renderPanel()
+    })
+
+    // Quality
+    if (state.qualities.length > 0) {
+      const current = state.qualities.find((q: any) => q.selected)
+      const label = state.autoQuality ? 'Auto' : (current ? `${current.height}p` : 'Auto')
+      this.addItem(menu, `Quality: ${label}`, () => {
+        this._currentPanel = 'quality'
+        this.renderPanel()
+      })
+    }
+
+    // Captions
+    if (state.textTracks.length > 0) {
+      const showing = state.textTracks.find((t: any) => t.mode === 'showing')
+      this.addItem(menu, `Captions: ${showing?.label || 'Off'}`, () => {
+        this._currentPanel = 'captions'
+        this.renderPanel()
+      })
+    }
+
+    if (state.audioTracks.length > 1) {
+      const selected = state.audioTracks.find((track: { selected: boolean }) => track.selected)
+      this.addItem(menu, `Audio: ${selected?.label || 'Default'}`, () => {
+        this._currentPanel = 'audio'
+        this.renderPanel()
+      })
+    }
+  }
+
+  private renderSpeed(menu: Element, player: any): void {
+    this.addItem(menu, 'Back', () => {
+      this._currentPanel = 'main'
+      this.renderPanel()
+    }, false, true)
+
+    for (const speed of SPEEDS) {
+      const checked = player.state.playbackRate === speed
+      this.addItem(menu, `${speed}x`, () => {
+        player.setPlaybackRate(speed)
+        this.close()
+      }, checked)
+    }
+  }
+
+  private renderQuality(menu: Element, player: any): void {
+    this.addItem(menu, 'Back', () => {
+      this._currentPanel = 'main'
+      this.renderPanel()
+    }, false, true)
+
+    // Auto option
+    this.addItem(menu, 'Auto', () => {
+      player.setQuality('auto')
+      this.close()
+    }, player.state.autoQuality)
+
+    for (const q of player.state.qualities) {
+      this.addItem(menu, `${q.height}p`, () => {
+        player.setQuality(q)
+        this.close()
+      }, q.selected && !player.state.autoQuality)
+    }
+  }
+
+  private renderCaptions(menu: Element, player: any): void {
+    this.addItem(menu, 'Back', () => {
+      this._currentPanel = 'main'
+      this.renderPanel()
+    }, false, true)
+
+    // Off option
+    const anyShowing = player.state.textTracks.some((t: any) => t.mode === 'showing')
+    this.addItem(menu, 'Off', () => {
+      for (const t of player.state.textTracks) {
+        if (t.mode === 'showing') player.setTextTrack(t.id, 'disabled')
+      }
+      this.close()
+    }, !anyShowing)
+
+    for (const track of player.state.textTracks) {
+      if (track.kind === 'subtitles' || track.kind === 'captions') {
+        this.addItem(menu, track.label, () => {
+          player.setTextTrack(track.id, 'showing')
+          this.close()
+        }, track.mode === 'showing')
+      }
+    }
+  }
+
+  private renderAudio(menu: Element, player: any): void {
+    this.addItem(menu, 'Back', () => {
+      this._currentPanel = 'main'
+      this.renderPanel()
+    }, false, true)
+
+    for (const track of player.state.audioTracks) {
+      this.addItem(menu, track.label || track.language || 'Audio track', () => {
+        player.setAudioTrack(track.id)
+        this.close()
+      }, track.selected)
+    }
+  }
+
+  private addItem(
+    menu: Element,
+    label: string,
+    onClick: () => void,
+    checked = false,
+    isBack = false,
+  ): void {
+    const btn = document.createElement('button')
+    btn.className = `item${isBack ? ' back' : ''}`
+    btn.setAttribute('role', 'menuitem')
+    if (!isBack) btn.setAttribute('aria-checked', String(checked))
+    btn.textContent = label
+    btn.addEventListener('click', onClick)
+    menu.appendChild(btn)
+  }
+}

package/src/elements/media-time-display.ts

@@ -0,0 +1,99 @@
+/**
+ * ts-video-player <media-time-display> Custom Element
+ *
+ * Displays current time, duration, or remaining time with semantic markup.
+ * Attributes: type="current|duration|remaining"
+ *
+ * @module elements/media-time-display
+ */
+
+import { resolvePlayer, formatTime, formatTimePhrase, toISODuration } from './utils'
+
+import { HTMLElementBase } from './base'
+
+export class MediaTimeDisplay extends HTMLElementBase {
+  private _cleanup: (() => void) | null = null
+  private _showRemaining = false
+
+  static get observedAttributes(): string[] {
+    return ['type']
+  }
+
+  get type(): string {
+    return this.getAttribute('type') || 'current'
+  }
+
+  connectedCallback(): void {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: 'open' })
+      shadow.innerHTML = `
+        <style>
+          :host {
+            display: inline-flex;
+            font-size: 14px;
+            font-variant-numeric: tabular-nums;
+            user-select: none;
+            cursor: pointer;
+            color: inherit;
+          }
+          time { color: inherit; }
+          .separator { margin: 0 2px; }
+        </style>
+        <time part="time" datetime="PT0S" aria-valuetext="0 seconds">0:00</time>
+      `
+    }
+
+    this.addEventListener('click', this.handleClick)
+
+    queueMicrotask(() => this.attach())
+  }
+
+  disconnectedCallback(): void {
+    this._cleanup?.()
+    this._cleanup = null
+    this.removeEventListener('click', this.handleClick)
+  }
+
+  private handleClick = (): void => {
+    if (this.type === 'duration') {
+      this._showRemaining = !this._showRemaining
+      // Re-render with current state
+      const player = resolvePlayer(this)
+      if (player) this.render(player.state)
+    }
+  }
+
+  private attach(): void {
+    const player = resolvePlayer(this)
+    if (!player) return
+
+    const unsub = player.subscribe((state: any) => {
+      this.render(state)
+    })
+
+    this._cleanup = unsub
+  }
+
+  private render(state: any): void {
+    const timeEl = this.shadowRoot?.querySelector('time')
+    if (!timeEl) return
+
+    const type = this.type
+    let seconds: number
+
+    if (type === 'remaining' || (type === 'duration' && this._showRemaining)) {
+      seconds = Math.max(state.duration - state.currentTime, 0)
+      const formatted = `-${formatTime(seconds, state.duration)}`
+      timeEl.textContent = formatted
+    } else if (type === 'duration') {
+      seconds = state.duration
+      timeEl.textContent = formatTime(seconds)
+    } else {
+      seconds = state.currentTime
+      timeEl.textContent = formatTime(seconds, state.duration)
+    }
+
+    timeEl.setAttribute('datetime', toISODuration(seconds))
+    timeEl.setAttribute('aria-valuetext', formatTimePhrase(seconds))
+  }
+}

package/src/elements/media-time-group.ts

@@ -0,0 +1,41 @@
+/**
+ * ts-video-player <media-time-group> Custom Element
+ *
+ * Container for composing time display elements (current / separator / duration).
+ * Provides layout and semantic grouping.
+ *
+ * @example
+ * ```html
+ * <media-time-group>
+ *   <media-time-display type="current"></media-time-display>
+ *   <media-time-separator></media-time-separator>
+ *   <media-time-display type="duration"></media-time-display>
+ * </media-time-group>
+ * ```
+ *
+ * @module elements/media-time-group
+ */
+
+import { HTMLElementBase } from './base'
+
+export class MediaTimeGroup extends HTMLElementBase {
+  connectedCallback(): void {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: 'open' })
+      shadow.innerHTML = `
+        <style>
+          :host {
+            display: inline-flex;
+            align-items: center;
+            gap: 2px;
+            font-variant-numeric: tabular-nums;
+            font-family: inherit;
+            font-size: inherit;
+            color: inherit;
+          }
+        </style>
+        <slot></slot>
+      `
+    }
+  }
+}

package/src/elements/media-time-separator.ts

@@ -0,0 +1,35 @@
+/**
+ * ts-video-player <media-time-separator> Custom Element
+ *
+ * Visual separator between time displays (typically "/" or ":").
+ * Hidden from screen readers via aria-hidden.
+ *
+ * @module elements/media-time-separator
+ */
+
+import { HTMLElementBase } from './base'
+
+export class MediaTimeSeparator extends HTMLElementBase {
+  connectedCallback(): void {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: 'open' })
+      shadow.innerHTML = `
+        <style>
+          :host {
+            display: inline-flex;
+            align-items: center;
+            padding: 0 2px;
+            font-family: inherit;
+            font-size: inherit;
+            color: inherit;
+            opacity: 0.7;
+          }
+        </style>
+        <span aria-hidden="true" part="separator"><slot>/</slot></span>
+      `
+    }
+
+    this.setAttribute('role', 'separator')
+    this.setAttribute('aria-hidden', 'true')
+  }
+}