avbridge 2.8.4 → 2.10.0

package/src/element/player-styles.ts

@@ -25,11 +25,17 @@ export const PLAYER_STYLES = /* css */ `
 
 /* ── Container ────────────────────────────────────────────────────────── */
 
+:host {
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+}
+
 .avp {
   position: relative;
   width: 100%;
   height: 100%;
-  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
 }
 
 .avp avbridge-video {
@@ -228,7 +234,14 @@ export const PLAYER_STYLES = /* css */ `
   pointer-events: auto;
 }
 
-.avp-toolbar-top-right { margin-left: auto; }
+/* Left slot fills remaining space so slotted text/content can grow.
+   min-width: 0 prevents flex children from overflowing the toolbar. */
+.avp-toolbar-top-left {
+  flex: 1;
+  min-width: 0;
+}
+
+.avp-toolbar-top-right { margin-left: auto; flex-shrink: 0; }
 
 /* Hide the gradient band when no consumer has slotted anything — we
    toggle data-toolbar-empty from JS via slotchange. */
@@ -241,6 +254,30 @@ export const PLAYER_STYLES = /* css */ `
   pointer-events: none;
 }
 
+/* ── Content overlay ─────────────────────────────────────────────────── */
+/* Consumer-provided rich content (tweet cards, media info, annotations).
+   Sits above the video, below the play-button overlay and controls in
+   z-order. Auto-hides with the chrome. The wrapper is pointer-events:none
+   so taps fall through to the video; consumers opt in on their content
+   with pointer-events:auto. */
+
+.avp-content-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 1;
+  transition: opacity 0.25s;
+}
+
+.avp-content-overlay ::slotted(*) {
+  pointer-events: auto;
+}
+
+:host([data-controls-hidden]) .avp-content-overlay {
+  opacity: 0;
+}
+
 /* ── Seek bar ─────────────────────────────────────────────────────────── */
 
 .avp-seek {
@@ -327,6 +364,15 @@ export const PLAYER_STYLES = /* css */ `
 
 .avp-seek:hover .avp-seek-tooltip { display: block; }
 
+/* Show tooltip during active drag (touch or mouse). The JS side sets
+   data-seeking on .avp-seek while the user is scrubbing. */
+.avp-seek[data-seeking] .avp-seek-tooltip { display: block; }
+
+/* Enlarge thumb while scrubbing. */
+.avp-seek[data-seeking] .avp-seek-thumb {
+  transform: translate(-50%, -50%) scale(1.4);
+}
+
 /* ── Bottom row ───────────────────────────────────────────────────────── */
 
 .avp-bottom {
@@ -437,60 +483,114 @@ 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;
-  max-height: 300px;
-  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 ──────────────────────────────────────────────────── */
 
 .avp-stats {
@@ -518,9 +618,24 @@ export const PLAYER_STYLES = /* css */ `
 @media (pointer: coarse) {
   .avp-btn svg { width: 28px; height: 28px; }
   .avp-btn { padding: 8px; }
+
+  /* Taller touch target on mobile (44px, matching YouTube Mobile)
+     while keeping the visual track thin. Negative margin collapses
+     the extra space so the controls layout doesn't shift. */
+  .avp-seek { height: 44px; margin-top: -12px; margin-bottom: -12px; }
   .avp-seek-track { height: 4px; }
   .avp-seek:hover .avp-seek-track { height: 4px; }
-  .avp-seek-thumb { transform: translate(-50%, -50%) scale(1); }
+  .avp-seek-thumb {
+    transform: translate(-50%, -50%) scale(1);
+    width: 16px;
+    height: 16px;
+  }
+  .avp-seek[data-seeking] .avp-seek-thumb {
+    transform: translate(-50%, -50%) scale(1.5);
+  }
+  /* Move tooltip above the taller touch zone. */
+  .avp-seek-tooltip { bottom: 32px; }
+
   .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/index.ts

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

package/src/probe/avi.ts

@@ -181,6 +181,8 @@ function ffmpegToAvbridgeVideo(name: string): VideoCodec {
     case "rv20":   return "rv20";
     case "rv30":   return "rv30";
     case "rv40":   return "rv40";
+    case "dvvideo": return "dv";       // DV / DVCPRO (camcorder, MiniDV)
+    case "hq_hqa": return "hq_hqa";    // Canopus HQ / HQA (Grass Valley)
     default:       return name as VideoCodec;
   }
 }

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

package/src/strategies/fallback/decoder.ts

@@ -32,6 +32,7 @@ import { dbg } from "../../util/debug.js";
 import {
   sanitizeFrameTimestamp,
   libavFrameToInterleavedFloat32,
+  packetPtsSec,
 } from "../../util/libav-demux.js";
 
 export interface DecoderHandles {
@@ -46,6 +47,13 @@ export interface DecoderHandles {
    */
   setAudioTrack(trackId: number, timeSec: number): Promise<void>;
   stats(): Record<string, unknown>;
+  /**
+   * The demuxer's read-ahead frontier in seconds. See
+   * `HybridDecoderHandles.bufferedUntilSec` for the full contract —
+   * same semantics, same consumer (`<video>.buffered` on canvas
+   * strategies).
+   */
+  bufferedUntilSec(): number;
 }
 
 export interface StartDecoderOptions {
@@ -222,6 +230,7 @@ export async function startDecoder(opts: StartDecoderOptions): Promise<DecoderHa
 
   let packetsRead = 0;
   let videoFramesDecoded = 0;
+  let bufferedUntilSec = 0;
   let audioFramesDecoded = 0;
 
   // Decode-rate watchdog. Samples framesDecoded every second and
@@ -278,6 +287,23 @@ export async function startDecoder(opts: StartDecoderOptions): Promise<DecoderHa
       const videoPackets = videoStream ? packets[videoStream.index] : undefined;
       const audioPackets = audioStream ? packets[audioStream.index] : undefined;
 
+      // Track demuxer read-ahead for <video>.buffered on this strategy.
+      // Peek raw pts before sanitizePacketTimestamp (which would
+      // clobber to µs and lose the source-native scale). Monotonic;
+      // seeks don't reset.
+      if (videoPackets && videoTimeBase) {
+        for (const pkt of videoPackets) {
+          const sec = packetPtsSec(pkt, videoTimeBase);
+          if (sec != null && sec > bufferedUntilSec) bufferedUntilSec = sec;
+        }
+      }
+      if (audioPackets && audioTimeBase) {
+        for (const pkt of audioPackets) {
+          const sec = packetPtsSec(pkt, audioTimeBase);
+          if (sec != null && sec > bufferedUntilSec) bufferedUntilSec = sec;
+        }
+      }
+
       // Decode audio BEFORE video. On software-decode-bound content
       // (rv40/mpeg4/wmv3 @ 720p+) a single video batch can take
       // 200-400 ms of wall time; if the scheduler hasn't been fed
@@ -617,6 +643,10 @@ export async function startDecoder(opts: StartDecoderOptions): Promise<DecoderHa
       );
     },
 
+    bufferedUntilSec() {
+      return bufferedUntilSec;
+    },
+
     stats() {
       return {
         decoderType: "libav-wasm",

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).
@@ -152,6 +163,18 @@ export async function createFallbackSession(
       ? [[0, ctx.duration]]
       : []),
   });
+  // buffered: demuxer's read-ahead frontier (highest pts pumped from
+  // libav). Single [0, end] range — approximation of "how far we've
+  // read through the source," the signal the seek-bar buffered
+  // indicator wants. Real MSE-style per-range tracking isn't
+  // meaningful here since decoded frames are consumed in flight.
+  Object.defineProperty(target, "buffered", {
+    configurable: true,
+    get: () => {
+      const end = handles.bufferedUntilSec();
+      return makeTimeRanges(end > 0 ? [[0, end]] : []);
+    },
+  });
 
   /**
    * Wait until the decoder has produced enough buffered output to start
@@ -240,6 +263,11 @@ export async function createFallbackSession(
 
   async function doSeek(timeSec: number): Promise<void> {
     const wasPlaying = audio.isPlaying();
+    // HTMLMediaElement contract: dispatch `seeking` once the seek
+    // operation begins. The inner <video> never fires this itself on
+    // canvas strategies (no src), so we dispatch manually to preserve
+    // the contract for consumers listening via `<avbridge-video>`.
+    target.dispatchEvent(new Event("seeking"));
     // 1. Stop audio (suspend ctx + capture media time).
     await audio.pause().catch(() => {});
     // 2. Tell the decoder to cancel its pump and seek the demuxer.
@@ -256,8 +284,21 @@ export async function createFallbackSession(
       await waitForBuffer();
       await audio.start();
     }
+    // HTMLMediaElement contract: dispatch `seeked` after the seek has
+    // completed (demuxer + renderer reset + optional buffer refill).
+    target.dispatchEvent(new Event("seeked"));
   }
 
+  // HTMLMediaElement contract: dispatch `loadedmetadata` once the
+  // session is ready (duration, dimensions, tracks known via the
+  // MediaContext). Dispatched on a microtask so it lands after the
+  // session promise resolves and consumers have a chance to attach
+  // listeners. The inner <video> never fires this itself here — it
+  // has no src.
+  queueMicrotask(() => {
+    try { target.dispatchEvent(new Event("loadedmetadata")); } catch { /* element torn down */ }
+  });
+
   return {
     strategy: "fallback",
 
@@ -321,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/decoder.ts

@@ -24,6 +24,7 @@ import {
   sanitizePacketTimestamp,
   sanitizeFrameTimestamp,
   libavFrameToInterleavedFloat32,
+  packetPtsSec,
 } from "../../util/libav-demux.js";
 
 export interface HybridDecoderHandles {
@@ -33,6 +34,17 @@ export interface HybridDecoderHandles {
   setAudioTrack(trackId: number, timeSec: number): Promise<void>;
   stats(): Record<string, unknown>;
   onFatalError(handler: (reason: string) => void): void;
+  /**
+   * The demuxer's read-ahead frontier in seconds — the highest pts
+   * observed on any packet handed back from `ff_read_frame_multi`.
+   * Monotonically non-decreasing: seeks don't reset it, since the
+   * frontier represents "how far we've ever demuxed through this
+   * source," which matches what a seek-bar buffered indicator should
+   * show. Backs `<video>.buffered` on canvas strategies. Returns 0
+   * before any valid pts have been seen (some AVI/FLV sources may
+   * never reach this — their `buffered` stays empty).
+   */
+  bufferedUntilSec(): number;
 }
 
 export interface StartHybridDecoderOptions {
@@ -211,6 +223,7 @@ export async function startHybridDecoder(opts: StartHybridDecoderOptions): Promi
   let videoFramesDecoded = 0;
   let audioFramesDecoded = 0;
   let videoChunksFed = 0;
+  let bufferedUntilSec = 0;
 
   let syntheticVideoUs = 0;
   let syntheticAudioUs = 0;
@@ -239,6 +252,24 @@ export async function startHybridDecoder(opts: StartHybridDecoderOptions): Promi
       const videoPackets = videoStream ? packets[videoStream.index] : undefined;
       const audioPackets = audioStream ? packets[audioStream.index] : undefined;
 
+      // Track how far the demuxer has read through the source — the
+      // signal behind `<video>.buffered` on this strategy. Peek at raw
+      // packet pts using each stream's native time_base (before the
+      // sanitizePacketTimestamp call later in the loop, which
+      // overwrites to µs). Monotonic: we never walk it backward.
+      if (videoPackets && videoTimeBase) {
+        for (const pkt of videoPackets) {
+          const sec = packetPtsSec(pkt, videoTimeBase);
+          if (sec != null && sec > bufferedUntilSec) bufferedUntilSec = sec;
+        }
+      }
+      if (audioPackets && audioTimeBase) {
+        for (const pkt of audioPackets) {
+          const sec = packetPtsSec(pkt, audioTimeBase);
+          if (sec != null && sec > bufferedUntilSec) bufferedUntilSec = sec;
+        }
+      }
+
       // Decode audio BEFORE video. Same rationale as fallback decoder
       // (POSTMORTEMS.md entry 1, fix #2): audio decode via libav's
       // ff_decode_multi is a blocking WASM call that prevents rAF from
@@ -519,6 +550,10 @@ export async function startHybridDecoder(opts: StartHybridDecoderOptions): Promi
       );
     },
 
+    bufferedUntilSec() {
+      return bufferedUntilSec;
+    },
+
     stats() {
       return {
         decoderType: "webcodecs-hybrid",

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,
@@ -99,6 +107,13 @@ export async function createHybridSession(
       ? [[0, ctx.duration]]
       : []),
   });
+  Object.defineProperty(target, "buffered", {
+    configurable: true,
+    get: () => {
+      const end = handles.bufferedUntilSec();
+      return makeTimeRanges(end > 0 ? [[0, end]] : []);
+    },
+  });
 
   async function waitForBuffer(): Promise<void> {
     const start = performance.now();
@@ -114,6 +129,8 @@ export async function createHybridSession(
 
   async function doSeek(timeSec: number): Promise<void> {
     const wasPlaying = audio.isPlaying();
+    // HTMLMediaElement contract — see fallback/index.ts for the why.
+    target.dispatchEvent(new Event("seeking"));
     await audio.pause().catch(() => {});
     await handles.seek(timeSec).catch((err) =>
       console.warn("[avbridge] hybrid decoder seek failed:", err),
@@ -124,8 +141,16 @@ export async function createHybridSession(
       await waitForBuffer();
       await audio.start();
     }
+    target.dispatchEvent(new Event("seeked"));
   }
 
+  // HTMLMediaElement contract: `loadedmetadata` once the session is
+  // ready. The inner <video> never fires this itself on the hybrid
+  // path — it has no src.
+  queueMicrotask(() => {
+    try { target.dispatchEvent(new Event("loadedmetadata")); } catch { /* element torn down */ }
+  });
+
   // Store the fatal error handler so the player can wire escalation
   let fatalErrorHandler: ((reason: string) => void) | null = null;
   handles.onFatalError((reason) => fatalErrorHandler?.(reason));
@@ -196,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/strategies/remux/index.ts

@@ -65,6 +65,14 @@ export async function createRemuxSession(
       }
       const wasPlaying = !video.paused;
       await pipeline.seek(time, wasPlaying || wantPlay);
+      // HTMLMediaElement contract: Firefox + WebKit's MSE doesn't
+      // reliably fire `seeked` after a SourceBuffer remove+refill
+      // cycle (Chromium does). Dispatch manually so consumers get a
+      // consistent signal across browsers. Duplicating a native
+      // `seeked` is harmless per spec.
+      queueMicrotask(() => {
+        try { video.dispatchEvent(new Event("seeked")); } catch { /* ignore */ }
+      });
     },
     async setAudioTrack(id) {
       if (!context.audioTracks.some((t) => t.id === id)) {

package/src/types.ts

@@ -49,6 +49,12 @@ export type VideoCodec =
   | "mpeg2"
   | "mpeg1"
   | "theora"
+  | "dv" // DV / DVCPRO (camcorder, MiniDV)
+  | "hq_hqa" // Canopus HQ / HQA (Grass Valley intermediate)
+  | "rawvideo" // uncompressed frames
+  | "qtrle" // QuickTime Animation (Apple RLE)
+  | "png" // PNG sequence in MOV
+  | "vp6f" // VP6 Flash variant
   | (string & {});
 
 /** Audio codec families. */
@@ -459,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;
+}