avbridge 2.8.3 → 2.9.0

package/dist/player.js

@@ -237,7 +237,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-2JPBSHGA.js');
+          const { probeWithLibav } = await import('./avi-JXU4GQL2.js');
           return await probeWithLibav(normalized, sniffed);
         } catch {
           return result;
@@ -250,7 +250,7 @@ async function probe(source, transport) {
         mediabunnyErr.message
       );
       try {
-        const { probeWithLibav } = await import('./avi-2JPBSHGA.js');
+        const { probeWithLibav } = await import('./avi-JXU4GQL2.js');
         return await probeWithLibav(normalized, sniffed);
       } catch (libavErr) {
         const mbMsg = mediabunnyErr.message || String(mediabunnyErr);
@@ -264,7 +264,7 @@ async function probe(source, transport) {
     }
   }
   try {
-    const { probeWithLibav } = await import('./avi-2JPBSHGA.js');
+    const { probeWithLibav } = await import('./avi-JXU4GQL2.js');
     return await probeWithLibav(normalized, sniffed);
   } catch (err) {
     const inner = err instanceof Error ? err.message : String(err);
@@ -369,7 +369,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",
@@ -510,10 +516,12 @@ function classifyContext(ctx) {
         reason: `${ctx.container} container with ${video.codec}${audio ? "/" + audio.codec : ""}; MSE rejects the remux target mime and WebCodecs is unavailable \u2014 falling back to WASM decode`
       };
     }
+    const fallbackChain = webCodecsAvailable() ? ["hybrid", "fallback"] : ["fallback"];
     return {
       class: "REMUX_CANDIDATE",
       strategy: "remux",
-      reason: `${ctx.container} container with native-supported codecs \u2014 remux to fragmented MP4 for reliable playback`
+      reason: `${ctx.container} container with native-supported codecs \u2014 remux to fragmented MP4 for reliable playback`,
+      fallbackChain
     };
   }
   if (webCodecsAvailable()) {
@@ -1203,6 +1211,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)) {
@@ -1839,6 +1853,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;
@@ -2099,6 +2124,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);
@@ -2119,6 +2145,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);
       }
@@ -2375,6 +2413,9 @@ async function startHybridDecoder(opts) {
         (err) => console.error("[avbridge] hybrid pump failed (post-seek):", err)
       );
     },
+    bufferedUntilSec() {
+      return bufferedUntilSec;
+    },
     stats() {
       return {
         decoderType: "webcodecs-hybrid",
@@ -2502,6 +2543,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) {
@@ -2515,6 +2563,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(
@@ -2526,7 +2575,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 {
@@ -2711,6 +2767,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;
@@ -2736,6 +2793,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);
       }
@@ -3017,6 +3086,9 @@ async function startDecoder(opts) {
         (err) => console.error("[avbridge] decoder pump failed (post-seek):", err)
       );
     },
+    bufferedUntilSec() {
+      return bufferedUntilSec;
+    },
     stats() {
       return {
         decoderType: "libav-wasm",
@@ -3116,6 +3188,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;
@@ -3155,6 +3234,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(
@@ -3166,7 +3246,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() {
@@ -3258,6 +3345,29 @@ function registerBuiltins(registry) {
 }
 
 // src/player.ts
+function readDecodedFrameCount(target) {
+  if (typeof HTMLVideoElement === "undefined" || !(target instanceof HTMLVideoElement)) return 0;
+  const vq = target.getVideoPlaybackQuality;
+  if (typeof vq === "function") {
+    try {
+      return vq.call(target).totalVideoFrames;
+    } catch {
+    }
+  }
+  const legacy = target.webkitDecodedFrameCount;
+  return typeof legacy === "number" ? legacy : 0;
+}
+function evaluateDecodeHealth(input) {
+  const timeThreshold = input.timeStallThresholdMs ?? 5e3;
+  const frameThreshold = input.frameStallThresholdMs ?? 3e3;
+  if (!input.timeAdvanced && input.now - input.lastProgressTime > timeThreshold) {
+    return { escalate: true, kind: "time-stall" };
+  }
+  if (input.hasVideoTrack && input.timeAdvanced && !input.framesAdvanced && input.now - input.lastFrameProgressTime > frameThreshold) {
+    return { escalate: true, kind: "silent-video" };
+  }
+  return { escalate: false };
+}
 var UnifiedPlayer = class _UnifiedPlayer {
   /**
    * @internal Use {@link createPlayer} or {@link UnifiedPlayer.create} instead.
@@ -3283,6 +3393,13 @@ var UnifiedPlayer = class _UnifiedPlayer {
   stallTimer = null;
   lastProgressTime = 0;
   lastProgressPosition = -1;
+  /** Last observed `HTMLVideoElement.getVideoPlaybackQuality().totalVideoFrames`
+   *  (or `webkitDecodedFrameCount` fallback). Used by the silent-video
+   *  watchdog — catches cases where `currentTime` advances (audio plays)
+   *  but the decoder produces no frames, e.g. Firefox claiming `hev1.*`
+   *  via MSE when the decoder actually can't decode HEVC. */
+  lastVideoFrameCount = 0;
+  lastVideoFrameProgressTime = 0;
   errorListener = null;
   // Bound so we can removeEventListener in destroy(); without this the
   // listener outlives the player and accumulates on elements that swap
@@ -3527,22 +3644,41 @@ var UnifiedPlayer = class _UnifiedPlayer {
     if (strategy === "native" || strategy === "remux") {
       this.lastProgressPosition = this.options.target.currentTime;
       this.lastProgressTime = performance.now();
+      this.lastVideoFrameCount = readDecodedFrameCount(this.options.target);
+      this.lastVideoFrameProgressTime = performance.now();
+      const hasVideoTrack = (this.mediaContext?.videoTracks.length ?? 0) > 0;
       this.stallTimer = setInterval(() => {
         const t = this.options.target;
+        const now = performance.now();
         if (t.paused || t.ended || t.readyState < 2) {
           this.lastProgressPosition = t.currentTime;
-          this.lastProgressTime = performance.now();
+          this.lastProgressTime = now;
+          this.lastVideoFrameCount = readDecodedFrameCount(t);
+          this.lastVideoFrameProgressTime = now;
           return;
         }
-        if (t.currentTime !== this.lastProgressPosition) {
+        const timeAdvanced = t.currentTime !== this.lastProgressPosition;
+        const frames = readDecodedFrameCount(t);
+        const framesAdvanced = frames > this.lastVideoFrameCount;
+        const health = evaluateDecodeHealth({
+          hasVideoTrack,
+          timeAdvanced,
+          framesAdvanced,
+          now,
+          lastProgressTime: this.lastProgressTime,
+          lastFrameProgressTime: this.lastVideoFrameProgressTime
+        });
+        if (timeAdvanced) {
           this.lastProgressPosition = t.currentTime;
-          this.lastProgressTime = performance.now();
-          return;
+          this.lastProgressTime = now;
         }
-        if (performance.now() - this.lastProgressTime > 5e3) {
-          void this.escalate(
-            `${strategy} strategy stalled for 5s at ${t.currentTime.toFixed(1)}s`
-          );
+        if (framesAdvanced) {
+          this.lastVideoFrameCount = frames;
+          this.lastVideoFrameProgressTime = now;
+        }
+        if (health.escalate) {
+          const reason = health.kind === "time-stall" ? `${strategy} strategy stalled for 5s at ${t.currentTime.toFixed(1)}s` : `${strategy} strategy: audio is advancing but the video decoder has produced no new frames for 3s \u2014 likely a silent codec failure`;
+          void this.escalate(reason);
         }
       }, 1e3);
       const onError = () => {
@@ -4197,9 +4333,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");
   }
@@ -4264,11 +4401,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;
@@ -4572,11 +4714,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 {
@@ -4775,7 +4924,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. */
@@ -4788,6 +4944,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 {
@@ -4874,6 +5054,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 {
@@ -4993,7 +5182,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;
@@ -5065,9 +5257,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; }
@@ -5225,6 +5432,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>
@@ -5440,19 +5648,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);
@@ -5466,8 +5678,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}%`;
@@ -5646,12 +5861,27 @@ var AvbridgePlayerElement = class extends HTMLElement {
     this._fullscreenBtn.innerHTML = fs ? ICON_FULLSCREEN_EXIT : ICON_FULLSCREEN;
   }
   // ── Controls: auto-hide ────────────────────────────────────────────────
-  _showControls() {
+  /**
+   * Reveal the auto-hiding chrome (top toolbar + bottom controls) and
+   * re-start the auto-hide timer. Call this from app-level code to
+   * briefly surface the player UI — e.g. to confirm "you just swiped to
+   * this video" in a carousel, or to flash the title on focus change.
+   *
+   * @param durationMs  How long the chrome stays visible before fading.
+   *                    Defaults to the player's normal 3 s auto-hide.
+   *                    Pointer movement or any other interaction resets
+   *                    the timer, so a user hovering during the flash
+   *                    sees no flicker.
+   */
+  showControls(durationMs) {
     this.removeAttribute("data-controls-hidden");
     this._toolbarTop.setAttribute("data-visible", "true");
-    this._scheduleHide();
+    this._scheduleHide(durationMs);
+  }
+  _showControls() {
+    this.showControls();
   }
-  _scheduleHide() {
+  _scheduleHide(durationMs = CONTROLS_HIDE_MS) {
     if (this._controlsTimer) clearTimeout(this._controlsTimer);
     if (this._state !== "playing" && this._state !== "buffering") return;
     if (this._settingsOpen) return;
@@ -5660,7 +5890,7 @@ var AvbridgePlayerElement = class extends HTMLElement {
         this.setAttribute("data-controls-hidden", "");
         this._toolbarTop.setAttribute("data-visible", "false");
       }
-    }, CONTROLS_HIDE_MS);
+    }, durationMs);
   }
   // Strategy is visible in Stats for Nerds, no badge in controls bar.
   // ── Click / tap handling (YouTube delayed-tap pattern) ──────────────────
@@ -5672,19 +5902,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;
@@ -5700,7 +5930,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;
@@ -5722,7 +5952,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) {