movi-player 0.3.0 → 0.3.2

package/dist/render/MoviElement.js

@@ -54,6 +54,16 @@ export class MoviElement extends HTMLElement {
     coverArtOverlay = null;
     coverArtCanvas = null;
     coverArtBitmap = null;
+    // For an audio-only source with NO embedded album art but a `poster` URL, the
+    // poster is loaded into a bitmap and painted through the same cover-art canvas
+    // (blurred backdrop + centered) so it reads as album art instead of the bare
+    // strip. Embedded art (coverArtBitmap) always wins over this.
+    _posterCoverBitmap = null;
+    _posterCoverUrl = ""; // URL the poster bitmap was loaded from
+    _posterCoverLoading = false;
+    // Blurred-backdrop element behind the sharp-art canvas — CSS filter:blur()
+    // (cross-browser Gaussian, unlike canvas ctx.filter).
+    _coverArtBgEl = null;
     // True once cover-art extraction has settled for the current source (bitmap
     // arrived OR extraction failed). Until then, if the source has an art track,
     // we hold the audio-strip layout off so the player doesn't flash strip→cover.
@@ -62,6 +72,7 @@ export class MoviElement extends HTMLElement {
     isOverControls = false;
     isSeeking = false;
     pendingSeekTarget = null; // Coalesces rapid currentTime sets while a seek is in flight
+    _pendingSeek = null; // Seek requested before the player was ready; applied on the next seekable state
     isDragging = false;
     isTouchDragging = false;
     // Gesture tracking
@@ -98,6 +109,14 @@ export class MoviElement extends HTMLElement {
     // wire any custom protocol (WebSocket, WebRTC data channel, IndexedDB,
     // bespoke encryption, etc.) into the element without losing the UI.
     _sourceAdapter = null;
+    // Custom HTTP headers applied to all media network requests (manifest +
+    // segments for streams, progressive downloads too). Set declaratively via the
+    // `headers` attribute (JSON) or programmatically via the `headers` property.
+    _headers = null;
+    // Audio-only (data-saver) mode: skip video decode (CPU) and, for adaptive
+    // streams, fetch only audio (bandwidth). Toggleable via the `audioonly`
+    // attribute or the `audioOnly` property. The UI shows the album-art / strip.
+    _audioOnly = false;
     _audioSrc = null; // Separate audio source URL
     // Pre-muxed video qualities declared via multiple <source> tags with
     // data-height / data-label. Lets the player drive a YouTube-style quality
@@ -112,6 +131,10 @@ export class MoviElement extends HTMLElement {
     // over the first frame during the brief pre-play startup window even
     // though the player is about to start on its own.
     _autoplayStarting = false;
+    // Autoplay was requested while the tab was hidden — deferred until the tab
+    // is visible (a backgrounded first-play seek gets throttled and stalls in
+    // buffering). _onVisibilityChange starts it when the tab is shown.
+    _autoplayPendingVisible = false;
     // True when autoplay-with-sound was blocked by the browser and we fell
     // back to muted playback (YouTube/Twitter behaviour). Unlike the `muted`
     // attribute, this is a runtime decision the user never asked for — so the
@@ -171,6 +194,10 @@ export class MoviElement extends HTMLElement {
     _objectFit = "contain"; // Configuration mode
     _currentFit = "contain"; // Actual fit being applied
     _thumb = false;
+    // True once the source falls back to linear (forward-only) playback: server
+    // has no Range support and the file is too big to cache whole. Hides the
+    // timeline and disables seeking + thumbnails.
+    _linearMode = false;
     _hdr = true; // HDR enabled by default
     _theme = "dark"; // Default theme
     _sw = "auto"; // Preferred decoder mode (auto or software)
@@ -279,6 +306,13 @@ export class MoviElement extends HTMLElement {
             if (!lost && this._contextLostTime === 0) {
                 this._hideSnapshotPoster();
             }
+            // An autoplay deferred while the tab was hidden — start it now that the
+            // tab is visible, so the first-play seek runs with rAF/decoding active
+            // instead of stalling in a throttled background.
+            if (this._autoplayPendingVisible && this.player && !this._isUnsupported) {
+                this._autoplayPendingVisible = false;
+                void this._startAutoplay();
+            }
         }
     };
     // Observed attributes (native video element attributes)
@@ -328,13 +362,21 @@ export class MoviElement extends HTMLElement {
             "videoid",
             "drm",
             "licenseurl",
+            "licenseheaders",
+            "headers",
+            "audioonly",
+            "lcevc",
+            "lcevcurl",
             "postertime",
         ];
     }
     constructor() {
         super();
-        // Enable keyboard focus
-        this.tabIndex = 0;
+        // NOTE: do NOT set attributes (or anything that reflects to one, e.g.
+        // `this.tabIndex`) here. The Custom Elements spec forbids a constructor
+        // from gaining attributes, so `document.createElement("movi-player")`
+        // throws `NotSupportedError: The result must not have attributes`.
+        // Keyboard focus is enabled in connectedCallback instead. (issue #9)
         // Set log level to INFO by default (change to DEBUG for troubleshooting)
         Logger.setLevel(LogLevel.DEBUG);
         // Create shadow DOM for encapsulation
@@ -413,7 +455,16 @@ export class MoviElement extends HTMLElement {
         this.coverArtOverlay.style.zIndex = "1";
         this.coverArtOverlay.style.pointerEvents = "none";
         this.coverArtOverlay.style.background = "#000";
+        this.coverArtOverlay.style.overflow = "hidden"; // contain the blur bleed
+        // Blurred backdrop via CSS filter:blur() — a real Gaussian in EVERY browser
+        // (Chrome/Firefox/Safari incl. old versions), unlike canvas ctx.filter which
+        // Safari < 17 ignores. Sits behind the sharp-art canvas.
+        this._coverArtBgEl = document.createElement("div");
+        this._coverArtBgEl.className = "movi-cover-art-bg";
+        this.coverArtOverlay.appendChild(this._coverArtBgEl);
         this.coverArtCanvas = document.createElement("canvas");
+        this.coverArtCanvas.style.position = "absolute";
+        this.coverArtCanvas.style.inset = "0";
         this.coverArtCanvas.style.width = "100%";
         this.coverArtCanvas.style.height = "100%";
         this.coverArtCanvas.style.display = "block";
@@ -854,6 +905,9 @@ export class MoviElement extends HTMLElement {
               <span class="movi-current-time">0:00</span>
               <span class="movi-time-separator"> / </span>
               <span class="movi-duration">0:00</span>
+              <button class="movi-live-badge" type="button" aria-label="Go to live" title="Go to live edge">
+                <span class="movi-live-dot"></span>LIVE
+              </button>
             </div>
           </div>
 
@@ -1271,6 +1325,14 @@ export class MoviElement extends HTMLElement {
             this.loop = !this.loop;
             this.showOSD(OSD.loop, this.loop ? "Loop On" : "Loop Off");
         });
+        // LIVE badge → jump to the live edge and resume.
+        const liveBadge = shadowRoot.querySelector(".movi-live-badge");
+        liveBadge?.addEventListener("click", (e) => {
+            e.stopPropagation();
+            this.player?.seekToLive?.();
+            this.play();
+            this.updateLiveState();
+        });
         // Stable Audio Toggle
         const stableAudioBtn = shadowRoot.querySelector(".movi-stable-audio-btn");
         stableAudioBtn?.addEventListener("click", (e) => {
@@ -1401,7 +1463,7 @@ export class MoviElement extends HTMLElement {
             if (!showPreview) {
                 return;
             }
-            const time = percent * duration;
+            const time = this.barFractionToTime(percent);
             thumbnailTime.textContent = this.formatTime(time);
             // Show chapter title if hovering over a chapter
             const chapterTitleEl = shadowRoot.querySelector(".movi-seek-chapter-title");
@@ -1419,7 +1481,16 @@ export class MoviElement extends HTMLElement {
                     chapterTitleEl.style.display = "none";
                 }
             }
-            if (this._thumb) {
+            // In linear (non-range) playback only frames inside the buffered RAM
+            // window can be previewed. Outside it the thumbnailer either fails
+            // (behind — bytes discarded) or clamps to the last buffered keyframe and
+            // returns a STALE frame (ahead — not yet downloaded). Suppress the
+            // preview there so a wrong/old thumbnail never shows.
+            const previewInWindow = !this._linearMode ||
+                !this.player ||
+                (time >= (this.player.getBufferStartTime?.() ?? 0) &&
+                    time <= (this.player.getBufferEndTime?.() ?? duration));
+            if (this._thumb && previewInWindow) {
                 requestPreview(time);
             }
             else {
@@ -1600,10 +1671,15 @@ export class MoviElement extends HTMLElement {
             // matchMedia is reliable across browsers; pointerType on click events is
             // not (Android Chrome can synthesize click with pointerType="mouse" from
             // a touch tap, which previously fell through to mute on the first tap).
+            // But hybrid / emulated devices can report hover-capable even when the
+            // tap is genuinely touch, so also honour the recent-touchstart signal the
+            // rest of the player uses — otherwise the first tap mutes instead of
+            // opening the slider.
             const noHover = window.matchMedia("(hover: none)").matches;
+            const fromTouch = noHover || Date.now() - this.lastTouchTime < 1000;
             const volumeContainer = shadowRoot.querySelector(".movi-volume-container");
             // Touch / mobile: first tap opens the slider, second tap mutes.
-            if (noHover && volumeContainer) {
+            if (fromTouch && volumeContainer) {
                 if (!volumeContainer.classList.contains("active")) {
                     volumeContainer.classList.add("active");
                     const closeVolume = (evt) => {
@@ -2086,7 +2162,11 @@ export class MoviElement extends HTMLElement {
         const duration = this.duration;
         if (duration <= 0)
             return;
-        const time = percent * duration;
+        // Live: map the fraction into the DVR window. Otherwise (linear mode)
+        // clamp the seek target to the buffered RAM window.
+        const time = this.player?.isLiveStream?.()
+            ? this.barFractionToTime(percent)
+            : this.clampToBufferedWindow(percent * duration);
         const wasPlaying = state === "playing";
         this.isSeeking = true;
         try {
@@ -2142,7 +2222,11 @@ export class MoviElement extends HTMLElement {
         const duration = this.duration;
         if (duration <= 0)
             return;
-        const time = percent * duration;
+        // Live: map the fraction into the DVR window. Otherwise (linear mode)
+        // clamp the seek target to the buffered RAM window.
+        const time = this.player?.isLiveStream?.()
+            ? this.barFractionToTime(percent)
+            : this.clampToBufferedWindow(percent * duration);
         const wasPlaying = state === "playing";
         this.isSeeking = true;
         try {
@@ -2190,7 +2274,8 @@ export class MoviElement extends HTMLElement {
                 target.closest(".movi-btn")) {
                 return;
             }
-            // If double tap is disabled, handle as single tap immediately (simple toggle)
+            // If double tap is disabled, handle as single tap immediately (simple
+            // toggle). In linear mode the skip seek clamps to the buffered window.
             if (!this._doubleTap) {
                 if (tapTimer)
                     clearTimeout(tapTimer);
@@ -2573,7 +2658,8 @@ export class MoviElement extends HTMLElement {
                 }
                 case "ArrowLeft":
                     // Left Arrow: Seek backward 5 seconds or single frame (if Ctrl)
-                    // Only enabled if fastseek is true
+                    // Only enabled if fastseek is true. In linear mode the seek clamps to
+                    // the buffered RAM window.
                     if (!this._fastSeek)
                         break;
                     e.preventDefault();
@@ -2594,7 +2680,8 @@ export class MoviElement extends HTMLElement {
                     break;
                 case "ArrowRight":
                     // Right Arrow: Seek forward 5 seconds or single frame (if Ctrl)
-                    // Only enabled if fastseek is true
+                    // Only enabled if fastseek is true. In linear mode the seek clamps to
+                    // the buffered RAM window.
                     if (!this._fastSeek)
                         break;
                     e.preventDefault();
@@ -2986,6 +3073,15 @@ export class MoviElement extends HTMLElement {
                 e.stopPropagation();
                 return false;
             }
+            // No `controls` attribute → the player exposes no UI, so the custom
+            // context menu (Play/Pause/Speed/…) shouldn't appear either. Suppress the
+            // event (the browser default is already blocked by the canvas/video
+            // oncontextmenu handlers) so right-click is a clean no-op.
+            if (!this._controls) {
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
+            }
             Logger.debug(TAG, "[ContextMenu] preventDefaultContextMenu called", {
                 type: e.type,
                 target: e.target,
@@ -4074,7 +4170,7 @@ export class MoviElement extends HTMLElement {
                     return;
                 const rect = progressBar.getBoundingClientRect();
                 const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-                this.currentTime = pct * this.duration;
+                this.currentTime = this.barFractionToTime(pct);
             });
             // Update progress + time on interval
             const pipUpdateInterval = setInterval(() => {
@@ -4367,17 +4463,18 @@ export class MoviElement extends HTMLElement {
         const qualityContainer = this.shadowRoot?.querySelector(".movi-quality-container");
         if (!qualityList || !qualityBtn || !qualityContainer)
             return;
-        // Only show quality menu for HLS streams (URLs ending in .m3u8)
-        // Local files or single-file URLs should not show quality selection
-        const isHLS = typeof this._src === "string" &&
-            (this._src.includes(".m3u8") || this._src.toLowerCase().endsWith("m3u8"));
+        // Only show the quality menu for adaptive streams (HLS .m3u8 / DASH .mpd).
+        // Local files or single-file URLs should not show quality selection.
+        const isAdaptive = typeof this._src === "string" &&
+            (this._src.toLowerCase().includes(".m3u8") ||
+                this._src.toLowerCase().includes(".mpd"));
         // Pre-muxed multi-quality path: build a virtual track list from the
-        // declarative <source> tags so the picker works without HLS.
-        if (!isHLS && this._videoQualities.length > 1) {
+        // declarative <source> tags so the picker works without an adaptive stream.
+        if (!isAdaptive && this._videoQualities.length > 1) {
             this.renderPremuxedQualityMenu(qualityList, qualityContainer);
             return;
         }
-        if (!isHLS) {
+        if (!isAdaptive) {
             qualityContainer.style.display = "none";
             return;
         }
@@ -4437,18 +4534,16 @@ export class MoviElement extends HTMLElement {
         }
         qualityContainer.style.display = "flex";
         const activeTrack = this.player.trackManager?.getActiveVideoTrack();
-        // For HLS Auto mode, the active track id is -1 with height 0; surface the
-        // currently-playing level's badge instead so the gear stays informative.
-        // MoviPlayer exposes the wrapper as `hlsWrapper`; the previous `.hls`
-        // path silently resolved to undefined, leaving the badge blank in Auto.
+        // In Auto/ABR mode the active track id is -1 with height 0; surface the
+        // currently-playing rendition's dimensions instead so the gear badge stays
+        // informative. Shaka backs both HLS and DASH via the unified streamWrapper.
         let activeHeight = activeTrack?.height || 0;
         let activeWidth = activeTrack?.width || 0;
         if (!activeHeight && activeTrack?.id === -1) {
             try {
-                const hls = this.player.hlsWrapper?.hls;
-                const hlsLevel = hls?.levels?.[hls?.currentLevel];
-                activeHeight = hlsLevel?.height || 0;
-                activeWidth = hlsLevel?.width || 0;
+                const res = this.player.streamWrapper?.getActiveResolution?.();
+                activeHeight = res?.height || 0;
+                activeWidth = res?.width || 0;
             }
             catch { }
         }
@@ -4456,7 +4551,12 @@ export class MoviElement extends HTMLElement {
         qualityList.innerHTML = uniqueTracks
             .map((track) => {
             const isActive = activeTrack?.id === track.id;
-            const label = track.label || (track.height ? `${track.height}p` : "Auto");
+            let label = track.label || (track.height ? `${track.height}p` : "Auto");
+            // In Auto mode, show the currently-playing rendition in brackets —
+            // e.g. "Auto (720p)" — so the user sees what ABR is actually serving.
+            if (track.id === -1 && activeTrack?.id === -1 && activeHeight > 0) {
+                label = `Auto (${activeHeight}p)`;
+            }
             const h = track.height || 0;
             const w = track.width || 0;
             const eff = w > 0 ? Math.max(h, Math.round(w * 9 / 16)) : h;
@@ -5818,6 +5918,69 @@ export class MoviElement extends HTMLElement {
             });
         });
     }
+    /**
+     * True when an actual media source is loaded (plain src, a caller-supplied
+     * SourceAdapter, or the encrypted video URL). Used to gate the controls
+     * auto-hide — in the empty "No Video" state we keep the bar pinned.
+     */
+    hasMediaSource() {
+        return (!!this._src ||
+            !!this._sourceAdapter ||
+            (this._encrypted && !!this._videoUrl));
+    }
+    /**
+     * Switch the UI into linear (forward-only) playback: the source has no Range
+     * support and is too big to cache, so seeking is impossible. Hide the
+     * timeline and disable seek + thumbnail previews via the `movi-linear` host
+     * class. Idempotent — safe to call from both the event and the loadEnd
+     * backstop.
+     */
+    /**
+     * In linear (non-seekable-source) playback only the bytes currently in the
+     * RAM window are reachable, so clamp any seek target to the buffered time
+     * range [bufferStart, bufferEnd]. A small margin keeps the (approximate,
+     * linear byte→time) clamp safely inside the window so the keyframe for the
+     * target is actually present. Returns the time unchanged when not linear.
+     */
+    clampToBufferedWindow(time) {
+        if (!this._linearMode || !this.player)
+            return time;
+        // Backward edge: getSeekableStartTime already bakes in a byte safety margin
+        // so the seek's keyframe lands inside the window (the linear time→byte
+        // estimate alone is too optimistic — GOP + VBR push the keyframe lower).
+        const lo = this.player.getSeekableStartTime?.()
+            ?? (this.player.getBufferStartTime?.() ?? 0);
+        const end = this.player.getBufferEndTime?.() ?? this.duration;
+        if (!(end > lo))
+            return time;
+        const hi = Math.max(lo, end - Math.max(1, (end - lo) * 0.02));
+        return Math.min(hi, Math.max(lo, time));
+    }
+    enterLinearMode() {
+        if (this._linearMode)
+            return;
+        this._linearMode = true;
+        this.classList.add("movi-linear");
+        // If the seek-dependent timeline strip happens to be open, close it — it
+        // can't generate frames without random access.
+        const panel = this.shadowRoot?.querySelector(".movi-timeline-panel");
+        if (panel && panel.style.display !== "none")
+            panel.style.display = "none";
+    }
+    /**
+     * Mirror "is the controls bar currently taking up bottom space?" onto a
+     * plain host class so the empty-state placeholder can re-center reliably.
+     * The old approach keyed off `:host:has(.movi-controls-hidden)` /
+     * `:host(:not([controls]))`, but `:has()` is flaky in Safari/Firefox (and
+     * an unsupported selector in a comma list drops the WHOLE rule), which left
+     * the "No Video" text stuck off-center there. `:host(.movi-bar-collapsed)`
+     * is universally supported, so the centering works in every browser.
+     */
+    syncBarCollapsedClass() {
+        const collapsed = !this._controls ||
+            !!this.controlsContainer?.classList.contains("movi-controls-hidden");
+        this.classList.toggle("movi-bar-collapsed", collapsed);
+    }
     showControls() {
         if (!this._controls)
             return;
@@ -5871,6 +6034,7 @@ export class MoviElement extends HTMLElement {
         if (container) {
             container.classList.add("movi-controls-visible");
             container.classList.remove("movi-controls-hidden");
+            this.syncBarCollapsedClass();
             // Restore cursor — clear the inline `none` on the host so the
             // CSS-driven cursor (default on the visible-controls path)
             // takes back over. Mirrors what hideControls does in reverse.
@@ -5910,6 +6074,16 @@ export class MoviElement extends HTMLElement {
                 centerPlayPause.classList.add("movi-center-visible");
             }
         }
+        // Bar visible → lift the centre button + loading spinner slightly to
+        // balance against it (host class the CSS keys off; see hideControls).
+        // But only once playback has started — on the initial load / autoplay-off
+        // screen the big play button and the spinner belong at the true centre.
+        if (this._hasEverPlayed) {
+            this.classList.add("movi-bar-visible");
+        }
+        else {
+            this.classList.remove("movi-bar-visible");
+        }
         // Shift timeline panel up above controls
         const bar = this.shadowRoot?.querySelector(".movi-controls-bar");
         const barHeight = bar?.offsetHeight ?? 80;
@@ -5941,16 +6115,22 @@ export class MoviElement extends HTMLElement {
             this.controlsTimeout = null;
         }
         // Auto-hide whenever the player isn't "actively held open":
-        // 1. Not dragging the scrubber
-        // 2. Mouse is NOT over the controls bar
-        // 3. No menu (speed / audio / subtitle / quality) is open
+        // 1. There IS a media source loaded
+        // 2. Not dragging the scrubber
+        // 3. Mouse is NOT over the controls bar
+        // 4. No menu (speed / audio / subtitle / quality) is open
         //
         // Previously this only fired during `playing`, which left the
         // bar stuck on screen indefinitely after a pause + cursor-away.
         // YouTube hides the bar on pause too once you stop interacting,
         // so we match that — the player will only stay open while the
         // user is actually hovering / scrubbing / has a menu out.
-        if (!this.isOverControls &&
+        //
+        // The source gate keeps the bar pinned in the empty "No Video"
+        // state — with nothing loaded there's nothing to interact with,
+        // so hiding the controls would just look broken.
+        if (this.hasMediaSource() &&
+            !this.isOverControls &&
             !this.isDragging &&
             !this.isTouchDragging &&
             !this.isAnyMenuOpen()) {
@@ -6150,6 +6330,8 @@ export class MoviElement extends HTMLElement {
      * tracks where the playhead is *headed* even mid-seek.
      */
     performRelativeSeek(direction, step = 10) {
+        // In linear mode the currentTime setter clamps the target to the buffered
+        // RAM window, so skipping stays within what's seekable.
         const now = Date.now();
         const continuing = this.lastSeekSide === direction &&
             now - this.lastSeekTime < 1000;
@@ -6219,6 +6401,11 @@ export class MoviElement extends HTMLElement {
         if (container) {
             container.classList.remove("movi-controls-visible");
             container.classList.add("movi-controls-hidden");
+            this.syncBarCollapsedClass();
+            // Collapse the touch-expanded volume slider along with the bar — leaving
+            // it open over a hidden bar looks orphaned.
+            const volumeContainer = this.shadowRoot?.querySelector(".movi-volume-container");
+            volumeContainer?.classList.remove("active");
             // Hide cursor. Setting the host element's inline cursor is the
             // single most reliable signal — the :has-based CSS rule below
             // does the right thing in spec terms, but Safari (and Chrome
@@ -6254,6 +6441,11 @@ export class MoviElement extends HTMLElement {
         if (centerPlayPause && state === "playing") {
             centerPlayPause.classList.remove("movi-center-visible");
         }
+        // Bar hidden → centre button + loading spinner sit at the true centre.
+        // (The :host:has(.movi-controls-hidden) CSS rule meant to do this doesn't
+        // apply against the shadow tree in some engines, e.g. Electron's Chromium,
+        // so the CSS keys off this host class we toggle instead.)
+        this.classList.remove("movi-bar-visible");
         // Shift timeline panel down when controls hide
         const timelinePanel = this.shadowRoot?.querySelector(".movi-timeline-panel");
         if (timelinePanel) {
@@ -6300,6 +6492,7 @@ export class MoviElement extends HTMLElement {
             if (centerPlayPause)
                 centerPlayPause.classList.remove("movi-center-visible");
         }
+        this.syncBarCollapsedClass();
     }
     startUIUpdates() {
         this.updateAspectRatioIcon();
@@ -6495,6 +6688,14 @@ export class MoviElement extends HTMLElement {
         -moz-osx-font-smoothing: grayscale;
       }
 
+      /* The :host{display:block} above is an author rule, so it beats the
+         UA stylesheet's [hidden]{display:none}. Without this, the standard
+         hidden attribute does nothing and the player stays visible. Honour
+         it explicitly. !important so source-order/specificity can't regress it. */
+      :host([hidden]) {
+        display: none !important;
+      }
+
       /* Light Theme Override */
       :host([theme="light"]) {
         --movi-primary: #7c3aed; /* Vibrancy boost for light theme */
@@ -7050,6 +7251,56 @@ export class MoviElement extends HTMLElement {
         font-weight: 400;
       }
 
+      /* LIVE indicator — shown only for live (dynamic) streams. Clicking jumps
+         to the live edge. Bright red + pulsing at the edge; dimmed grey when
+         the viewer has scrubbed back into the DVR window. */
+      /* Badge follows the player theme colour (themecolor / --movi-primary),
+         falling back to a live-red. The dot inherits it via currentColor so the
+         glow ring matches. When scrubbed back ("behind") it dims to grey. */
+      .movi-live-badge {
+        display: none;
+        align-items: center;
+        gap: 5px;
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 2px 6px;
+        border-radius: 4px;
+        font: inherit;
+        font-weight: 700;
+        letter-spacing: 0.06em;
+        color: var(--movi-primary, #ff4d4f);
+        line-height: 1;
+      }
+      .movi-live-badge:hover { background: rgba(255, 255, 255, 0.12); }
+      .movi-live-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: currentColor;
+        /* Blink while at the live edge. */
+        animation: movi-live-blink 1.2s ease-in-out infinite;
+      }
+      .movi-live-badge.behind { color: var(--movi-text-tertiary); }
+      .movi-live-badge.behind .movi-live-dot {
+        /* Scrubbed back into the DVR window → steady grey dot, no blink. */
+        animation: none;
+        opacity: 1;
+      }
+      @keyframes movi-live-blink {
+        0%, 100% { opacity: 1; }
+        50%      { opacity: 0.15; }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .movi-live-dot { animation: none; }
+      }
+      /* Live mode: wall-clock duration is meaningless (Infinity) — show only
+         the LIVE badge, hide the running time / separator / duration. */
+      :host(.movi-live) .movi-current-time,
+      :host(.movi-live) .movi-time-separator,
+      :host(.movi-live) .movi-duration { display: none; }
+      :host(.movi-live) .movi-live-badge { display: inline-flex; }
+
       .movi-progress-container {
         width: 100%;
         padding: 10px 0 15px;
@@ -9033,12 +9284,13 @@ export class MoviElement extends HTMLElement {
           height: 64px !important;
         }
 
-        /* Disable animations on mobile */
+        /* Keyframe animations off on small/compact layouts for perf, but keep
+           CSS transitions so the controls + centre button still move smoothly
+           here too (the PiP / mini player is a small container). */
         .movi-controls-overlay,
         .movi-center-play-pause,
         .movi-btn,
         .movi-progress-handle {
-          transition: none !important;
           animation: none !important;
           transform: none !important;
         }
@@ -9530,7 +9782,7 @@ export class MoviElement extends HTMLElement {
          button's bar-hidden and both-bars-visible rules exactly. */
       .movi-loading-indicator {
         position: absolute;
-        top: calc(50% - var(--movi-controls-height) / 2);
+        top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         display: flex;
@@ -9539,15 +9791,7 @@ export class MoviElement extends HTMLElement {
         z-index: 1000;
         pointer-events: none;
         background: transparent;
-      }
-
-      :host:has(.movi-controls-container.movi-controls-hidden) .movi-loading-indicator,
-      :host(:not([controls])) .movi-loading-indicator {
-        top: 50%;
-      }
-
-      :host:has(.movi-controls-container.movi-controls-visible):has(.movi-title-bar.movi-title-visible) .movi-loading-indicator {
-        top: calc(50% - (var(--movi-controls-height) - 52px) / 2);
+        transition: top var(--movi-transition-normal);
       }
 
       .movi-loader-container {
@@ -9589,7 +9833,7 @@ export class MoviElement extends HTMLElement {
          down adjust this for the other two layout states. */
       .movi-center-play-pause {
         position: absolute;
-        top: calc(50% - var(--movi-controls-height) / 2);
+        top: 50%;
         left: 50%;
         transform: translate(-50%, -50%) scale(0.8);
         z-index: 5;
@@ -9618,23 +9862,15 @@ export class MoviElement extends HTMLElement {
         transition-delay: 0s;
       }
 
-      /* Bar hidden or no controls attribute → no chrome to balance
-         against, sit at true geometric centre. */
-      :host:has(.movi-controls-container.movi-controls-hidden) .movi-center-play-pause,
-      :host(:not([controls])) .movi-center-play-pause {
-        top: 50%;
-      }
-
-      /* Bar visible AND title bar visible → centre the icon inside
-         the visible video band (between title bottom and controls
-         top), not the full player. The 44% default biases too far up
-         when there's also a title bar to balance the controls; here
-         the offset is just half the *difference* between the two
-         chrome heights (title ≈ 52px, controls 72px → ~10px above
-         centre on desktop). calc() keeps it right on mobile where
-         --movi-controls-height drops to 64px too. */
-      :host:has(.movi-controls-container.movi-controls-visible):has(.movi-title-bar.movi-title-visible) .movi-center-play-pause {
-        top: calc(50% - (var(--movi-controls-height) - 52px) / 2);
+      /* Default (the base rule) is the true geometric centre. When the controls
+         bar is visible, lift the centre button AND the loading spinner a little
+         so they read as centred in the band above the bar. Keyed off a host
+         class toggled in show/hideControls, because :host:has() checks against
+         the shadow tree don't apply in every engine (notably Electron). The
+         transition on top (in each base rule) animates the move. */
+      :host(.movi-bar-visible) .movi-center-play-pause,
+      :host(.movi-bar-visible) .movi-loading-indicator {
+        top: calc(50% - var(--movi-controls-height) / 4);
       }
 
       .movi-center-play-pause:hover {
@@ -10469,6 +10705,17 @@ export class MoviElement extends HTMLElement {
         box-sizing: border-box;
         opacity: 0;
         animation: movi-fade-in 0.4s ease forwards;
+        /* Animate the re-centering when the controls bar shows/hides, so the
+           placeholder glides up/down in sync with the bar instead of jumping. */
+        transition: padding-bottom var(--movi-transition-normal);
+      }
+
+      /* No controls bar at the bottom (controls disabled, or auto-hidden) —
+         drop the reserved bottom space so the placeholder centers truly.
+         Driven by the JS-toggled .movi-bar-collapsed host class rather than
+         :has()/:host(:not(...)), which are flaky in Safari/Firefox. */
+      :host(.movi-bar-collapsed) .movi-empty-state {
+        padding-bottom: 40px;
       }
 
       /* Short / narrow players: shrink the placeholder so it fits above
@@ -10477,6 +10724,9 @@ export class MoviElement extends HTMLElement {
         .movi-empty-state {
           padding: 16px 16px calc(var(--movi-controls-height) + 12px);
         }
+        :host(.movi-bar-collapsed) .movi-empty-state {
+          padding-bottom: 16px;
+        }
         .movi-empty-container {
           gap: 8px !important;
         }
@@ -10895,6 +11145,13 @@ export class MoviElement extends HTMLElement {
         order: 2 !important;
         flex: 0 0 auto !important;
       }
+      /* Linear playback (no Range support, over-cap file): the scrubber and
+         skip buttons stay — seeking is allowed but clamped in JS to the
+         buffered RAM window. Only the timeline *strip* (thumbnail grid across
+         the whole file) is dropped, since it needs full random access. */
+      :host(.movi-linear) .movi-context-menu-item[data-action="timeline"] {
+        display: none !important;
+      }
       /* Keep the right-side cluster visible but trim it to controls that
          actually apply to audio playback. Subtitles, HDR, quality, PiP,
          fullscreen, and rotation are video-only — hiding the buttons
@@ -10957,6 +11214,27 @@ export class MoviElement extends HTMLElement {
       :host(.movi-audio-mode) .movi-fullscreen-btn {
         display: none !important;
       }
+      /* In audio mode the album art is painted by the cover-art canvas (which
+         persists through playback, unlike the pre-play poster overlay) — hide
+         the raw poster <img> so it doesn't double up over the canvas. The
+         poster URL still feeds the canvas via ensurePosterCoverArt(). */
+      :host(.movi-audio-mode) .movi-poster-overlay {
+        display: none !important;
+      }
+      /* Cover-art blurred backdrop. CSS filter:blur() is a real Gaussian in
+         every browser (Chrome/Firefox/Safari, including old Safari) — unlike
+         canvas ctx.filter, which Safari < 17 ignores. Oversized + scaled so the
+         blur's soft edges stay outside the (overflow:hidden) overlay. */
+      .movi-cover-art-bg {
+        position: absolute;
+        inset: -12%;
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        filter: blur(40px) brightness(0.5);
+        transform: scale(1.18);
+        will-change: filter;
+      }
       /* Strip-mode keyboard-shortcuts panel: the base CSS centres it
          inside the host via position:absolute + top:50%/left:50%, but
          the host is only 56px tall in strip mode so the panel lands
@@ -11233,6 +11511,11 @@ export class MoviElement extends HTMLElement {
         });
     };
     connectedCallback() {
+        // Enable keyboard focus. Set here (not in the constructor) because
+        // assigning tabIndex reflects to a `tabindex` attribute, which a custom
+        // element constructor is not allowed to do. (issue #9)
+        if (!this.hasAttribute("tabindex"))
+            this.tabIndex = 0;
         // Read initial attributes
         const srcAttr = this.getAttribute("src");
         this._src = srcAttr || null;
@@ -11373,6 +11656,7 @@ export class MoviElement extends HTMLElement {
         this._videoId = this.getAttribute("videoid") || "";
         this._resume = this.hasAttribute("resume");
         this._stableVolume = this.hasAttribute("stablevolume");
+        this._audioOnly = this.hasAttribute("audioonly");
         // If no src attribute, check for <source> child elements (Video.js-style)
         if (!this._src && !this._encrypted) {
             const sourceEls = this.querySelectorAll("source");
@@ -11695,7 +11979,7 @@ export class MoviElement extends HTMLElement {
                         this._hasEverPlayed = false;
                     // Show/hide empty state indicator based on src
                     if (this.emptyStateIndicator) {
-                        if (!this._src && !this.player) {
+                        if (!this._src && !this.player && !this._isUnsupported) {
                             this.emptyStateIndicator.style.display = "flex";
                         }
                         else {
@@ -11712,6 +11996,41 @@ export class MoviElement extends HTMLElement {
                 }
                 break;
             }
+            case "headers": {
+                // Declarative form of the `headers` property — a JSON object string,
+                // e.g. headers='{"Authorization":"Bearer <token>"}'. Applied to all
+                // media network requests (manifest + segments + progressive). The
+                // property setter (object form) is preferred for non-trivial maps.
+                if (!newValue) {
+                    this._headers = null;
+                }
+                else {
+                    try {
+                        const parsed = JSON.parse(newValue);
+                        this._headers =
+                            parsed && typeof parsed === "object" ? parsed : null;
+                    }
+                    catch {
+                        Logger.warn(TAG, "Invalid headers JSON attribute; ignoring");
+                        this._headers = null;
+                    }
+                }
+                if (this.isConnected && (this._src || this._sourceAdapter)) {
+                    this.load();
+                }
+                break;
+            }
+            case "audioonly": {
+                // Data-saver toggle: skip video decode (CPU) and, for adaptive streams,
+                // fetch only audio (bandwidth). Demuxer flips live; streams reload.
+                const enabled = newValue !== null;
+                if (enabled === this._audioOnly)
+                    break;
+                this._audioOnly = enabled;
+                if (this.isConnected)
+                    this.applyAudioOnly();
+                break;
+            }
             case "autoplay":
                 this._autoplay = newValue !== null;
                 this.updateUnmuteOverlay();
@@ -11932,6 +12251,27 @@ export class MoviElement extends HTMLElement {
             this.updateCoverArtOverlay();
         }
     }
+    /**
+     * Toggle the LIVE indicator for live (dynamic) adaptive streams. Adds the
+     * `.movi-live` host class (CSS shows the badge + hides the meaningless
+     * wall-clock duration), and marks the badge `.behind` when the viewer has
+     * scrubbed back into the DVR window so it reads grey instead of pulsing red.
+     * Cheap + idempotent — safe to call on every timeupdate.
+     */
+    updateLiveState() {
+        const isLive = !!this.player?.isLiveStream?.();
+        this.classList.toggle("movi-live", isLive);
+        if (!isLive)
+            return;
+        const badge = this.shadowRoot?.querySelector(".movi-live-badge");
+        if (!badge)
+            return;
+        const edge = this.player?.getLiveEdge?.() ?? 0;
+        const cur = this.player?.getCurrentTime?.() ?? 0;
+        // >12s behind the edge → "behind" (not live). Matches YouTube's threshold.
+        const behind = isFinite(edge) && edge - cur > 12;
+        badge.classList.toggle("behind", behind);
+    }
     /**
      * Paint embedded cover art (audio-only sources). Shows when:
      *   - the player has emitted a coverart bitmap, AND
@@ -11943,12 +12283,82 @@ export class MoviElement extends HTMLElement {
      * with the sharp artwork centred and sized to ~60% of the smaller host
      * dimension. Matches the YouTube Music / Apple Music aesthetic.
      */
+    /**
+     * For an audio-only source with a `poster` URL and no embedded album art,
+     * lazily load the poster into an ImageBitmap so updateCoverArtOverlay can
+     * paint it as album art (via the same blurred-backdrop cover-art canvas).
+     * Idempotent: loads once per URL, clears when no longer applicable (source
+     * became video, poster cleared, or embedded art arrived). Re-runs
+     * updateCoverArtOverlay once the bitmap is ready.
+     */
+    ensurePosterCoverArt(audioMode) {
+        const url = audioMode && !this.coverArtBitmap
+            ? this._poster || this._generatedPosterUrl || ""
+            : "";
+        if (!url) {
+            // No longer applicable — drop any loaded poster-cover bitmap.
+            if (this._posterCoverBitmap) {
+                try {
+                    this._posterCoverBitmap.close();
+                }
+                catch { }
+                this._posterCoverBitmap = null;
+            }
+            this._posterCoverUrl = "";
+            this._posterCoverLoading = false;
+            return;
+        }
+        // Already have it (or already loading it) for this exact URL — no-op.
+        if (this._posterCoverUrl === url)
+            return;
+        this._posterCoverUrl = url;
+        this._posterCoverLoading = true;
+        const img = new Image();
+        img.crossOrigin = "anonymous"; // album art must be CORS-clean to bitmap
+        img.referrerPolicy = "no-referrer";
+        img.decoding = "async";
+        img.onload = () => {
+            if (this._posterCoverUrl !== url)
+                return; // superseded mid-load
+            createImageBitmap(img)
+                .then((bmp) => {
+                if (this._posterCoverUrl !== url) {
+                    try {
+                        bmp.close();
+                    }
+                    catch { }
+                    ;
+                    return;
+                }
+                if (this._posterCoverBitmap) {
+                    try {
+                        this._posterCoverBitmap.close();
+                    }
+                    catch { }
+                }
+                this._posterCoverBitmap = bmp;
+                this._posterCoverLoading = false;
+                this.updateCoverArtOverlay();
+            })
+                .catch(() => {
+                this._posterCoverLoading = false;
+                this.updateCoverArtOverlay(); // fall back to the strip
+            });
+        };
+        img.onerror = () => {
+            if (this._posterCoverUrl !== url)
+                return;
+            this._posterCoverLoading = false;
+            this._posterCoverUrl = ""; // allow a retry if the URL is set again
+            this.updateCoverArtOverlay();
+        };
+        img.src = url;
+    }
     updateCoverArtOverlay() {
         const overlay = this.coverArtOverlay;
         const canvas = this.coverArtCanvas;
         if (!overlay || !canvas)
             return;
-        const bitmap = this.coverArtBitmap;
         const hasVideoTrack = !!this.player?.trackManager?.getActiveVideoTrack?.();
         const hasAudio = !!this.player?.hasAudibleSource?.();
         // Two related-but-distinct host states for an audio source (audio
@@ -11962,7 +12372,33 @@ export class MoviElement extends HTMLElement {
         //     player to a native-<audio>-style 56px control strip. Cover art
         //     needs the full surface to paint, so strip layout is suppressed
         //     when a bitmap is present (audio-mode still hides the controls).
-        const audioMode = !hasVideoTrack && hasAudio;
+        // A failed load has NO tracks, so hasVideoTrack is always false and the
+        // audio renderer (built at construction) makes hasAudibleSource() read true
+        // — which wrongly flags a failed VIDEO/manifest as audio and, on the next
+        // resize, collapses it to the 56px strip. In the error state there are no
+        // tracks to trust, so decide from the src's own media type instead: a real
+        // audio file stays a strip, a failed video/manifest shows full-size.
+        // The SAME trap exists DURING load (idle/loading): tracks aren't resolved
+        // yet, hasVideoTrack is still false, yet hasAudibleSource() already reads
+        // true — so a resize mid-load (e.g. responsive layout settling, sidebar
+        // toggling) collapses a still-loading VIDEO into the strip. Treat that
+        // window like the error state and decide from the src's media type until
+        // the real tracks arrive.
+        const state = this.player?.getState?.();
+        const errored = state === "error" || this._isUnsupported;
+        const tracksUnresolved = !hasVideoTrack && (errored || state === "idle" || state === "loading");
+        const srcIsAudio = typeof this._src === "string" &&
+            this.guessMediaType(this._src).startsWith("audio/");
+        // Audio-only (data-saver) forces the audio surface even on a video source —
+        // we're deliberately not decoding the video, so show album art / strip.
+        const audioMode = this._audioOnly ||
+            (tracksUnresolved ? srcIsAudio : !hasVideoTrack && hasAudio);
+        // Audio-only with a `poster` URL but no embedded album art: load the poster
+        // into a bitmap and paint it through the cover-art canvas so it reads as
+        // album art. Embedded art always wins. The effective bitmap below feeds the
+        // strip decision + rendering just like real cover art.
+        this.ensurePosterCoverArt(audioMode);
+        const bitmap = this.coverArtBitmap ?? this._posterCoverBitmap;
         // VLC-like: if the source HAS an attached-picture track and previews are
         // on, cover art is on its way — hold the strip layout off until extraction
         // settles (_coverArtResolved) so we don't flash the 56px strip and then
@@ -11970,7 +12406,10 @@ export class MoviElement extends HTMLElement {
         // "coverart" event flips _coverArtResolved and we fall back to the strip.
         const hasArtTrack = (this.player?.trackManager?.getAttachedPicTracks?.()?.length ?? 0) > 0;
         const coverArtPending = audioMode && !bitmap && this._thumb && hasArtTrack && !this._coverArtResolved;
-        const stripMode = audioMode && !bitmap && !coverArtPending;
+        // Same idea for a poster acting as album art: while its bitmap is still
+        // loading, hold the strip off so we don't flash strip → album-art.
+        const posterCoverPending = audioMode && !bitmap && this._posterCoverLoading;
+        const stripMode = audioMode && !bitmap && !coverArtPending && !posterCoverPending;
         this.classList.toggle("movi-audio-mode", audioMode);
         const wasStrip = this.classList.contains("movi-audio-strip");
         this.classList.toggle("movi-audio-strip", stripMode);
@@ -12003,8 +12442,14 @@ export class MoviElement extends HTMLElement {
                 expandable.appendChild(loopBtn);
             }
         }
-        if (!bitmap || hasVideoTrack) {
+        // Show the album-art overlay only when there's art AND we're in audio mode.
+        // Keying off !audioMode (not hasVideoTrack) is what makes audio-only work on
+        // a VIDEO source: the video track still exists (we just don't decode it), so
+        // the old hasVideoTrack guard hid the art and left a black screen.
+        if (!bitmap || !audioMode) {
             overlay.style.display = "none";
+            if (this._coverArtBgEl)
+                this._coverArtBgEl.style.backgroundImage = "none";
             return;
         }
         const rect = this.getBoundingClientRect();
@@ -12024,27 +12469,19 @@ export class MoviElement extends HTMLElement {
             return;
         ctx.save();
         ctx.scale(dpr, dpr);
-        // Blurred backdrop. drawImage with ctx.filter is the only way to get
-        // a real Gaussian on a canvas. Cover the full area like background-
-        // size: cover.
+        // Blurred backdrop is now a CSS-blurred DOM element BEHIND this canvas — a
+        // real Gaussian in every browser (canvas ctx.filter "blur()" is unsupported
+        // in Safari < 17 and looked bad faked). Point it at the poster URL; embedded
+        // art (an ImageBitmap, currently disabled) has no URL, so it falls back to
+        // the overlay's plain dark background. The canvas paints only the sharp art.
+        if (this._coverArtBgEl) {
+            const bgUrl = this.coverArtBitmap ? "" : this._posterCoverUrl;
+            this._coverArtBgEl.style.backgroundImage = bgUrl
+                ? `url("${bgUrl.replace(/"/g, '\\"')}")`
+                : "none";
+        }
+        ctx.clearRect(0, 0, cssW, cssH); // transparent — let the blurred bg show
         const bitmapAR = bitmap.width / bitmap.height;
-        const hostAR = cssW / cssH;
-        let bgW, bgH, bgX, bgY;
-        if (bitmapAR > hostAR) {
-            bgH = cssH;
-            bgW = cssH * bitmapAR;
-            bgX = (cssW - bgW) / 2;
-            bgY = 0;
-        }
-        else {
-            bgW = cssW;
-            bgH = cssW / bitmapAR;
-            bgX = 0;
-            bgY = (cssH - bgH) / 2;
-        }
-        ctx.filter = "blur(40px) brightness(0.5)";
-        ctx.drawImage(bitmap, bgX, bgY, bgW, bgH);
-        ctx.filter = "none";
         // Centred sharp artwork — square, 60% of the smaller dimension. The
         // bitmap itself is rarely a perfect square, so contain it inside the
         // square frame (no crop) and let the blur backdrop fill the surround.
@@ -12070,6 +12507,30 @@ export class MoviElement extends HTMLElement {
      * resume() kicked off inside play() is async, so we give it a couple of
      * animation frames to settle before reading the state.
      */
+    /**
+     * Kick off autoplay: suppress the centre play overlay through the startup
+     * window, call play(), and run the muted-autoplay fallback. Shared by the
+     * initial load and the deferred (tab-was-hidden) path in _onVisibilityChange.
+     */
+    async _startAutoplay() {
+        if (!this.player || !this._autoplay || this._isUnsupported)
+            return;
+        // Suppress the center play overlay through the startup window so the big
+        // play icon doesn't flash before playback begins on its own.
+        this._autoplayStarting = true;
+        this.updatePlayPauseIcon();
+        await this.player.play().catch(() => {
+            // Hard play() rejection (rare for canvas mode — video keeps going even
+            // when audio can't). Surface the overlay so there's something to click;
+            // the suspended-audio check below still runs.
+            this._autoplayStarting = false;
+            this.updatePlayPauseIcon();
+        });
+        // Browser autoplay policy blocks audio-with-sound silently: play() resolves
+        // and video rolls, but the AudioContext stays suspended. Poll the audio
+        // state and fall back to muted playback + a "Tap to unmute" pill.
+        this.maybeFallbackToMutedAutoplay();
+    }
     maybeFallbackToMutedAutoplay(attempt = 0) {
         if (!this.player || this._muted || this._userHasUnmuted)
             return;
@@ -12312,14 +12773,24 @@ export class MoviElement extends HTMLElement {
             else {
                 throw new Error("Invalid source type");
             }
+            // Custom media headers: ride along on the SourceConfig (demuxer/HttpSource
+            // path) AND as a top-level config field the stream wrappers read for
+            // adaptive manifest + segment requests. One object, both code paths.
+            if (this._headers && source && source.type === "url") {
+                source.headers = this._headers;
+            }
             // Create MoviPlayer instance
             // Configure MoviPlayer options
             const playerConfig = {
                 source,
                 decoder: this._sw,
                 cache: { type: "lru", maxSizeMB: 520 },
-                enablePreviews: this._thumb,
+                // Audio-only disables scrub-preview thumbnails too — they'd decode video
+                // frames and defeat the CPU saving.
+                enablePreviews: this._thumb && !this._audioOnly,
                 ...(this._fps > 0 && { frameRate: this._fps }),
+                ...(this._headers && { headers: this._headers }),
+                ...(this._audioOnly && { audioOnly: true }),
                 ...(this._sourceAdapter && { sourceAdapter: this._sourceAdapter }),
             };
             // Separate audio source — multi-language or single
@@ -12343,14 +12814,32 @@ export class MoviElement extends HTMLElement {
                     format: t.format,
                 }));
             }
-            // DRM mode: use native video element for HLS (EME requires <video>)
-            const isDrm = this.hasAttribute("drm");
-            const isHLS = typeof this._src === "string" &&
-                (this._src.includes(".m3u8") || this._src.toLowerCase().endsWith("m3u8"));
-            if (isDrm && isHLS) {
+            // DRM mode: use the native video element for adaptive streams (EME
+            // requires <video>; protected frames can't be copied to a canvas) —
+            // applies to HLS (.m3u8) and DASH (.mpd) alike. Providing a `licenseurl`
+            // is enough to enable it; the bare `drm` boolean attribute still works.
+            const licenseUrl = this.getAttribute("licenseurl") || "";
+            const isDrm = this.hasAttribute("drm") || licenseUrl.length > 0;
+            const isAdaptiveStream = typeof this._src === "string" &&
+                (this._src.toLowerCase().includes(".m3u8") ||
+                    this._src.toLowerCase().includes(".mpd") ||
+                    this._src.toLowerCase().includes(".ism"));
+            if (isDrm && isAdaptiveStream) {
                 playerConfig.renderer = "video";
                 playerConfig.drm = true;
-                playerConfig.licenseUrl = this.getAttribute("licenseurl") || "";
+                if (licenseUrl)
+                    playerConfig.licenseUrl = licenseUrl;
+                // Optional auth headers for the license request, as a JSON object,
+                // e.g. licenseheaders='{"Authorization":"Bearer <token>"}'.
+                const rawHeaders = this.getAttribute("licenseheaders");
+                if (rawHeaders) {
+                    try {
+                        playerConfig.licenseHeaders = JSON.parse(rawHeaders);
+                    }
+                    catch {
+                        Logger.warn(TAG, "Invalid licenseheaders JSON attribute; ignoring");
+                    }
+                }
                 this.canvas.style.display = "none";
                 this.video.style.display = "block";
             }
@@ -12360,6 +12849,15 @@ export class MoviElement extends HTMLElement {
                 this.canvas.style.display = "block";
                 this.video.style.display = "none";
             }
+            // MPEG-5 LCEVC (opt-in): Shaka composites the enhanced layer onto the
+            // canvas. Needs the external lcevc_dec.js library — point `lcevcurl` at
+            // it to lazy-load, or load it yourself (global LCEVCdec). Without DRM.
+            if (!playerConfig.drm && this.hasAttribute("lcevc")) {
+                playerConfig.lcevc = true;
+                const lcevcUrl = this.getAttribute("lcevcurl");
+                if (lcevcUrl)
+                    playerConfig.lcevcUrl = lcevcUrl;
+            }
             // Create Player instance
             const mode = playerConfig.drm ? "DRM/Native Video" : "Canvas Renderer";
             Logger.info(TAG, `Initializing MoviPlayer (${mode} Mode)`);
@@ -12374,18 +12872,19 @@ export class MoviElement extends HTMLElement {
                 catch { }
                 this._carryAudioEl = null;
             }
-            // In DRM mode, use HLS wrapper's video element directly
+            // In DRM mode, use the stream wrapper's native <video> element directly
+            // (Shaka manages EME on it; protected frames can't go through canvas).
             if (playerConfig.drm) {
-                const hlsVideo = this.player.getHLSVideoElement();
-                if (hlsVideo && this.video) {
-                    // Replace our video element with HLS's video element
-                    hlsVideo.style.width = "100%";
-                    hlsVideo.style.height = "100%";
-                    hlsVideo.style.display = "block";
-                    hlsVideo.style.objectFit = "contain";
-                    this.video.replaceWith(hlsVideo);
-                    this.video = hlsVideo;
-                    Logger.info(TAG, "DRM: Swapped in HLS native video element");
+                const streamVideo = this.player.getHLSVideoElement();
+                if (streamVideo && this.video) {
+                    // Replace our video element with the stream's native video element
+                    streamVideo.style.width = "100%";
+                    streamVideo.style.height = "100%";
+                    streamVideo.style.display = "block";
+                    streamVideo.style.objectFit = "contain";
+                    this.video.replaceWith(streamVideo);
+                    this.video = streamVideo;
+                    Logger.info(TAG, "DRM: Swapped in native stream video element");
                 }
             }
             // Reset unsupported state
@@ -12477,27 +12976,22 @@ export class MoviElement extends HTMLElement {
             if (this._resume) {
                 this.startResumeSaving();
             }
-            // Auto-play if requested
+            // Auto-play if requested — but never while the tab is hidden. A
+            // backgrounded autoplay kicks off a first-play seek the browser then
+            // throttles (rAF paused, WakeLock denied); it times out into a buffering
+            // state that doesn't cleanly resume on return (the user had to pause→play
+            // to unstick it). Defer to the first time the tab is visible — which is
+            // also how browsers gate background autoplay. _onVisibilityChange starts
+            // it via _startAutoplay() once shown. The center play button stays visible
+            // meanwhile (autoplayStarting unset), so a manual start works too.
             if (this._autoplay && this.player) {
-                // Suppress the center play overlay through the startup window so the
-                // big play icon doesn't flash before playback begins on its own.
-                this._autoplayStarting = true;
-                this.updatePlayPauseIcon();
-                await this.player.play().catch(() => {
-                    // Hard play() rejection (rare for canvas mode — video keeps going
-                    // even when audio can't). Surface the overlay so there's something
-                    // to click; the suspended-audio check below still runs.
-                    this._autoplayStarting = false;
-                    this.updatePlayPauseIcon();
-                });
-                // Browser autoplay policy blocks audio-with-sound silently: play()
-                // resolves and video rolls, but the AudioContext stays suspended
-                // (resume() neither throws nor wakes it without a user gesture). So
-                // we can't detect this from the promise — poll the audio state right
-                // after play() and fall back to muted playback + a "Tap to unmute"
-                // pill (YouTube/Twitter behaviour) so the user has a one-tap path to
-                // audio instead of silently-broken sound.
-                this.maybeFallbackToMutedAutoplay();
+                if (typeof document !== "undefined" && document.visibilityState !== "visible") {
+                    this._autoplayPendingVisible = true;
+                    Logger.info(TAG, "Autoplay deferred — tab hidden; will start when visible");
+                }
+                else {
+                    await this._startAutoplay();
+                }
             }
             else if (this._startAt === 0 && this.player && !this._poster) {
                 // Render the poster frame on canvas via a seek on the main decoder
@@ -12573,6 +13067,12 @@ export class MoviElement extends HTMLElement {
                 else if (message.includes("decode")) {
                     title = "Playback Error";
                 }
+                else if (/\(HTTP \d|was denied|could not be found|video server/i.test(message)) {
+                    // The stream wrapper already produced a precise HTTP reason (403/404/
+                    // 5xx/…); "Initialization Failed" reads like a player bug, so use a
+                    // neutral title and let the specific message carry the detail.
+                    title = "Can't Play Video";
+                }
             }
             this.handleUnsupportedVideo(title, message);
         }
@@ -12647,6 +13147,15 @@ export class MoviElement extends HTMLElement {
         // Forward player events to element
         const stateChangeHandler = (state) => {
             Logger.info(TAG, `stateChange: ${state}`);
+            // A seek requested before the player was ready was held — apply it now
+            // that we've reached a seekable state (fixes e.g. a PiP/handoff seek that
+            // arrives while the source is still loading).
+            if (this._pendingSeek !== null &&
+                (state === "ready" || state === "paused" || state === "playing")) {
+                const target = this._pendingSeek;
+                this._pendingSeek = null;
+                this.currentTime = target;
+            }
             // Hide poster on state change to playing
             if (state === "playing" && this.posterElement) {
                 // Drop the frozen-frame snapshot overlay used during quality switch
@@ -12663,6 +13172,17 @@ export class MoviElement extends HTMLElement {
             this.updateLoadingIndicator(state);
             this.updateControlsState();
             this.updatePlayPauseIcon();
+            // Autoplay suppression also ends when startup stops SHORT of playback —
+            // e.g. the browser blocked autoplay pending a user gesture (common with a
+            // separate native-audio track), leaving the player paused. play() doesn't
+            // reject in that case and no "playing" event fires, so without this the
+            // flag would stay set and keep the centre play button hidden. Clear it and
+            // repaint so the big play affordance surfaces for a manual start.
+            if (this._autoplayStarting &&
+                (state === "paused" || state === "ended" || state === "error")) {
+                this._autoplayStarting = false;
+                this.updatePlayPauseIcon();
+            }
             if (state === "playing") {
                 // Autoplay reached playback — startup window is over. Capture it
                 // first so we can skip the click-confirmation UI below.
@@ -12773,6 +13293,13 @@ export class MoviElement extends HTMLElement {
             // is async, so the strip may flip OFF later when the coverart
             // event lands — updateCoverArtOverlay handles both transitions.
             this.updateCoverArtOverlay();
+            // Live (dynamic) streams: show the LIVE indicator + hide the meaningless
+            // wall-clock duration.
+            this.updateLiveState();
+            // Backstop for the "linearmode" event in case it fired before this
+            // listener was wired (detection happens during the demux open).
+            if (this.player?.isLinearPlayback?.())
+                this.enterLinearMode();
             this.dispatchEvent(new Event("loadeddata"));
         };
         this.player.on("loadEnd", loadEndHandler);
@@ -12798,8 +13325,14 @@ export class MoviElement extends HTMLElement {
         };
         this.player.on("preloadcomplete", preloadCompleteHandler);
         this.eventHandlers.set("preloadcomplete", () => this.player?.off("preloadcomplete", preloadCompleteHandler));
+        // Source fell back to linear (non-seekable) playback — drop the timeline,
+        // seeking and thumbnails.
+        const linearModeHandler = () => this.enterLinearMode();
+        this.player.on("linearmode", linearModeHandler);
+        this.eventHandlers.set("linearmode", () => this.player?.off("linearmode", linearModeHandler));
         const timeUpdateHandler = (time) => {
             this.dispatchEvent(new CustomEvent("timeupdate", { detail: time }));
+            this.updateLiveState();
         };
         this.player.on("timeUpdate", timeUpdateHandler);
         this.eventHandlers.set("timeUpdate", () => this.player?.off("timeUpdate", timeUpdateHandler));
@@ -12904,6 +13437,16 @@ export class MoviElement extends HTMLElement {
         // overlay so the new load doesn't briefly show last track's art.
         this.coverArtBitmap = null;
         this._coverArtResolved = false;
+        // Drop the poster-as-album-art bitmap too — we own it, so close to free it.
+        if (this._posterCoverBitmap) {
+            try {
+                this._posterCoverBitmap.close();
+            }
+            catch { }
+        }
+        this._posterCoverBitmap = null;
+        this._posterCoverUrl = "";
+        this._posterCoverLoading = false;
         if (this.coverArtOverlay)
             this.coverArtOverlay.style.display = "none";
         // Also drop the audio-mode/strip layout — re-decided once the new
@@ -12924,8 +13467,14 @@ export class MoviElement extends HTMLElement {
         // Reset unsupported and loading state on source change so new source can load
         this._isUnsupported = false;
         this.isLoading = false;
+        // Drop any autoplay deferred for the previous source — initializePlayer
+        // re-arms it for the new one if still hidden.
+        this._autoplayPendingVisible = false;
         if (this.brokenIndicator)
             this.brokenIndicator.style.display = "none";
+        // A fresh source may well support Range — clear any linear-mode lock.
+        this._linearMode = false;
+        this.classList.remove("movi-linear");
         // Show empty state if no src after player cleanup
         if (!this._src && this.emptyStateIndicator) {
             this.emptyStateIndicator.style.display = "flex";
@@ -12983,6 +13532,7 @@ export class MoviElement extends HTMLElement {
         this._pendingPlay = false;
         this._preloadGateActive = false;
         this._resumeDialogPending = false;
+        this._autoplayPendingVisible = false;
         // Tear down internal player
         if (this.player) {
             try {
@@ -13030,6 +13580,15 @@ export class MoviElement extends HTMLElement {
         // audio-mode/strip layout leak into the next track. The classes are
         // re-decided once the new source's tracks land (updateCoverArtOverlay).
         this.coverArtBitmap = null;
+        if (this._posterCoverBitmap) {
+            try {
+                this._posterCoverBitmap.close();
+            }
+            catch { }
+        }
+        this._posterCoverBitmap = null;
+        this._posterCoverUrl = "";
+        this._posterCoverLoading = false;
         if (this.coverArtOverlay)
             this.coverArtOverlay.style.display = "none";
         this.classList.remove("movi-audio-strip", "movi-audio-mode");
@@ -13310,6 +13869,20 @@ export class MoviElement extends HTMLElement {
             container.appendChild(segment);
         }
     }
+    /**
+     * Convert a 0..1 seek-bar fraction to a media time. For live streams the bar
+     * spans the seekable DVR window [seekStart .. liveEdge], so the fraction maps
+     * into that window; for VOD it's the usual 0..duration.
+     */
+    barFractionToTime(fraction) {
+        const f = Math.max(0, Math.min(1, fraction));
+        if (this.player?.isLiveStream?.()) {
+            const start = this.player.getSeekRangeStart?.() ?? 0;
+            const end = this.player.getLiveEdge?.() ?? 0;
+            return start + f * Math.max(0, end - start);
+        }
+        return f * this.duration;
+    }
     updateProgressBar() {
         // Don't update visuals if user is scrubbing or seeking
         if (this.isDragging || this.isTouchDragging || this.isSeeking)
@@ -13317,6 +13890,30 @@ export class MoviElement extends HTMLElement {
         const progressFilled = this.shadowRoot?.querySelector(".movi-progress-filled");
         const progressHandle = this.shadowRoot?.querySelector(".movi-progress-handle");
         const progressBuffer = this.shadowRoot?.querySelector(".movi-progress-buffer");
+        // Live (dynamic) streams: duration is Infinity, so scale the bar against
+        // the seekable DVR window [seekStart .. liveEdge] instead — the playhead
+        // sits at the right edge when watching live and moves left as you scrub
+        // back into the window.
+        if (this.player?.isLiveStream?.()) {
+            const start = this.player.getSeekRangeStart?.() ?? 0;
+            const end = this.player.getLiveEdge?.() ?? 0;
+            const span = end - start;
+            const ct = this.player.getCurrentTime?.() ?? 0;
+            const pct = span > 0 ? Math.min(100, Math.max(0, ((ct - start) / span) * 100)) : 0;
+            if (progressFilled)
+                progressFilled.style.width = `${pct}%`;
+            if (progressHandle)
+                progressHandle.style.left = `${pct}%`;
+            if (progressBuffer) {
+                const bufEnd = this.player.getBufferEndTime?.() ?? 0;
+                const bufPct = span > 0
+                    ? Math.min(100, Math.max(0, ((bufEnd - start) / span) * 100))
+                    : 0;
+                progressBuffer.style.left = "0%";
+                progressBuffer.style.width = `${bufPct}%`;
+            }
+            return;
+        }
         if (this.duration > 0) {
             // Clamp to 0 during the postertime poster seek (clock transiently parked
             // at the poster timestamp) so the filled bar/handle don't flick to ~2s.
@@ -13342,9 +13939,18 @@ export class MoviElement extends HTMLElement {
                     ? 0
                     : this.player.getBufferEndTime();
                 if (bufferEnd > 0) {
+                    // In linear mode the RAM window has a moving start (older bytes are
+                    // dropped), so draw the buffer bar as [bufferStart, bufferEnd] — the
+                    // actual window of bytes held in memory. (Seeks clamp to a slightly
+                    // inset seekableStart, but showing the true window reads better — no
+                    // gap between the playhead and the buffered segment.) Otherwise from 0.
+                    const bufferStart = this._linearMode
+                        ? Math.max(0, this.player.getBufferStartTime?.() ?? 0)
+                        : 0;
+                    const startPercent = Math.min(100, (bufferStart / this.duration) * 100);
                     const endPercent = Math.min(100, (bufferEnd / this.duration) * 100);
-                    progressBuffer.style.left = "0%";
-                    progressBuffer.style.width = `${endPercent}%`;
+                    progressBuffer.style.left = `${startPercent}%`;
+                    progressBuffer.style.width = `${Math.max(0, endPercent - startPercent)}%`;
                 }
                 else {
                     progressBuffer.style.width = "0%";
@@ -13522,6 +14128,12 @@ export class MoviElement extends HTMLElement {
             // Show error message
             if (this.brokenIndicator) {
                 this.brokenIndicator.style.display = "flex";
+                // Hide the empty-state placeholder so it doesn't render behind the
+                // error overlay — both default to visible with no src, which stacks
+                // the "No Video" text under "Security Headers Missing".
+                if (this.emptyStateIndicator) {
+                    this.emptyStateIndicator.style.display = "none";
+                }
                 const titleEl = this.brokenIndicator.querySelector(".movi-broken-title");
                 if (titleEl)
                     titleEl.textContent = "Security Headers Missing";
@@ -13697,34 +14309,31 @@ export class MoviElement extends HTMLElement {
         }
     }
     startAmbientColorSampling() {
-        if (this._ambientRafId !== null)
-            return;
         // Bail when the player isn't built yet — connectedCallback runs
-        // updateAmbientMode() before initializePlayer() creates the
-        // player, and that pre-init call would otherwise set up an
-        // rAF loop that runs against a missing renderer (no mirror to
-        // enable, sampleCanvasColors returns early). Worse, the rAF
-        // handle would then block the *real* startAmbientColorSampling
-        // call later in initializePlayer — the `_ambientRafId !== null`
-        // guard above made the second call a no-op, so the renderer
-        // never had enableAmbientMirror() invoked on it. Net effect: a
-        // page that loads with `ambientmode` already on showed no
-        // ambient glow until the user toggled the feature off and on.
+        // updateAmbientMode() before initializePlayer() creates the player.
         if (!this.player)
             return;
-        // Reset adaptive interval — a previously-throttled session may have left
-        // it ratcheted up to 2s, which would make ambient appear "frozen" until
-        // the per-sample recovery slowly walked it back down.
-        this._ambientSampleInterval = 200;
-        // Ask the renderer to maintain a 16×16 mirror of each drawn frame.
-        // sampleCanvasColors() will read from that 256-pixel buffer instead of
-        // triggering a full canvas readback per sample — the old path caused
-        // visible frame slips on 8K HDR sources from GPU contention with
-        // presentation.
+        // Ask the CURRENT renderer to maintain a 16×16 mirror of each drawn frame.
+        // sampleCanvasColors() reads from that 256-pixel buffer instead of a full
+        // canvas readback per sample (which caused frame slips on 8K HDR sources).
+        //
+        // This MUST run before the rafId guard below: on a src change a fresh
+        // player/renderer replaces the old one while this rAF loop keeps running,
+        // so a guard-first version would skip enabling the mirror on the NEW
+        // renderer — leaving ambient "on" in the menu but never painting on the new
+        // video. Re-enabling here is idempotent and fixes that.
         const renderer = this.player?.videoRenderer;
         if (renderer && typeof renderer.enableAmbientMirror === "function") {
             renderer.enableAmbientMirror();
         }
+        // Loop already running (e.g. carried across a src change) — the mirror was
+        // just re-enabled above on the current renderer, so nothing more to start.
+        if (this._ambientRafId !== null)
+            return;
+        // Reset adaptive interval — a previously-throttled session may have left
+        // it ratcheted up to 2s, which would make ambient appear "frozen" until
+        // the per-sample recovery slowly walked it back down.
+        this._ambientSampleInterval = 200;
         const loop = (timestamp) => {
             // If software decoding is active, pause ambient sampling to save main thread cycles
             // This is crucial for CPU-heavy 4K software decoding
@@ -13978,7 +14587,7 @@ export class MoviElement extends HTMLElement {
                 this.removeAttribute("src");
                 this._src = null;
                 // Show empty state when src is cleared
-                if (this.emptyStateIndicator && !this.player) {
+                if (this.emptyStateIndicator && !this.player && !this._isUnsupported) {
                     this.emptyStateIndicator.style.display = "flex";
                 }
             }
@@ -14045,6 +14654,70 @@ export class MoviElement extends HTMLElement {
     setSourceAdapter(adapter) {
         this.sourceAdapter = adapter;
     }
+    /**
+     * Custom HTTP headers sent with every media network request — the adaptive
+     * manifest (.mpd/.m3u8) and all of its segments, plus progressive downloads.
+     * Use for auth tokens, signed headers, etc. The object form is the
+     * programmatic counterpart to the JSON `headers` attribute; objects can't go
+     * through attributes, so set non-trivial header maps via this property.
+     *
+     *   player.headers = { Authorization: "Bearer <token>" };
+     */
+    get headers() {
+        return this._headers;
+    }
+    set headers(value) {
+        this._headers = value && typeof value === "object" ? { ...value } : null;
+        // Headers are consumed when the player/stream-wrapper is constructed, so a
+        // live change only takes effect on the next load. Reload if a source is
+        // already active.
+        if (this.isConnected && (this._src || this._sourceAdapter)) {
+            this.load();
+        }
+    }
+    /**
+     * Audio-only (data-saver) mode. When true the player skips video decoding to
+     * save CPU and, for adaptive streams (HLS/DASH), fetches only audio
+     * renditions to save bandwidth; the UI shows the album-art / strip surface.
+     * Toggle via this property or the `audioonly` attribute.
+     *
+     *   player.audioOnly = true;  // data saver on
+     */
+    get audioOnly() {
+        return this._audioOnly;
+    }
+    set audioOnly(value) {
+        const enabled = !!value;
+        if (enabled === this._audioOnly)
+            return;
+        this._audioOnly = enabled;
+        // Reflect to the attribute (without re-triggering this setter — the
+        // attributeChangedCallback no-ops when the flag already matches).
+        if (enabled)
+            this.setAttribute("audioonly", "");
+        else
+            this.removeAttribute("audioonly");
+        if (this.isConnected)
+            this.applyAudioOnly();
+    }
+    /**
+     * Apply an audio-only toggle to the live player. Adaptive streams change what
+     * gets downloaded (Shaka ignores video at manifest-parse time), so they
+     * reload; the demuxer path flips video decode on/off in place.
+     */
+    applyAudioOnly() {
+        if (!this.player)
+            return;
+        // Always flip in place — NEVER reload. A reload destroys the player (and,
+        // for a stream, re-runs Shaka's manifest parse, which fails on HLS with
+        // disableVideo and drops the LIVE badge on the hls.js fallback). setAudioOnly
+        // handles every source live: streams pick an audio-only / smallest-video
+        // variant; split sources stop the demux loop; muxed skips the video decode.
+        this.player.setAudioOnly?.(this._audioOnly);
+        this.updateCoverArtOverlay();
+        this.updateControlsVisibility();
+        this.updateLiveState(); // keep the LIVE badge correct (stream stays loaded)
+    }
     /**
      * Video.js-style source API
      *
@@ -14212,17 +14885,23 @@ export class MoviElement extends HTMLElement {
             this.emptyStateIndicator.style.display = "none";
         }
         try {
-            // Create player with encrypted source (respecting element properties)
+            // Create player with encrypted source (respecting element properties).
+            // Custom media headers ride on the SourceConfig — createSource forwards
+            // them to EncryptedHttpSource, which spreads them onto both the stream
+            // GET and the token-refresh request (alongside the per-request signing
+            // headers).
             this.player = new MoviPlayer({
                 source: {
                     type: "encrypted",
                     encrypted: config,
+                    ...(this._headers && { headers: this._headers }),
                 },
                 renderer: "canvas",
                 decoder: this._sw,
                 canvas: this.canvas,
                 enablePreviews: this._thumb,
                 frameRate: this._fps || undefined,
+                ...(this._headers && { headers: this._headers }),
             });
             this.setupEventHandlers();
             await this.player.load();
@@ -14722,7 +15401,9 @@ export class MoviElement extends HTMLElement {
      * back and replay it after preload settles.
      */
     maybeShowResumeDialog() {
-        if (!this._resume || !this.player || this._contextLostTime !== 0)
+        // Resume means seeking to the saved position — impossible in linear
+        // (non-seekable) playback, so don't offer it.
+        if (!this._resume || !this.player || this._contextLostTime !== 0 || this._linearMode)
             return;
         const savedTime = this.getResumePosition();
         if (savedTime > 2 && savedTime < this.duration - 5) {
@@ -14733,6 +15414,9 @@ export class MoviElement extends HTMLElement {
      * Show resume dialog with saved position
      */
     showResumeDialog(savedTime) {
+        // Linear (non-seekable) playback can't jump to the saved position.
+        if (this._linearMode)
+            return;
         const shadowRoot = this.shadowRoot;
         if (!shadowRoot)
             return;
@@ -14867,6 +15551,10 @@ export class MoviElement extends HTMLElement {
      * Toggle timeline panel visibility
      */
     toggleTimeline() {
+        // Linear (non-seekable) playback — the timeline strip generates frames by
+        // seeking across the file, which this source can't do. No timeline.
+        if (this._linearMode)
+            return;
         const shadowRoot = this.shadowRoot;
         if (!shadowRoot)
             return;
@@ -15226,8 +15914,15 @@ export class MoviElement extends HTMLElement {
         return this.player?.getCurrentTime() || 0;
     }
     set currentTime(value) {
-        if (!this.player)
+        // Player not built yet — hold the seek and apply it once it's ready.
+        if (!this.player) {
+            this._pendingSeek = value;
             return;
+        }
+        // Linear (non-seekable source) playback — only the bytes in the RAM window
+        // are reachable, so clamp the target to the buffered range instead of
+        // jumping somewhere that was discarded / not yet downloaded.
+        value = this.clampToBufferedWindow(value);
         const state = this.player.getState();
         Logger.info(TAG, `currentTime setter: value=${value.toFixed(2)}, state=${state}, isSeeking=${this.isSeeking}`);
         if (state !== "ready" &&
@@ -15236,9 +15931,14 @@ export class MoviElement extends HTMLElement {
             state !== "ended" &&
             state !== "seeking" &&
             state !== "buffering") {
-            Logger.warn(TAG, `Seek blocked — state=${state} not allowed`);
+            // Not seekable yet (still loading/initialising). Hold the seek; the
+            // stateChange handler applies it the moment the player becomes ready.
+            Logger.info(TAG, `Seek held until ready — state=${state}`);
+            this._pendingSeek = value;
             return;
         }
+        // We're committed to seeking now, so any earlier held seek is superseded.
+        this._pendingSeek = null;
         // Coalesce: a previous seek is still running. Stash the latest target and
         // bail. The in-flight seek's finally() will pick up the latest target,
         // collapsing any number of intermediate sets into one tail seek.