avbridge 2.8.4 → 2.10.0

package/dist/player.js

@@ -237,7 +237,7 @@ async function probe(source, transport) {
       const hasUnknownCodec = result.videoTracks.some((t) => t.codec === "unknown") || result.audioTracks.some((t) => t.codec === "unknown");
       if (hasUnknownCodec) {
         try {
-          const { probeWithLibav } = await import('./avi-2JPBSHGA.js');
+          const { probeWithLibav } = await import('./avi-JXU4GQL2.js');
           return await probeWithLibav(normalized, sniffed);
         } catch {
           return result;
@@ -250,7 +250,7 @@ async function probe(source, transport) {
         mediabunnyErr.message
       );
       try {
-        const { probeWithLibav } = await import('./avi-2JPBSHGA.js');
+        const { probeWithLibav } = await import('./avi-JXU4GQL2.js');
         return await probeWithLibav(normalized, sniffed);
       } catch (libavErr) {
         const mbMsg = mediabunnyErr.message || String(mediabunnyErr);
@@ -264,7 +264,7 @@ async function probe(source, transport) {
     }
   }
   try {
-    const { probeWithLibav } = await import('./avi-2JPBSHGA.js');
+    const { probeWithLibav } = await import('./avi-JXU4GQL2.js');
     return await probeWithLibav(normalized, sniffed);
   } catch (err) {
     const inner = err instanceof Error ? err.message : String(err);
@@ -369,7 +369,13 @@ var FALLBACK_VIDEO_CODECS = /* @__PURE__ */ new Set([
   "rv40",
   "mpeg2",
   "mpeg1",
-  "theora"
+  "theora",
+  "dv",
+  "hq_hqa",
+  "rawvideo",
+  "qtrle",
+  "png",
+  "vp6f"
 ]);
 var FALLBACK_AUDIO_CODECS = /* @__PURE__ */ new Set([
   "wmav2",
@@ -1205,6 +1211,12 @@ async function createRemuxSession(context, video) {
       }
       const wasPlaying = !video.paused;
       await pipeline.seek(time, wasPlaying || wantPlay);
+      queueMicrotask(() => {
+        try {
+          video.dispatchEvent(new Event("seeked"));
+        } catch {
+        }
+      });
     },
     async setAudioTrack(id) {
       if (!context.audioTracks.some((t) => t.id === id)) {
@@ -1593,6 +1605,10 @@ var AudioOutput = class {
   _volume = 1;
   /** User-set muted flag. When true, gain is forced to 0. */
   _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. */
+  _rate = 1;
   constructor() {
     this.ctx = new AudioContext();
     this.gain = this.ctx.createGain();
@@ -1614,6 +1630,20 @@ var AudioOutput = class {
   getMuted() {
     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) {
+    if (rate === this._rate) return;
+    const t = this.now();
+    this.mediaTimeOfAnchor = t;
+    this.ctxTimeAtAnchor = this.ctx.currentTime;
+    this.wallAnchorMs = performance.now();
+    this._rate = rate;
+  }
+  getPlaybackRate() {
+    return this._rate;
+  }
   applyGain() {
     const target = this._muted ? 0 : this._volume;
     try {
@@ -1634,12 +1664,12 @@ var AudioOutput = class {
   now() {
     if (this.noAudio) {
       if (this.state === "playing") {
-        return this.mediaTimeOfAnchor + (performance.now() - this.wallAnchorMs) / 1e3;
+        return this.mediaTimeOfAnchor + (performance.now() - this.wallAnchorMs) / 1e3 * 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;
   }
@@ -1691,7 +1721,8 @@ var AudioOutput = class {
     const node = this.ctx.createBufferSource();
     node.buffer = buffer;
     node.connect(this.gain);
-    let ctxStart = this.ctxTimeAtAnchor + (this.mediaTimeOfNext - this.mediaTimeOfAnchor);
+    if (this._rate !== 1) node.playbackRate.value = this._rate;
+    let ctxStart = this.ctxTimeAtAnchor + (this.mediaTimeOfNext - this.mediaTimeOfAnchor) / this._rate;
     if (ctxStart < this.ctx.currentTime) {
       this.ctxTimeAtAnchor = this.ctx.currentTime;
       this.mediaTimeOfAnchor = this.mediaTimeOfNext;
@@ -1841,6 +1872,17 @@ function sanitizePacketTimestamp(pkt, nextUs, fallbackTimeBase) {
   pkt.time_base_num = 1;
   pkt.time_base_den = 1e6;
 }
+function packetPtsSec(pkt, timeBase) {
+  const lo = pkt.pts ?? 0;
+  const hi = pkt.ptshi ?? 0;
+  const isInvalid = hi === -2147483648 && lo === 0 || !Number.isFinite(lo);
+  if (isInvalid) return null;
+  const tb = timeBase ?? [1, 1e6];
+  if (!tb[0] || !tb[1]) return null;
+  const pts64 = hi * 4294967296 + lo;
+  const sec = pts64 * tb[0] / tb[1];
+  return Number.isFinite(sec) ? sec : null;
+}
 var AV_SAMPLE_FMT_U8 = 0;
 var AV_SAMPLE_FMT_S16 = 1;
 var AV_SAMPLE_FMT_S32 = 2;
@@ -2101,6 +2143,7 @@ async function startHybridDecoder(opts) {
   let videoFramesDecoded = 0;
   let audioFramesDecoded = 0;
   let videoChunksFed = 0;
+  let bufferedUntilSec = 0;
   let syntheticVideoUs = 0;
   let syntheticAudioUs = 0;
   const videoTrackInfo = opts.context.videoTracks.find((t) => t.id === videoStream?.index);
@@ -2121,6 +2164,18 @@ async function startHybridDecoder(opts) {
       if (myToken !== pumpToken || destroyed) return;
       const videoPackets = videoStream ? packets[videoStream.index] : void 0;
       const audioPackets = audioStream ? packets[audioStream.index] : void 0;
+      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;
+        }
+      }
       if (audioDec && audioPackets && audioPackets.length > 0) {
         await decodeAudioBatch(audioPackets, myToken);
       }
@@ -2377,6 +2432,9 @@ async function startHybridDecoder(opts) {
         (err) => console.error("[avbridge] hybrid pump failed (post-seek):", err)
       );
     },
+    bufferedUntilSec() {
+      return bufferedUntilSec;
+    },
     stats() {
       return {
         decoderType: "webcodecs-hybrid",
@@ -2492,6 +2550,14 @@ async function createHybridSession(ctx, target, transport) {
       get: () => ctx.duration ?? NaN
     });
   }
+  Object.defineProperty(target, "playbackRate", {
+    configurable: true,
+    get: () => audio.getPlaybackRate(),
+    set: (v) => {
+      audio.setPlaybackRate(v);
+      target.dispatchEvent(new Event("ratechange"));
+    }
+  });
   Object.defineProperty(target, "readyState", {
     configurable: true,
     get: () => {
@@ -2504,6 +2570,13 @@ async function createHybridSession(ctx, target, transport) {
     configurable: true,
     get: () => makeTimeRanges(ctx.duration && Number.isFinite(ctx.duration) && ctx.duration > 0 ? [[0, ctx.duration]] : [])
   });
+  Object.defineProperty(target, "buffered", {
+    configurable: true,
+    get: () => {
+      const end = handles.bufferedUntilSec();
+      return makeTimeRanges(end > 0 ? [[0, end]] : []);
+    }
+  });
   async function waitForBuffer() {
     const start = performance.now();
     while (true) {
@@ -2517,6 +2590,7 @@ async function createHybridSession(ctx, target, transport) {
   }
   async function doSeek(timeSec) {
     const wasPlaying = audio.isPlaying();
+    target.dispatchEvent(new Event("seeking"));
     await audio.pause().catch(() => {
     });
     await handles.seek(timeSec).catch(
@@ -2528,7 +2602,14 @@ async function createHybridSession(ctx, target, transport) {
       await waitForBuffer();
       await audio.start();
     }
+    target.dispatchEvent(new Event("seeked"));
   }
+  queueMicrotask(() => {
+    try {
+      target.dispatchEvent(new Event("loadedmetadata"));
+    } catch {
+    }
+  });
   let fatalErrorHandler = null;
   handles.onFatalError((reason) => fatalErrorHandler?.(reason));
   return {
@@ -2587,6 +2668,7 @@ async function createHybridSession(ctx, target, transport) {
         delete target.muted;
         delete target.readyState;
         delete target.seekable;
+        delete target.playbackRate;
       } catch {
       }
     },
@@ -2713,6 +2795,7 @@ async function startDecoder(opts) {
   let pumpRunning = null;
   let packetsRead = 0;
   let videoFramesDecoded = 0;
+  let bufferedUntilSec = 0;
   let audioFramesDecoded = 0;
   let watchdogFirstFrameMs = 0;
   let watchdogSlowSinceMs = 0;
@@ -2738,6 +2821,18 @@ async function startDecoder(opts) {
       if (myToken !== pumpToken || destroyed) return;
       const videoPackets = videoStream ? packets[videoStream.index] : void 0;
       const audioPackets = audioStream ? packets[audioStream.index] : void 0;
+      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;
+        }
+      }
       if (audioDec && audioPackets && audioPackets.length > 0) {
         await decodeAudioBatch(audioPackets, myToken);
       }
@@ -3019,6 +3114,9 @@ async function startDecoder(opts) {
         (err) => console.error("[avbridge] decoder pump failed (post-seek):", err)
       );
     },
+    bufferedUntilSec() {
+      return bufferedUntilSec;
+    },
     stats() {
       return {
         decoderType: "libav-wasm",
@@ -3106,6 +3204,14 @@ async function createFallbackSession(ctx, target, transport) {
       get: () => ctx.duration ?? NaN
     });
   }
+  Object.defineProperty(target, "playbackRate", {
+    configurable: true,
+    get: () => audio.getPlaybackRate(),
+    set: (v) => {
+      audio.setPlaybackRate(v);
+      target.dispatchEvent(new Event("ratechange"));
+    }
+  });
   Object.defineProperty(target, "readyState", {
     configurable: true,
     get: () => {
@@ -3118,6 +3224,13 @@ async function createFallbackSession(ctx, target, transport) {
     configurable: true,
     get: () => makeTimeRanges(ctx.duration && Number.isFinite(ctx.duration) && ctx.duration > 0 ? [[0, ctx.duration]] : [])
   });
+  Object.defineProperty(target, "buffered", {
+    configurable: true,
+    get: () => {
+      const end = handles.bufferedUntilSec();
+      return makeTimeRanges(end > 0 ? [[0, end]] : []);
+    }
+  });
   async function waitForBuffer() {
     const start = performance.now();
     let firstFrameAtMs = 0;
@@ -3157,6 +3270,7 @@ async function createFallbackSession(ctx, target, transport) {
   }
   async function doSeek(timeSec) {
     const wasPlaying = audio.isPlaying();
+    target.dispatchEvent(new Event("seeking"));
     await audio.pause().catch(() => {
     });
     await handles.seek(timeSec).catch(
@@ -3168,7 +3282,14 @@ async function createFallbackSession(ctx, target, transport) {
       await waitForBuffer();
       await audio.start();
     }
+    target.dispatchEvent(new Event("seeked"));
   }
+  queueMicrotask(() => {
+    try {
+      target.dispatchEvent(new Event("loadedmetadata"));
+    } catch {
+    }
+  });
   return {
     strategy: "fallback",
     async play() {
@@ -3222,6 +3343,7 @@ async function createFallbackSession(ctx, target, transport) {
         delete target.muted;
         delete target.readyState;
         delete target.seekable;
+        delete target.playbackRate;
       } catch {
       }
     },
@@ -4248,9 +4370,10 @@ var AvbridgeVideoElement = class extends HTMLElementCtor {
     else this.removeAttribute("autoplay");
   }
   get muted() {
-    return this.hasAttribute("muted");
+    return this._videoEl.muted;
   }
   set muted(value) {
+    this._videoEl.muted = value;
     if (value) this.setAttribute("muted", "");
     else this.removeAttribute("muted");
   }
@@ -4315,11 +4438,16 @@ var AvbridgeVideoElement = class extends HTMLElementCtor {
   }
   /**
    * Buffered time ranges for the active source. Mirrors the standard
-   * `<video>.buffered` `TimeRanges` API. For the native and remux strategies
-   * this reflects the underlying SourceBuffer / progressive download state.
-   * For the hybrid and fallback (canvas-rendered) strategies it currently
-   * returns an empty TimeRanges; a future release will synthesize a coarse
-   * range from the decoder's read position.
+   * `<video>.buffered` `TimeRanges` API.
+   *
+   * - **Native / remux:** pass-through to the real `<video>.buffered`
+   *   (reflects the browser's SourceBuffer / progressive-download state).
+   * - **Hybrid / fallback:** a single `[0, frontier]` range synthesized
+   *   from the demuxer's read progress — "how far libav has ever pumped
+   *   packets through." Monotonic; does not shrink on seek. This is an
+   *   approximation, not MSE-fidelity: decoded frames on canvas strategies
+   *   are consumed in flight, so we can't report per-range availability
+   *   the way MSE does. Enough for a seek-bar buffered indicator.
    */
   get buffered() {
     return this._videoEl.buffered;
@@ -4623,11 +4751,17 @@ var PLAYER_STYLES = (
 
 /* \u2500\u2500 Container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
+: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 {
@@ -4826,7 +4960,14 @@ var PLAYER_STYLES = (
   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 \u2014 we
    toggle data-toolbar-empty from JS via slotchange. */
@@ -4839,6 +4980,30 @@ var PLAYER_STYLES = (
   pointer-events: none;
 }
 
+/* \u2500\u2500 Content overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* 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;
+}
+
 /* \u2500\u2500 Seek bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .avp-seek {
@@ -4925,6 +5090,15 @@ var PLAYER_STYLES = (
 
 .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);
+}
+
 /* \u2500\u2500 Bottom row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .avp-bottom {
@@ -5035,60 +5209,114 @@ var PLAYER_STYLES = (
 
 .avp-spacer { flex: 1; }
 
-/* \u2500\u2500 Settings menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* \u2500\u2500 Settings bottom sheet \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
+/* Scrim \u2014 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 \u2014 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; }
+/* \u2500\u2500 Accordion sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
-.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 \u2014 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-header-value {
+  margin-left: auto;
+  opacity: 0.6;
+  font-size: 13px;
+  text-align: right;
 }
 
-.avp-settings-item.active::before {
-  content: "\\2713";
-  margin-right: 8px;
-  font-weight: bold;
+/* 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) \u2014 no select, just clickable. */
+.avp-settings-toggle {
+  cursor: pointer;
+}
+.avp-settings-toggle:hover { background: rgba(255, 255, 255, 0.06); }
+
 /* \u2500\u2500 Stats for nerds \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
 
 .avp-stats {
@@ -5116,9 +5344,24 @@ var PLAYER_STYLES = (
 @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; }
@@ -5211,6 +5454,8 @@ var AvbridgePlayerElement = class extends HTMLElement {
   _volumeInput;
   _settingsBtn;
   _settingsMenu;
+  _settingsScrim;
+  _customSections = [];
   _fullscreenBtn;
   // Strategy badge removed — visible in Stats for Nerds instead.
   // Spinner is rendered but driven entirely by CSS :host([data-state]) selectors.
@@ -5252,6 +5497,7 @@ var AvbridgePlayerElement = class extends HTMLElement {
     this._volumeInput = shadow.querySelector(".avp-volume-input");
     this._settingsBtn = shadow.querySelector(".avp-settings-btn");
     this._settingsMenu = shadow.querySelector(".avp-settings");
+    this._settingsScrim = shadow.querySelector(".avp-settings-scrim");
     this._fullscreenBtn = shadow.querySelector(".avp-fullscreen");
     this._speedIndicator = shadow.querySelector(".avp-speed-indicator");
     this._statsEl = shadow.querySelector(".avp-stats");
@@ -5276,6 +5522,7 @@ var AvbridgePlayerElement = class extends HTMLElement {
     <div part="toolbar-top-left" class="avp-toolbar-top-left"><slot name="top-left"></slot></div>
     <div part="toolbar-top-right" class="avp-toolbar-top-right"><slot name="top-right"></slot></div>
   </div>
+  <div part="content-overlay" class="avp-content-overlay"><slot name="content-overlay"></slot></div>
   <div part="overlay" class="avp-overlay">
     <button class="avp-overlay-btn" aria-label="Play">${ICON_PLAY}</button>
     <div class="avp-spinner"></div>
@@ -5307,7 +5554,8 @@ var AvbridgePlayerElement = class extends HTMLElement {
       <button class="avp-btn avp-settings-btn" part="settings-button" aria-label="Settings">${ICON_SETTINGS}</button>
       <button class="avp-btn avp-fullscreen" part="fullscreen-button" aria-label="Fullscreen">${ICON_FULLSCREEN}</button>
     </div>
-    <div class="avp-settings" part="settings-menu"></div>
+    <div class="avp-settings-scrim"></div>
+    <div class="avp-settings" part="settings-menu"><div class="avp-settings-handle"></div></div>
   </div>
 </div>`;
   }
@@ -5379,6 +5627,7 @@ var AvbridgePlayerElement = class extends HTMLElement {
       e.stopPropagation();
       this._toggleSettings();
     });
+    on(this._settingsScrim, "click", () => this._closeSettings());
     on(this._fullscreenBtn, "click", (e) => {
       e.stopPropagation();
       this._toggleFullscreen();
@@ -5387,11 +5636,6 @@ var AvbridgePlayerElement = class extends HTMLElement {
     const container = this.shadowRoot.querySelector(".avp");
     on(container, "click", (e) => this._onContainerClick(e));
     on(container, "dblclick", (e) => this._onContainerDblClick(e));
-    on(container, "click", (e) => {
-      if (this._settingsOpen && !e.target.closest?.(".avp-settings-btn, .avp-settings")) {
-        this._closeSettings();
-      }
-    });
     on(document, "click", (e) => {
       if (this._settingsOpen && !this.contains(e.target)) {
         this._closeSettings();
@@ -5491,19 +5735,23 @@ var AvbridgePlayerElement = class extends HTMLElement {
     this._userSeeking = true;
     const seekBar = this.shadowRoot.querySelector(".avp-seek");
     seekBar.setPointerCapture(e.pointerId);
+    seekBar.setAttribute("data-seeking", "");
     const initial = this._timeFromSeekPointer(e.clientX);
     this._seekInput.value = String(initial);
     this._onSeekInput();
+    this._updateSeekTooltip(e.clientX);
     const onMove = (ev) => {
       const t = this._timeFromSeekPointer(ev.clientX);
       this._seekInput.value = String(t);
       this._onSeekInput();
+      this._updateSeekTooltip(ev.clientX);
     };
     const onUp = (ev) => {
       const t = this._timeFromSeekPointer(ev.clientX);
       this._seekInput.value = String(t);
       this._onSeekCommit();
       this._seekInput.focus();
+      seekBar.removeAttribute("data-seeking");
       seekBar.removeEventListener("pointermove", onMove);
       seekBar.removeEventListener("pointerup", onUp);
       seekBar.removeEventListener("pointercancel", onUp);
@@ -5517,8 +5765,11 @@ var AvbridgePlayerElement = class extends HTMLElement {
     seekBar.addEventListener("pointercancel", onUp);
   }
   _onSeekHover(e) {
+    this._updateSeekTooltip(e.clientX);
+  }
+  _updateSeekTooltip(clientX) {
     const rect = this._seekInput.getBoundingClientRect();
-    const frac = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    const frac = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
     const t = frac * (this._video.duration || 0);
     this._seekTooltip.textContent = formatTime(t);
     this._seekTooltip.style.left = `${frac * 100}%`;
@@ -5562,83 +5813,111 @@ var AvbridgePlayerElement = class extends HTMLElement {
   _toggleSettings() {
     this._settingsOpen = !this._settingsOpen;
     this._settingsMenu.classList.toggle("open", this._settingsOpen);
-    if (this._settingsOpen) this._showControls();
+    this._settingsScrim.classList.toggle("open", this._settingsOpen);
+    if (this._settingsOpen) {
+      this._fitSettingsToPlayer();
+      this._showControls();
+    }
+  }
+  _fitSettingsToPlayer() {
+    const container = this.shadowRoot?.querySelector(".avp");
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    const maxH = Math.max(120, Math.floor(rect.height * 0.7));
+    this._settingsMenu.style.maxHeight = `${maxH}px`;
   }
   _closeSettings() {
     this._settingsOpen = false;
     this._settingsMenu.classList.remove("open");
+    this._settingsScrim.classList.remove("open");
   }
   _buildSettingsMenu() {
     const sections = [];
-    if (this.hasAttribute("show-fit")) {
-      const currentFit = this._video.fit ?? "contain";
-      let fitItems = "";
-      for (const mode of FIT_MODES) {
-        const active = mode === currentFit;
-        const label = mode[0].toUpperCase() + mode.slice(1);
-        fitItems += `<div class="avp-settings-item${active ? " active" : ""}" data-fit="${mode}">${label}</div>`;
-      }
-      sections.push(`<div class="avp-settings-section"><div class="avp-settings-label">Fit</div>${fitItems}</div>`);
-    }
+    const selectRow = (label, currentValue, options, selectAttrs) => `<div class="avp-settings-section"><div class="avp-settings-header"><span class="avp-settings-header-label">${label}</span><span class="avp-settings-header-value">${currentValue}</span><select class="avp-settings-select" ${selectAttrs}>${options}</select></div></div>`;
     const currentRate = this._video.playbackRate ?? 1;
-    let speedItems = "";
+    const speedValue = Math.abs(currentRate - 1) < 0.01 ? "Normal" : `${currentRate}x`;
+    let speedOpts = "";
     for (const spd of PLAYBACK_SPEEDS) {
-      const active = Math.abs(spd - currentRate) < 0.01;
+      const sel = Math.abs(spd - currentRate) < 0.01 ? " selected" : "";
       const label = spd === 1 ? "Normal" : `${spd}x`;
-      speedItems += `<div class="avp-settings-item${active ? " active" : ""}" data-speed="${spd}">${label}</div>`;
+      speedOpts += `<option value="${spd}"${sel}>${label}</option>`;
+    }
+    sections.push(selectRow("Speed", speedValue, speedOpts, `data-action="speed"`));
+    const audios = this._video.audioTracks ?? [];
+    if (audios.length > 1) {
+      let audioOpts = "";
+      for (const t of audios) {
+        audioOpts += `<option value="${t.id}">${t.language ?? `Track ${t.id}`}</option>`;
+      }
+      sections.push(selectRow("Audio", audios[0]?.language ?? "Track 1", audioOpts, `data-action="audio"`));
     }
-    sections.push(`<div class="avp-settings-section"><div class="avp-settings-label">Speed</div>${speedItems}</div>`);
     const subs = this._video.subtitleTracks ?? [];
     if (subs.length > 0) {
-      let subItems = `<div class="avp-settings-item" data-subtitle="-1">Off</div>`;
+      let subOpts = `<option value="-1" selected>Off</option>`;
       for (const t of subs) {
-        subItems += `<div class="avp-settings-item" data-subtitle="${t.id}">${t.language ?? `Track ${t.id}`}</div>`;
+        subOpts += `<option value="${t.id}">${t.language ?? `Track ${t.id}`}</option>`;
       }
-      sections.push(`<div class="avp-settings-section"><div class="avp-settings-label">Subtitles</div>${subItems}</div>`);
+      sections.push(selectRow("Subtitles", "Off", subOpts, `data-action="subtitle"`));
     }
-    const audios = this._video.audioTracks ?? [];
-    if (audios.length > 1) {
-      let audioItems = "";
-      for (const t of audios) {
-        audioItems += `<div class="avp-settings-item" data-audio="${t.id}">${t.language ?? `Track ${t.id}`}</div>`;
+    if (this.hasAttribute("show-fit")) {
+      const currentFit = this._video.fit ?? "contain";
+      const fitValue = currentFit[0].toUpperCase() + currentFit.slice(1);
+      let fitOpts = "";
+      for (const mode of FIT_MODES) {
+        const sel = mode === currentFit ? " selected" : "";
+        const label = mode[0].toUpperCase() + mode.slice(1);
+        fitOpts += `<option value="${mode}"${sel}>${label}</option>`;
       }
-      sections.push(`<div class="avp-settings-section"><div class="avp-settings-label">Audio</div>${audioItems}</div>`);
+      sections.push(selectRow("Fit", fitValue, fitOpts, `data-action="fit"`));
     }
-    sections.push(`<div class="avp-settings-section"><div class="avp-settings-item" data-stats>Stats for nerds</div></div>`);
-    this._settingsMenu.innerHTML = sections.join("");
-    for (const item of this._settingsMenu.querySelectorAll("[data-fit]")) {
-      item.addEventListener("click", (e) => {
-        e.stopPropagation();
-        const mode = item.dataset.fit;
-        this.setAttribute("fit", mode);
-        this._buildSettingsMenu();
-      });
+    for (const cfg of this._customSections) {
+      const activeItem = cfg.items.find((i) => i.active);
+      let customOpts = "";
+      for (const item of cfg.items) {
+        const sel = item.active ? " selected" : "";
+        customOpts += `<option value="${item.id}"${sel}>${item.label}</option>`;
+      }
+      sections.push(selectRow(cfg.label, activeItem?.label ?? "", customOpts, `data-action="custom" data-custom-id="${cfg.id}"`));
     }
-    for (const item of this._settingsMenu.querySelectorAll("[data-speed]")) {
-      item.addEventListener("click", (e) => {
+    sections.push(
+      `<div class="avp-settings-section"><div class="avp-settings-header avp-settings-toggle" data-stats><span class="avp-settings-header-label">Stats for Nerds</span></div></div>`
+    );
+    const handle = this._settingsMenu.querySelector(".avp-settings-handle");
+    this._settingsMenu.innerHTML = "";
+    if (handle) this._settingsMenu.appendChild(handle);
+    else this._settingsMenu.insertAdjacentHTML("afterbegin", `<div class="avp-settings-handle"></div>`);
+    this._settingsMenu.insertAdjacentHTML("beforeend", sections.join(""));
+    for (const sel of this._settingsMenu.querySelectorAll(".avp-settings-select")) {
+      sel.addEventListener("change", (e) => {
         e.stopPropagation();
-        this._video.playbackRate = Number(item.dataset.speed);
+        const action = sel.dataset.action;
+        const val = sel.value;
+        switch (action) {
+          case "speed":
+            this._video.playbackRate = Number(val);
+            break;
+          case "audio":
+            void this._video.setAudioTrack(Number(val));
+            break;
+          case "subtitle":
+            void this._video.setSubtitleTrack(Number(val) >= 0 ? Number(val) : null);
+            break;
+          case "fit":
+            this.setAttribute("fit", val);
+            break;
+          case "custom": {
+            const cfgId = sel.dataset.customId;
+            const cfg = this._customSections.find((s) => s.id === cfgId);
+            cfg?.onSelect(val);
+            break;
+          }
+        }
         this._buildSettingsMenu();
       });
     }
-    for (const item of this._settingsMenu.querySelectorAll("[data-subtitle]")) {
-      item.addEventListener("click", (e) => {
-        e.stopPropagation();
-        const id = Number(item.dataset.subtitle);
-        void this._video.setSubtitleTrack(id >= 0 ? id : null);
-        this._closeSettings();
-      });
-    }
-    for (const item of this._settingsMenu.querySelectorAll("[data-audio]")) {
-      item.addEventListener("click", (e) => {
-        e.stopPropagation();
-        void this._video.setAudioTrack(Number(item.dataset.audio));
-        this._closeSettings();
-      });
-    }
-    const statsItem = this._settingsMenu.querySelector("[data-stats]");
-    if (statsItem) {
-      statsItem.addEventListener("click", (e) => {
+    const statsRow = this._settingsMenu.querySelector("[data-stats]");
+    if (statsRow) {
+      statsRow.addEventListener("click", (e) => {
         e.stopPropagation();
         this._toggleStats();
         this._closeSettings();
@@ -5738,19 +6017,23 @@ var AvbridgePlayerElement = class extends HTMLElement {
   // it's treated as a double-click and the single-click action is cancelled.
   /** Track whether the last interaction was touch so click handler can skip. */
   _lastPointerTypeWasTouch = false;
-  /** True if the event's composed path passes through consumer-slotted toolbar
-   *  content. Slotted content lives in the light DOM so `.closest(".avp-toolbar-top")`
-   *  on the event target won't find the shadow-DOM wrapper — `composedPath()`
-   *  does. */
-  _isToolbarEvent(e) {
+  /** True if the event's composed path passes through consumer-slotted
+   *  content (toolbar or content-overlay). Slotted content lives in the
+   *  light DOM so `.closest(".avp-toolbar-top")` on the event target won't
+   *  find the shadow-DOM wrapper — `composedPath()` does. */
+  _isSlottedContentEvent(e) {
     for (const node of e.composedPath()) {
-      if (node instanceof HTMLElement && node.classList.contains("avp-toolbar-top")) return true;
+      if (node instanceof HTMLElement && (node.classList.contains("avp-toolbar-top") || node.classList.contains("avp-content-overlay"))) return true;
     }
     return false;
   }
   _onContainerClick(e) {
     if (e.target.closest?.(".avp-controls, .avp-settings, .avp-overlay-btn")) return;
-    if (this._isToolbarEvent(e)) return;
+    if (this._isSlottedContentEvent(e)) return;
+    if (this._settingsOpen) {
+      this._closeSettings();
+      return;
+    }
     if (this._lastPointerTypeWasTouch) {
       this._lastPointerTypeWasTouch = false;
       return;
@@ -5766,7 +6049,7 @@ var AvbridgePlayerElement = class extends HTMLElement {
   }
   _onContainerDblClick(e) {
     if (e.target.closest?.(".avp-controls, .avp-settings")) return;
-    if (this._isToolbarEvent(e)) return;
+    if (this._isSlottedContentEvent(e)) return;
     if (this._tapTimer) {
       clearTimeout(this._tapTimer);
       this._tapTimer = null;
@@ -5788,7 +6071,11 @@ var AvbridgePlayerElement = class extends HTMLElement {
     if (e.pointerType !== "touch") return;
     this._lastPointerTypeWasTouch = true;
     if (e.target.closest?.(".avp-controls, .avp-settings, .avp-overlay-btn")) return;
-    if (this._isToolbarEvent(e)) return;
+    if (this._isSlottedContentEvent(e)) return;
+    if (this._settingsOpen) {
+      this._closeSettings();
+      return;
+    }
     const now = Date.now();
     if (now - this._lastTapTime < 300) {
       if (this._tapTimer) {
@@ -6038,6 +6325,15 @@ var AvbridgePlayerElement = class extends HTMLElement {
   async setAudioTrack(id) {
     return this._video.setAudioTrack(id);
   }
+  addSettingsSection(config) {
+    this._customSections = this._customSections.filter((s) => s.id !== config.id);
+    this._customSections.push(config);
+    this._buildSettingsMenu();
+  }
+  removeSettingsSection(id) {
+    this._customSections = this._customSections.filter((s) => s.id !== id);
+    this._buildSettingsMenu();
+  }
   async setSubtitleTrack(id) {
     return this._video.setSubtitleTrack(id);
   }