avbridge 2.8.4 → 2.9.0

package/dist/player.cjs

@@ -239,7 +239,7 @@ async function probe(source, transport) {
       const hasUnknownCodec = result.videoTracks.some((t) => t.codec === "unknown") || result.audioTracks.some((t) => t.codec === "unknown");
       if (hasUnknownCodec) {
         try {
-          const { probeWithLibav } = await import('./avi-F6WZJK5T.cjs');
+          const { probeWithLibav } = await import('./avi-2ILLBNPQ.cjs');
           return await probeWithLibav(normalized, sniffed);
         } catch {
           return result;
@@ -252,7 +252,7 @@ async function probe(source, transport) {
         mediabunnyErr.message
       );
       try {
-        const { probeWithLibav } = await import('./avi-F6WZJK5T.cjs');
+        const { probeWithLibav } = await import('./avi-2ILLBNPQ.cjs');
         return await probeWithLibav(normalized, sniffed);
       } catch (libavErr) {
         const mbMsg = mediabunnyErr.message || String(mediabunnyErr);
@@ -266,7 +266,7 @@ async function probe(source, transport) {
     }
   }
   try {
-    const { probeWithLibav } = await import('./avi-F6WZJK5T.cjs');
+    const { probeWithLibav } = await import('./avi-2ILLBNPQ.cjs');
     return await probeWithLibav(normalized, sniffed);
   } catch (err) {
     const inner = err instanceof Error ? err.message : String(err);
@@ -371,7 +371,13 @@ var FALLBACK_VIDEO_CODECS = /* @__PURE__ */ new Set([
   "rv40",
   "mpeg2",
   "mpeg1",
-  "theora"
+  "theora",
+  "dv",
+  "hq_hqa",
+  "rawvideo",
+  "qtrle",
+  "png",
+  "vp6f"
 ]);
 var FALLBACK_AUDIO_CODECS = /* @__PURE__ */ new Set([
   "wmav2",
@@ -1207,6 +1213,12 @@ async function createRemuxSession(context, video) {
       }
       const wasPlaying = !video.paused;
       await pipeline.seek(time, wasPlaying || wantPlay);
+      queueMicrotask(() => {
+        try {
+          video.dispatchEvent(new Event("seeked"));
+        } catch {
+        }
+      });
     },
     async setAudioTrack(id) {
       if (!context.audioTracks.some((t) => t.id === id)) {
@@ -1843,6 +1855,17 @@ function sanitizePacketTimestamp(pkt, nextUs, fallbackTimeBase) {
   pkt.time_base_num = 1;
   pkt.time_base_den = 1e6;
 }
+function packetPtsSec(pkt, timeBase) {
+  const lo = pkt.pts ?? 0;
+  const hi = pkt.ptshi ?? 0;
+  const isInvalid = hi === -2147483648 && lo === 0 || !Number.isFinite(lo);
+  if (isInvalid) return null;
+  const tb = timeBase ?? [1, 1e6];
+  if (!tb[0] || !tb[1]) return null;
+  const pts64 = hi * 4294967296 + lo;
+  const sec = pts64 * tb[0] / tb[1];
+  return Number.isFinite(sec) ? sec : null;
+}
 var AV_SAMPLE_FMT_U8 = 0;
 var AV_SAMPLE_FMT_S16 = 1;
 var AV_SAMPLE_FMT_S32 = 2;
@@ -2103,6 +2126,7 @@ async function startHybridDecoder(opts) {
   let videoFramesDecoded = 0;
   let audioFramesDecoded = 0;
   let videoChunksFed = 0;
+  let bufferedUntilSec = 0;
   let syntheticVideoUs = 0;
   let syntheticAudioUs = 0;
   const videoTrackInfo = opts.context.videoTracks.find((t) => t.id === videoStream?.index);
@@ -2123,6 +2147,18 @@ async function startHybridDecoder(opts) {
       if (myToken !== pumpToken || destroyed) return;
       const videoPackets = videoStream ? packets[videoStream.index] : void 0;
       const audioPackets = audioStream ? packets[audioStream.index] : void 0;
+      if (videoPackets && videoTimeBase) {
+        for (const pkt of videoPackets) {
+          const sec = packetPtsSec(pkt, videoTimeBase);
+          if (sec != null && sec > bufferedUntilSec) bufferedUntilSec = sec;
+        }
+      }
+      if (audioPackets && audioTimeBase) {
+        for (const pkt of audioPackets) {
+          const sec = packetPtsSec(pkt, audioTimeBase);
+          if (sec != null && sec > bufferedUntilSec) bufferedUntilSec = sec;
+        }
+      }
       if (audioDec && audioPackets && audioPackets.length > 0) {
         await decodeAudioBatch(audioPackets, myToken);
       }
@@ -2379,6 +2415,9 @@ async function startHybridDecoder(opts) {
         (err) => console.error("[avbridge] hybrid pump failed (post-seek):", err)
       );
     },
+    bufferedUntilSec() {
+      return bufferedUntilSec;
+    },
     stats() {
       return {
         decoderType: "webcodecs-hybrid",
@@ -2506,6 +2545,13 @@ async function createHybridSession(ctx, target, transport) {
     configurable: true,
     get: () => makeTimeRanges(ctx.duration && Number.isFinite(ctx.duration) && ctx.duration > 0 ? [[0, ctx.duration]] : [])
   });
+  Object.defineProperty(target, "buffered", {
+    configurable: true,
+    get: () => {
+      const end = handles.bufferedUntilSec();
+      return makeTimeRanges(end > 0 ? [[0, end]] : []);
+    }
+  });
   async function waitForBuffer() {
     const start = performance.now();
     while (true) {
@@ -2519,6 +2565,7 @@ async function createHybridSession(ctx, target, transport) {
   }
   async function doSeek(timeSec) {
     const wasPlaying = audio.isPlaying();
+    target.dispatchEvent(new Event("seeking"));
     await audio.pause().catch(() => {
     });
     await handles.seek(timeSec).catch(
@@ -2530,7 +2577,14 @@ async function createHybridSession(ctx, target, transport) {
       await waitForBuffer();
       await audio.start();
     }
+    target.dispatchEvent(new Event("seeked"));
   }
+  queueMicrotask(() => {
+    try {
+      target.dispatchEvent(new Event("loadedmetadata"));
+    } catch {
+    }
+  });
   let fatalErrorHandler = null;
   handles.onFatalError((reason) => fatalErrorHandler?.(reason));
   return {
@@ -2715,6 +2769,7 @@ async function startDecoder(opts) {
   let pumpRunning = null;
   let packetsRead = 0;
   let videoFramesDecoded = 0;
+  let bufferedUntilSec = 0;
   let audioFramesDecoded = 0;
   let watchdogFirstFrameMs = 0;
   let watchdogSlowSinceMs = 0;
@@ -2740,6 +2795,18 @@ async function startDecoder(opts) {
       if (myToken !== pumpToken || destroyed) return;
       const videoPackets = videoStream ? packets[videoStream.index] : void 0;
       const audioPackets = audioStream ? packets[audioStream.index] : void 0;
+      if (videoPackets && videoTimeBase) {
+        for (const pkt of videoPackets) {
+          const sec = packetPtsSec(pkt, videoTimeBase);
+          if (sec != null && sec > bufferedUntilSec) bufferedUntilSec = sec;
+        }
+      }
+      if (audioPackets && audioTimeBase) {
+        for (const pkt of audioPackets) {
+          const sec = packetPtsSec(pkt, audioTimeBase);
+          if (sec != null && sec > bufferedUntilSec) bufferedUntilSec = sec;
+        }
+      }
       if (audioDec && audioPackets && audioPackets.length > 0) {
         await decodeAudioBatch(audioPackets, myToken);
       }
@@ -3021,6 +3088,9 @@ async function startDecoder(opts) {
         (err) => console.error("[avbridge] decoder pump failed (post-seek):", err)
       );
     },
+    bufferedUntilSec() {
+      return bufferedUntilSec;
+    },
     stats() {
       return {
         decoderType: "libav-wasm",
@@ -3120,6 +3190,13 @@ async function createFallbackSession(ctx, target, transport) {
     configurable: true,
     get: () => makeTimeRanges(ctx.duration && Number.isFinite(ctx.duration) && ctx.duration > 0 ? [[0, ctx.duration]] : [])
   });
+  Object.defineProperty(target, "buffered", {
+    configurable: true,
+    get: () => {
+      const end = handles.bufferedUntilSec();
+      return makeTimeRanges(end > 0 ? [[0, end]] : []);
+    }
+  });
   async function waitForBuffer() {
     const start = performance.now();
     let firstFrameAtMs = 0;
@@ -3159,6 +3236,7 @@ async function createFallbackSession(ctx, target, transport) {
   }
   async function doSeek(timeSec) {
     const wasPlaying = audio.isPlaying();
+    target.dispatchEvent(new Event("seeking"));
     await audio.pause().catch(() => {
     });
     await handles.seek(timeSec).catch(
@@ -3170,7 +3248,14 @@ async function createFallbackSession(ctx, target, transport) {
       await waitForBuffer();
       await audio.start();
     }
+    target.dispatchEvent(new Event("seeked"));
   }
+  queueMicrotask(() => {
+    try {
+      target.dispatchEvent(new Event("loadedmetadata"));
+    } catch {
+    }
+  });
   return {
     strategy: "fallback",
     async play() {
@@ -4250,9 +4335,10 @@ var AvbridgeVideoElement = class extends HTMLElementCtor {
     else this.removeAttribute("autoplay");
   }
   get muted() {
-    return this.hasAttribute("muted");
+    return this._videoEl.muted;
   }
   set muted(value) {
+    this._videoEl.muted = value;
     if (value) this.setAttribute("muted", "");
     else this.removeAttribute("muted");
   }
@@ -4317,11 +4403,16 @@ var AvbridgeVideoElement = class 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() {
     return this._videoEl.buffered;
@@ -4625,11 +4716,18 @@ var PLAYER_STYLES = (
 
 /* \u2500\u2500 Container \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\u2500\u2500 */
 
+:host {
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+}
+
 .avp {
   position: relative;
   width: 100%;
   height: 100%;
   cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
 }
 
 .avp avbridge-video {
@@ -4828,7 +4926,14 @@ var PLAYER_STYLES = (
   pointer-events: auto;
 }
 
-.avp-toolbar-top-right { margin-left: auto; }
+/* Left slot fills remaining space so slotted text/content can grow.
+   min-width: 0 prevents flex children from overflowing the toolbar. */
+.avp-toolbar-top-left {
+  flex: 1;
+  min-width: 0;
+}
+
+.avp-toolbar-top-right { margin-left: auto; flex-shrink: 0; }
 
 /* Hide the gradient band when no consumer has slotted anything \u2014 we
    toggle data-toolbar-empty from JS via slotchange. */
@@ -4841,6 +4946,30 @@ var PLAYER_STYLES = (
   pointer-events: none;
 }
 
+/* \u2500\u2500 Content overlay \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 */
+/* Consumer-provided rich content (tweet cards, media info, annotations).
+   Sits above the video, below the play-button overlay and controls in
+   z-order. Auto-hides with the chrome. The wrapper is pointer-events:none
+   so taps fall through to the video; consumers opt in on their content
+   with pointer-events:auto. */
+
+.avp-content-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 1;
+  transition: opacity 0.25s;
+}
+
+.avp-content-overlay ::slotted(*) {
+  pointer-events: auto;
+}
+
+:host([data-controls-hidden]) .avp-content-overlay {
+  opacity: 0;
+}
+
 /* \u2500\u2500 Seek bar \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\u2500\u2500\u2500 */
 
 .avp-seek {
@@ -4927,6 +5056,15 @@ var PLAYER_STYLES = (
 
 .avp-seek:hover .avp-seek-tooltip { display: block; }
 
+/* Show tooltip during active drag (touch or mouse). The JS side sets
+   data-seeking on .avp-seek while the user is scrubbing. */
+.avp-seek[data-seeking] .avp-seek-tooltip { display: block; }
+
+/* Enlarge thumb while scrubbing. */
+.avp-seek[data-seeking] .avp-seek-thumb {
+  transform: translate(-50%, -50%) scale(1.4);
+}
+
 /* \u2500\u2500 Bottom row \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\u2500 */
 
 .avp-bottom {
@@ -5046,7 +5184,10 @@ var PLAYER_STYLES = (
   background: rgba(28, 28, 28, 0.95);
   border-radius: 8px;
   min-width: 220px;
-  max-height: 300px;
+  /* 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;
   z-index: 10;
@@ -5118,9 +5259,24 @@ var PLAYER_STYLES = (
 @media (pointer: coarse) {
   .avp-btn svg { width: 28px; height: 28px; }
   .avp-btn { padding: 8px; }
+
+  /* Taller touch target on mobile (44px, matching YouTube Mobile)
+     while keeping the visual track thin. Negative margin collapses
+     the extra space so the controls layout doesn't shift. */
+  .avp-seek { height: 44px; margin-top: -12px; margin-bottom: -12px; }
   .avp-seek-track { height: 4px; }
   .avp-seek:hover .avp-seek-track { height: 4px; }
-  .avp-seek-thumb { transform: translate(-50%, -50%) scale(1); }
+  .avp-seek-thumb {
+    transform: translate(-50%, -50%) scale(1);
+    width: 16px;
+    height: 16px;
+  }
+  .avp-seek[data-seeking] .avp-seek-thumb {
+    transform: translate(-50%, -50%) scale(1.5);
+  }
+  /* Move tooltip above the taller touch zone. */
+  .avp-seek-tooltip { bottom: 32px; }
+
   .avp-volume:hover .avp-volume-slider { width: 0; }
   .avp-overlay-btn { width: 56px; height: 56px; }
   .avp-overlay-btn svg { width: 30px; height: 30px; }
@@ -5278,6 +5434,7 @@ var AvbridgePlayerElement = class 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>
@@ -5493,19 +5650,23 @@ var AvbridgePlayerElement = class extends HTMLElement {
     this._userSeeking = true;
     const seekBar = this.shadowRoot.querySelector(".avp-seek");
     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) => {
       const t = this._timeFromSeekPointer(ev.clientX);
       this._seekInput.value = String(t);
       this._onSeekInput();
+      this._updateSeekTooltip(ev.clientX);
     };
     const onUp = (ev) => {
       const t = this._timeFromSeekPointer(ev.clientX);
       this._seekInput.value = String(t);
       this._onSeekCommit();
       this._seekInput.focus();
+      seekBar.removeAttribute("data-seeking");
       seekBar.removeEventListener("pointermove", onMove);
       seekBar.removeEventListener("pointerup", onUp);
       seekBar.removeEventListener("pointercancel", onUp);
@@ -5519,8 +5680,11 @@ var AvbridgePlayerElement = class extends HTMLElement {
     seekBar.addEventListener("pointercancel", onUp);
   }
   _onSeekHover(e) {
+    this._updateSeekTooltip(e.clientX);
+  }
+  _updateSeekTooltip(clientX) {
     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}%`;
@@ -5740,19 +5904,19 @@ var AvbridgePlayerElement = class extends HTMLElement {
   // it's treated as a double-click and the single-click action is cancelled.
   /** Track whether the last interaction was touch so click handler can skip. */
   _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. */
-  _isToolbarEvent(e) {
+  /** 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. */
+  _isSlottedContentEvent(e) {
     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;
   }
   _onContainerClick(e) {
     if (e.target.closest?.(".avp-controls, .avp-settings, .avp-overlay-btn")) return;
-    if (this._isToolbarEvent(e)) return;
+    if (this._isSlottedContentEvent(e)) return;
     if (this._lastPointerTypeWasTouch) {
       this._lastPointerTypeWasTouch = false;
       return;
@@ -5768,7 +5932,7 @@ var AvbridgePlayerElement = class extends HTMLElement {
   }
   _onContainerDblClick(e) {
     if (e.target.closest?.(".avp-controls, .avp-settings")) return;
-    if (this._isToolbarEvent(e)) return;
+    if (this._isSlottedContentEvent(e)) return;
     if (this._tapTimer) {
       clearTimeout(this._tapTimer);
       this._tapTimer = null;
@@ -5790,7 +5954,7 @@ var AvbridgePlayerElement = class extends HTMLElement {
     if (e.pointerType !== "touch") return;
     this._lastPointerTypeWasTouch = true;
     if (e.target.closest?.(".avp-controls, .avp-settings, .avp-overlay-btn")) return;
-    if (this._isToolbarEvent(e)) return;
+    if (this._isSlottedContentEvent(e)) return;
     const now = Date.now();
     if (now - this._lastTapTime < 300) {
       if (this._tapTimer) {