avbridge 2.9.0 → 2.11.0

package/src/element/avbridge-subtitles.ts

@@ -0,0 +1,273 @@
+/**
+ * `<avbridge-subtitles>` — scrollable subtitle timeline panel.
+ *
+ * Connects to an `<avbridge-player>` or `<avbridge-video>` via the `for`
+ * attribute (points to the player's `id`) or auto-detects a sibling.
+ * Reads TextTrack cues from the player's inner `<video>`, renders them
+ * as a timestamped list, highlights the active cue, and seeks on click.
+ *
+ * Usage:
+ *   <avbridge-player id="player">...</avbridge-player>
+ *   <avbridge-subtitles for="player"></avbridge-subtitles>
+ */
+
+const HTMLElementCtor: typeof HTMLElement =
+  typeof HTMLElement !== "undefined"
+    ? HTMLElement
+    : (class {} as unknown as typeof HTMLElement);
+
+const STYLES = `
+:host {
+  display: block;
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  color: #eee;
+  background: #1a1a1a;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.avs-empty {
+  padding: 16px;
+  opacity: 0.5;
+  text-align: center;
+  font-size: 13px;
+}
+
+.avs-cue {
+  display: flex;
+  gap: 12px;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  transition: background 0.1s;
+  align-items: flex-start;
+}
+
+.avs-cue:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.avs-cue.active {
+  background: rgba(62, 166, 255, 0.12);
+}
+
+.avs-time {
+  flex-shrink: 0;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.5;
+  min-width: 48px;
+  padding-top: 1px;
+}
+
+.avs-cue.active .avs-time {
+  opacity: 0.8;
+  color: #3ea6ff;
+}
+
+.avs-text {
+  flex: 1;
+  min-width: 0;
+  line-height: 1.4;
+  word-break: break-word;
+}
+`;
+
+interface CueEntry {
+  start: number;
+  end: number;
+  text: string;
+  el: HTMLDivElement;
+}
+
+export class AvbridgeSubtitlesElement extends HTMLElementCtor {
+  static readonly observedAttributes = ["for"];
+
+  private _player: HTMLElement | null = null;
+  private _cues: CueEntry[] = [];
+  private _tickTimer: ReturnType<typeof setInterval> | null = null;
+  private _activeCueIndex = -1;
+  private _trackChangeListener: (() => void) | null = null;
+
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.innerHTML = `<style>${STYLES}</style><div class="avs-empty">No subtitles loaded</div>`;
+  }
+
+  connectedCallback(): void {
+    this._connectPlayer();
+    this._startTick();
+  }
+
+  disconnectedCallback(): void {
+    this._stopTick();
+    this._disconnectPlayer();
+  }
+
+  attributeChangedCallback(name: string): void {
+    if (name === "for") {
+      this._disconnectPlayer();
+      this._connectPlayer();
+    }
+  }
+
+  // ── Player connection ──────────────────────────────────────────────────
+
+  private _connectPlayer(): void {
+    const forId = this.getAttribute("for");
+    if (forId) {
+      this._player = document.getElementById(forId);
+    } else {
+      // Auto-detect sibling avbridge-player or avbridge-video
+      this._player =
+        this.parentElement?.querySelector("avbridge-player") ??
+        this.parentElement?.querySelector("avbridge-video") ??
+        null;
+    }
+    if (!this._player) return;
+
+    // Listen for trackschange to rebuild the cue list when subtitles
+    // are added/removed dynamically.
+    this._trackChangeListener = () => this._rebuildCues();
+    this._player.addEventListener("trackschange", this._trackChangeListener);
+
+    // Initial build (subtitle may already be loaded).
+    // Defer so the player has time to bootstrap.
+    requestAnimationFrame(() => this._rebuildCues());
+  }
+
+  private _disconnectPlayer(): void {
+    if (this._player && this._trackChangeListener) {
+      this._player.removeEventListener("trackschange", this._trackChangeListener);
+    }
+    this._player = null;
+    this._trackChangeListener = null;
+  }
+
+  private _getVideoElement(): HTMLVideoElement | null {
+    if (!this._player) return null;
+    return (this._player as unknown as { videoElement?: HTMLVideoElement }).videoElement ?? null;
+  }
+
+  // ── Cue list ───────────────────────────────────────────────────────────
+
+  private _rebuildCues(): void {
+    const video = this._getVideoElement();
+    const shadow = this.shadowRoot!;
+    this._cues = [];
+    this._activeCueIndex = -1;
+
+    if (!video) {
+      shadow.innerHTML = `<style>${STYLES}</style><div class="avs-empty">No player connected</div>`;
+      return;
+    }
+
+    // Find the first subtitle/caption track with cues.
+    let track: TextTrack | null = null;
+    for (let i = 0; i < video.textTracks.length; i++) {
+      const t = video.textTracks[i];
+      if ((t.kind === "subtitles" || t.kind === "captions") && t.cues && t.cues.length > 0) {
+        track = t;
+        break;
+      }
+    }
+
+    if (!track || !track.cues || track.cues.length === 0) {
+      shadow.innerHTML = `<style>${STYLES}</style><div class="avs-empty">No subtitle cues available</div>`;
+      // Retry shortly — cues may load async.
+      setTimeout(() => {
+        if (this._cues.length === 0 && this.isConnected) this._rebuildCues();
+      }, 1000);
+      return;
+    }
+
+    // Build the list.
+    const container = document.createElement("div");
+    for (let i = 0; i < track.cues.length; i++) {
+      const cue = track.cues[i] as VTTCue;
+      const el = document.createElement("div");
+      el.className = "avs-cue";
+
+      const timeEl = document.createElement("span");
+      timeEl.className = "avs-time";
+      timeEl.textContent = formatTime(cue.startTime);
+
+      const textEl = document.createElement("span");
+      textEl.className = "avs-text";
+      textEl.textContent = cue.text.replace(/<[^>]+>/g, "");
+
+      el.appendChild(timeEl);
+      el.appendChild(textEl);
+
+      const startTime = cue.startTime;
+      el.addEventListener("click", () => {
+        if (this._player) {
+          (this._player as unknown as { currentTime: number }).currentTime = startTime;
+        }
+      });
+
+      container.appendChild(el);
+      this._cues.push({ start: cue.startTime, end: cue.endTime, text: cue.text, el });
+    }
+
+    shadow.innerHTML = `<style>${STYLES}</style>`;
+    shadow.appendChild(container);
+  }
+
+  // ── Active cue tracking ────────────────────────────────────────────────
+
+  private _startTick(): void {
+    if (this._tickTimer) return;
+    this._tickTimer = setInterval(() => this._tick(), 250);
+  }
+
+  private _stopTick(): void {
+    if (this._tickTimer) {
+      clearInterval(this._tickTimer);
+      this._tickTimer = null;
+    }
+  }
+
+  private _tick(): void {
+    if (this._cues.length === 0 || !this._player) return;
+    const currentTime = (this._player as unknown as { currentTime: number }).currentTime ?? 0;
+
+    let newActive = -1;
+    for (let i = 0; i < this._cues.length; i++) {
+      const c = this._cues[i];
+      if (currentTime >= c.start && currentTime <= c.end) {
+        newActive = i;
+        break;
+      }
+    }
+
+    if (newActive === this._activeCueIndex) return;
+
+    // Remove previous highlight.
+    if (this._activeCueIndex >= 0 && this._activeCueIndex < this._cues.length) {
+      this._cues[this._activeCueIndex].el.classList.remove("active");
+    }
+
+    this._activeCueIndex = newActive;
+
+    // Apply new highlight + scroll into view.
+    if (newActive >= 0) {
+      const cue = this._cues[newActive];
+      cue.el.classList.add("active");
+      cue.el.scrollIntoView({ block: "center", behavior: "smooth" });
+    }
+  }
+}
+
+function formatTime(sec: number): string {
+  if (!Number.isFinite(sec) || sec < 0) sec = 0;
+  const total = Math.floor(sec);
+  const h = Math.floor(total / 3600);
+  const m = Math.floor((total % 3600) / 60);
+  const s = total % 60;
+  const mm = String(m).padStart(h > 0 ? 2 : 1, "0");
+  const ss = String(s).padStart(2, "0");
+  return h > 0 ? `${h}:${mm}:${ss}` : `${mm}:${ss}`;
+}

package/src/element/avbridge-video.ts

@@ -856,15 +856,35 @@ export class AvbridgeVideoElement extends HTMLElementCtor {
       sidecarUrl: subtitle.url,
     };
     this._subtitleTracks.push(track);
+    // eslint-disable-next-line no-console
+    console.log(`[avbridge:subs] addSubtitle id=${track.id} format=${format} lang=${subtitle.language ?? "?"}`);
     await attachSubtitleTracks(
       this._videoEl,
       this._subtitleTracks,
       undefined,
       (err, t) => {
         // eslint-disable-next-line no-console
-        console.warn(`[avbridge] subtitle ${t.id} failed: ${err.message}`);
+        console.warn(`[avbridge:subs] subtitle ${t.id} failed: ${err.message}`);
       },
     );
+    // Enable the newly-added track so it renders immediately. On native
+    // strategy the <video>'s textTrack must be mode="showing"; on canvas
+    // strategies the renderer's watchTextTracks picks it up from the
+    // hidden-mode textTracks.
+    const textTracks = this._videoEl.textTracks;
+    for (let i = 0; i < textTracks.length; i++) {
+      if (textTracks[i].label === (subtitle.language ?? `Subtitle ${track.id}`)) {
+        textTracks[i].mode = "showing";
+        // eslint-disable-next-line no-console
+        console.log(`[avbridge:subs] enabled textTrack[${i}] mode=showing`);
+        break;
+      }
+    }
+    // Notify the settings sheet so it rebuilds with the new track.
+    this._dispatch("trackschange", {
+      audioTracks: this._audioTracks,
+      subtitleTracks: this.subtitleTracks,
+    });
   }
 
   /**

package/src/element/player-styles.ts

@@ -34,7 +34,6 @@ export const PLAYER_STYLES = /* css */ `
   position: relative;
   width: 100%;
   height: 100%;
-  cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   user-select: none;
 }
@@ -484,62 +483,113 @@ export const PLAYER_STYLES = /* css */ `
 
 .avp-spacer { flex: 1; }
 
-/* ── Settings menu ────────────────────────────────────────────────────── */
+/* ── Settings bottom sheet ────────────────────────────────────────────── */
+
+/* Scrim — semi-transparent overlay behind the sheet, above the video.
+   Tapping it dismisses the sheet. */
+.avp-settings-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 9;
+  background: rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+}
 
+.avp-settings-scrim.open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Sheet container — slides up from the bottom. Height is content-driven
+   up to a JS-measured max (set on open via style.maxHeight). */
 .avp-settings {
   position: absolute;
-  bottom: 52px;
-  right: 12px;
-  background: rgba(28, 28, 28, 0.95);
-  border-radius: 8px;
-  min-width: 220px;
-  /* Fit within the player: leave room for the controls bar (52px bottom)
-     and a small top margin (8px). On tall players this caps at 300px;
-     on short players it shrinks to whatever fits. */
-  max-height: min(300px, calc(100% - 52px - 8px));
-  overflow-y: auto;
-  display: none;
+  bottom: 0;
+  left: 0;
+  right: 0;
   z-index: 10;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  background: rgba(28, 28, 28, 0.97);
+  border-radius: 12px 12px 0 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  transform: translateY(100%);
+  transition: transform 0.2s ease-out;
+  max-height: 70%;
+  padding-bottom: 52px;
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
 }
 
-.avp-settings.open { display: block; }
+.avp-settings.open {
+  transform: translateY(0);
+}
 
-.avp-settings-section {
-  padding: 8px 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+/* Drag handle indicator at top of sheet. */
+.avp-settings-handle {
+  width: 36px;
+  height: 4px;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.3);
+  margin: 8px auto 4px;
 }
 
-.avp-settings-section:last-child { border-bottom: none; }
+/* ── Accordion sections ──────────────────────────────────────────────── */
 
-.avp-settings-label {
-  padding: 4px 16px;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  opacity: 0.5;
+.avp-settings-section {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
 
-.avp-settings-item {
+.avp-settings-section:last-child { border-bottom: none; }
+
+/* Section header — clickable row showing label + current value. */
+.avp-settings-header {
+  position: relative;
   display: flex;
   align-items: center;
-  padding: 8px 16px;
-  font-size: 13px;
+  justify-content: space-between;
+  padding: 12px 16px;
   cursor: pointer;
+  font-size: 14px;
   transition: background 0.1s;
 }
 
-.avp-settings-item:hover { background: rgba(255, 255, 255, 0.1); }
+.avp-settings-header:hover { background: rgba(255, 255, 255, 0.06); }
 
-.avp-settings-item.active {
-  color: #3ea6ff;
+.avp-settings-header-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
 }
 
-.avp-settings-item.active::before {
-  content: "\\2713";
-  margin-right: 8px;
-  font-weight: bold;
+.avp-settings-header-value {
+  margin-left: auto;
+  opacity: 0.6;
+  font-size: 13px;
+  text-align: right;
+}
+
+/* Invisible native <select> layered over the value portion of the row.
+   Covers from the value text to the right edge so tapping the value
+   opens the OS picker. The label side remains inert. */
+.avp-settings-select {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 50%;
+  opacity: 0;
+  cursor: pointer;
+  font-size: 16px;
+  direction: rtl;
+}
+
+/* Toggle-style rows (Stats for Nerds) — no select, just clickable. */
+.avp-settings-toggle {
+  cursor: pointer;
 }
+.avp-settings-toggle:hover { background: rgba(255, 255, 255, 0.06); }
 
 /* ── Stats for nerds ──────────────────────────────────────────────────── */
 

package/src/index.ts

@@ -36,6 +36,7 @@ export type {
   HardwareAccelerationHint,
   FetchFn,
   TransportConfig,
+  SettingsSectionConfig,
 } from "./types.js";
 
 export { classify } from "./classify/index.js";

package/src/strategies/fallback/audio-output.ts

@@ -80,6 +80,10 @@ export class AudioOutput implements ClockSource {
   private _volume = 1;
   /** User-set muted flag. When true, gain is forced to 0. */
   private _muted = false;
+  /** Playback rate. Scales the media clock and each AudioBufferSourceNode's
+   *  playbackRate so audio pitches up/down accordingly (same as native
+   *  <video>.playbackRate). Default 1. */
+  private _rate = 1;
 
   constructor() {
     this.ctx = new AudioContext();
@@ -107,6 +111,24 @@ export class AudioOutput implements ClockSource {
     return this._muted;
   }
 
+  /** Set playback rate. Scales the media clock and pitches audio output
+   *  (same as native <video>.playbackRate — speed without pitch correction).
+   *  Rebases the anchor so the clock transition is seamless. */
+  setPlaybackRate(rate: number): void {
+    if (rate === this._rate) return;
+    // Rebase anchor at the current media time before changing rate,
+    // so the clock doesn't jump.
+    const t = this.now();
+    this.mediaTimeOfAnchor = t;
+    this.ctxTimeAtAnchor = this.ctx.currentTime;
+    this.wallAnchorMs = performance.now();
+    this._rate = rate;
+  }
+
+  getPlaybackRate(): number {
+    return this._rate;
+  }
+
   private applyGain(): void {
     const target = this._muted ? 0 : this._volume;
     try { this.gain.gain.value = target; } catch { /* ignore */ }
@@ -127,12 +149,12 @@ export class AudioOutput implements ClockSource {
   now(): number {
     if (this.noAudio) {
       if (this.state === "playing") {
-        return this.mediaTimeOfAnchor + (performance.now() - this.wallAnchorMs) / 1000;
+        return this.mediaTimeOfAnchor + (performance.now() - this.wallAnchorMs) / 1000 * this._rate;
       }
       return this.mediaTimeOfAnchor;
     }
     if (this.state === "playing") {
-      return this.mediaTimeOfAnchor + (this.ctx.currentTime - this.ctxTimeAtAnchor);
+      return this.mediaTimeOfAnchor + (this.ctx.currentTime - this.ctxTimeAtAnchor) * this._rate;
     }
     return this.mediaTimeOfAnchor;
   }
@@ -200,9 +222,12 @@ export class AudioOutput implements ClockSource {
     const node = this.ctx.createBufferSource();
     node.buffer = buffer;
     node.connect(this.gain);
+    // Pitch the audio to match the playback rate (same as native <video>).
+    if (this._rate !== 1) node.playbackRate.value = this._rate;
 
-    // Convert media time → ctx time using the anchor.
-    let ctxStart = this.ctxTimeAtAnchor + (this.mediaTimeOfNext - this.mediaTimeOfAnchor);
+    // Convert media time → ctx time using the anchor + rate. At rate=2,
+    // each second of media time occupies 0.5s of ctx time.
+    let ctxStart = this.ctxTimeAtAnchor + (this.mediaTimeOfNext - this.mediaTimeOfAnchor) / this._rate;
 
     // When the decoder is slower than realtime, `ctxStart` falls into
     // the past (ctx.currentTime has already passed it). Clamping each
@@ -256,6 +281,10 @@ export class AudioOutput implements ClockSource {
       await this.ctx.resume();
     }
 
+    // Reconnect the gain node — pause() disconnects it to cut off
+    // in-flight audio instantly. Safe to call even if already connected.
+    try { this.gain.connect(this.ctx.destination); } catch { /* ignore */ }
+
     if (this.state === "paused") {
       // Resume: media time should continue from where we paused. ctx.currentTime
       // is preserved across suspend/resume, so re-anchoring it to "now" with
@@ -292,6 +321,12 @@ export class AudioOutput implements ClockSource {
     this.mediaTimeOfAnchor = this.now();
     this.state = "paused";
     if (this.noAudio) return;
+    // Disconnect the gain node immediately so any in-flight scheduled
+    // buffers are silenced instantly. ctx.suspend() is async and
+    // already-started AudioBufferSourceNodes keep playing until the
+    // context actually suspends — without the disconnect, audio bleeds
+    // through for ~200ms after pause().
+    try { this.gain.disconnect(); } catch { /* ignore */ }
     if (this.ctx.state === "running") {
       await this.ctx.suspend();
     }

package/src/strategies/fallback/index.ts

@@ -128,6 +128,17 @@ export async function createFallbackSession(
       get: () => ctx.duration ?? NaN,
     });
   }
+  // Playback rate — canvas strategies don't use the real <video>, so the
+  // native playbackRate property does nothing. Patch it to drive the
+  // AudioOutput clock speed + pitch.
+  Object.defineProperty(target, "playbackRate", {
+    configurable: true,
+    get: () => audio.getPlaybackRate(),
+    set: (v: number) => {
+      audio.setPlaybackRate(v);
+      target.dispatchEvent(new Event("ratechange"));
+    },
+  });
   // Synthesize HTMLMediaElement parity surfaces that the canvas strategies
   // can't otherwise answer truthfully (the inner <video> has no src, so
   // its own readyState/seekable are zero/empty).
@@ -351,6 +362,7 @@ export async function createFallbackSession(
         delete (target as unknown as Record<string, unknown>).muted;
         delete (target as unknown as Record<string, unknown>).readyState;
         delete (target as unknown as Record<string, unknown>).seekable;
+        delete (target as unknown as Record<string, unknown>).playbackRate;
       } catch { /* ignore */ }
     },
 

package/src/strategies/hybrid/index.ts

@@ -84,6 +84,14 @@ export async function createHybridSession(
       get: () => ctx.duration ?? NaN,
     });
   }
+  Object.defineProperty(target, "playbackRate", {
+    configurable: true,
+    get: () => audio.getPlaybackRate(),
+    set: (v: number) => {
+      audio.setPlaybackRate(v);
+      target.dispatchEvent(new Event("ratechange"));
+    },
+  });
   // HTMLMediaElement parity surfaces — see fallback/index.ts for rationale.
   Object.defineProperty(target, "readyState", {
     configurable: true,
@@ -213,6 +221,7 @@ export async function createHybridSession(
         delete (target as unknown as Record<string, unknown>).muted;
         delete (target as unknown as Record<string, unknown>).readyState;
         delete (target as unknown as Record<string, unknown>).seekable;
+        delete (target as unknown as Record<string, unknown>).playbackRate;
       } catch { /* ignore */ }
     },
 

package/src/subtitles/index.ts

@@ -110,6 +110,8 @@ export async function attachSubtitleTracks(
 
   for (const t of tracks) {
     if (!t.sidecarUrl) continue;
+    // eslint-disable-next-line no-console
+    console.log(`[avbridge:subs] attaching track id=${t.id} format=${t.format} url=${t.sidecarUrl.slice(0, 60)}`);
     try {
       let url = t.sidecarUrl;
       if (t.format === "srt") {

package/src/types.ts

@@ -465,3 +465,28 @@ export interface ConvertResult {
    */
   notes?: string[];
 }
+
+// ── Settings extensibility ──────────────────────────────────────────────
+
+/**
+ * Configuration for a custom settings section added to `<avbridge-player>`
+ * via {@link addSettingsSection}. Sections render in the bottom-sheet
+ * settings panel alongside built-in sections (Speed, Audio, Subtitles,
+ * Fit, Stats for Nerds). The player owns rendering — consumers describe
+ * data; avbridge renders it in a consistent visual style.
+ */
+export interface SettingsSectionConfig {
+  /** Unique id for this section. Used to update/remove later. */
+  id: string;
+  /** Display label (e.g. "Quality", "Translate"). */
+  label: string;
+  /** Items to show when the section is expanded. */
+  items: Array<{
+    id: string;
+    label: string;
+    /** Mark the currently-selected item. */
+    active?: boolean;
+  }>;
+  /** Called when the user picks an item. */
+  onSelect(itemId: string): void;
+}