avbridge 2.8.1 → 2.8.2

package/CHANGELOG.md

@@ -4,6 +4,25 @@ All notable changes to **avbridge.js** are documented here. The format follows
 [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and this project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.8.2]
+
+Small ergonomics release driven by downstream `<avbridge-player>`
+consumer feedback.
+
+### Added
+
+- **Opt-in "Fit" entry in the `<avbridge-player>` settings menu.** Set
+  the new `show-fit` attribute on `<avbridge-player>` and the settings
+  menu gains a Fit section with Contain / Cover / Fill choices; picking
+  one writes the `fit` attribute (which proxies through to the inner
+  `<avbridge-video>`). Off by default — chromeless consumers don't get
+  a surprise entry.
+- **`data-visible="true|false"` on `part="toolbar-top"`.** Mirrors the
+  controls auto-hide state so slotted toolbar buttons can drive JS
+  behavior (focus management, screen-reader announcements, disabling
+  clicks) without listening to the host's `data-controls-hidden`. The
+  existing CSS fade on opacity is unchanged.
+
 ## [2.8.1]
 
 Cross-browser playback validation — second slice of the v2.7.0 Playwright

package/README.md

@@ -343,15 +343,21 @@ Both support:
 
 `<avbridge-player>` also exposes `top-left` and `top-right` slots
 inside its auto-hiding top chrome for consumer buttons (back, title,
-translate, etc.):
+translate, etc.), and an opt-in `show-fit` attribute that adds a
+Contain / Cover / Fill entry to the settings menu:
 
 ```html
-<avbridge-player src="/video.mkv" fit="cover">
+<avbridge-player src="/video.mkv" fit="cover" show-fit>
   <button slot="top-left">← Back</button>
   <button slot="top-right">Translate</button>
 </avbridge-player>
 ```
 
+The toolbar-top `part` exposes a `data-visible="true|false"`
+attribute mirroring the controls auto-hide state — useful if slotted
+buttons need to drive JS behavior (focus, announcements) in sync with
+the fade, not just CSS opacity.
+
 This is a second tsup entry (`dist/element-browser.js`) that inlines
 mediabunny + libavjs-webcodecs-bridge into a single ~1.3 MB file with
 zero bare specifiers at runtime. Perfect for self-hosted tools or static
@@ -401,6 +407,12 @@ LGPL compliance — see [`NOTICE.md`](./NOTICE.md) and
 
 ## Demos
 
+Try it live: **https://keishi.github.io/avbridge/** — player + converter
+running against the latest release, served from GitHub Pages with the
+COOP/COEP headers needed for SharedArrayBuffer.
+
+Or run locally:
+
 ```bash
 npm install
 npm run demo

package/dist/player.cjs

@@ -5144,8 +5144,10 @@ var PROXY_ATTRIBUTES = [
   "preferstrategy",
   "fit"
 ];
+var PLAYER_ATTRIBUTES = ["show-fit"];
+var FIT_MODES = ["contain", "cover", "fill"];
 var AvbridgePlayerElement = class extends HTMLElement {
-  static observedAttributes = [...PROXY_ATTRIBUTES];
+  static observedAttributes = [...PROXY_ATTRIBUTES, ...PLAYER_ATTRIBUTES];
   // ── Internal DOM refs ──────────────────────────────────────────────────
   _video;
   _playBtn;
@@ -5182,6 +5184,7 @@ var AvbridgePlayerElement = class extends HTMLElement {
   _eventCleanup = [];
   _updateToolbarEmpty = () => {
   };
+  _toolbarTop;
   // ── Constructor ────────────────────────────────────────────────────────
   constructor() {
     super();
@@ -5205,6 +5208,8 @@ var AvbridgePlayerElement = class extends HTMLElement {
     this._statsEl = shadow.querySelector(".avp-stats");
     this._rippleLeft = shadow.querySelector(".avp-ripple-left");
     this._rippleRight = shadow.querySelector(".avp-ripple-right");
+    this._toolbarTop = shadow.querySelector('[part="toolbar-top"]');
+    this._toolbarTop.setAttribute("data-visible", "true");
     const slots = shadow.querySelectorAll('slot[name="top-left"], slot[name="top-right"]');
     this._updateToolbarEmpty = () => {
       const hasContent = Array.from(slots).some((s) => s.assignedNodes({ flatten: true }).length > 0);
@@ -5388,6 +5393,12 @@ var AvbridgePlayerElement = class extends HTMLElement {
   }
   attributeChangedCallback(name, _old, value) {
     if (!this._video) return;
+    if (PLAYER_ATTRIBUTES.includes(name)) {
+      if (name === "show-fit" && this._settingsOpen) {
+        this._buildSettingsMenu();
+      }
+      return;
+    }
     if (value == null) this._video.removeAttribute(name);
     else this._video.setAttribute(name, value);
   }
@@ -5510,6 +5521,16 @@ var AvbridgePlayerElement = class extends HTMLElement {
   }
   _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 currentRate = this._video.playbackRate ?? 1;
     let speedItems = "";
     for (const spd of PLAYBACK_SPEEDS) {
@@ -5536,6 +5557,14 @@ var AvbridgePlayerElement = class extends HTMLElement {
     }
     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 item of this._settingsMenu.querySelectorAll("[data-speed]")) {
       item.addEventListener("click", (e) => {
         e.stopPropagation();
@@ -5621,6 +5650,7 @@ var AvbridgePlayerElement = class extends HTMLElement {
   // ── Controls: auto-hide ────────────────────────────────────────────────
   _showControls() {
     this.removeAttribute("data-controls-hidden");
+    this._toolbarTop.setAttribute("data-visible", "true");
     this._scheduleHide();
   }
   _scheduleHide() {
@@ -5630,6 +5660,7 @@ var AvbridgePlayerElement = class extends HTMLElement {
     this._controlsTimer = setTimeout(() => {
       if (this._state === "playing") {
         this.setAttribute("data-controls-hidden", "");
+        this._toolbarTop.setAttribute("data-visible", "false");
       }
     }, CONTROLS_HIDE_MS);
   }