avbridge 2.9.0 → 2.11.0

package/dist/subtitles-5H24MEBJ.js

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

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

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

package/dist/subtitles-HMVGWTU2.cjs

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

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

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

package/package.json

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

package/src/element/avbridge-player.ts

@@ -23,7 +23,7 @@ import {
   ICON_FULLSCREEN, ICON_FULLSCREEN_EXIT,
   ICON_REPLAY_10, ICON_FORWARD_10,
 } from "./player-icons.js";
-import type { AvbridgeVideoElementEventMap } from "../types.js";
+import type { AvbridgeVideoElementEventMap, SettingsSectionConfig } from "../types.js";
 
 // ── Helpers ──────────────────────────────────────────────────────────────
 
@@ -39,7 +39,7 @@ function formatTime(sec: number): string {
 }
 
 const PLAYBACK_SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] as const;
-const CONTROLS_HIDE_MS = 3000;
+const DEFAULT_CONTROLS_HIDE_MS = 3000;
 
 type PlayerState = "idle" | "loading" | "playing" | "paused" | "buffering" | "ended" | "error";
 
@@ -87,6 +87,8 @@ export class AvbridgePlayerElement extends HTMLElement {
   private _volumeInput!: HTMLInputElement;
   private _settingsBtn!: HTMLButtonElement;
   private _settingsMenu!: HTMLDivElement;
+  private _settingsScrim!: HTMLDivElement;
+  private _customSections: import("../types.js").SettingsSectionConfig[] = [];
   private _fullscreenBtn!: HTMLButtonElement;
   // Strategy badge removed — visible in Stats for Nerds instead.
   // Spinner is rendered but driven entirely by CSS :host([data-state]) selectors.
@@ -99,6 +101,8 @@ export class AvbridgePlayerElement extends HTMLElement {
   private _state: PlayerState = "idle";
   private _controlsTimer: ReturnType<typeof setTimeout> | null = null;
   private _settingsOpen = false;
+  private _activeAudioTrackId: number | null = null;
+  private _activeSubtitleTrackId: number | null = null;
   private _userSeeking = false;
   private _holdTimer: ReturnType<typeof setTimeout> | null = null;
   private _holdSpeedActive = false;
@@ -133,6 +137,7 @@ export class AvbridgePlayerElement extends HTMLElement {
     this._volumeInput = shadow.querySelector(".avp-volume-input") as HTMLInputElement;
     this._settingsBtn = shadow.querySelector(".avp-settings-btn") as HTMLButtonElement;
     this._settingsMenu = shadow.querySelector(".avp-settings") as HTMLDivElement;
+    this._settingsScrim = shadow.querySelector(".avp-settings-scrim") as HTMLDivElement;
     this._fullscreenBtn = shadow.querySelector(".avp-fullscreen") as HTMLButtonElement;
     // Badge removed from controls bar — strategy visible in Stats for Nerds.
     // Spinner is rendered in shadow DOM, driven by CSS :host([data-state]).
@@ -199,7 +204,8 @@ export class AvbridgePlayerElement 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>`;
   }
@@ -285,6 +291,7 @@ export class AvbridgePlayerElement extends HTMLElement {
 
     // Settings
     on(this._settingsBtn, "click", (e) => { e.stopPropagation(); this._toggleSettings(); });
+    on(this._settingsScrim, "click", () => this._closeSettings());
 
     // Fullscreen
     on(this._fullscreenBtn, "click", (e) => { e.stopPropagation(); this._toggleFullscreen(); });
@@ -298,14 +305,9 @@ export class AvbridgePlayerElement extends HTMLElement {
     on(container, "click", (e) => this._onContainerClick(e as MouseEvent));
     on(container, "dblclick", (e) => this._onContainerDblClick(e as MouseEvent));
 
-    // Dismiss settings menu on click outside (inside or outside the player)
-    on(container, "click", (e) => {
-      if (this._settingsOpen &&
-          !(e.target as HTMLElement).closest?.(".avp-settings-btn, .avp-settings")) {
-        this._closeSettings();
-      }
-    });
-    // Also dismiss if user clicks outside the player element entirely
+    // Dismiss settings sheet when clicking outside it. The scrim handles
+    // most of this (its own click handler calls _closeSettings), but we
+    // also catch clicks outside the player element entirely.
     on(document, "click", (e) => {
       if (this._settingsOpen && !this.contains(e.target as Node)) {
         this._closeSettings();
@@ -435,6 +437,11 @@ export class AvbridgePlayerElement extends HTMLElement {
     return frac * (this._video.duration || 0);
   }
 
+  /** Seekbar width below which drag-to-scrub seeks in real-time (vs
+   *  preview-only). On narrow bars precise positioning is hard, so
+   *  immediate video feedback is more useful than a time tooltip. */
+  private static readonly SCRUB_WIDTH_THRESHOLD = 400;
+
   private _onSeekPointerDown(e: PointerEvent): void {
     // Ignore synthetic clicks originating from the input's own handling
     if (e.button !== 0 && e.pointerType === "mouse") return;
@@ -444,16 +451,32 @@ export class AvbridgePlayerElement extends HTMLElement {
     seekBar.setPointerCapture(e.pointerId);
     seekBar.setAttribute("data-seeking", "");
 
+    // Decide scrub mode based on physical width.
+    const scrubMode = seekBar.getBoundingClientRect().width < AvbridgePlayerElement.SCRUB_WIDTH_THRESHOLD;
+    let lastScrubCommit = 0;
+
     const initial = this._timeFromSeekPointer(e.clientX);
     this._seekInput.value = String(initial);
     this._onSeekInput();
     this._updateSeekTooltip(e.clientX);
+    if (scrubMode) this._onSeekCommit();
 
     const onMove = (ev: PointerEvent) => {
       const t = this._timeFromSeekPointer(ev.clientX);
       this._seekInput.value = String(t);
       this._onSeekInput();
       this._updateSeekTooltip(ev.clientX);
+      // In scrub mode, commit seeks throttled to ~4 Hz so we don't
+      // overwhelm the seek pipeline (especially on canvas strategies
+      // where each seek restarts the decoder pump).
+      if (scrubMode) {
+        const now = performance.now();
+        if (now - lastScrubCommit > 250) {
+          lastScrubCommit = now;
+          this._onSeekCommit();
+          this._userSeeking = true; // keep seeking flag live
+        }
+      }
     };
     const onUp = (ev: PointerEvent) => {
       const t = this._timeFromSeekPointer(ev.clientX);
@@ -535,100 +558,163 @@ export class AvbridgePlayerElement extends HTMLElement {
   private _toggleSettings(): void {
     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();
+    }
+  }
+
+  private _fitSettingsToPlayer(): void {
+    const container = this.shadowRoot?.querySelector(".avp") as HTMLElement | null;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    // Bottom sheet can use up to 70% of the player height, leaving room
+    // to see the video behind the scrim. Floor at 120px so it's always
+    // usable.
+    const maxH = Math.max(120, Math.floor(rect.height * 0.7));
+    this._settingsMenu.style.maxHeight = `${maxH}px`;
   }
 
   private _closeSettings(): void {
     this._settingsOpen = false;
     this._settingsMenu.classList.remove("open");
+    this._settingsScrim.classList.remove("open");
   }
 
   private _buildSettingsMenu(): void {
     const sections: string[] = [];
 
-    // Fit mode — opt-in via the `show-fit` attribute. Off by default so
-    // chromeless consumers don't get a surprise entry they have to theme
-    // around.
-    if (this.hasAttribute("show-fit")) {
-      const currentFit = (this._video.fit ?? "contain") as FitMode;
-      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>`);
-    }
-
-    // Playback speed
+    // Helper: a row with an invisible native <select> layered on top of
+    // a styled label+value. Tapping opens the OS picker (escapes the
+    // shadow DOM — intentional for small players). The visible label
+    // updates on change.
+    const selectRow = (label: string, currentValue: string, options: string, selectAttrs: string): string =>
+      `<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>`;
+
+    // Speed
     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"`));
+
+    // Audio tracks
+    const audios = this._video.audioTracks ?? [];
+    if (audios.length > 1) {
+      const activeAudioId = this._activeAudioTrackId ?? audios[0]?.id;
+      const activeAudio = audios.find((t: { id: number }) => t.id === activeAudioId) ?? audios[0];
+      const audioValue = activeAudio?.language ?? `Track ${activeAudio?.id ?? 1}`;
+      let audioOpts = "";
+      for (const t of audios) {
+        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>`);
 
     // Subtitle tracks
     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: { id: number }) => t.id === activeSubId) : null;
+      const subValue = activeSub ? (activeSub.language ?? `Track ${activeSub.id}`) : "Off";
+      let subOpts = `<option value="-1"${activeSubId == null ? " selected" : ""}>Off</option>`;
       for (const t of subs) {
-        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"`));
     }
 
-    // Audio tracks
-    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>`;
+    // Fit mode — opt-in via the `show-fit` attribute
+    if (this.hasAttribute("show-fit")) {
+      const currentFit = (this._video.fit ?? "contain") as FitMode;
+      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"`));
     }
 
-    // Stats for nerds
-    sections.push(`<div class="avp-settings-section"><div class="avp-settings-item" data-stats>Stats for nerds</div></div>`);
-
-    this._settingsMenu.innerHTML = sections.join("");
-
-    // Bind click handlers
-    for (const item of this._settingsMenu.querySelectorAll("[data-fit]")) {
-      item.addEventListener("click", (e) => {
-        e.stopPropagation();
-        const mode = (item as HTMLElement).dataset.fit as FitMode;
-        this.setAttribute("fit", mode);
-        this._buildSettingsMenu();
-      });
+    // Consumer-added sections
+    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) => {
+
+    // Stats for nerds — toggle row (no select)
+    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>`,
+    );
+
+    // Rebuild sheet content (preserve the handle).
+    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(""));
+
+    // ── <select> change handlers ──
+    for (const sel of this._settingsMenu.querySelectorAll<HTMLSelectElement>(".avp-settings-select")) {
+      sel.addEventListener("change", (e) => {
         e.stopPropagation();
-        this._video.playbackRate = Number((item as HTMLElement).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 as HTMLElement).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 as HTMLElement).dataset.audio));
-        this._closeSettings();
-      });
-    }
-    const statsItem = this._settingsMenu.querySelector("[data-stats]");
-    if (statsItem) {
-      statsItem.addEventListener("click", (e) => {
+
+    // Stats toggle (no select — just a clickable row)
+    const statsRow = this._settingsMenu.querySelector("[data-stats]");
+    if (statsRow) {
+      statsRow.addEventListener("click", (e) => {
         e.stopPropagation();
         this._toggleStats();
         this._closeSettings();
@@ -711,16 +797,28 @@ export class AvbridgePlayerElement extends HTMLElement {
     this.showControls();
   }
 
-  private _scheduleHide(durationMs: number = CONTROLS_HIDE_MS): void {
+  private _scheduleHide(durationMs?: number): void {
+    const ms = durationMs ?? this._getControlsTimeout();
     if (this._controlsTimer) clearTimeout(this._controlsTimer);
     if (this._state !== "playing" && this._state !== "buffering") return;
     if (this._settingsOpen) return;
+    // A timeout of 0 or negative means "never hide" (controls always visible).
+    if (ms <= 0) return;
     this._controlsTimer = setTimeout(() => {
       if (this._state === "playing") {
         this.setAttribute("data-controls-hidden", "");
         this._toolbarTop.setAttribute("data-visible", "false");
       }
-    }, durationMs);
+    }, ms);
+  }
+
+  /** Read the controls-timeout attribute. 0 or negative = never hide.
+   *  Unset = default 3000ms. */
+  private _getControlsTimeout(): number {
+    const attr = this.getAttribute("controls-timeout");
+    if (attr == null) return DEFAULT_CONTROLS_HIDE_MS;
+    const n = Number(attr);
+    return Number.isFinite(n) ? n : DEFAULT_CONTROLS_HIDE_MS;
   }
 
   // Strategy is visible in Stats for Nerds, no badge in controls bar.
@@ -735,6 +833,9 @@ export class AvbridgePlayerElement extends HTMLElement {
 
   /** Track whether the last interaction was touch so click handler can skip. */
   private _lastPointerTypeWasTouch = false;
+  /** True for ~50ms after a touch double-tap was handled, so the
+   *  synthetic dblclick from the browser doesn't also fire fullscreen. */
+  private _touchDoubleTapConsumed = false;
 
   /** True if the event's composed path passes through consumer-slotted
    *  content (toolbar or content-overlay). Slotted content lives in the
@@ -750,10 +851,17 @@ export class AvbridgePlayerElement extends HTMLElement {
   }
 
   private _onContainerClick(e: MouseEvent): void {
-    // Ignore clicks on controls
+    // Ignore clicks on controls and slotted content
     if ((e.target as HTMLElement).closest?.(".avp-controls, .avp-settings, .avp-overlay-btn")) return;
     if (this._isSlottedContentEvent(e)) return;
 
+    // If the bottom sheet is open, any click outside it dismisses
+    // instead of toggling play/pause.
+    if (this._settingsOpen) {
+      this._closeSettings();
+      return;
+    }
+
     // Touch taps are handled by _onPointerUp (show/hide controls + double-tap).
     // The browser fires a synthetic click after touchend — skip it.
     if (this._lastPointerTypeWasTouch) {
@@ -772,6 +880,11 @@ export class AvbridgePlayerElement extends HTMLElement {
   private _onContainerDblClick(e: MouseEvent): void {
     if ((e.target as HTMLElement).closest?.(".avp-controls, .avp-settings")) return;
     if (this._isSlottedContentEvent(e)) return;
+    // On touch devices, the browser synthesizes a dblclick after two
+    // rapid taps. But we already handled the double-tap in _onPointerUp
+    // (which does ff/rw on sides, fullscreen in center). Skip the
+    // synthetic dblclick so both don't fire.
+    if (this._touchDoubleTapConsumed) return;
     // Cancel the pending single-click play/pause
     if (this._tapTimer) { clearTimeout(this._tapTimer); this._tapTimer = null; }
     this._toggleFullscreen();
@@ -799,6 +912,12 @@ export class AvbridgePlayerElement extends HTMLElement {
     if ((e.target as HTMLElement).closest?.(".avp-controls, .avp-settings, .avp-overlay-btn")) return;
     if (this._isSlottedContentEvent(e)) return;
 
+    // If the bottom sheet is open, dismiss it on any touch outside.
+    if (this._settingsOpen) {
+      this._closeSettings();
+      return;
+    }
+
     // Double-tap detection
     const now = Date.now();
     if (now - this._lastTapTime < 300) {
@@ -813,6 +932,10 @@ export class AvbridgePlayerElement extends HTMLElement {
       } else {
         this._toggleFullscreen();
       }
+      // Prevent the synthetic dblclick (fired ~50ms later by the
+      // browser) from also toggling fullscreen.
+      this._touchDoubleTapConsumed = true;
+      setTimeout(() => { this._touchDoubleTapConsumed = false; }, 100);
       this._lastTapTime = 0;
       return;
     }
@@ -854,6 +977,14 @@ export class AvbridgePlayerElement extends HTMLElement {
 
   // ── Keyboard shortcuts ─────────────────────────────────────────────────
 
+  /** Duration of one frame in seconds, derived from diagnostics fps or
+   *  a 30fps default. Used for frame-step shortcuts (`,` / `.`). */
+  private _frameDuration(): number {
+    const diag = this._video.getDiagnostics() as { fps?: number } | null;
+    const fps = diag?.fps && diag.fps > 0 ? diag.fps : 30;
+    return 1 / fps;
+  }
+
   private _onKeydown(e: KeyboardEvent): void {
     // Don't intercept if the user is typing in an input
     if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
@@ -900,6 +1031,21 @@ export class AvbridgePlayerElement extends HTMLElement {
         this._video.playbackRate = Math.max(0.25, this._video.playbackRate - 0.25);
         this._buildSettingsMenu();
         break;
+      case ",":
+        // Frame-back (YouTube-style: , while paused steps back one frame)
+        e.preventDefault();
+        if (!this._video.paused) this._video.pause();
+        this._video.currentTime = Math.max(0, this._video.currentTime - this._frameDuration());
+        break;
+      case ".":
+        // Frame-forward (YouTube-style: . while paused steps forward one frame)
+        e.preventDefault();
+        if (!this._video.paused) this._video.pause();
+        this._video.currentTime = Math.min(
+          this._video.duration || 0,
+          this._video.currentTime + this._frameDuration(),
+        );
+        break;
       case "Escape":
         if (this._settingsOpen) {
           e.preventDefault();
@@ -991,6 +1137,17 @@ export class AvbridgePlayerElement extends HTMLElement {
     return this._video.destroy();
   }
   async setAudioTrack(id: number): Promise<void> { return this._video.setAudioTrack(id); }
+
+  addSettingsSection(config: SettingsSectionConfig): void {
+    this._customSections = this._customSections.filter((s) => s.id !== config.id);
+    this._customSections.push(config);
+    this._buildSettingsMenu();
+  }
+
+  removeSettingsSection(id: string): void {
+    this._customSections = this._customSections.filter((s) => s.id !== id);
+    this._buildSettingsMenu();
+  }
   async setSubtitleTrack(id: number | null): Promise<void> { return this._video.setSubtitleTrack(id); }
   getDiagnostics(): unknown { return this._video.getDiagnostics(); }
   canPlayType(mime: string): string { return this._video.canPlayType(mime); }