avbridge 2.10.0 → 2.12.0

package/dist/remux-7TA4FKTY.js

@@ -0,0 +1,10 @@
+export { createOutputFormat, generateFilename, mimeForFormat, remux, validateRemuxEligibility } from './chunk-5Y5BTB5D.js';
+import './chunk-2LNXMGT6.js';
+import './chunk-CPJLFFCC.js';
+import './chunk-LUFA47FP.js';
+import './chunk-3YKWU4FM.js';
+import './chunk-3AI5WFFN.js';
+import './chunk-5DMTJVIU.js';
+import './chunk-5YAWWKA3.js';
+//# sourceMappingURL=remux-7TA4FKTY.js.map
+//# sourceMappingURL=remux-7TA4FKTY.js.map

package/dist/{remux-56V7LDAD.js.map → remux-7TA4FKTY.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"remux-56V7LDAD.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"remux-7TA4FKTY.js"}

package/dist/remux-VPKCLHHM.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+var chunkGJBNLPGI_cjs = require('./chunk-GJBNLPGI.cjs');
+require('./chunk-HBHSUGNI.cjs');
+require('./chunk-2IJ66NTD.cjs');
+require('./chunk-QDJLQR53.cjs');
+require('./chunk-HZUVMXBN.cjs');
+require('./chunk-YPZFGJV3.cjs');
+require('./chunk-G4APZMCP.cjs');
+require('./chunk-F3LQJKXK.cjs');
+
+
+
+Object.defineProperty(exports, "createOutputFormat", {
+  enumerable: true,
+  get: function () { return chunkGJBNLPGI_cjs.createOutputFormat; }
+});
+Object.defineProperty(exports, "generateFilename", {
+  enumerable: true,
+  get: function () { return chunkGJBNLPGI_cjs.generateFilename; }
+});
+Object.defineProperty(exports, "mimeForFormat", {
+  enumerable: true,
+  get: function () { return chunkGJBNLPGI_cjs.mimeForFormat; }
+});
+Object.defineProperty(exports, "remux", {
+  enumerable: true,
+  get: function () { return chunkGJBNLPGI_cjs.remux; }
+});
+Object.defineProperty(exports, "validateRemuxEligibility", {
+  enumerable: true,
+  get: function () { return chunkGJBNLPGI_cjs.validateRemuxEligibility; }
+});
+//# sourceMappingURL=remux-VPKCLHHM.cjs.map
+//# sourceMappingURL=remux-VPKCLHHM.cjs.map

package/dist/{remux-KUS5GIL6.cjs.map → remux-VPKCLHHM.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"remux-KUS5GIL6.cjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"remux-VPKCLHHM.cjs"}

package/dist/subtitles-5H24MEBJ.js

@@ -0,0 +1,4 @@
+export { SubtitleOverlay, SubtitleResourceBag, attachSubtitleTracks, discoverSidecars, srtToVtt } from './chunk-EDDWAN2L.js';
+import './chunk-LUFA47FP.js';
+//# sourceMappingURL=subtitles-5H24MEBJ.js.map
+//# sourceMappingURL=subtitles-5H24MEBJ.js.map

package/dist/{subtitles-4T74JRGT.js.map → subtitles-5H24MEBJ.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"subtitles-4T74JRGT.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"subtitles-5H24MEBJ.js"}

package/dist/subtitles-HMVGWTU2.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var chunkWRKO6Q42_cjs = require('./chunk-WRKO6Q42.cjs');
+require('./chunk-QDJLQR53.cjs');
+
+
+
+Object.defineProperty(exports, "SubtitleOverlay", {
+  enumerable: true,
+  get: function () { return chunkWRKO6Q42_cjs.SubtitleOverlay; }
+});
+Object.defineProperty(exports, "SubtitleResourceBag", {
+  enumerable: true,
+  get: function () { return chunkWRKO6Q42_cjs.SubtitleResourceBag; }
+});
+Object.defineProperty(exports, "attachSubtitleTracks", {
+  enumerable: true,
+  get: function () { return chunkWRKO6Q42_cjs.attachSubtitleTracks; }
+});
+Object.defineProperty(exports, "discoverSidecars", {
+  enumerable: true,
+  get: function () { return chunkWRKO6Q42_cjs.discoverSidecars; }
+});
+Object.defineProperty(exports, "srtToVtt", {
+  enumerable: true,
+  get: function () { return chunkWRKO6Q42_cjs.srtToVtt; }
+});
+//# sourceMappingURL=subtitles-HMVGWTU2.cjs.map
+//# sourceMappingURL=subtitles-HMVGWTU2.cjs.map

package/dist/{subtitles-QUH4LPI4.cjs.map → subtitles-HMVGWTU2.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"subtitles-QUH4LPI4.cjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"subtitles-HMVGWTU2.cjs"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "avbridge",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "description": "Play and convert arbitrary video files in the browser. Native, remux, hybrid, fallback, and transcode — one API.",
   "license": "MIT",
   "author": "Keishi Hattori",

package/src/element/avbridge-player.ts

@@ -39,7 +39,7 @@ function formatTime(sec: number): string {
 }
 
 const PLAYBACK_SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] as const;
-const CONTROLS_HIDE_MS = 3000;
+const DEFAULT_CONTROLS_HIDE_MS = 3000;
 
 type PlayerState = "idle" | "loading" | "playing" | "paused" | "buffering" | "ended" | "error";
 
@@ -101,6 +101,8 @@ export class AvbridgePlayerElement extends HTMLElement {
   private _state: PlayerState = "idle";
   private _controlsTimer: ReturnType<typeof setTimeout> | null = null;
   private _settingsOpen = false;
+  private _activeAudioTrackId: number | null = null;
+  private _activeSubtitleTrackId: number | null = null;
   private _userSeeking = false;
   private _holdTimer: ReturnType<typeof setTimeout> | null = null;
   private _holdSpeedActive = false;
@@ -245,6 +247,11 @@ export class AvbridgePlayerElement extends HTMLElement {
     on(this._video, "ended", () => this._setState("ended"));
     on(this._video, "error", () => this._setState("error"));
     on(this._video, "timeupdate", () => this._updateTime());
+    // `progress` fires as the inner element's buffered ranges grow — keep the
+    // seek bar's buffered indicator fresh even when paused or filling ahead
+    // without timeupdate advancing. `<avbridge-video>` dispatches this on
+    // all strategies (including the synthesized ranges for canvas strategies).
+    on(this._video, "progress", () => this._updateBuffered());
     on(this._video, "volumechange", () => this._updateVolume());
     // Strategy changes are visible in Stats for Nerds.
     on(this._video, "trackschange", () => this._buildSettingsMenu());
@@ -435,6 +442,11 @@ export class AvbridgePlayerElement extends HTMLElement {
     return frac * (this._video.duration || 0);
   }
 
+  /** Seekbar width below which drag-to-scrub seeks in real-time (vs
+   *  preview-only). On narrow bars precise positioning is hard, so
+   *  immediate video feedback is more useful than a time tooltip. */
+  private static readonly SCRUB_WIDTH_THRESHOLD = 400;
+
   private _onSeekPointerDown(e: PointerEvent): void {
     // Ignore synthetic clicks originating from the input's own handling
     if (e.button !== 0 && e.pointerType === "mouse") return;
@@ -444,16 +456,32 @@ export class AvbridgePlayerElement extends HTMLElement {
     seekBar.setPointerCapture(e.pointerId);
     seekBar.setAttribute("data-seeking", "");
 
+    // Decide scrub mode based on physical width.
+    const scrubMode = seekBar.getBoundingClientRect().width < AvbridgePlayerElement.SCRUB_WIDTH_THRESHOLD;
+    let lastScrubCommit = 0;
+
     const initial = this._timeFromSeekPointer(e.clientX);
     this._seekInput.value = String(initial);
     this._onSeekInput();
     this._updateSeekTooltip(e.clientX);
+    if (scrubMode) this._onSeekCommit();
 
     const onMove = (ev: PointerEvent) => {
       const t = this._timeFromSeekPointer(ev.clientX);
       this._seekInput.value = String(t);
       this._onSeekInput();
       this._updateSeekTooltip(ev.clientX);
+      // In scrub mode, commit seeks throttled to ~4 Hz so we don't
+      // overwhelm the seek pipeline (especially on canvas strategies
+      // where each seek restarts the decoder pump).
+      if (scrubMode) {
+        const now = performance.now();
+        if (now - lastScrubCommit > 250) {
+          lastScrubCommit = now;
+          this._onSeekCommit();
+          this._userSeeking = true; // keep seeking flag live
+        }
+      }
     };
     const onUp = (ev: PointerEvent) => {
       const t = this._timeFromSeekPointer(ev.clientX);
@@ -501,15 +529,38 @@ export class AvbridgePlayerElement extends HTMLElement {
     this._seekInput.value = String(t);
     this._updateSeekVisuals(t);
     this._timeDisplay.textContent = `${formatTime(t)} / ${formatTime(d)}`;
+    this._updateBuffered();
+  }
 
-    // Buffered ranges
-    try {
-      const buf = this._video.buffered;
-      if (buf && buf.length > 0 && d > 0) {
-        const end = buf.end(buf.length - 1);
-        this._seekBuffered.style.width = `${(end / d) * 100}%`;
-      }
-    } catch { /* ignore */ }
+  /**
+   * Render every buffered range as its own segment so gaps (common on MSE
+   * after seeks) are visible. Not gated by `_userSeeking` — ranges should
+   * keep updating while the user scrubs, and runs cheaply on `progress`.
+   */
+  private _updateBuffered(): void {
+    const d = this._video.duration;
+    if (!(d > 0)) return;
+    let buf: TimeRanges;
+    try { buf = this._video.buffered; } catch { return; }
+    const count = buf ? buf.length : 0;
+    const host = this._seekBuffered;
+    // Reconcile child count. Segment divs are styled via .avp-seek-buffered-range.
+    while (host.childElementCount > count) host.lastElementChild!.remove();
+    while (host.childElementCount < count) {
+      const seg = document.createElement("div");
+      seg.className = "avp-seek-buffered-range";
+      host.appendChild(seg);
+    }
+    for (let i = 0; i < count; i++) {
+      let start: number; let end: number;
+      try { start = buf.start(i); end = buf.end(i); } catch { continue; }
+      const s = Math.max(0, start);
+      const e = Math.min(d, end);
+      if (e <= s) continue;
+      const seg = host.children[i] as HTMLElement;
+      seg.style.left = `${(s / d) * 100}%`;
+      seg.style.width = `${((e - s) / d) * 100}%`;
+    }
   }
 
   // ── Controls: volume ───────────────────────────────────────────────────
@@ -589,21 +640,29 @@ export class AvbridgePlayerElement extends HTMLElement {
     // Audio tracks
     const audios = this._video.audioTracks ?? [];
     if (audios.length > 1) {
+      const activeAudioId = this._activeAudioTrackId ?? audios[0]?.id;
+      const activeAudio = audios.find((t: { id: number }) => t.id === activeAudioId) ?? audios[0];
+      const audioValue = activeAudio?.language ?? `Track ${activeAudio?.id ?? 1}`;
       let audioOpts = "";
       for (const t of audios) {
-        audioOpts += `<option value="${t.id}">${t.language ?? `Track ${t.id}`}</option>`;
+        const sel = t.id === activeAudioId ? " selected" : "";
+        audioOpts += `<option value="${t.id}"${sel}>${t.language ?? `Track ${t.id}`}</option>`;
       }
-      sections.push(selectRow("Audio", audios[0]?.language ?? "Track 1", audioOpts, `data-action="audio"`));
+      sections.push(selectRow("Audio", audioValue, audioOpts, `data-action="audio"`));
     }
 
     // Subtitle tracks
     const subs = this._video.subtitleTracks ?? [];
     if (subs.length > 0) {
-      let subOpts = `<option value="-1" selected>Off</option>`;
+      const activeSubId = this._activeSubtitleTrackId;
+      const activeSub = activeSubId != null ? subs.find((t: { id: number }) => t.id === activeSubId) : null;
+      const subValue = activeSub ? (activeSub.language ?? `Track ${activeSub.id}`) : "Off";
+      let subOpts = `<option value="-1"${activeSubId == null ? " selected" : ""}>Off</option>`;
       for (const t of subs) {
-        subOpts += `<option value="${t.id}">${t.language ?? `Track ${t.id}`}</option>`;
+        const sel = t.id === activeSubId ? " selected" : "";
+        subOpts += `<option value="${t.id}"${sel}>${t.language ?? `Track ${t.id}`}</option>`;
       }
-      sections.push(selectRow("Subtitles", "Off", subOpts, `data-action="subtitle"`));
+      sections.push(selectRow("Subtitles", subValue, subOpts, `data-action="subtitle"`));
     }
 
     // Fit mode — opt-in via the `show-fit` attribute
@@ -657,11 +716,15 @@ export class AvbridgePlayerElement extends HTMLElement {
             this._video.playbackRate = Number(val);
             break;
           case "audio":
+            this._activeAudioTrackId = Number(val);
             void this._video.setAudioTrack(Number(val));
             break;
-          case "subtitle":
-            void this._video.setSubtitleTrack(Number(val) >= 0 ? Number(val) : null);
+          case "subtitle": {
+            const subId = Number(val);
+            this._activeSubtitleTrackId = subId >= 0 ? subId : null;
+            void this._video.setSubtitleTrack(subId >= 0 ? subId : null);
             break;
+          }
           case "fit":
             this.setAttribute("fit", val);
             break;
@@ -762,16 +825,28 @@ export class AvbridgePlayerElement extends HTMLElement {
     this.showControls();
   }
 
-  private _scheduleHide(durationMs: number = CONTROLS_HIDE_MS): void {
+  private _scheduleHide(durationMs?: number): void {
+    const ms = durationMs ?? this._getControlsTimeout();
     if (this._controlsTimer) clearTimeout(this._controlsTimer);
     if (this._state !== "playing" && this._state !== "buffering") return;
     if (this._settingsOpen) return;
+    // A timeout of 0 or negative means "never hide" (controls always visible).
+    if (ms <= 0) return;
     this._controlsTimer = setTimeout(() => {
       if (this._state === "playing") {
         this.setAttribute("data-controls-hidden", "");
         this._toolbarTop.setAttribute("data-visible", "false");
       }
-    }, durationMs);
+    }, ms);
+  }
+
+  /** Read the controls-timeout attribute. 0 or negative = never hide.
+   *  Unset = default 3000ms. */
+  private _getControlsTimeout(): number {
+    const attr = this.getAttribute("controls-timeout");
+    if (attr == null) return DEFAULT_CONTROLS_HIDE_MS;
+    const n = Number(attr);
+    return Number.isFinite(n) ? n : DEFAULT_CONTROLS_HIDE_MS;
   }
 
   // Strategy is visible in Stats for Nerds, no badge in controls bar.
@@ -786,6 +861,9 @@ export class AvbridgePlayerElement extends HTMLElement {
 
   /** Track whether the last interaction was touch so click handler can skip. */
   private _lastPointerTypeWasTouch = false;
+  /** True for ~50ms after a touch double-tap was handled, so the
+   *  synthetic dblclick from the browser doesn't also fire fullscreen. */
+  private _touchDoubleTapConsumed = false;
 
   /** True if the event's composed path passes through consumer-slotted
    *  content (toolbar or content-overlay). Slotted content lives in the
@@ -830,6 +908,11 @@ export class AvbridgePlayerElement extends HTMLElement {
   private _onContainerDblClick(e: MouseEvent): void {
     if ((e.target as HTMLElement).closest?.(".avp-controls, .avp-settings")) return;
     if (this._isSlottedContentEvent(e)) return;
+    // On touch devices, the browser synthesizes a dblclick after two
+    // rapid taps. But we already handled the double-tap in _onPointerUp
+    // (which does ff/rw on sides, fullscreen in center). Skip the
+    // synthetic dblclick so both don't fire.
+    if (this._touchDoubleTapConsumed) return;
     // Cancel the pending single-click play/pause
     if (this._tapTimer) { clearTimeout(this._tapTimer); this._tapTimer = null; }
     this._toggleFullscreen();
@@ -877,6 +960,10 @@ export class AvbridgePlayerElement extends HTMLElement {
       } else {
         this._toggleFullscreen();
       }
+      // Prevent the synthetic dblclick (fired ~50ms later by the
+      // browser) from also toggling fullscreen.
+      this._touchDoubleTapConsumed = true;
+      setTimeout(() => { this._touchDoubleTapConsumed = false; }, 100);
       this._lastTapTime = 0;
       return;
     }
@@ -918,6 +1005,14 @@ export class AvbridgePlayerElement extends HTMLElement {
 
   // ── Keyboard shortcuts ─────────────────────────────────────────────────
 
+  /** Duration of one frame in seconds, derived from diagnostics fps or
+   *  a 30fps default. Used for frame-step shortcuts (`,` / `.`). */
+  private _frameDuration(): number {
+    const diag = this._video.getDiagnostics() as { fps?: number } | null;
+    const fps = diag?.fps && diag.fps > 0 ? diag.fps : 30;
+    return 1 / fps;
+  }
+
   private _onKeydown(e: KeyboardEvent): void {
     // Don't intercept if the user is typing in an input
     if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
@@ -964,6 +1059,21 @@ export class AvbridgePlayerElement extends HTMLElement {
         this._video.playbackRate = Math.max(0.25, this._video.playbackRate - 0.25);
         this._buildSettingsMenu();
         break;
+      case ",":
+        // Frame-back (YouTube-style: , while paused steps back one frame)
+        e.preventDefault();
+        if (!this._video.paused) this._video.pause();
+        this._video.currentTime = Math.max(0, this._video.currentTime - this._frameDuration());
+        break;
+      case ".":
+        // Frame-forward (YouTube-style: . while paused steps forward one frame)
+        e.preventDefault();
+        if (!this._video.paused) this._video.pause();
+        this._video.currentTime = Math.min(
+          this._video.duration || 0,
+          this._video.currentTime + this._frameDuration(),
+        );
+        break;
       case "Escape":
         if (this._settingsOpen) {
           e.preventDefault();

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}`;
+}