avbridge 2.9.0 → 2.10.0

package/dist/player.d.cts

@@ -287,6 +287,28 @@ interface AvbridgeVideoElementEventMap {
         fit: "contain" | "cover" | "fill";
     }>;
 }
+/**
+ * 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.
+ */
+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;
+}
 
 /**
  * `<avbridge-player>` — YouTube-style controls element.
@@ -314,6 +336,8 @@ declare class AvbridgePlayerElement extends HTMLElement {
     private _volumeInput;
     private _settingsBtn;
     private _settingsMenu;
+    private _settingsScrim;
+    private _customSections;
     private _fullscreenBtn;
     private _speedIndicator;
     private _rippleLeft;
@@ -353,6 +377,7 @@ declare class AvbridgePlayerElement extends HTMLElement {
     private _toggleMute;
     private _updateVolume;
     private _toggleSettings;
+    private _fitSettingsToPlayer;
     private _closeSettings;
     private _buildSettingsMenu;
     private _toggleStats;
@@ -437,6 +462,8 @@ declare class AvbridgePlayerElement extends HTMLElement {
     load(): Promise<void>;
     destroy(): Promise<void>;
     setAudioTrack(id: number): Promise<void>;
+    addSettingsSection(config: SettingsSectionConfig): void;
+    removeSettingsSection(id: string): void;
     setSubtitleTrack(id: number | null): Promise<void>;
     getDiagnostics(): unknown;
     canPlayType(mime: string): string;

package/dist/player.d.ts

@@ -287,6 +287,28 @@ interface AvbridgeVideoElementEventMap {
         fit: "contain" | "cover" | "fill";
     }>;
 }
+/**
+ * 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.
+ */
+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;
+}
 
 /**
  * `<avbridge-player>` — YouTube-style controls element.
@@ -314,6 +336,8 @@ declare class AvbridgePlayerElement extends HTMLElement {
     private _volumeInput;
     private _settingsBtn;
     private _settingsMenu;
+    private _settingsScrim;
+    private _customSections;
     private _fullscreenBtn;
     private _speedIndicator;
     private _rippleLeft;
@@ -353,6 +377,7 @@ declare class AvbridgePlayerElement extends HTMLElement {
     private _toggleMute;
     private _updateVolume;
     private _toggleSettings;
+    private _fitSettingsToPlayer;
     private _closeSettings;
     private _buildSettingsMenu;
     private _toggleStats;
@@ -437,6 +462,8 @@ declare class AvbridgePlayerElement extends HTMLElement {
     load(): Promise<void>;
     destroy(): Promise<void>;
     setAudioTrack(id: number): Promise<void>;
+    addSettingsSection(config: SettingsSectionConfig): void;
+    removeSettingsSection(id: string): void;
     setSubtitleTrack(id: number | null): Promise<void>;
     getDiagnostics(): unknown;
     canPlayType(mime: string): string;

package/dist/player.js

@@ -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;
@@ -2531,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: () => {
@@ -2641,6 +2668,7 @@ async function createHybridSession(ctx, target, transport) {
         delete target.muted;
         delete target.readyState;
         delete target.seekable;
+        delete target.playbackRate;
       } catch {
       }
     },
@@ -3176,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: () => {
@@ -3307,6 +3343,7 @@ async function createFallbackSession(ctx, target, transport) {
         delete target.muted;
         delete target.readyState;
         delete target.seekable;
+        delete target.playbackRate;
       } catch {
       }
     },
@@ -4723,7 +4760,6 @@ var PLAYER_STYLES = (
   position: relative;
   width: 100%;
   height: 100%;
-  cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   user-select: none;
 }
@@ -5173,63 +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;
-  /* 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-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) \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 {
@@ -5367,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.
@@ -5408,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");
@@ -5464,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>`;
   }
@@ -5536,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();
@@ -5544,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();
@@ -5726,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();
@@ -5915,6 +6030,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;
@@ -5953,6 +6072,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) {
@@ -6202,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);
   }