avbridge 2.9.0 → 2.11.0

package/dist/player.js

@@ -1,7 +1,7 @@
 import { AvbridgeError, ERR_ALL_STRATEGIES_EXHAUSTED, ERR_PLAYER_NOT_READY, normalizeSource, sniffNormalizedSource, ERR_PROBE_FAILED, ERR_PROBE_UNKNOWN_CONTAINER, ERR_LIBAV_NOT_REACHABLE, ERR_MSE_NOT_SUPPORTED, ERR_MSE_CODEC_NOT_SUPPORTED } from './chunk-E76AMWI4.js';
 import { dbg, loadLibav } from './chunk-IAYKFGFG.js';
 import './chunk-DCSOQH2N.js';
-import { SubtitleResourceBag, discoverSidecars, attachSubtitleTracks, SubtitleOverlay } from './chunk-5KVLE6YI.js';
+import { SubtitleResourceBag, discoverSidecars, attachSubtitleTracks, SubtitleOverlay } from './chunk-EDDWAN2L.js';
 import './chunk-LUFA47FP.js';
 
 // src/events.ts
@@ -1605,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();
@@ -1626,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 {
@@ -1646,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;
   }
@@ -1703,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;
@@ -1730,6 +1749,10 @@ var AudioOutput = class {
     if (this.ctx.state === "suspended") {
       await this.ctx.resume();
     }
+    try {
+      this.gain.connect(this.ctx.destination);
+    } catch {
+    }
     if (this.state === "paused") {
       this.ctxTimeAtAnchor = this.ctx.currentTime;
       this.state = "playing";
@@ -1756,6 +1779,10 @@ var AudioOutput = class {
     this.mediaTimeOfAnchor = this.now();
     this.state = "paused";
     if (this.noAudio) return;
+    try {
+      this.gain.disconnect();
+    } catch {
+    }
     if (this.ctx.state === "running") {
       await this.ctx.suspend();
     }
@@ -2531,6 +2558,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: () => {
@@ -2641,6 +2676,7 @@ async function createHybridSession(ctx, target, transport) {
         delete target.muted;
         delete target.readyState;
         delete target.seekable;
+        delete target.playbackRate;
       } catch {
       }
     },
@@ -3176,6 +3212,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: () => {
@@ -3307,6 +3351,7 @@ async function createFallbackSession(ctx, target, transport) {
         delete target.muted;
         delete target.readyState;
         delete target.seekable;
+        delete target.playbackRate;
       } catch {
       }
     },
@@ -4528,7 +4573,7 @@ var AvbridgeVideoElement = class extends HTMLElementCtor {
    * strategies pick up the new track via their textTracks watcher.
    */
   async addSubtitle(subtitle) {
-    const { attachSubtitleTracks: attachSubtitleTracks2 } = await import('./subtitles-4T74JRGT.js');
+    const { attachSubtitleTracks: attachSubtitleTracks2 } = await import('./subtitles-5H24MEBJ.js');
     const format = subtitle.format ?? (subtitle.url.endsWith(".srt") ? "srt" : "vtt");
     const track = {
       id: this._subtitleTracks.length,
@@ -4537,14 +4582,27 @@ var AvbridgeVideoElement = class extends HTMLElementCtor {
       sidecarUrl: subtitle.url
     };
     this._subtitleTracks.push(track);
+    console.log(`[avbridge:subs] addSubtitle id=${track.id} format=${format} lang=${subtitle.language ?? "?"}`);
     await attachSubtitleTracks2(
       this._videoEl,
       this._subtitleTracks,
       void 0,
       (err, t) => {
-        console.warn(`[avbridge] subtitle ${t.id} failed: ${err.message}`);
+        console.warn(`[avbridge:subs] subtitle ${t.id} failed: ${err.message}`);
       }
     );
+    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";
+        console.log(`[avbridge:subs] enabled textTrack[${i}] mode=showing`);
+        break;
+      }
+    }
+    this._dispatch("trackschange", {
+      audioTracks: this._audioTracks,
+      subtitleTracks: this.subtitleTracks
+    });
   }
   /**
    * Disable the automatic `screen.orientation.lock()` that runs on
@@ -4723,7 +4781,6 @@ var PLAYER_STYLES = (
   position: relative;
   width: 100%;
   height: 100%;
-  cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   user-select: none;
 }
@@ -5173,62 +5230,113 @@ 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;
-  /* 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; }
+/* \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-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 {
-  color: #3ea6ff;
+/* 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;
 }
 
-.avp-settings-item.active::before {
-  content: "\\2713";
-  margin-right: 8px;
-  font-weight: bold;
+/* 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 */
 
@@ -5308,7 +5416,7 @@ function formatTime(sec) {
   return h > 0 ? `${h}:${mm}:${ss}` : `${mm}:${ss}`;
 }
 var PLAYBACK_SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
-var CONTROLS_HIDE_MS = 3e3;
+var DEFAULT_CONTROLS_HIDE_MS = 3e3;
 var FORWARDED_EVENTS = [
   "ready",
   "error",
@@ -5351,7 +5459,7 @@ var PROXY_ATTRIBUTES = [
 ];
 var PLAYER_ATTRIBUTES = ["show-fit"];
 var FIT_MODES = ["contain", "cover", "fill"];
-var AvbridgePlayerElement = class extends HTMLElement {
+var AvbridgePlayerElement = class _AvbridgePlayerElement extends HTMLElement {
   static observedAttributes = [...PROXY_ATTRIBUTES, ...PLAYER_ATTRIBUTES];
   // ── Internal DOM refs ──────────────────────────────────────────────────
   _video;
@@ -5367,6 +5475,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.
@@ -5377,6 +5487,8 @@ var AvbridgePlayerElement = class extends HTMLElement {
   _state = "idle";
   _controlsTimer = null;
   _settingsOpen = false;
+  _activeAudioTrackId = null;
+  _activeSubtitleTrackId = null;
   _userSeeking = false;
   _holdTimer = null;
   _holdSpeedActive = false;
@@ -5408,6 +5520,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");
@@ -5464,7 +5577,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>`;
   }
@@ -5536,6 +5650,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();
@@ -5544,11 +5659,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();
@@ -5642,6 +5752,10 @@ var AvbridgePlayerElement = class extends HTMLElement {
     const frac = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
     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. */
+  static SCRUB_WIDTH_THRESHOLD = 400;
   _onSeekPointerDown(e) {
     if (e.button !== 0 && e.pointerType === "mouse") return;
     e.preventDefault();
@@ -5649,15 +5763,26 @@ var AvbridgePlayerElement = class extends HTMLElement {
     const seekBar = this.shadowRoot.querySelector(".avp-seek");
     seekBar.setPointerCapture(e.pointerId);
     seekBar.setAttribute("data-seeking", "");
+    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) => {
       const t = this._timeFromSeekPointer(ev.clientX);
       this._seekInput.value = String(t);
       this._onSeekInput();
       this._updateSeekTooltip(ev.clientX);
+      if (scrubMode) {
+        const now = performance.now();
+        if (now - lastScrubCommit > 250) {
+          lastScrubCommit = now;
+          this._onSeekCommit();
+          this._userSeeking = true;
+        }
+      }
     };
     const onUp = (ev) => {
       const t = this._timeFromSeekPointer(ev.clientX);
@@ -5726,83 +5851,123 @@ 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) {
+      const activeAudioId = this._activeAudioTrackId ?? audios[0]?.id;
+      const activeAudio = audios.find((t) => t.id === activeAudioId) ?? audios[0];
+      const audioValue = activeAudio?.language ?? `Track ${activeAudio?.id ?? 1}`;
+      let audioOpts = "";
+      for (const t of audios) {
+        const sel = t.id === activeAudioId ? " selected" : "";
+        audioOpts += `<option value="${t.id}"${sel}>${t.language ?? `Track ${t.id}`}</option>`;
+      }
+      sections.push(selectRow("Audio", audioValue, 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>`;
+      const activeSubId = this._activeSubtitleTrackId;
+      const activeSub = activeSubId != null ? subs.find((t) => 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) {
-        subItems += `<div class="avp-settings-item" data-subtitle="${t.id}">${t.language ?? `Track ${t.id}`}</div>`;
+        const sel = t.id === activeSubId ? " selected" : "";
+        subOpts += `<option value="${t.id}"${sel}>${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", subValue, 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":
+            this._activeAudioTrackId = Number(val);
+            void this._video.setAudioTrack(Number(val));
+            break;
+          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;
+          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();
@@ -5881,16 +6046,26 @@ var AvbridgePlayerElement = class extends HTMLElement {
   _showControls() {
     this.showControls();
   }
-  _scheduleHide(durationMs = CONTROLS_HIDE_MS) {
+  _scheduleHide(durationMs) {
+    const ms = durationMs ?? this._getControlsTimeout();
     if (this._controlsTimer) clearTimeout(this._controlsTimer);
     if (this._state !== "playing" && this._state !== "buffering") return;
     if (this._settingsOpen) return;
+    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. */
+  _getControlsTimeout() {
+    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.
   // ── Click / tap handling (YouTube delayed-tap pattern) ──────────────────
@@ -5902,6 +6077,9 @@ 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 for ~50ms after a touch double-tap was handled, so the
+   *  synthetic dblclick from the browser doesn't also fire fullscreen. */
+  _touchDoubleTapConsumed = false;
   /** 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
@@ -5915,6 +6093,10 @@ var AvbridgePlayerElement = class extends HTMLElement {
   _onContainerClick(e) {
     if (e.target.closest?.(".avp-controls, .avp-settings, .avp-overlay-btn")) return;
     if (this._isSlottedContentEvent(e)) return;
+    if (this._settingsOpen) {
+      this._closeSettings();
+      return;
+    }
     if (this._lastPointerTypeWasTouch) {
       this._lastPointerTypeWasTouch = false;
       return;
@@ -5931,6 +6113,7 @@ var AvbridgePlayerElement = class extends HTMLElement {
   _onContainerDblClick(e) {
     if (e.target.closest?.(".avp-controls, .avp-settings")) return;
     if (this._isSlottedContentEvent(e)) return;
+    if (this._touchDoubleTapConsumed) return;
     if (this._tapTimer) {
       clearTimeout(this._tapTimer);
       this._tapTimer = null;
@@ -5953,6 +6136,10 @@ var AvbridgePlayerElement = class extends HTMLElement {
     this._lastPointerTypeWasTouch = true;
     if (e.target.closest?.(".avp-controls, .avp-settings, .avp-overlay-btn")) return;
     if (this._isSlottedContentEvent(e)) return;
+    if (this._settingsOpen) {
+      this._closeSettings();
+      return;
+    }
     const now = Date.now();
     if (now - this._lastTapTime < 300) {
       if (this._tapTimer) {
@@ -5968,6 +6155,10 @@ var AvbridgePlayerElement = class extends HTMLElement {
       } else {
         this._toggleFullscreen();
       }
+      this._touchDoubleTapConsumed = true;
+      setTimeout(() => {
+        this._touchDoubleTapConsumed = false;
+      }, 100);
       this._lastTapTime = 0;
       return;
     }
@@ -6001,6 +6192,13 @@ var AvbridgePlayerElement = class extends HTMLElement {
     this._video.currentTime = Math.max(0, this._video.currentTime + delta);
   }
   // ── Keyboard shortcuts ─────────────────────────────────────────────────
+  /** Duration of one frame in seconds, derived from diagnostics fps or
+   *  a 30fps default. Used for frame-step shortcuts (`,` / `.`). */
+  _frameDuration() {
+    const diag = this._video.getDiagnostics();
+    const fps = diag?.fps && diag.fps > 0 ? diag.fps : 30;
+    return 1 / fps;
+  }
   _onKeydown(e) {
     if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
     switch (e.key) {
@@ -6045,6 +6243,19 @@ var AvbridgePlayerElement = class extends HTMLElement {
         this._video.playbackRate = Math.max(0.25, this._video.playbackRate - 0.25);
         this._buildSettingsMenu();
         break;
+      case ",":
+        e.preventDefault();
+        if (!this._video.paused) this._video.pause();
+        this._video.currentTime = Math.max(0, this._video.currentTime - this._frameDuration());
+        break;
+      case ".":
+        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();
@@ -6202,6 +6413,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);
   }