avbridge 2.2.0 → 2.3.0

package/src/element/player-icons.ts

@@ -0,0 +1,25 @@
+/**
+ * Inline SVG icons for <avbridge-player> controls.
+ * All icons are 24x24 viewBox, stroke-based where possible for
+ * easy theming via CSS `color` (currentColor fill/stroke).
+ */
+
+export const ICON_PLAY = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>`;
+
+export const ICON_PAUSE = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6zm8-14v14h4V5z"/></svg>`;
+
+export const ICON_VOLUME_UP = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.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"/></svg>`;
+
+export const ICON_VOLUME_OFF = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="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.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>`;
+
+export const ICON_SETTINGS = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 00-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.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"/></svg>`;
+
+export const ICON_FULLSCREEN = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>`;
+
+export const ICON_FULLSCREEN_EXIT = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>`;
+
+export const ICON_REPLAY_10 = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M11.99 5V1l-5 5 5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6h-2c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/><text x="10" y="16" font-size="8" text-anchor="middle" fill="currentColor" font-family="sans-serif">10</text></svg>`;
+
+export const ICON_FORWARD_10 = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 13c0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6v4l5-5-5-5v4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8h-2z"/><text x="14" y="16" font-size="8" text-anchor="middle" fill="currentColor" font-family="sans-serif">10</text></svg>`;
+
+export const ICON_SPEED = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 8v8l6-4-6-4zm10.77-1.67L22 7.67l-.77-1.34c-.3-.53-.8-.93-1.41-1.05l-1.7-.3c-.16-.43-.36-.84-.6-1.22l.8-1.54-.77-1.34-.77 1.34.8 1.54c-.24.38-.44.79-.6 1.22l-1.7.3c-.61.12-1.11.52-1.41 1.05L13 7.67l1.23-1.34c-.3.53-.3 1.15 0 1.67L15.46 10l-1.23 2.34c-.3.53-.3 1.15 0 1.67L15.46 16l-1.23 2.34.77 1.34.77-1.34-1.23-2.34c.3-.53.3-1.15 0-1.67L13.31 12l1.23-2.34c.3-.53.3-1.15 0-1.67z"/></svg>`;

package/src/element/player-styles.ts

@@ -0,0 +1,472 @@
+/**
+ * Shadow DOM CSS for <avbridge-player>.
+ * YouTube-inspired dark theme. All controls use ::part() for external styling.
+ */
+
+export const PLAYER_STYLES = /* css */ `
+:host {
+  display: block;
+  position: relative;
+  width: 100%;
+  background: #000;
+  overflow: hidden;
+  user-select: none;
+  -webkit-user-select: none;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  color: #fff;
+  line-height: 1;
+}
+
+:host(:fullscreen),
+:host(:fullscreen) .avp {
+  width: 100vw;
+  height: 100vh;
+}
+
+/* ── Container ────────────────────────────────────────────────────────── */
+
+.avp {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.avp avbridge-video {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* ── Center overlay ───────────────────────────────────────────────────── */
+
+.avp-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.avp-overlay-btn {
+  width: 68px;
+  height: 68px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.6);
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.2s, transform 0.15s;
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.avp-overlay-btn svg {
+  width: 36px;
+  height: 36px;
+}
+
+.avp-overlay-btn:hover {
+  background: rgba(0, 0, 0, 0.75);
+  transform: scale(1);
+}
+
+:host([data-state="idle"]) .avp-overlay-btn,
+:host([data-state="paused"]) .avp-overlay-btn {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* ── Loading spinner ──────────────────────────────────────────────────── */
+
+.avp-spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  display: none;
+  pointer-events: none;
+}
+
+:host([data-state="loading"]) .avp-spinner,
+:host([data-state="buffering"]) .avp-spinner {
+  display: block;
+  animation: avp-spin 0.8s linear infinite;
+}
+
+:host([data-state="loading"]) .avp-overlay-btn,
+:host([data-state="buffering"]) .avp-overlay-btn {
+  display: none;
+}
+
+@keyframes avp-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── Double-tap ripple ────────────────────────────────────────────────── */
+
+.avp-ripple {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  opacity: 0;
+  z-index: 3;
+}
+
+.avp-ripple svg { width: 28px; height: 28px; }
+.avp-ripple-left { left: 15%; }
+.avp-ripple-right { right: 15%; }
+
+.avp-ripple.active {
+  animation: avp-ripple 0.5s ease-out;
+}
+
+@keyframes avp-ripple {
+  0% { opacity: 1; transform: translateY(-50%) scale(0.5); }
+  100% { opacity: 0; transform: translateY(-50%) scale(1.5); }
+}
+
+/* ── Speed indicator (tap-and-hold) ───────────────────────────────────── */
+
+.avp-speed-indicator {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.7);
+  padding: 6px 16px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 600;
+  pointer-events: none;
+  opacity: 0;
+  z-index: 4;
+  transition: opacity 0.15s;
+}
+
+.avp-speed-indicator.active { opacity: 1; }
+
+/* ── Controls bar ─────────────────────────────────────────────────────── */
+
+.avp-controls {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 5;
+  padding: 0 12px 8px;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  opacity: 1;
+  transition: opacity 0.25s;
+}
+
+:host([data-controls-hidden]) .avp-controls {
+  opacity: 0;
+  pointer-events: none;
+}
+
+:host([data-controls-hidden]) { cursor: none; }
+
+/* ── Seek bar ─────────────────────────────────────────────────────────── */
+
+.avp-seek {
+  position: relative;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.avp-seek-track {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 2px;
+  overflow: hidden;
+  transition: height 0.1s;
+}
+
+.avp-seek:hover .avp-seek-track { height: 5px; }
+
+.avp-seek-buffered {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.35);
+  border-radius: inherit;
+}
+
+.avp-seek-progress {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  background: #f00;
+  border-radius: inherit;
+}
+
+.avp-seek-input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  /* Disable pointer events — we handle clicks/drags manually on .avp-seek
+   * so the click position maps linearly across the full track width.
+   * The input is still used for keyboard accessibility. */
+  pointer-events: none;
+  z-index: 1;
+}
+
+.avp-seek-thumb {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #f00;
+  top: 50%;
+  /* Thumb center follows the cursor exactly: left = pct% of track width,
+   * then translate(-50%) centers the thumb on that point. Matches the
+   * manual pointer-to-time mapping in _timeFromSeekPointer which is
+   * also linear from 0% to 100% of the track width. */
+  left: calc(var(--pct, 0) * 1%);
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 0.1s;
+  pointer-events: none;
+}
+
+.avp-seek:hover .avp-seek-thumb { transform: translate(-50%, -50%) scale(1); }
+
+.avp-seek-tooltip {
+  position: absolute;
+  bottom: 24px;
+  background: rgba(0, 0, 0, 0.8);
+  padding: 4px 8px;
+  border-radius: 3px;
+  font-size: 12px;
+  white-space: nowrap;
+  transform: translateX(-50%);
+  pointer-events: none;
+  display: none;
+}
+
+.avp-seek:hover .avp-seek-tooltip { display: block; }
+
+/* ── Bottom row ───────────────────────────────────────────────────────── */
+
+.avp-bottom {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+}
+
+.avp-btn {
+  background: none;
+  border: none;
+  color: #fff;
+  padding: 4px;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.9;
+  transition: opacity 0.1s;
+}
+
+.avp-btn:hover { opacity: 1; }
+.avp-btn svg { width: 24px; height: 24px; }
+
+/* ── Volume ───────────────────────────────────────────────────────────── */
+
+.avp-volume {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+.avp-volume-slider {
+  width: 0;
+  overflow: hidden;
+  transition: width 0.15s;
+  display: flex;
+  align-items: center;
+  /* Extra padding so the thumb isn't clipped at track edges */
+  padding: 6px 0;
+  margin: -6px 0;
+}
+
+.avp-volume:hover .avp-volume-slider { width: 68px; }
+
+.avp-volume-input {
+  width: 60px;
+  height: 4px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+  /* Prevent thumb clipping — the thumb is taller than the track */
+  overflow: visible;
+  margin: 0;
+}
+
+.avp-volume-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #fff;
+  cursor: pointer;
+}
+
+.avp-volume-input::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #fff;
+  border: none;
+  cursor: pointer;
+}
+
+/* ── Time display ─────────────────────────────────────────────────────── */
+
+.avp-time {
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  opacity: 0.9;
+}
+
+/* ── Strategy badge ───────────────────────────────────────────────────── */
+
+.avp-badge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.15);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  opacity: 0.8;
+}
+
+.avp-badge[data-strategy="native"] { background: rgba(45, 106, 79, 0.7); }
+.avp-badge[data-strategy="remux"] { background: rgba(30, 96, 145, 0.7); }
+.avp-badge[data-strategy="hybrid"] { background: rgba(199, 125, 255, 0.4); }
+.avp-badge[data-strategy="fallback"] { background: rgba(157, 78, 221, 0.5); }
+
+/* ── Spacer ───────────────────────────────────────────────────────────── */
+
+.avp-spacer { flex: 1; }
+
+/* ── Settings menu ────────────────────────────────────────────────────── */
+
+.avp-settings {
+  position: absolute;
+  bottom: 52px;
+  right: 12px;
+  background: rgba(28, 28, 28, 0.95);
+  border-radius: 8px;
+  min-width: 220px;
+  max-height: 300px;
+  overflow-y: auto;
+  display: none;
+  z-index: 10;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+}
+
+.avp-settings.open { display: block; }
+
+.avp-settings-section {
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.avp-settings-section:last-child { border-bottom: none; }
+
+.avp-settings-label {
+  padding: 4px 16px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  opacity: 0.5;
+}
+
+.avp-settings-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.avp-settings-item:hover { background: rgba(255, 255, 255, 0.1); }
+
+.avp-settings-item.active {
+  color: #3ea6ff;
+}
+
+.avp-settings-item.active::before {
+  content: "\\2713";
+  margin-right: 8px;
+  font-weight: bold;
+}
+
+/* ── Stats for nerds ──────────────────────────────────────────────────── */
+
+.avp-stats {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  background: rgba(0, 0, 0, 0.8);
+  padding: 12px 16px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-family: "SF Mono", "Menlo", "Consolas", monospace;
+  line-height: 1.6;
+  white-space: pre;
+  pointer-events: auto;
+  z-index: 6;
+  max-width: 400px;
+  overflow: auto;
+  display: none;
+}
+
+.avp-stats.open { display: block; }
+
+/* ── Mobile adjustments ───────────────────────────────────────────────── */
+
+@media (pointer: coarse) {
+  .avp-btn svg { width: 28px; height: 28px; }
+  .avp-btn { padding: 8px; }
+  .avp-seek-track { height: 4px; }
+  .avp-seek:hover .avp-seek-track { height: 4px; }
+  .avp-seek-thumb { transform: translate(-50%, -50%) scale(1); }
+  .avp-volume:hover .avp-volume-slider { width: 0; }
+  .avp-overlay-btn { width: 56px; height: 56px; }
+  .avp-overlay-btn svg { width: 30px; height: 30px; }
+}
+`;

package/src/errors.ts

@@ -0,0 +1,47 @@
+/**
+ * Structured error with a machine-readable code and human-readable
+ * recovery hint. Consumers can switch on `error.code` for programmatic
+ * handling and show `error.recovery` in UI.
+ *
+ * All codes use the `ERR_AVBRIDGE_` prefix to avoid collisions.
+ */
+export class AvbridgeError extends Error {
+  override name = "AvbridgeError";
+
+  constructor(
+    /** Machine-readable error code. */
+    public readonly code: string,
+    message: string,
+    /** Human-readable recovery suggestion. */
+    public readonly recovery?: string,
+    options?: ErrorOptions,
+  ) {
+    super(message, options);
+  }
+}
+
+// ── Error codes ────────────────────────────────────────────────────────
+
+// Probe
+export const ERR_PROBE_FAILED = "ERR_AVBRIDGE_PROBE_FAILED";
+export const ERR_PROBE_UNKNOWN_CONTAINER = "ERR_AVBRIDGE_PROBE_UNKNOWN_CONTAINER";
+export const ERR_PROBE_FETCH_FAILED = "ERR_AVBRIDGE_PROBE_FETCH_FAILED";
+
+// Codec / strategy
+export const ERR_CODEC_NOT_SUPPORTED = "ERR_AVBRIDGE_CODEC_NOT_SUPPORTED";
+export const ERR_STRATEGY_FAILED = "ERR_AVBRIDGE_STRATEGY_FAILED";
+export const ERR_ALL_STRATEGIES_EXHAUSTED = "ERR_AVBRIDGE_ALL_STRATEGIES_EXHAUSTED";
+
+// Player lifecycle
+export const ERR_PLAYER_NOT_READY = "ERR_AVBRIDGE_PLAYER_NOT_READY";
+
+// Transport / network
+export const ERR_RANGE_NOT_SUPPORTED = "ERR_AVBRIDGE_RANGE_NOT_SUPPORTED";
+export const ERR_FETCH_FAILED = "ERR_AVBRIDGE_FETCH_FAILED";
+
+// libav
+export const ERR_LIBAV_NOT_REACHABLE = "ERR_AVBRIDGE_LIBAV_NOT_REACHABLE";
+
+// MSE
+export const ERR_MSE_NOT_SUPPORTED = "ERR_AVBRIDGE_MSE_NOT_SUPPORTED";
+export const ERR_MSE_CODEC_NOT_SUPPORTED = "ERR_AVBRIDGE_MSE_CODEC_NOT_SUPPORTED";

package/src/index.ts

@@ -34,9 +34,32 @@ export type {
   OutputVideoCodec,
   OutputAudioCodec,
   HardwareAccelerationHint,
+  FetchFn,
+  TransportConfig,
 } from "./types.js";
 
 export { classify } from "./classify/index.js";
+export {
+  NATIVE_VIDEO_CODECS,
+  NATIVE_AUDIO_CODECS,
+  FALLBACK_VIDEO_CODECS,
+  FALLBACK_AUDIO_CODECS,
+} from "./classify/rules.js";
 export { probe } from "./probe/index.js";
 export { remux, transcode } from "./convert/index.js";
 export { srtToVtt } from "./subtitles/srt.js";
+export { AvbridgeError } from "./errors.js";
+export {
+  ERR_PROBE_FAILED,
+  ERR_PROBE_UNKNOWN_CONTAINER,
+  ERR_PROBE_FETCH_FAILED,
+  ERR_CODEC_NOT_SUPPORTED,
+  ERR_STRATEGY_FAILED,
+  ERR_ALL_STRATEGIES_EXHAUSTED,
+  ERR_PLAYER_NOT_READY,
+  ERR_RANGE_NOT_SUPPORTED,
+  ERR_FETCH_FAILED,
+  ERR_LIBAV_NOT_REACHABLE,
+  ERR_MSE_NOT_SUPPORTED,
+  ERR_MSE_CODEC_NOT_SUPPORTED,
+} from "./errors.js";

package/src/player-element.ts

@@ -0,0 +1,18 @@
+/**
+ * Registration entry point for `<avbridge-player>`.
+ *
+ * Import `"avbridge/player"` to register the element. This also registers
+ * `<avbridge-video>` (which `<avbridge-player>` wraps internally).
+ *
+ * Separate from `"avbridge/element"` so consumers who only need the bare
+ * `<avbridge-video>` primitive don't pay for the controls CSS/JS.
+ */
+
+import { AvbridgePlayerElement } from "./element/avbridge-player.js";
+
+export { AvbridgePlayerElement } from "./element/avbridge-player.js";
+export type { AvbridgeVideoElement } from "./element/avbridge-video.js";
+
+if (!customElements.get("avbridge-player")) {
+  customElements.define("avbridge-player", AvbridgePlayerElement);
+}