avbridge 2.8.4 → 2.10.0

package/dist/{remux-WBYIZBBX.js → remux-56V7LDAD.js}

@@ -1,10 +1,10 @@
-export { createOutputFormat, generateFilename, mimeForFormat, remux, validateRemuxEligibility } from './chunk-SMH6IOP2.js';
-import './chunk-SR3MPV4D.js';
+export { createOutputFormat, generateFilename, mimeForFormat, remux, validateRemuxEligibility } from './chunk-CL6UEUQF.js';
+import './chunk-GYIJU44C.js';
 import './chunk-CPJLFFCC.js';
 import './chunk-LUFA47FP.js';
-import './chunk-X2K3GIWE.js';
+import './chunk-2NSOOMXW.js';
 import './chunk-DCSOQH2N.js';
 import './chunk-5DMTJVIU.js';
 import './chunk-5YAWWKA3.js';
-//# sourceMappingURL=remux-WBYIZBBX.js.map
-//# sourceMappingURL=remux-WBYIZBBX.js.map
+//# sourceMappingURL=remux-56V7LDAD.js.map
+//# sourceMappingURL=remux-56V7LDAD.js.map

package/dist/{remux-WBYIZBBX.js.map → remux-56V7LDAD.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"remux-WBYIZBBX.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"remux-56V7LDAD.js"}

package/dist/{remux-OBSMIENG.cjs → remux-KUS5GIL6.cjs}

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkQ2VUO52Z_cjs = require('./chunk-Q2VUO52Z.cjs');
-require('./chunk-ZCUXHW55.cjs');
+var chunkOTFS7DC4_cjs = require('./chunk-OTFS7DC4.cjs');
+require('./chunk-BYGZN4Z5.cjs');
 require('./chunk-2IJ66NTD.cjs');
 require('./chunk-QDJLQR53.cjs');
-require('./chunk-CPZ7PXAM.cjs');
+require('./chunk-L7A3ECI2.cjs');
 require('./chunk-Z33SBWL5.cjs');
 require('./chunk-G4APZMCP.cjs');
 require('./chunk-F3LQJKXK.cjs');
@@ -13,23 +13,23 @@ require('./chunk-F3LQJKXK.cjs');
 
 Object.defineProperty(exports, "createOutputFormat", {
   enumerable: true,
-  get: function () { return chunkQ2VUO52Z_cjs.createOutputFormat; }
+  get: function () { return chunkOTFS7DC4_cjs.createOutputFormat; }
 });
 Object.defineProperty(exports, "generateFilename", {
   enumerable: true,
-  get: function () { return chunkQ2VUO52Z_cjs.generateFilename; }
+  get: function () { return chunkOTFS7DC4_cjs.generateFilename; }
 });
 Object.defineProperty(exports, "mimeForFormat", {
   enumerable: true,
-  get: function () { return chunkQ2VUO52Z_cjs.mimeForFormat; }
+  get: function () { return chunkOTFS7DC4_cjs.mimeForFormat; }
 });
 Object.defineProperty(exports, "remux", {
   enumerable: true,
-  get: function () { return chunkQ2VUO52Z_cjs.remux; }
+  get: function () { return chunkOTFS7DC4_cjs.remux; }
 });
 Object.defineProperty(exports, "validateRemuxEligibility", {
   enumerable: true,
-  get: function () { return chunkQ2VUO52Z_cjs.validateRemuxEligibility; }
+  get: function () { return chunkOTFS7DC4_cjs.validateRemuxEligibility; }
 });
-//# sourceMappingURL=remux-OBSMIENG.cjs.map
-//# sourceMappingURL=remux-OBSMIENG.cjs.map
+//# sourceMappingURL=remux-KUS5GIL6.cjs.map
+//# sourceMappingURL=remux-KUS5GIL6.cjs.map

package/dist/{remux-OBSMIENG.cjs.map → remux-KUS5GIL6.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"remux-OBSMIENG.cjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"remux-KUS5GIL6.cjs"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "avbridge",
-  "version": "2.8.4",
+  "version": "2.10.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/classify/rules.ts

@@ -31,6 +31,8 @@ export const FALLBACK_VIDEO_CODECS = new Set<VideoCodec>([
   "wmv3", "vc1", "mpeg4",
   "rv10", "rv20", "rv30", "rv40",
   "mpeg2", "mpeg1", "theora",
+  "dv", "hq_hqa",
+  "rawvideo", "qtrle", "png", "vp6f",
 ]);
 export const FALLBACK_AUDIO_CODECS = new Set<AudioCodec>([
   "wmav2", "wmapro", "ac3", "eac3",

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 ──────────────────────────────────────────────────────────────
 
@@ -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.
@@ -133,6 +135,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]).
@@ -167,6 +170,7 @@ export class AvbridgePlayerElement 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>
@@ -198,7 +202,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>`;
   }
@@ -284,6 +289,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(); });
@@ -297,14 +303,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();
@@ -441,21 +442,25 @@ export class AvbridgePlayerElement extends HTMLElement {
     this._userSeeking = true;
     const seekBar = this.shadowRoot!.querySelector(".avp-seek") as HTMLElement;
     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: PointerEvent) => {
       const t = this._timeFromSeekPointer(ev.clientX);
       this._seekInput.value = String(t);
       this._onSeekInput();
+      this._updateSeekTooltip(ev.clientX);
     };
     const onUp = (ev: PointerEvent) => {
       const t = this._timeFromSeekPointer(ev.clientX);
       this._seekInput.value = String(t);
       this._onSeekCommit();
-      this._seekInput.focus(); // keep keyboard nav responsive
+      this._seekInput.focus();
+      seekBar.removeAttribute("data-seeking");
       seekBar.removeEventListener("pointermove", onMove);
       seekBar.removeEventListener("pointerup", onUp);
       seekBar.removeEventListener("pointercancel", onUp);
@@ -467,8 +472,12 @@ export class AvbridgePlayerElement extends HTMLElement {
   }
 
   private _onSeekHover(e: PointerEvent): void {
+    this._updateSeekTooltip(e.clientX);
+  }
+
+  private _updateSeekTooltip(clientX: number): void {
     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}%`;
@@ -526,100 +535,151 @@ 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) {
+      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>`);
 
     // Subtitle tracks
     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"`));
     }
 
-    // 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":
+            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 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();
@@ -727,21 +787,30 @@ export class AvbridgePlayerElement extends HTMLElement {
   /** Track whether the last interaction was touch so click handler can skip. */
   private _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. */
-  private _isToolbarEvent(e: Event): boolean {
+  /** 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. */
+  private _isSlottedContentEvent(e: Event): boolean {
     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;
   }
 
   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._isToolbarEvent(e)) 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.
@@ -760,7 +829,7 @@ export class AvbridgePlayerElement extends HTMLElement {
 
   private _onContainerDblClick(e: MouseEvent): void {
     if ((e.target as HTMLElement).closest?.(".avp-controls, .avp-settings")) return;
-    if (this._isToolbarEvent(e)) return;
+    if (this._isSlottedContentEvent(e)) return;
     // Cancel the pending single-click play/pause
     if (this._tapTimer) { clearTimeout(this._tapTimer); this._tapTimer = null; }
     this._toggleFullscreen();
@@ -786,7 +855,13 @@ export class AvbridgePlayerElement extends HTMLElement {
 
     // Ignore touches on controls — buttons have their own handlers
     if ((e.target as HTMLElement).closest?.(".avp-controls, .avp-settings, .avp-overlay-btn")) return;
-    if (this._isToolbarEvent(e)) 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();
@@ -980,6 +1055,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); }

package/src/element/avbridge-video.ts

@@ -598,10 +598,21 @@ export class AvbridgeVideoElement extends HTMLElementCtor {
   }
 
   get muted(): boolean {
-    return this.hasAttribute("muted");
+    // Read through to the inner <video>'s IDL property — on canvas
+    // strategies the property is patched via Object.defineProperty to
+    // mirror AudioOutput state, and consumers need the truthful value.
+    return this._videoEl.muted;
   }
 
   set muted(value: boolean) {
+    // Drive the IDL property (fires volumechange per HTML spec) rather
+    // than toggling the attribute (which on most browsers is parse-time
+    // only and does NOT fire volumechange when toggled runtime). On
+    // canvas strategies, the property is patched via Object.defineProperty
+    // which also dispatches volumechange; one code path, both worlds.
+    this._videoEl.muted = value;
+    // Keep the attribute in sync so CSS selectors like [muted] and
+    // re-queries via getAttribute reflect current state.
     if (value) this.setAttribute("muted", "");
     else this.removeAttribute("muted");
   }
@@ -683,11 +694,16 @@ export class AvbridgeVideoElement 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(): TimeRanges {
     return this._videoEl.buffered;