ts-video-player 0.1.0

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

@@ -0,0 +1,65 @@
+/**
+ * ts-video-player <media-live-button> Custom Element
+ *
+ * @module elements/media-live-button
+ */
+
+import { HTMLElementBase } from './base'
+import { resolvePlayer } from './utils'
+
+export class MediaLiveButton 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; gap: 6px; min-height: 40px; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
+          i { width: 8px; height: 8px; border-radius: 9999px; background: #ef4444; }
+          :host(:not([at-live-edge])) button { opacity: 0.72; }
+        </style>
+        <button part="button" type="button" aria-label="Go to live edge"><i aria-hidden="true"></i><span>LIVE</span></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
+    const threshold = Math.max(0, Number(this.getAttribute('threshold') || 10))
+    const update = (): void => {
+      const state = player.state
+      const end = state.seekable.at(-1)?.end
+      const providerLive = (player.provider as { isLive?: boolean } | null)?.isLive === true
+      const available = end !== undefined && (providerLive || !Number.isFinite(state.duration))
+      const atLiveEdge = available && end - state.currentTime <= threshold
+      this.toggleAttribute('available', available)
+      this.toggleAttribute('at-live-edge', atLiveEdge)
+      button.setAttribute('aria-pressed', String(atLiveEdge))
+    }
+    const click = (): void => {
+      const end = player.state.seekable.at(-1)?.end
+      if (end !== undefined) {
+        player.seekTo(end)
+        void player.play()
+      }
+    }
+    button.addEventListener('click', click)
+    const unsubscribe = player.subscribe(update)
+    update()
+    this.cleanup = () => {
+      unsubscribe()
+      button.removeEventListener('click', click)
+    }
+  }
+}

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

@@ -0,0 +1,69 @@
+/**
+ * ts-video-player <media-mute-button> Custom Element
+ *
+ * @module elements/media-mute-button
+ */
+
+import { resolvePlayer } from './utils'
+
+const ICON_MUTED = 'M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.796 8.796 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z'
+const ICON_LOW = 'M18.5 12A4.5 4.5 0 0 0 16 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z'
+const ICON_HIGH = 'M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'
+
+function getVolumeIcon(muted: boolean, volume: number): string {
+  if (muted || volume === 0) return ICON_MUTED
+  if (volume < 0.5) return ICON_LOW
+  return ICON_HIGH
+}
+
+import { HTMLElementBase } from './base'
+
+export class MediaMuteButton extends HTMLElementBase {
+  private _cleanup: (() => void) | null = null
+
+  connectedCallback(): void {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: 'open' })
+      shadow.innerHTML = `
+        <style>
+          :host { display: inline-flex; }
+          button {
+            display: inline-flex; align-items: center; justify-content: center;
+            width: 40px; height: 40px; padding: 8px;
+            background: transparent; border: none; color: inherit; cursor: pointer;
+          }
+          button:hover { opacity: 0.8; }
+        </style>
+        <button part="button" type="button" aria-label="Mute">
+          <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
+            <path d="${ICON_HIGH}"/>
+          </svg>
+        </button>
+      `
+    }
+
+    queueMicrotask(() => this.attach())
+  }
+
+  disconnectedCallback(): void {
+    this._cleanup?.()
+    this._cleanup = null
+  }
+
+  private attach(): void {
+    const player = resolvePlayer(this)
+    if (!player) return
+
+    const btn = this.shadowRoot!.querySelector('button')!
+    btn.addEventListener('click', () => player.toggleMute())
+
+    const unsub = player.subscribe((state: any) => {
+      const icon = getVolumeIcon(state.muted, state.volume)
+      btn.setAttribute('aria-label', state.muted ? 'Unmute' : 'Mute')
+      const path = this.shadowRoot!.querySelector('path')!
+      path.setAttribute('d', icon)
+    })
+
+    this._cleanup = unsub
+  }
+}

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

@@ -0,0 +1,66 @@
+/**
+ * ts-video-player <media-pip-button> Custom Element
+ *
+ * @module elements/media-pip-button
+ */
+
+import { resolvePlayer } from './utils'
+
+const PIP_ICON = 'M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z'
+
+import { HTMLElementBase } from './base'
+
+export class MediaPipButton extends HTMLElementBase {
+  private _cleanup: (() => void) | null = null
+
+  connectedCallback(): void {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: 'open' })
+      shadow.innerHTML = `
+        <style>
+          :host { display: inline-flex; }
+          :host([hidden]) { display: none; }
+          button {
+            display: inline-flex; align-items: center; justify-content: center;
+            width: 40px; height: 40px; padding: 8px;
+            background: transparent; border: none; color: inherit; cursor: pointer;
+          }
+          button:hover { opacity: 0.8; }
+          button:disabled { opacity: 0.4; cursor: not-allowed; }
+        </style>
+        <button part="button" type="button" aria-label="Picture in picture">
+          <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
+            <path d="${PIP_ICON}"/>
+          </svg>
+        </button>
+      `
+    }
+
+    queueMicrotask(() => this.attach())
+  }
+
+  disconnectedCallback(): void {
+    this._cleanup?.()
+    this._cleanup = null
+  }
+
+  private attach(): void {
+    const player = resolvePlayer(this)
+    if (!player) return
+
+    const btn = this.shadowRoot!.querySelector('button')!
+    btn.addEventListener('click', () => player.togglePiP())
+
+    const unsub = player.subscribe((state: any) => {
+      const avail = state.pipAvailability
+      if (avail === 'unsupported') {
+        this.setAttribute('hidden', '')
+      } else {
+        this.removeAttribute('hidden')
+      }
+      btn.disabled = avail !== 'available'
+    })
+
+    this._cleanup = unsub
+  }
+}

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

@@ -0,0 +1,69 @@
+/**
+ * ts-video-player <media-play-button> Custom Element
+ *
+ * @module elements/media-play-button
+ */
+
+import { resolvePlayer } from './utils'
+
+const PLAY_ICON = 'M8 5v14l11-7z'
+const PAUSE_ICON = 'M6 19h4V5H6v14zm8-14v14h4V5h-4z'
+
+import { HTMLElementBase } from './base'
+
+export class MediaPlayButton 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 {
+            display: inline-flex; align-items: center; justify-content: center;
+            width: 40px; height: 40px; padding: 8px;
+            background: transparent; border: none; color: inherit; cursor: pointer;
+          }
+          button:hover { opacity: 0.8; }
+        </style>
+        <button part="button" type="button" aria-label="Play">
+          <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
+            <path d="${PLAY_ICON}"/>
+          </svg>
+        </button>
+      `
+    }
+
+    // Defer player resolution to next microtask (player may not be ready yet)
+    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)
+    if (!player) return
+
+    const btn = this.shadowRoot!.querySelector('button')!
+    this._onClick = () => player.togglePlay()
+    btn.addEventListener('click', this._onClick)
+
+    const unsub = player.subscribe('paused', (state: any) => {
+      const paused = state.paused
+      btn.setAttribute('aria-label', paused ? 'Play' : 'Pause')
+      btn.setAttribute('aria-pressed', String(!paused))
+      const path = this.shadowRoot!.querySelector('path')!
+      path.setAttribute('d', paused ? PLAY_ICON : PAUSE_ICON)
+    })
+
+    this._cleanup = unsub
+  }
+}

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

@@ -0,0 +1,59 @@
+import { resolvePlayer } from './utils'
+import type { PlayerState } from '../types'
+
+const defaultRates = [0.5, 0.75, 1, 1.25, 1.5, 2]
+
+import { HTMLElementBase } from './base'
+
+export class MediaPlaybackRateButton 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: 42px; height: 40px; padding: 0 8px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; font-variant-numeric: tabular-nums; }
+          button:hover { opacity: .8; }
+          button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
+        </style>
+        <button part="button" type="button" aria-label="Playback speed"></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 getRates(): number[] {
+    const rates = (this.getAttribute('rates') ?? '')
+      .split(',')
+      .map(value => Number.parseFloat(value.trim()))
+      .filter(value => Number.isFinite(value) && value >= 0.25 && value <= 4)
+    return [...new Set(rates.length > 0 ? rates : defaultRates)].sort((a, b) => a - b)
+  }
+
+  private attach(): void {
+    const player = resolvePlayer(this)
+    const button = this.shadowRoot?.querySelector('button')
+    if (!player || !button) return
+    const rates = this.getRates()
+    this.onClick = () => {
+      const currentIndex = rates.findIndex(rate => rate > player.state.playbackRate + 0.001)
+      player.setPlaybackRate(rates[currentIndex < 0 ? 0 : currentIndex])
+    }
+    button.addEventListener('click', this.onClick)
+    this.cleanup = player.subscribe('playbackRate', (state: PlayerState) => {
+      button.textContent = `${state.playbackRate}x`
+      button.setAttribute('aria-label', `Playback speed ${state.playbackRate}x`)
+    })
+  }
+}

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

@@ -0,0 +1,75 @@
+/**
+ * ts-video-player <media-preview-time> Custom Element
+ *
+ * Displays the time at the current pointer position on the seek bar.
+ * Intended to be placed inside or near a <media-progress-bar>.
+ * Listens for custom 'previewtime' events or pointer events on the progress bar.
+ *
+ * @module elements/media-preview-time
+ */
+
+import { resolvePlayer, formatTime } from './utils'
+
+import { HTMLElementBase } from './base'
+
+export class MediaPreviewTime extends HTMLElementBase {
+  private _cleanups: Array<() => void> = []
+
+  connectedCallback(): void {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: 'open' })
+      shadow.innerHTML = `
+        <style>
+          :host {
+            display: inline-block;
+            font-variant-numeric: tabular-nums;
+            font-family: monospace;
+            font-size: 12px;
+            color: inherit;
+            pointer-events: none;
+          }
+        </style>
+        <span part="value">0:00</span>
+      `
+    }
+
+    queueMicrotask(() => this.attach())
+  }
+
+  disconnectedCallback(): void {
+    this._cleanups.forEach((fn) => fn())
+    this._cleanups = []
+  }
+
+  private attach(): void {
+    const player = resolvePlayer(this)
+    if (!player) return
+
+    // Find sibling or parent progress bar to listen for pointer events
+    const progressBar =
+      this.closest('media-progress-bar') ||
+      this.parentElement?.querySelector('media-progress-bar')
+
+    if (progressBar) {
+      const onPointerMove = (e: Event) => {
+        const pe = e as PointerEvent
+        const track = (progressBar.shadowRoot?.querySelector('.track') ||
+          progressBar) as HTMLElement
+        const rect = track.getBoundingClientRect()
+        const percent = Math.max(0, Math.min(1, (pe.clientX - rect.left) / rect.width))
+        const time = percent * (player.state.duration || 0)
+        this.updateTime(time, player.state.duration)
+      }
+
+      progressBar.addEventListener('pointermove', onPointerMove)
+      this._cleanups.push(() => progressBar.removeEventListener('pointermove', onPointerMove))
+    }
+  }
+
+  private updateTime(time: number, duration: number): void {
+    const span = this.shadowRoot?.querySelector('span')
+    if (span) {
+      span.textContent = formatTime(time, duration)
+    }
+  }
+}

package/src/elements/media-progress-bar.ts

@@ -0,0 +1,200 @@
+/**
+ * ts-video-player <media-progress-bar> Custom Element
+ *
+ * Seek bar with buffered overlay, time tooltip, pointer/keyboard interaction.
+ *
+ * @module elements/media-progress-bar
+ */
+
+import { resolvePlayer, formatTime, formatTimePhrase } from './utils'
+
+import { HTMLElementBase } from './base'
+
+export class MediaProgressBar 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: flex; flex: 1; align-items: center; }
+          .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%);
+          }
+          :host([waveform]) .track { height: 20px; overflow: hidden; background: rgba(255,255,255,0.16); }
+          .waveform { position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; opacity: 0.65; }
+          .buffered {
+            position: absolute; top: 0; left: 0;
+            height: 100%; background: rgba(255,255,255,0.4);
+            border-radius: 2px; width: 0%;
+          }
+          .fill {
+            position: absolute; top: 0; left: 0;
+            height: 100%; background: #fff;
+            border-radius: 2px; width: 0%;
+          }
+          .thumb {
+            position: absolute; top: 50%; left: 0%;
+            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); }
+          .tooltip {
+            position: absolute; bottom: 100%; left: 0;
+            transform: translateX(-50%);
+            background: rgba(0,0,0,0.85); color: #fff;
+            padding: 4px 8px; border-radius: 3px;
+            font-size: 12px; font-family: monospace;
+            white-space: nowrap; pointer-events: none;
+            opacity: 0; transition: opacity 0.15s;
+            margin-bottom: 8px;
+          }
+          .tooltip::after {
+            content: ''; position: absolute;
+            top: 100%; left: 50%; transform: translateX(-50%);
+            border: 4px solid transparent;
+            border-top-color: rgba(0,0,0,0.85);
+          }
+          .container:hover .tooltip { opacity: 1; }
+        </style>
+        <div class="container" part="container" role="slider"
+          aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"
+          aria-label="Seek" tabindex="0">
+          <div class="tooltip" part="tooltip">0:00</div>
+          <div class="track" part="track">
+            <div class="waveform" part="waveform" aria-hidden="true"></div>
+            <div class="buffered" part="buffered"></div>
+            <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 buffered = this.shadowRoot!.querySelector('.buffered') as HTMLElement
+    const tooltip = this.shadowRoot!.querySelector('.tooltip') as HTMLElement
+    const waveform = this.getAttribute('waveform')
+    if (waveform) {
+      const resolved = new URL(waveform, document.baseURI)
+      if (['http:', 'https:', 'blob:'].includes(resolved.protocol) || resolved.href.startsWith('data:image/')) {
+        const layer = this.shadowRoot!.querySelector('.waveform') as HTMLElement
+        layer.style.backgroundImage = `url(${JSON.stringify(resolved.href)})`
+      }
+    }
+
+    const updateTooltip = (e: PointerEvent) => {
+      const rect = track.getBoundingClientRect()
+      const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+      const time = percent * (player.state.duration || 0)
+
+      tooltip.textContent = formatTime(time, player.state.duration)
+
+      // Position tooltip, clamping to container edges
+      const containerRect = container.getBoundingClientRect()
+      const tooltipWidth = tooltip.offsetWidth
+      const rawLeft = e.clientX - containerRect.left
+      const minLeft = tooltipWidth / 2
+      const maxLeft = containerRect.width - tooltipWidth / 2
+      const clampedLeft = Math.max(minLeft, Math.min(maxLeft, rawLeft))
+
+      tooltip.style.left = `${clampedLeft}px`
+    }
+
+    const seekFromEvent = (e: PointerEvent) => {
+      const rect = track.getBoundingClientRect()
+      const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+      const time = percent * (player.state.duration || 0)
+      player.seekTo(time)
+    }
+
+    const onPointerDown = (e: PointerEvent) => {
+      this._isDragging = true
+      container.setPointerCapture(e.pointerId)
+      seekFromEvent(e)
+    }
+
+    const onPointerMove = (e: PointerEvent) => {
+      updateTooltip(e)
+      if (!this._isDragging) return
+      seekFromEvent(e)
+    }
+
+    const onPointerUp = (e: PointerEvent) => {
+      if (!this._isDragging) return
+      this._isDragging = false
+      container.releasePointerCapture(e.pointerId)
+    }
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      const step = 5
+      let newTime = player.state.currentTime
+
+      switch (e.key) {
+        case 'ArrowRight': newTime = Math.min(player.state.duration, newTime + step); break
+        case 'ArrowLeft': newTime = Math.max(0, newTime - step); break
+        case 'Home': newTime = 0; break
+        case 'End': newTime = player.state.duration; break
+        default: return
+      }
+
+      e.preventDefault()
+      player.seekTo(newTime)
+    }
+
+    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 (this._isDragging) return
+
+      const duration = state.duration || 0
+      const percent = duration > 0 ? (state.currentTime / duration) * 100 : 0
+
+      fill.style.width = `${percent}%`
+      thumb.style.left = `${percent}%`
+
+      container.setAttribute('aria-valuenow', String(Math.round(percent)))
+      container.setAttribute('aria-valuetext', `${formatTimePhrase(state.currentTime)} of ${formatTimePhrase(duration)}`)
+
+      // Buffered
+      const bufferedPct = (state.bufferedAmount || 0) * 100
+      buffered.style.width = `${bufferedPct}%`
+    })
+
+    this._cleanups.push(unsub)
+  }
+}