ts-video-player 0.1.0

package/src/elements/media-volume-slider.ts

@@ -0,0 +1,140 @@
+/**
+ * ts-video-player <media-volume-slider> Custom Element
+ *
+ * Volume control slider. Hidden when volume is unsupported (iOS Safari).
+ *
+ * @module elements/media-volume-slider
+ */
+
+import { resolvePlayer } from './utils'
+
+import { HTMLElementBase } from './base'
+
+export class MediaVolumeSlider extends HTMLElementBase {
+  private _cleanups: Array<() => void> = []
+  private _isDragging = false
+
+  connectedCallback(): void {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: 'open' })
+      shadow.innerHTML = `
+        <style>
+          :host { display: inline-flex; align-items: center; width: 80px; }
+          :host([hidden]) { display: none; }
+          .container {
+            position: relative; width: 100%; height: 20px;
+            cursor: pointer; touch-action: none;
+          }
+          .track {
+            position: absolute; top: 50%; left: 0; right: 0;
+            height: 4px; background: rgba(255,255,255,0.3);
+            border-radius: 2px; transform: translateY(-50%);
+          }
+          .fill {
+            position: absolute; top: 0; left: 0;
+            height: 100%; background: #fff;
+            border-radius: 2px; width: 100%;
+          }
+          .thumb {
+            position: absolute; top: 50%; left: 100%;
+            width: 12px; height: 12px; background: #fff;
+            border-radius: 50%; transform: translate(-50%, -50%);
+            transition: transform 0.1s;
+          }
+          .container:hover .thumb { transform: translate(-50%, -50%) scale(1.2); }
+        </style>
+        <div class="container" part="container" role="slider"
+          aria-valuemin="0" aria-valuemax="100" aria-valuenow="100"
+          aria-label="Volume" tabindex="0">
+          <div class="track" part="track">
+            <div class="fill" part="fill"></div>
+            <div class="thumb" part="thumb"></div>
+          </div>
+        </div>
+      `
+    }
+
+    queueMicrotask(() => this.attach())
+  }
+
+  disconnectedCallback(): void {
+    this._cleanups.forEach((fn) => fn())
+    this._cleanups = []
+  }
+
+  private attach(): void {
+    const player = resolvePlayer(this)
+    if (!player) return
+
+    const container = this.shadowRoot!.querySelector('.container') as HTMLElement
+    const track = this.shadowRoot!.querySelector('.track') as HTMLElement
+    const fill = this.shadowRoot!.querySelector('.fill') as HTMLElement
+    const thumb = this.shadowRoot!.querySelector('.thumb') as HTMLElement
+
+    const setFromEvent = (e: PointerEvent) => {
+      const rect = track.getBoundingClientRect()
+      const volume = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+      player.setVolume(volume)
+      if (volume > 0 && player.state.muted) player.setMuted(false)
+    }
+
+    const onPointerDown = (e: PointerEvent) => {
+      this._isDragging = true
+      container.setPointerCapture(e.pointerId)
+      setFromEvent(e)
+    }
+    const onPointerMove = (e: PointerEvent) => {
+      if (!this._isDragging) return
+      setFromEvent(e)
+    }
+    const onPointerUp = (e: PointerEvent) => {
+      if (!this._isDragging) return
+      this._isDragging = false
+      container.releasePointerCapture(e.pointerId)
+    }
+    const onKeyDown = (e: KeyboardEvent) => {
+      let volume = player.state.volume
+      const step = 0.05
+
+      switch (e.key) {
+        case 'ArrowRight':
+        case 'ArrowUp': volume = Math.min(1, volume + step); break
+        case 'ArrowLeft':
+        case 'ArrowDown': volume = Math.max(0, volume - step); break
+        default: return
+      }
+
+      e.preventDefault()
+      player.setVolume(volume)
+    }
+
+    container.addEventListener('pointerdown', onPointerDown)
+    container.addEventListener('pointermove', onPointerMove)
+    container.addEventListener('pointerup', onPointerUp)
+    container.addEventListener('keydown', onKeyDown)
+
+    this._cleanups.push(
+      () => container.removeEventListener('pointerdown', onPointerDown),
+      () => container.removeEventListener('pointermove', onPointerMove),
+      () => container.removeEventListener('pointerup', onPointerUp),
+      () => container.removeEventListener('keydown', onKeyDown),
+    )
+
+    const unsub = player.subscribe((state: any) => {
+      if (state.volumeAvailability === 'unsupported') {
+        this.setAttribute('hidden', '')
+        return
+      }
+      this.removeAttribute('hidden')
+
+      const vol = state.muted ? 0 : state.volume
+      const percent = vol * 100
+
+      fill.style.width = `${percent}%`
+      thumb.style.left = `${percent}%`
+      container.setAttribute('aria-valuenow', String(Math.round(percent)))
+    })
+
+    this._cleanups.push(unsub)
+  }
+}

package/src/elements/utils.ts

@@ -0,0 +1,82 @@
+/**
+ * ts-video-player Element Utilities
+ *
+ * Shared helpers for custom elements.
+ *
+ * @module elements/utils
+ */
+
+/**
+ * Format time in seconds to MM:SS or HH:MM:SS
+ */
+export function formatTime(seconds: number, guide = 0): string {
+  if (!isFinite(seconds) || isNaN(seconds)) return '0:00'
+
+  const s = Math.floor(seconds)
+  const h = Math.floor(s / 3600)
+  const m = Math.floor((s % 3600) / 60)
+  const sec = s % 60
+
+  const showHours = h > 0 || guide >= 3600
+
+  if (showHours) {
+    return `${h}:${m.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`
+  }
+
+  return `${m}:${sec.toString().padStart(2, '0')}`
+}
+
+/**
+ * Format time as a human-readable phrase for screen readers.
+ * e.g., "1 minute, 30 seconds"
+ */
+export function formatTimePhrase(seconds: number): string {
+  if (!isFinite(seconds) || isNaN(seconds)) return '0 seconds'
+
+  const s = Math.floor(seconds)
+  const h = Math.floor(s / 3600)
+  const m = Math.floor((s % 3600) / 60)
+  const sec = s % 60
+
+  const parts: string[] = []
+  if (h > 0) parts.push(`${h} ${h === 1 ? 'hour' : 'hours'}`)
+  if (m > 0) parts.push(`${m} ${m === 1 ? 'minute' : 'minutes'}`)
+  if (sec > 0 || parts.length === 0) parts.push(`${sec} ${sec === 1 ? 'second' : 'seconds'}`)
+
+  return parts.join(', ')
+}
+
+/**
+ * Convert seconds to ISO 8601 duration string.
+ * e.g., 90 -> "PT1M30S"
+ */
+export function toISODuration(seconds: number): string {
+  if (!isFinite(seconds) || isNaN(seconds)) return 'PT0S'
+
+  const s = Math.floor(seconds)
+  const h = Math.floor(s / 3600)
+  const m = Math.floor((s % 3600) / 60)
+  const sec = s % 60
+
+  let result = 'PT'
+  if (h > 0) result += `${h}H`
+  if (m > 0) result += `${m}M`
+  if (sec > 0 || result === 'PT') result += `${sec}S`
+
+  return result
+}
+
+/**
+ * Resolve the player instance from an element.
+ * Uses `for` attribute to find by ID, or walks up the DOM to find `<video-player>`.
+ */
+export function resolvePlayer(el: HTMLElement): any | null {
+  const forId = el.getAttribute('for')
+  if (forId) {
+    const target = document.getElementById(forId)
+    return (target as any)?.player ?? null
+  }
+
+  const host = el.closest('video-player')
+  return (host as any)?.player ?? null
+}

package/src/elements/video-player.ts

@@ -0,0 +1,175 @@
+/**
+ * ts-video-player <video-player> Custom Element
+ *
+ * The root element that wraps the Player class.
+ *
+ * @module elements/video-player
+ */
+
+import { Player } from '../player'
+import type { DRMConfig, PlayerOptions, PlayerEventMap, Src, TextTrackSource } from '../types'
+
+const OBSERVED_ATTRS = ['src', 'poster', 'autoplay', 'loop', 'muted', 'controls', 'volume', 'playback-rate', 'preload', 'playsinline', 'crossorigin', 'controlslist', 'disable-picture-in-picture'] as const
+
+import { HTMLElementBase } from './base'
+
+export class VideoPlayerElement extends HTMLElementBase {
+  private _player: Player | null = null
+  private _container: HTMLElement | null = null
+  private _disconnectId = 0
+
+  static get observedAttributes(): string[] {
+    return [...OBSERVED_ATTRS]
+  }
+
+  get player(): Player | null {
+    return this._player
+  }
+
+  connectedCallback(): void {
+    this._disconnectId++
+    if (this._player) return
+
+    // Create shadow DOM
+    const shadow = this.shadowRoot ?? this.attachShadow({ mode: 'open' })
+
+    // Container
+    this._container = document.createElement('div')
+    this._container.setAttribute('part', 'container')
+    this._container.style.cssText = 'position:relative;width:100%;height:100%;'
+
+    // Slot for child media elements (buttons, etc.)
+    const slot = document.createElement('slot')
+    this._container.appendChild(slot)
+
+    shadow.appendChild(this._container)
+
+    // Build options from attributes
+    const options = this.buildOptions()
+
+    // Create player
+    this._player = new Player(this._container, options)
+
+    // Forward player events as DOM events
+    this.forwardEvents()
+  }
+
+  disconnectedCallback(): void {
+    if (this.hasAttribute('keep-alive')) return
+    const disconnectId = ++this._disconnectId
+    queueMicrotask(() => {
+      if (this.isConnected || disconnectId !== this._disconnectId) return
+      this._player?.destroy()
+      this._player = null
+      this._container = null
+      this.shadowRoot?.replaceChildren()
+    })
+  }
+
+  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
+    if (!this._player) return
+
+    switch (name) {
+      case 'src':
+        if (value) this._player.setSrc(value)
+        break
+      case 'muted':
+        this._player.setMuted(value !== null)
+        break
+      case 'volume':
+        if (value !== null) this._player.setVolume(parseFloat(value))
+        break
+      case 'playback-rate':
+        if (value !== null) this._player.setPlaybackRate(parseFloat(value))
+        break
+    }
+  }
+
+  private buildOptions(): PlayerOptions {
+    const options: PlayerOptions = {}
+
+    const config = this.readSourceConfig()
+    if (config.sources?.length) options.src = config.sources
+    if (config.tracks?.length) options.tracks = config.tracks
+
+    const src = this.getAttribute('src')
+    if (src && !options.src) options.src = config.drm ? { src, type: 'application/dash+xml', drm: config.drm } : src
+
+    const poster = this.getAttribute('poster')
+    if (poster) options.poster = poster
+
+    const title = this.getAttribute('title')
+    if (title) options.title = title
+
+    if (this.hasAttribute('autoplay')) options.autoplay = true
+    if (this.hasAttribute('loop')) options.loop = true
+    if (this.hasAttribute('muted')) options.muted = true
+
+    const volume = this.getAttribute('volume')
+    if (volume) options.volume = parseFloat(volume)
+
+    const rate = this.getAttribute('playback-rate')
+    if (rate) options.playbackRate = parseFloat(rate)
+
+    const preload = this.getAttribute('preload')
+    if (preload) options.preload = preload as PlayerOptions['preload']
+
+    if (this.hasAttribute('controls')) options.controls = true
+    options.playsinline = this.getAttribute('playsinline') !== 'false'
+
+    const crossorigin = this.getAttribute('crossorigin')
+    if (crossorigin !== null) options.crossorigin = crossorigin as PlayerOptions['crossorigin']
+
+    const controlsList = this.getAttribute('controlslist')
+    if (controlsList) options.controlsList = controlsList.split(/\s+/) as PlayerOptions['controlsList']
+    options.disablePictureInPicture = this.hasAttribute('disable-picture-in-picture')
+
+    return options
+  }
+
+  private readSourceConfig(): { sources?: Src[], drm?: DRMConfig, tracks?: TextTrackSource[] } {
+    const script = this.querySelector('script[type="application/json"][data-media-config]')
+    const value = this.getAttribute('data-media-config')?.trim() || script?.textContent?.trim()
+    if (!value) return {}
+    if (value.length > 65_536) throw new TypeError('Media player configuration is too large')
+    try {
+      const parsed = JSON.parse(value) as { sources?: unknown, drm?: unknown, tracks?: unknown }
+      if (parsed.sources !== undefined && (!Array.isArray(parsed.sources) || parsed.sources.some(source => !source || typeof source !== 'object' || typeof (source as { src?: unknown }).src !== 'string'))) {
+        throw new TypeError('Media player sources are invalid')
+      }
+      const trackKinds = new Set(['subtitles', 'captions', 'descriptions', 'chapters', 'metadata'])
+      if (parsed.tracks !== undefined && (!Array.isArray(parsed.tracks) || parsed.tracks.some(track => !track || typeof track !== 'object' || typeof (track as { src?: unknown }).src !== 'string' || !trackKinds.has(String((track as { kind?: unknown }).kind))))) {
+        throw new TypeError('Media player tracks are invalid')
+      }
+      return { sources: parsed.sources as Src[] | undefined, drm: parsed.drm as DRMConfig | undefined, tracks: parsed.tracks as TextTrackSource[] | undefined }
+    }
+    catch (error) {
+      if (error instanceof TypeError) throw error
+      throw new TypeError('Media player configuration is invalid JSON')
+    }
+  }
+
+  private forwardEvents(): void {
+    if (!this._player) return
+
+    const events: (keyof PlayerEventMap)[] = [
+      'play', 'pause', 'playing', 'waiting', 'ended',
+      'timeupdate', 'durationchange', 'volumechange',
+      'fullscreenchange', 'pipchange', 'error',
+      'loadstart', 'loadeddata', 'loadedmetadata',
+      'canplay', 'canplaythrough', 'seeking', 'seeked',
+      'ratechange', 'qualitychange', 'statechange',
+      'availabilitychange',
+    ]
+
+    for (const event of events) {
+      this._player.on(event, ((...args: unknown[]) => {
+        this.dispatchEvent(new CustomEvent(event, {
+          detail: args.length === 1 ? args[0] : args,
+          bubbles: true,
+          composed: true,
+        }))
+      }) as any)
+    }
+  }
+}

package/src/elements/video-skin.ts

@@ -0,0 +1,127 @@
+/**
+ * ts-video-player <video-skin> Custom Element
+ *
+ * Adaptive skin wrapper that provides a default layout for player controls.
+ * Adjusts visibility of controls based on available features.
+ *
+ * Follows the v10 layered model:
+ *   <video-player>       ← Behavior
+ *     <video-skin>       ← Appearance (this element)
+ *       <media-*>        ← UI controls
+ *     </video-skin>
+ *   </video-player>
+ *
+ * @module elements/video-skin
+ */
+
+import { resolvePlayer } from './utils'
+
+import { HTMLElementBase } from './base'
+
+export class VideoSkin extends HTMLElementBase {
+  private _cleanups: Array<() => void> = []
+
+  connectedCallback(): void {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: 'open' })
+      shadow.innerHTML = `
+        <style>
+          :host {
+            display: flex;
+            flex-direction: column;
+            position: absolute;
+            inset: 0;
+            z-index: 1;
+            pointer-events: none;
+            color: white;
+            font-family: system-ui, -apple-system, sans-serif;
+            font-size: 14px;
+          }
+
+          /* Click-to-play overlay */
+          .overlay {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            pointer-events: auto;
+          }
+
+          /* Bottom controls bar */
+          .controls {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            padding: 8px 12px;
+            background: linear-gradient(transparent, rgba(0,0,0,0.7));
+            pointer-events: auto;
+            transition: opacity 0.3s, visibility 0.3s;
+          }
+
+          :host([controls-hidden]) .controls {
+            opacity: 0;
+            visibility: hidden;
+          }
+
+          /* Spacer pushes right-aligned controls */
+          .spacer {
+            flex: 1;
+          }
+
+          /* Slots for left/center/right control groups */
+          ::slotted(*) {
+            pointer-events: auto;
+          }
+        </style>
+        <div class="overlay" part="overlay">
+          <slot name="overlay"></slot>
+        </div>
+        <div class="controls" part="controls">
+          <slot name="left"></slot>
+          <slot name="center"></slot>
+          <div class="spacer"></div>
+          <slot name="right"></slot>
+          <slot></slot>
+        </div>
+      `
+    }
+
+    queueMicrotask(() => this.attach())
+  }
+
+  disconnectedCallback(): void {
+    this._cleanups.forEach((fn) => fn())
+    this._cleanups = []
+  }
+
+  private attach(): void {
+    const player = resolvePlayer(this)
+    if (!player) return
+
+    // Sync controls visibility
+    const unsub = player.subscribe((state: any) => {
+      if (state.controlsVisible) {
+        this.removeAttribute('controls-hidden')
+      } else {
+        this.setAttribute('controls-hidden', '')
+      }
+
+      // Propagate feature availability as data attributes for CSS adaptation
+      this.dataset.fullscreen = state.fullscreenAvailability
+      this.dataset.pip = state.pipAvailability
+      this.dataset.volume = state.volumeAvailability
+      this.dataset.captions = String(state.textTracks.length > 0)
+      this.dataset.qualities = String(state.qualities.length > 0)
+    })
+
+    // Click overlay to toggle play
+    const overlay = this.shadowRoot!.querySelector('.overlay')!
+    const onOverlayClick = () => player.togglePlay()
+    overlay.addEventListener('click', onOverlayClick)
+
+    this._cleanups.push(
+      unsub,
+      () => overlay.removeEventListener('click', onOverlayClick),
+    )
+  }
+}

package/src/features/captions.ts

@@ -0,0 +1,56 @@
+/**
+ * Captions feature — text track management.
+ *
+ * @module features/captions
+ */
+
+import type { Feature, FeatureContext } from './types'
+import type { TextTrack } from '../types'
+
+export const captions: Feature = {
+  name: 'captions',
+  stateKeys: ['textTracks'],
+
+  setup(ctx: FeatureContext) {
+    const { store, getMediaElement } = ctx
+
+    const syncTracks = () => {
+      const media = getMediaElement()
+      if (!media) return
+
+      const tracks: TextTrack[] = []
+      const textTracks = media.textTracks
+
+      for (let i = 0; i < textTracks.length; i++) {
+        const track = textTracks[i]
+        tracks.push({
+          id: String(i),
+          kind: track.kind as TextTrack['kind'],
+          label: track.label || `Track ${i + 1}`,
+          language: track.language || '',
+          mode: track.mode as TextTrack['mode'],
+          cues: [],
+        })
+      }
+
+      store.set('textTracks', tracks)
+    }
+
+    const media = getMediaElement()
+    if (media) {
+      media.textTracks.addEventListener('change', syncTracks)
+      media.textTracks.addEventListener('addtrack', syncTracks)
+      media.textTracks.addEventListener('removetrack', syncTracks)
+    }
+
+    syncTracks()
+
+    return () => {
+      const m = getMediaElement()
+      if (!m) return
+      m.textTracks.removeEventListener('change', syncTracks)
+      m.textTracks.removeEventListener('addtrack', syncTracks)
+      m.textTracks.removeEventListener('removetrack', syncTracks)
+    }
+  },
+}

package/src/features/create-player.ts

@@ -0,0 +1,91 @@
+/**
+ * Composable Player Factory
+ *
+ * Creates a lightweight player with only the features you need.
+ *
+ * @module features/create-player
+ */
+
+import type { Feature, FeatureContext } from './types'
+import type { PlayerState } from '../types'
+import { StateStore } from '../core/state'
+
+export interface ComposablePlayer {
+  /** The container element */
+  el: HTMLElement
+  /** Current state */
+  readonly state: PlayerState
+  /** Subscribe to state changes */
+  subscribe: StateStore['subscribe']
+  /** Get the media element */
+  getMediaElement: () => HTMLMediaElement | null
+  /** Destroy the player and all features */
+  destroy: () => void
+}
+
+export interface ComposablePlayerOptions {
+  /** Features to enable */
+  features: Feature[]
+  /** Initial state overrides */
+  state?: Partial<PlayerState>
+  /** Player options */
+  options?: Record<string, unknown>
+}
+
+/**
+ * Create a composable player with only the specified features.
+ *
+ * @example
+ * ```ts
+ * import { createComposablePlayer } from 'ts-video-player/features'
+ * import { playback, volume, fullscreen } from 'ts-video-player/features'
+ *
+ * const player = createComposablePlayer(container, {
+ *   features: [playback, volume, fullscreen],
+ * })
+ * ```
+ */
+export function createComposablePlayer(
+  container: HTMLElement,
+  opts: ComposablePlayerOptions,
+): ComposablePlayer {
+  const store = new StateStore(opts.state)
+  const cleanups: Array<() => void> = []
+
+  let mediaElement: HTMLMediaElement | null = null
+
+  const getMediaElement = (): HTMLMediaElement | null => {
+    if (!mediaElement) {
+      mediaElement = container.querySelector('video, audio')
+    }
+    return mediaElement
+  }
+
+  const ctx: FeatureContext = {
+    container,
+    store,
+    options: opts.options || {},
+    getMediaElement,
+  }
+
+  // Setup all features
+  for (const feature of opts.features) {
+    const cleanup = feature.setup(ctx)
+    if (cleanup) cleanups.push(cleanup)
+  }
+
+  return {
+    el: container,
+    get state() {
+      return store.getState()
+    },
+    subscribe: store.subscribe.bind(store),
+    getMediaElement,
+    destroy() {
+      for (const cleanup of cleanups) cleanup()
+      cleanups.length = 0
+      store.reset()
+      mediaElement = null
+    },
+  }
+}