ts-video-player 0.1.0

package/src/core/tooltips.ts

@@ -0,0 +1,370 @@
+/**
+ * Tooltips System
+ *
+ * Tooltips for player controls with smart positioning.
+ *
+ * @module core/tooltips
+ */
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right'
+
+export interface TooltipConfig {
+  /** Tooltip placement */
+  placement?: TooltipPlacement
+  /** Offset from target in pixels */
+  offset?: number
+  /** Show delay in ms */
+  showDelay?: number
+  /** Hide delay in ms */
+  hideDelay?: number
+  /** Container for boundary detection */
+  container?: HTMLElement
+  /** Custom class name */
+  className?: string
+}
+
+// =============================================================================
+// Tooltip Component
+// =============================================================================
+
+export class Tooltip {
+  private element: HTMLElement
+  private target: HTMLElement | null = null
+  private config: Required<TooltipConfig>
+  private showTimeout: ReturnType<typeof setTimeout> | null = null
+  private hideTimeout: ReturnType<typeof setTimeout> | null = null
+  private visible = false
+
+  constructor(config: TooltipConfig = {}) {
+    this.config = {
+      placement: config.placement || 'top',
+      offset: config.offset ?? 8,
+      showDelay: config.showDelay ?? 300,
+      hideDelay: config.hideDelay ?? 0,
+      container: config.container || document.body,
+      className: config.className || '',
+    }
+
+    this.element = document.createElement('div')
+    this.element.className = `tsvp-tooltip ${this.config.className}`.trim()
+    this.element.setAttribute('role', 'tooltip')
+    this.element.style.cssText = `
+      position: absolute;
+      z-index: 1000;
+      padding: 6px 10px;
+      background: var(--tsvp-controls-tooltip-bg, rgba(0, 0, 0, 0.9));
+      color: var(--tsvp-controls-tooltip-text, #ffffff);
+      font-size: var(--tsvp-font-size-sm, 12px);
+      font-family: var(--tsvp-font-family, sans-serif);
+      border-radius: var(--tsvp-radius-sm, 4px);
+      white-space: nowrap;
+      pointer-events: none;
+      opacity: 0;
+      transform: scale(0.9);
+      transition: opacity 150ms ease, transform 150ms ease;
+      box-shadow: var(--tsvp-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.3));
+    `
+
+    this.hide()
+  }
+
+  /**
+   * Attach tooltip to a target element
+   */
+  attach(target: HTMLElement, text: string): void {
+    this.target = target
+    this.element.textContent = text
+
+    // Add to DOM if not already
+    if (!this.element.parentElement) {
+      this.config.container.appendChild(this.element)
+    }
+
+    // Event listeners
+    target.addEventListener('mouseenter', this.handleMouseEnter)
+    target.addEventListener('mouseleave', this.handleMouseLeave)
+    target.addEventListener('focus', this.handleFocus)
+    target.addEventListener('blur', this.handleBlur)
+  }
+
+  /**
+   * Detach from target
+   */
+  detach(): void {
+    if (this.target) {
+      this.target.removeEventListener('mouseenter', this.handleMouseEnter)
+      this.target.removeEventListener('mouseleave', this.handleMouseLeave)
+      this.target.removeEventListener('focus', this.handleFocus)
+      this.target.removeEventListener('blur', this.handleBlur)
+      this.target = null
+    }
+    this.hide()
+  }
+
+  /**
+   * Update tooltip text
+   */
+  setText(text: string): void {
+    this.element.textContent = text
+    if (this.visible) {
+      this.position()
+    }
+  }
+
+  /**
+   * Show tooltip
+   */
+  show(): void {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout)
+      this.hideTimeout = null
+    }
+
+    if (this.visible) return
+
+    this.showTimeout = setTimeout(() => {
+      this.visible = true
+      this.element.style.display = 'block'
+      this.position()
+
+      // Trigger animation
+      requestAnimationFrame(() => {
+        this.element.style.opacity = '1'
+        this.element.style.transform = 'scale(1)'
+      })
+    }, this.config.showDelay)
+  }
+
+  /**
+   * Hide tooltip
+   */
+  hide(): void {
+    if (this.showTimeout) {
+      clearTimeout(this.showTimeout)
+      this.showTimeout = null
+    }
+
+    if (!this.visible) {
+      this.element.style.display = 'none'
+      return
+    }
+
+    this.hideTimeout = setTimeout(() => {
+      this.visible = false
+      this.element.style.opacity = '0'
+      this.element.style.transform = 'scale(0.9)'
+
+      setTimeout(() => {
+        if (!this.visible) {
+          this.element.style.display = 'none'
+        }
+      }, 150)
+    }, this.config.hideDelay)
+  }
+
+  /**
+   * Position tooltip relative to target
+   */
+  private position(): void {
+    if (!this.target) return
+
+    const targetRect = this.target.getBoundingClientRect()
+    const tooltipRect = this.element.getBoundingClientRect()
+    const containerRect = this.config.container.getBoundingClientRect()
+
+    let top = 0
+    let left = 0
+
+    switch (this.config.placement) {
+      case 'top':
+        top = targetRect.top - tooltipRect.height - this.config.offset
+        left = targetRect.left + (targetRect.width - tooltipRect.width) / 2
+        break
+      case 'bottom':
+        top = targetRect.bottom + this.config.offset
+        left = targetRect.left + (targetRect.width - tooltipRect.width) / 2
+        break
+      case 'left':
+        top = targetRect.top + (targetRect.height - tooltipRect.height) / 2
+        left = targetRect.left - tooltipRect.width - this.config.offset
+        break
+      case 'right':
+        top = targetRect.top + (targetRect.height - tooltipRect.height) / 2
+        left = targetRect.right + this.config.offset
+        break
+    }
+
+    // Keep within container bounds
+    const minLeft = containerRect.left + 4
+    const maxLeft = containerRect.right - tooltipRect.width - 4
+    const minTop = containerRect.top + 4
+    const maxTop = containerRect.bottom - tooltipRect.height - 4
+
+    left = Math.max(minLeft, Math.min(maxLeft, left))
+    top = Math.max(minTop, Math.min(maxTop, top))
+
+    // Adjust for scroll
+    left += window.scrollX
+    top += window.scrollY
+
+    this.element.style.left = `${left}px`
+    this.element.style.top = `${top}px`
+  }
+
+  private handleMouseEnter = (): void => {
+    this.show()
+  }
+
+  private handleMouseLeave = (): void => {
+    this.hide()
+  }
+
+  private handleFocus = (): void => {
+    this.show()
+  }
+
+  private handleBlur = (): void => {
+    this.hide()
+  }
+
+  /**
+   * Get element
+   */
+  getElement(): HTMLElement {
+    return this.element
+  }
+
+  /**
+   * Check if visible
+   */
+  isVisible(): boolean {
+    return this.visible
+  }
+
+  /**
+   * Destroy tooltip
+   */
+  destroy(): void {
+    this.detach()
+    this.element.remove()
+  }
+}
+
+// =============================================================================
+// Tooltip Manager
+// =============================================================================
+
+export class TooltipManager {
+  private tooltips = new Map<HTMLElement, Tooltip>()
+  private config: TooltipConfig
+
+  constructor(config: TooltipConfig = {}) {
+    this.config = config
+  }
+
+  /**
+   * Add tooltip to an element
+   */
+  add(target: HTMLElement, text: string, config?: Partial<TooltipConfig>): Tooltip {
+    // Remove existing tooltip if any
+    this.remove(target)
+
+    const tooltip = new Tooltip({ ...this.config, ...config })
+    tooltip.attach(target, text)
+    this.tooltips.set(target, tooltip)
+
+    return tooltip
+  }
+
+  /**
+   * Update tooltip text
+   */
+  update(target: HTMLElement, text: string): void {
+    const tooltip = this.tooltips.get(target)
+    if (tooltip) {
+      tooltip.setText(text)
+    }
+  }
+
+  /**
+   * Remove tooltip from element
+   */
+  remove(target: HTMLElement): void {
+    const tooltip = this.tooltips.get(target)
+    if (tooltip) {
+      tooltip.destroy()
+      this.tooltips.delete(target)
+    }
+  }
+
+  /**
+   * Hide all tooltips
+   */
+  hideAll(): void {
+    this.tooltips.forEach(tooltip => tooltip.hide())
+  }
+
+  /**
+   * Destroy all tooltips
+   */
+  destroy(): void {
+    this.tooltips.forEach(tooltip => tooltip.destroy())
+    this.tooltips.clear()
+  }
+}
+
+// =============================================================================
+// Factory
+// =============================================================================
+
+export function createTooltip(config?: TooltipConfig): Tooltip {
+  return new Tooltip(config)
+}
+
+export function createTooltipManager(config?: TooltipConfig): TooltipManager {
+  return new TooltipManager(config)
+}
+
+// =============================================================================
+// CSS Styles
+// =============================================================================
+
+export const TOOLTIP_STYLES = `
+.tsvp-tooltip {
+  position: absolute;
+  z-index: 1000;
+  padding: 6px 10px;
+  background: var(--tsvp-controls-tooltip-bg, rgba(0, 0, 0, 0.9));
+  color: var(--tsvp-controls-tooltip-text, #ffffff);
+  font-size: var(--tsvp-font-size-sm, 12px);
+  font-family: var(--tsvp-font-family, sans-serif);
+  border-radius: var(--tsvp-radius-sm, 4px);
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: var(--tsvp-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.3));
+}
+
+.tsvp-tooltip::after {
+  content: '';
+  position: absolute;
+  border: 6px solid transparent;
+}
+
+.tsvp-tooltip--top::after {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: var(--tsvp-controls-tooltip-bg, rgba(0, 0, 0, 0.9));
+}
+
+.tsvp-tooltip--bottom::after {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: var(--tsvp-controls-tooltip-bg, rgba(0, 0, 0, 0.9));
+}
+`

package/src/elements/base.ts

@@ -0,0 +1,2 @@
+/** Browser HTMLElement base with an inert server-side constructor for import-safe SSR. */
+export const HTMLElementBase: typeof HTMLElement = globalThis.HTMLElement ?? class {} as typeof HTMLElement

package/src/elements/index.ts

@@ -0,0 +1,82 @@
+/**
+ * ts-video-player Custom Elements
+ *
+ * Web Components for building video player interfaces.
+ *
+ * @module elements
+ */
+
+export { VideoPlayerElement } from './video-player'
+export { VideoSkin } from './video-skin'
+export { MediaPlayButton } from './media-play-button'
+export { MediaMuteButton } from './media-mute-button'
+export { MediaFullscreenButton } from './media-fullscreen-button'
+export { MediaPipButton } from './media-pip-button'
+export { MediaTimeDisplay } from './media-time-display'
+export { MediaTimeGroup } from './media-time-group'
+export { MediaTimeSeparator } from './media-time-separator'
+export { MediaPreviewTime } from './media-preview-time'
+export { MediaProgressBar } from './media-progress-bar'
+export { MediaVolumeSlider } from './media-volume-slider'
+export { MediaSettingsMenu } from './media-settings-menu'
+export { MediaSeekButton } from './media-seek-button'
+export { MediaPlaybackRateButton } from './media-playback-rate-button'
+export { MediaAirplayButton } from './media-airplay-button'
+export { MediaLiveButton } from './media-live-button'
+export { MediaErrorDisplay } from './media-error-display'
+export { MediaRemotePlaybackButton } from './media-remote-playback-button'
+export { formatTime, formatTimePhrase, toISODuration, resolvePlayer } from './utils'
+
+import { VideoPlayerElement } from './video-player'
+import { VideoSkin } from './video-skin'
+import { MediaPlayButton } from './media-play-button'
+import { MediaMuteButton } from './media-mute-button'
+import { MediaFullscreenButton } from './media-fullscreen-button'
+import { MediaPipButton } from './media-pip-button'
+import { MediaTimeDisplay } from './media-time-display'
+import { MediaTimeGroup } from './media-time-group'
+import { MediaTimeSeparator } from './media-time-separator'
+import { MediaPreviewTime } from './media-preview-time'
+import { MediaProgressBar } from './media-progress-bar'
+import { MediaVolumeSlider } from './media-volume-slider'
+import { MediaSettingsMenu } from './media-settings-menu'
+import { MediaSeekButton } from './media-seek-button'
+import { MediaPlaybackRateButton } from './media-playback-rate-button'
+import { MediaAirplayButton } from './media-airplay-button'
+import { MediaLiveButton } from './media-live-button'
+import { MediaErrorDisplay } from './media-error-display'
+import { MediaRemotePlaybackButton } from './media-remote-playback-button'
+
+const elements = [
+  ['video-player', VideoPlayerElement],
+  ['video-skin', VideoSkin],
+  ['media-play-button', MediaPlayButton],
+  ['media-mute-button', MediaMuteButton],
+  ['media-fullscreen-button', MediaFullscreenButton],
+  ['media-pip-button', MediaPipButton],
+  ['media-time-display', MediaTimeDisplay],
+  ['media-time-group', MediaTimeGroup],
+  ['media-time-separator', MediaTimeSeparator],
+  ['media-preview-time', MediaPreviewTime],
+  ['media-progress-bar', MediaProgressBar],
+  ['media-volume-slider', MediaVolumeSlider],
+  ['media-settings-menu', MediaSettingsMenu],
+  ['media-seek-button', MediaSeekButton],
+  ['media-playback-rate-button', MediaPlaybackRateButton],
+  ['media-airplay-button', MediaAirplayButton],
+  ['media-live-button', MediaLiveButton],
+  ['media-error-display', MediaErrorDisplay],
+  ['media-remote-playback-button', MediaRemotePlaybackButton],
+] as const
+
+/**
+ * Register all custom elements.
+ * Safe to call multiple times — skips already-defined elements.
+ */
+export function registerElements(): void {
+  for (const [name, ctor] of elements) {
+    if (!customElements.get(name)) {
+      customElements.define(name, ctor)
+    }
+  }
+}

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

@@ -0,0 +1,78 @@
+/**
+ * ts-video-player <media-airplay-button> Custom Element
+ *
+ * @module elements/media-airplay-button
+ */
+
+import { HTMLElementBase } from './base'
+import { resolvePlayer } from './utils'
+
+const AIRPLAY_ICON = 'M6.2 19h11.6L12 13.2 6.2 19zM19 3H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h2v-2H5V5h14v10h-2v2h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'
+
+interface AirPlayVideo extends HTMLVideoElement {
+  webkitShowPlaybackTargetPicker?: () => void
+  webkitCurrentPlaybackTargetIsWireless?: boolean
+}
+
+export class MediaAirplayButton 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-airplay-active-color, #38bdf8); }
+        </style>
+        <button part="button" type="button" aria-label="Play on AirPlay">
+          <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon"><path d="${AIRPLAY_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 video: AirPlayVideo | null = null
+    const availability = (): void => update()
+    const update = (): void => {
+      const media = player.provider?.mediaElement
+      const nextVideo = media instanceof HTMLVideoElement ? media as AirPlayVideo : null
+      if (nextVideo !== video) {
+        video?.removeEventListener('webkitplaybacktargetavailabilitychanged', availability)
+        video?.removeEventListener('webkitcurrentplaybacktargetiswirelesschanged', availability)
+        nextVideo?.addEventListener('webkitplaybacktargetavailabilitychanged', availability)
+        nextVideo?.addEventListener('webkitcurrentplaybacktargetiswirelesschanged', availability)
+        video = nextVideo
+      }
+      const available = typeof video?.webkitShowPlaybackTargetPicker === 'function'
+      this.toggleAttribute('available', available)
+      this.toggleAttribute('connected', video?.webkitCurrentPlaybackTargetIsWireless === true)
+      button.setAttribute('aria-pressed', String(video?.webkitCurrentPlaybackTargetIsWireless === true))
+    }
+    const click = (): void => video?.webkitShowPlaybackTargetPicker?.()
+    button.addEventListener('click', click)
+    const unsubscribe = player.subscribe(update)
+    update()
+
+    this.cleanup = () => {
+      unsubscribe()
+      button.removeEventListener('click', click)
+      video?.removeEventListener('webkitplaybacktargetavailabilitychanged', availability)
+      video?.removeEventListener('webkitcurrentplaybacktargetiswirelesschanged', availability)
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+/**
+ * ts-video-player <media-error-display> Custom Element
+ *
+ * @module elements/media-error-display
+ */
+
+import { HTMLElementBase } from './base'
+import { resolvePlayer } from './utils'
+
+export class MediaErrorDisplay extends HTMLElementBase {
+  private cleanup: (() => void) | null = null
+
+  connectedCallback(): void {
+    if (!this.shadowRoot) {
+      const shadow = this.attachShadow({ mode: 'open' })
+      shadow.innerHTML = `
+        <style>
+          :host { display: none; position: absolute; inset: 0; z-index: 5; place-items: center; padding: 24px; background: rgba(0, 0, 0, 0.76); color: white; text-align: center; }
+          :host([open]) { display: grid; }
+          p { max-width: 42rem; margin: 0; font: 500 14px/1.5 system-ui, sans-serif; }
+        </style>
+        <p part="message" role="alert" aria-live="assertive"></p>
+      `
+    }
+    queueMicrotask(() => this.attach())
+  }
+
+  disconnectedCallback(): void {
+    this.cleanup?.()
+    this.cleanup = null
+  }
+
+  private attach(): void {
+    const player = resolvePlayer(this)
+    const message = this.shadowRoot?.querySelector('p')
+    if (!player || !message) return
+    const update = (): void => {
+      const error = player.state.error
+      this.toggleAttribute('open', !!error)
+      message.textContent = error?.message || ''
+      if (error?.code !== undefined) this.setAttribute('data-code', String(error.code))
+      else this.removeAttribute('data-code')
+    }
+    this.cleanup = player.subscribe(update)
+    update()
+  }
+}

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

@@ -0,0 +1,72 @@
+/**
+ * ts-video-player <media-fullscreen-button> Custom Element
+ *
+ * @module elements/media-fullscreen-button
+ */
+
+import { resolvePlayer } from './utils'
+
+const ENTER_FS = 'M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'
+const EXIT_FS = 'M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z'
+
+import { HTMLElementBase } from './base'
+
+export class MediaFullscreenButton 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="Enter fullscreen">
+          <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
+            <path d="${ENTER_FS}"/>
+          </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.toggleFullscreen())
+
+    const unsub = player.subscribe((state: any) => {
+      const avail = state.fullscreenAvailability
+      if (avail === 'unsupported') {
+        this.setAttribute('hidden', '')
+      } else {
+        this.removeAttribute('hidden')
+      }
+      btn.disabled = avail !== 'available'
+
+      const fs = state.fullscreen
+      btn.setAttribute('aria-label', fs ? 'Exit fullscreen' : 'Enter fullscreen')
+      const path = this.shadowRoot!.querySelector('path')!
+      path.setAttribute('d', fs ? EXIT_FS : ENTER_FS)
+    })
+
+    this._cleanup = unsub
+  }
+}