avbridge 2.8.1 → 2.8.2

package/dist/player.d.cts

@@ -300,7 +300,7 @@ interface AvbridgeVideoElementEventMap {
  */
 
 declare class AvbridgePlayerElement extends HTMLElement {
-    static readonly observedAttributes: ("src" | "muted" | "autoplay" | "loop" | "preload" | "poster" | "playsinline" | "crossorigin" | "disableremoteplayback" | "preferstrategy" | "fit")[];
+    static readonly observedAttributes: ("src" | "muted" | "autoplay" | "loop" | "preload" | "poster" | "playsinline" | "crossorigin" | "disableremoteplayback" | "preferstrategy" | "fit" | "show-fit")[];
     private _video;
     private _playBtn;
     private _overlayBtn;
@@ -332,6 +332,7 @@ declare class AvbridgePlayerElement extends HTMLElement {
     private _statsInterval;
     private _eventCleanup;
     private _updateToolbarEmpty;
+    private _toolbarTop;
     constructor();
     private _template;
     private _bindEvents;

package/dist/player.d.ts

@@ -300,7 +300,7 @@ interface AvbridgeVideoElementEventMap {
  */
 
 declare class AvbridgePlayerElement extends HTMLElement {
-    static readonly observedAttributes: ("src" | "muted" | "autoplay" | "loop" | "preload" | "poster" | "playsinline" | "crossorigin" | "disableremoteplayback" | "preferstrategy" | "fit")[];
+    static readonly observedAttributes: ("src" | "muted" | "autoplay" | "loop" | "preload" | "poster" | "playsinline" | "crossorigin" | "disableremoteplayback" | "preferstrategy" | "fit" | "show-fit")[];
     private _video;
     private _playBtn;
     private _overlayBtn;
@@ -332,6 +332,7 @@ declare class AvbridgePlayerElement extends HTMLElement {
     private _statsInterval;
     private _eventCleanup;
     private _updateToolbarEmpty;
+    private _toolbarTop;
     constructor();
     private _template;
     private _bindEvents;

package/dist/player.js

@@ -5142,8 +5142,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;
@@ -5180,6 +5182,7 @@ var AvbridgePlayerElement = class extends HTMLElement {
   _eventCleanup = [];
   _updateToolbarEmpty = () => {
   };
+  _toolbarTop;
   // ── Constructor ────────────────────────────────────────────────────────
   constructor() {
     super();
@@ -5203,6 +5206,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);
@@ -5386,6 +5391,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);
   }
@@ -5508,6 +5519,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) {
@@ -5534,6 +5555,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();
@@ -5619,6 +5648,7 @@ var AvbridgePlayerElement = class extends HTMLElement {
   // ── Controls: auto-hide ────────────────────────────────────────────────
   _showControls() {
     this.removeAttribute("data-controls-hidden");
+    this._toolbarTop.setAttribute("data-visible", "true");
     this._scheduleHide();
   }
   _scheduleHide() {
@@ -5628,6 +5658,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);
   }