movi-player 0.3.1 → 0.3.2

package/dist/element.cjs

@@ -49950,7 +49950,7 @@ class MoviVideoDecoder {
   }
   async configure(A, v, b = 0) {
     if (this.currentTrack = A, this.targetFps = b, this.currentProfile = A.profile, this.useSoftware = false, this.requiresSoftware = false, this.isAnnexBSource = false, this.openGopErrorCount = 0, this.hardwareRetryCount = 0, this.lastHardwareRetryTime = 0, this.swDecoder && (this.swDecoder.close(), this.swDecoder = null), this.forceSoftware) return Logger$1.info(TAG$h, "Force software decoding enabled, using WASM decoder"), this.useSoftware = true, this.initSoftwareDecoder();
-    if (!("VideoDecoder" in window)) return Logger$1.error(TAG$h, "WebCodecs VideoDecoder not supported"), false;
+    if (!("VideoDecoder" in window)) return Logger$1.warn(TAG$h, "WebCodecs VideoDecoder not supported — falling back to software decoder"), this.useSoftware = true, this.initSoftwareDecoder();
     let j = CodecParser.getCodecString(A.codec, A.extradata);
     if (j || (Logger$1.debug(TAG$h, "CodecParser returned null, falling back to manual mapping"), j = this.mapCodecToWebCodecs(A.codec, A.width, A.height, A.profile, A.level)), !j) return Logger$1.error(TAG$h, `Unsupported codec: ${A.codec}`), false;
     const s2 = { codec: j, codedWidth: A.width, codedHeight: A.height, hardwareAcceleration: "prefer-hardware" };
@@ -108886,6 +108886,7 @@ class MoviElement extends HTMLElement {
   isOverControls = false;
   isSeeking = false;
   pendingSeekTarget = null;
+  _pendingSeek = null;
   isDragging = false;
   isTouchDragging = false;
   touchStartX = 0;
@@ -109011,7 +109012,7 @@ class MoviElement extends HTMLElement {
     return ["src", "autoplay", "controls", "loop", "muted", "playsinline", "preload", "poster", "width", "height", "crossorigin", "volume", "playbackrate", "subtitledelay", "subtitlesize", "subtitlecolor", "subtitlebg", "subtitleedge", "ambientmode", "ambientwrapper", "renderer", "objectfit", "thumb", "hdr", "theme", "sw", "fps", "gesturefs", "nohotkeys", "startat", "fastseek", "doubletap", "themecolor", "buffersize", "title", "showtitle", "resume", "stablevolume", "encrypted", "tokenurl", "videourl", "videoid", "drm", "licenseurl", "licenseheaders", "headers", "audioonly", "lcevc", "lcevcurl", "postertime"];
   }
   constructor() {
-    super(), this.tabIndex = 0, Logger$1.setLevel(LogLevel.DEBUG);
+    super(), Logger$1.setLevel(LogLevel.DEBUG);
     const A = this.attachShadow({ mode: "open" });
     this.canvas = document.createElement("canvas"), this.canvas.style.width = "100%", this.canvas.style.height = "100%", this.canvas.style.display = "block", this.canvas.oncontextmenu = (A2) => (A2.preventDefault(), A2.stopPropagation(), false), A.appendChild(this.canvas), this.video = document.createElement("video"), this.video.style.width = "100%", this.video.style.height = "100%", this.video.style.display = "none", this.video.style.objectFit = "contain", this.video.oncontextmenu = (A2) => (A2.preventDefault(), A2.stopPropagation(), false), A.appendChild(this.video), this.posterElement = document.createElement("img"), this.posterElement.className = "movi-poster-overlay", this.posterElement.crossOrigin = "anonymous", this.posterElement.referrerPolicy = "no-referrer", this.posterElement.decoding = "async", this.posterElement.addEventListener("error", () => {
       const A2 = this.posterElement.src.match(/\/vi\/([\w-]+)\/maxresdefault\.jpg/);
@@ -110878,6 +110879,7 @@ class MoviElement extends HTMLElement {
       const A2 = this.player?.getState();
       "playing" !== A2 && "buffering" !== A2 && b.classList.add("movi-center-visible");
     }
+    this._hasEverPlayed ? this.classList.add("movi-bar-visible") : this.classList.remove("movi-bar-visible");
     const E = this.shadowRoot?.querySelector(".movi-controls-bar"), F = E?.offsetHeight ?? 80, k = this.shadowRoot?.querySelector(".movi-timeline-panel");
     let x = F + 20;
     if (k && "none" !== k.style.display ? (k.style.bottom = `${F + 20}px`, requestAnimationFrame(() => {
@@ -110967,7 +110969,7 @@ class MoviElement extends HTMLElement {
       b2 && (b2.style.cursor = "none");
     }
     const v = this.shadowRoot?.querySelector(".movi-center-play-pause"), b = this.player?.getState();
-    v && "playing" === b && v.classList.remove("movi-center-visible");
+    v && "playing" === b && v.classList.remove("movi-center-visible"), this.classList.remove("movi-bar-visible");
     const j = this.shadowRoot?.querySelector(".movi-timeline-panel");
     if (j && (j.style.bottom = "12px"), this.player && (j && "none" !== j.style.display ? requestAnimationFrame(() => {
       const A2 = j.offsetHeight || 0;
@@ -111149,6 +111151,14 @@ 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 */
@@ -113737,12 +113747,13 @@ 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;
         }
@@ -114234,7 +114245,7 @@ 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;
@@ -114243,15 +114254,7 @@ 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 {
@@ -114293,7 +114296,7 @@ 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;
@@ -114322,23 +114325,15 @@ 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 {
@@ -115937,6 +115932,7 @@ class MoviElement extends HTMLElement {
     });
   };
   connectedCallback() {
+    this.hasAttribute("tabindex") || (this.tabIndex = 0);
     const A = this.getAttribute("src");
     this._src = A || null, this._autoplay = this.hasAttribute("autoplay"), this._controls = this.hasAttribute("controls"), this._loop = this.hasAttribute("loop"), this._muted = this.hasAttribute("muted"), this._playsinline = this.hasAttribute("playsinline"), this._preload = this.getAttribute("preload") || "auto", this._poster = this.getAttribute("poster") || "";
     const v = this.getAttribute("volume");
@@ -116383,7 +116379,11 @@ class MoviElement extends HTMLElement {
     };
     this.player.trackManager.on("tracksChange", b), this.eventHandlers.set("tracksChange", () => this.player?.trackManager.off("tracksChange", b));
     const j = (A2) => {
-      if (Logger$1.info(TAG, `stateChange: ${A2}`), "playing" === A2 && this.posterElement && (this._qualitySwitchInProgress && (this._hideSnapshotPoster(), this._qualitySwitchInProgress = false, this._switchResumeTime = 0, this._switchResumeDuration = 0), this.posterElement.style.display = "none"), this.dispatchEvent(new CustomEvent("statechange", { detail: A2 })), this.updateLoadingIndicator(A2), this.updateControlsState(), this.updatePlayPauseIcon(), !this._autoplayStarting || "paused" !== A2 && "ended" !== A2 && "error" !== A2 || (this._autoplayStarting = false, this.updatePlayPauseIcon()), "playing" === A2) {
+      if (Logger$1.info(TAG, `stateChange: ${A2}`), null !== this._pendingSeek && ("ready" === A2 || "paused" === A2 || "playing" === A2)) {
+        const A3 = this._pendingSeek;
+        this._pendingSeek = null, this.currentTime = A3;
+      }
+      if ("playing" === A2 && this.posterElement && (this._qualitySwitchInProgress && (this._hideSnapshotPoster(), this._qualitySwitchInProgress = false, this._switchResumeTime = 0, this._switchResumeDuration = 0), this.posterElement.style.display = "none"), this.dispatchEvent(new CustomEvent("statechange", { detail: A2 })), this.updateLoadingIndicator(A2), this.updateControlsState(), this.updatePlayPauseIcon(), !this._autoplayStarting || "paused" !== A2 && "ended" !== A2 && "error" !== A2 || (this._autoplayStarting = false, this.updatePlayPauseIcon()), "playing" === A2) {
         const A3 = this._autoplayStarting;
         if (this._autoplayStarting = false, this._resumeDialogPending && !this._hasEverPlayed && (this._resumeDialogPending = false, this.maybeShowResumeDialog()), this._hasEverPlayed = true, this._loopRestartInFlight = false, this.dispatchEvent(new Event("play")), A3) return this.hideControls(), this.updatePlayPauseIcon(), this._ambientMode && (this._ambientSampleInterval = 200), void ("mediaSession" in navigator && this._title && (navigator.mediaSession.metadata = new MediaMetadata({ title: this._title })));
         window.setTimeout(() => {
@@ -117161,10 +117161,11 @@ class MoviElement extends HTMLElement {
     return this.player?.getCurrentTime() || 0;
   }
   set currentTime(A) {
-    if (!this.player) return;
+    if (!this.player) return void (this._pendingSeek = A);
     A = this.clampToBufferedWindow(A);
     const v = this.player.getState();
-    Logger$1.info(TAG, `currentTime setter: value=${A.toFixed(2)}, state=${v}, isSeeking=${this.isSeeking}`), "ready" === v || "playing" === v || "paused" === v || "ended" === v || "seeking" === v || "buffering" === v ? this.isSeeking ? this.pendingSeekTarget = A : (this.isSeeking = true, this.player.seek(A).then(() => {
+    if (Logger$1.info(TAG, `currentTime setter: value=${A.toFixed(2)}, state=${v}, isSeeking=${this.isSeeking}`), "ready" !== v && "playing" !== v && "paused" !== v && "ended" !== v && "seeking" !== v && "buffering" !== v) return Logger$1.info(TAG, `Seek held until ready — state=${v}`), void (this._pendingSeek = A);
+    this._pendingSeek = null, this.isSeeking ? this.pendingSeekTarget = A : (this.isSeeking = true, this.player.seek(A).then(() => {
       Logger$1.info(TAG, `Seek resolved: value=${A.toFixed(2)}, newState=${this.player?.getState()}`);
     }).catch((v2) => {
       Logger$1.error(TAG, `Seek error: value=${A.toFixed(2)}`, v2);
@@ -117173,7 +117174,7 @@ class MoviElement extends HTMLElement {
         const A2 = this.pendingSeekTarget;
         this.pendingSeekTarget = null, this.currentTime = A2;
       }
-    })) : Logger$1.warn(TAG, `Seek blocked — state=${v} not allowed`);
+    }));
   }
   get renderer() {
     return this._renderer;

package/dist/element.js

@@ -49965,7 +49965,7 @@ class MoviVideoDecoder {
   }
   async configure(A2, t2, n2 = 0) {
     if (this.currentTrack = A2, this.targetFps = n2, this.currentProfile = A2.profile, this.useSoftware = false, this.requiresSoftware = false, this.isAnnexBSource = false, this.openGopErrorCount = 0, this.hardwareRetryCount = 0, this.lastHardwareRetryTime = 0, this.swDecoder && (this.swDecoder.close(), this.swDecoder = null), this.forceSoftware) return v.info(K, "Force software decoding enabled, using WASM decoder"), this.useSoftware = true, this.initSoftwareDecoder();
-    if (!("VideoDecoder" in window)) return v.error(K, "WebCodecs VideoDecoder not supported"), false;
+    if (!("VideoDecoder" in window)) return v.warn(K, "WebCodecs VideoDecoder not supported — falling back to software decoder"), this.useSoftware = true, this.initSoftwareDecoder();
     let b2 = CodecParser.getCodecString(A2.codec, A2.extradata);
     if (b2 || (v.debug(K, "CodecParser returned null, falling back to manual mapping"), b2 = this.mapCodecToWebCodecs(A2.codec, A2.width, A2.height, A2.profile, A2.level)), !b2) return v.error(K, `Unsupported codec: ${A2.codec}`), false;
     const j2 = { codec: b2, codedWidth: A2.width, codedHeight: A2.height, hardwareAcceleration: "prefer-hardware" };
@@ -108990,6 +108990,7 @@ class MoviElement extends HTMLElement {
   isOverControls = false;
   isSeeking = false;
   pendingSeekTarget = null;
+  _pendingSeek = null;
   isDragging = false;
   isTouchDragging = false;
   touchStartX = 0;
@@ -109115,7 +109116,7 @@ class MoviElement extends HTMLElement {
     return ["src", "autoplay", "controls", "loop", "muted", "playsinline", "preload", "poster", "width", "height", "crossorigin", "volume", "playbackrate", "subtitledelay", "subtitlesize", "subtitlecolor", "subtitlebg", "subtitleedge", "ambientmode", "ambientwrapper", "renderer", "objectfit", "thumb", "hdr", "theme", "sw", "fps", "gesturefs", "nohotkeys", "startat", "fastseek", "doubletap", "themecolor", "buffersize", "title", "showtitle", "resume", "stablevolume", "encrypted", "tokenurl", "videourl", "videoid", "drm", "licenseurl", "licenseheaders", "headers", "audioonly", "lcevc", "lcevcurl", "postertime"];
   }
   constructor() {
-    super(), this.tabIndex = 0, v.setLevel(A.DEBUG);
+    super(), v.setLevel(A.DEBUG);
     const t2 = this.attachShadow({ mode: "open" });
     this.canvas = document.createElement("canvas"), this.canvas.style.width = "100%", this.canvas.style.height = "100%", this.canvas.style.display = "block", this.canvas.oncontextmenu = (A2) => (A2.preventDefault(), A2.stopPropagation(), false), t2.appendChild(this.canvas), this.video = document.createElement("video"), this.video.style.width = "100%", this.video.style.height = "100%", this.video.style.display = "none", this.video.style.objectFit = "contain", this.video.oncontextmenu = (A2) => (A2.preventDefault(), A2.stopPropagation(), false), t2.appendChild(this.video), this.posterElement = document.createElement("img"), this.posterElement.className = "movi-poster-overlay", this.posterElement.crossOrigin = "anonymous", this.posterElement.referrerPolicy = "no-referrer", this.posterElement.decoding = "async", this.posterElement.addEventListener("error", () => {
       const A2 = this.posterElement.src.match(/\/vi\/([\w-]+)\/maxresdefault\.jpg/);
@@ -110982,6 +110983,7 @@ class MoviElement extends HTMLElement {
       const A3 = this.player?.getState();
       "playing" !== A3 && "buffering" !== A3 && v2.classList.add("movi-center-visible");
     }
+    this._hasEverPlayed ? this.classList.add("movi-bar-visible") : this.classList.remove("movi-bar-visible");
     const j2 = this.shadowRoot?.querySelector(".movi-controls-bar"), s2 = j2?.offsetHeight ?? 80, f2 = this.shadowRoot?.querySelector(".movi-timeline-panel");
     let l2 = s2 + 20;
     if (f2 && "none" !== f2.style.display ? (f2.style.bottom = `${s2 + 20}px`, requestAnimationFrame(() => {
@@ -111071,7 +111073,7 @@ class MoviElement extends HTMLElement {
       v3 && (v3.style.cursor = "none");
     }
     const t2 = this.shadowRoot?.querySelector(".movi-center-play-pause"), v2 = this.player?.getState();
-    t2 && "playing" === v2 && t2.classList.remove("movi-center-visible");
+    t2 && "playing" === v2 && t2.classList.remove("movi-center-visible"), this.classList.remove("movi-bar-visible");
     const n2 = this.shadowRoot?.querySelector(".movi-timeline-panel");
     if (n2 && (n2.style.bottom = "12px"), this.player && (n2 && "none" !== n2.style.display ? requestAnimationFrame(() => {
       const A3 = n2.offsetHeight || 0;
@@ -111253,6 +111255,14 @@ 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 */
@@ -113841,12 +113851,13 @@ 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;
         }
@@ -114338,7 +114349,7 @@ 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;
@@ -114347,15 +114358,7 @@ 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 {
@@ -114397,7 +114400,7 @@ 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;
@@ -114426,23 +114429,15 @@ 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 {
@@ -116041,6 +116036,7 @@ class MoviElement extends HTMLElement {
     });
   };
   connectedCallback() {
+    this.hasAttribute("tabindex") || (this.tabIndex = 0);
     const A2 = this.getAttribute("src");
     this._src = A2 || null, this._autoplay = this.hasAttribute("autoplay"), this._controls = this.hasAttribute("controls"), this._loop = this.hasAttribute("loop"), this._muted = this.hasAttribute("muted"), this._playsinline = this.hasAttribute("playsinline"), this._preload = this.getAttribute("preload") || "auto", this._poster = this.getAttribute("poster") || "";
     const t2 = this.getAttribute("volume");
@@ -116487,7 +116483,11 @@ class MoviElement extends HTMLElement {
     };
     this.player.trackManager.on("tracksChange", n2), this.eventHandlers.set("tracksChange", () => this.player?.trackManager.off("tracksChange", n2));
     const b2 = (A3) => {
-      if (v.info(jj, `stateChange: ${A3}`), "playing" === A3 && this.posterElement && (this._qualitySwitchInProgress && (this._hideSnapshotPoster(), this._qualitySwitchInProgress = false, this._switchResumeTime = 0, this._switchResumeDuration = 0), this.posterElement.style.display = "none"), this.dispatchEvent(new CustomEvent("statechange", { detail: A3 })), this.updateLoadingIndicator(A3), this.updateControlsState(), this.updatePlayPauseIcon(), !this._autoplayStarting || "paused" !== A3 && "ended" !== A3 && "error" !== A3 || (this._autoplayStarting = false, this.updatePlayPauseIcon()), "playing" === A3) {
+      if (v.info(jj, `stateChange: ${A3}`), null !== this._pendingSeek && ("ready" === A3 || "paused" === A3 || "playing" === A3)) {
+        const A4 = this._pendingSeek;
+        this._pendingSeek = null, this.currentTime = A4;
+      }
+      if ("playing" === A3 && this.posterElement && (this._qualitySwitchInProgress && (this._hideSnapshotPoster(), this._qualitySwitchInProgress = false, this._switchResumeTime = 0, this._switchResumeDuration = 0), this.posterElement.style.display = "none"), this.dispatchEvent(new CustomEvent("statechange", { detail: A3 })), this.updateLoadingIndicator(A3), this.updateControlsState(), this.updatePlayPauseIcon(), !this._autoplayStarting || "paused" !== A3 && "ended" !== A3 && "error" !== A3 || (this._autoplayStarting = false, this.updatePlayPauseIcon()), "playing" === A3) {
         const A4 = this._autoplayStarting;
         if (this._autoplayStarting = false, this._resumeDialogPending && !this._hasEverPlayed && (this._resumeDialogPending = false, this.maybeShowResumeDialog()), this._hasEverPlayed = true, this._loopRestartInFlight = false, this.dispatchEvent(new Event("play")), A4) return this.hideControls(), this.updatePlayPauseIcon(), this._ambientMode && (this._ambientSampleInterval = 200), void ("mediaSession" in navigator && this._title && (navigator.mediaSession.metadata = new MediaMetadata({ title: this._title })));
         window.setTimeout(() => {
@@ -117265,10 +117265,11 @@ class MoviElement extends HTMLElement {
     return this.player?.getCurrentTime() || 0;
   }
   set currentTime(A2) {
-    if (!this.player) return;
+    if (!this.player) return void (this._pendingSeek = A2);
     A2 = this.clampToBufferedWindow(A2);
     const t2 = this.player.getState();
-    v.info(jj, `currentTime setter: value=${A2.toFixed(2)}, state=${t2}, isSeeking=${this.isSeeking}`), "ready" === t2 || "playing" === t2 || "paused" === t2 || "ended" === t2 || "seeking" === t2 || "buffering" === t2 ? this.isSeeking ? this.pendingSeekTarget = A2 : (this.isSeeking = true, this.player.seek(A2).then(() => {
+    if (v.info(jj, `currentTime setter: value=${A2.toFixed(2)}, state=${t2}, isSeeking=${this.isSeeking}`), "ready" !== t2 && "playing" !== t2 && "paused" !== t2 && "ended" !== t2 && "seeking" !== t2 && "buffering" !== t2) return v.info(jj, `Seek held until ready — state=${t2}`), void (this._pendingSeek = A2);
+    this._pendingSeek = null, this.isSeeking ? this.pendingSeekTarget = A2 : (this.isSeeking = true, this.player.seek(A2).then(() => {
       v.info(jj, `Seek resolved: value=${A2.toFixed(2)}, newState=${this.player?.getState()}`);
     }).catch((t3) => {
       v.error(jj, `Seek error: value=${A2.toFixed(2)}`, t3);
@@ -117277,7 +117278,7 @@ class MoviElement extends HTMLElement {
         const A3 = this.pendingSeekTarget;
         this.pendingSeekTarget = null, this.currentTime = A3;
       }
-    })) : v.warn(jj, `Seek blocked — state=${t2} not allowed`);
+    }));
   }
   get renderer() {
     return this._renderer;

package/dist/index.cjs

@@ -49950,7 +49950,7 @@ class MoviVideoDecoder {
   }
   async configure(A, v, b = 0) {
     if (this.currentTrack = A, this.targetFps = b, this.currentProfile = A.profile, this.useSoftware = false, this.requiresSoftware = false, this.isAnnexBSource = false, this.openGopErrorCount = 0, this.hardwareRetryCount = 0, this.lastHardwareRetryTime = 0, this.swDecoder && (this.swDecoder.close(), this.swDecoder = null), this.forceSoftware) return Logger$1.info(TAG$h, "Force software decoding enabled, using WASM decoder"), this.useSoftware = true, this.initSoftwareDecoder();
-    if (!("VideoDecoder" in window)) return Logger$1.error(TAG$h, "WebCodecs VideoDecoder not supported"), false;
+    if (!("VideoDecoder" in window)) return Logger$1.warn(TAG$h, "WebCodecs VideoDecoder not supported — falling back to software decoder"), this.useSoftware = true, this.initSoftwareDecoder();
     let j = CodecParser.getCodecString(A.codec, A.extradata);
     if (j || (Logger$1.debug(TAG$h, "CodecParser returned null, falling back to manual mapping"), j = this.mapCodecToWebCodecs(A.codec, A.width, A.height, A.profile, A.level)), !j) return Logger$1.error(TAG$h, `Unsupported codec: ${A.codec}`), false;
     const s2 = { codec: j, codedWidth: A.width, codedHeight: A.height, hardwareAcceleration: "prefer-hardware" };
@@ -108886,6 +108886,7 @@ class MoviElement extends HTMLElement {
   isOverControls = false;
   isSeeking = false;
   pendingSeekTarget = null;
+  _pendingSeek = null;
   isDragging = false;
   isTouchDragging = false;
   touchStartX = 0;
@@ -109011,7 +109012,7 @@ class MoviElement extends HTMLElement {
     return ["src", "autoplay", "controls", "loop", "muted", "playsinline", "preload", "poster", "width", "height", "crossorigin", "volume", "playbackrate", "subtitledelay", "subtitlesize", "subtitlecolor", "subtitlebg", "subtitleedge", "ambientmode", "ambientwrapper", "renderer", "objectfit", "thumb", "hdr", "theme", "sw", "fps", "gesturefs", "nohotkeys", "startat", "fastseek", "doubletap", "themecolor", "buffersize", "title", "showtitle", "resume", "stablevolume", "encrypted", "tokenurl", "videourl", "videoid", "drm", "licenseurl", "licenseheaders", "headers", "audioonly", "lcevc", "lcevcurl", "postertime"];
   }
   constructor() {
-    super(), this.tabIndex = 0, Logger$1.setLevel(LogLevel.DEBUG);
+    super(), Logger$1.setLevel(LogLevel.DEBUG);
     const A = this.attachShadow({ mode: "open" });
     this.canvas = document.createElement("canvas"), this.canvas.style.width = "100%", this.canvas.style.height = "100%", this.canvas.style.display = "block", this.canvas.oncontextmenu = (A2) => (A2.preventDefault(), A2.stopPropagation(), false), A.appendChild(this.canvas), this.video = document.createElement("video"), this.video.style.width = "100%", this.video.style.height = "100%", this.video.style.display = "none", this.video.style.objectFit = "contain", this.video.oncontextmenu = (A2) => (A2.preventDefault(), A2.stopPropagation(), false), A.appendChild(this.video), this.posterElement = document.createElement("img"), this.posterElement.className = "movi-poster-overlay", this.posterElement.crossOrigin = "anonymous", this.posterElement.referrerPolicy = "no-referrer", this.posterElement.decoding = "async", this.posterElement.addEventListener("error", () => {
       const A2 = this.posterElement.src.match(/\/vi\/([\w-]+)\/maxresdefault\.jpg/);
@@ -110878,6 +110879,7 @@ class MoviElement extends HTMLElement {
       const A2 = this.player?.getState();
       "playing" !== A2 && "buffering" !== A2 && b.classList.add("movi-center-visible");
     }
+    this._hasEverPlayed ? this.classList.add("movi-bar-visible") : this.classList.remove("movi-bar-visible");
     const E = this.shadowRoot?.querySelector(".movi-controls-bar"), F = E?.offsetHeight ?? 80, k = this.shadowRoot?.querySelector(".movi-timeline-panel");
     let x = F + 20;
     if (k && "none" !== k.style.display ? (k.style.bottom = `${F + 20}px`, requestAnimationFrame(() => {
@@ -110967,7 +110969,7 @@ class MoviElement extends HTMLElement {
       b2 && (b2.style.cursor = "none");
     }
     const v = this.shadowRoot?.querySelector(".movi-center-play-pause"), b = this.player?.getState();
-    v && "playing" === b && v.classList.remove("movi-center-visible");
+    v && "playing" === b && v.classList.remove("movi-center-visible"), this.classList.remove("movi-bar-visible");
     const j = this.shadowRoot?.querySelector(".movi-timeline-panel");
     if (j && (j.style.bottom = "12px"), this.player && (j && "none" !== j.style.display ? requestAnimationFrame(() => {
       const A2 = j.offsetHeight || 0;
@@ -111149,6 +111151,14 @@ 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 */
@@ -113737,12 +113747,13 @@ 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;
         }
@@ -114234,7 +114245,7 @@ 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;
@@ -114243,15 +114254,7 @@ 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 {
@@ -114293,7 +114296,7 @@ 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;
@@ -114322,23 +114325,15 @@ 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 {
@@ -115937,6 +115932,7 @@ class MoviElement extends HTMLElement {
     });
   };
   connectedCallback() {
+    this.hasAttribute("tabindex") || (this.tabIndex = 0);
     const A = this.getAttribute("src");
     this._src = A || null, this._autoplay = this.hasAttribute("autoplay"), this._controls = this.hasAttribute("controls"), this._loop = this.hasAttribute("loop"), this._muted = this.hasAttribute("muted"), this._playsinline = this.hasAttribute("playsinline"), this._preload = this.getAttribute("preload") || "auto", this._poster = this.getAttribute("poster") || "";
     const v = this.getAttribute("volume");
@@ -116383,7 +116379,11 @@ class MoviElement extends HTMLElement {
     };
     this.player.trackManager.on("tracksChange", b), this.eventHandlers.set("tracksChange", () => this.player?.trackManager.off("tracksChange", b));
     const j = (A2) => {
-      if (Logger$1.info(TAG, `stateChange: ${A2}`), "playing" === A2 && this.posterElement && (this._qualitySwitchInProgress && (this._hideSnapshotPoster(), this._qualitySwitchInProgress = false, this._switchResumeTime = 0, this._switchResumeDuration = 0), this.posterElement.style.display = "none"), this.dispatchEvent(new CustomEvent("statechange", { detail: A2 })), this.updateLoadingIndicator(A2), this.updateControlsState(), this.updatePlayPauseIcon(), !this._autoplayStarting || "paused" !== A2 && "ended" !== A2 && "error" !== A2 || (this._autoplayStarting = false, this.updatePlayPauseIcon()), "playing" === A2) {
+      if (Logger$1.info(TAG, `stateChange: ${A2}`), null !== this._pendingSeek && ("ready" === A2 || "paused" === A2 || "playing" === A2)) {
+        const A3 = this._pendingSeek;
+        this._pendingSeek = null, this.currentTime = A3;
+      }
+      if ("playing" === A2 && this.posterElement && (this._qualitySwitchInProgress && (this._hideSnapshotPoster(), this._qualitySwitchInProgress = false, this._switchResumeTime = 0, this._switchResumeDuration = 0), this.posterElement.style.display = "none"), this.dispatchEvent(new CustomEvent("statechange", { detail: A2 })), this.updateLoadingIndicator(A2), this.updateControlsState(), this.updatePlayPauseIcon(), !this._autoplayStarting || "paused" !== A2 && "ended" !== A2 && "error" !== A2 || (this._autoplayStarting = false, this.updatePlayPauseIcon()), "playing" === A2) {
         const A3 = this._autoplayStarting;
         if (this._autoplayStarting = false, this._resumeDialogPending && !this._hasEverPlayed && (this._resumeDialogPending = false, this.maybeShowResumeDialog()), this._hasEverPlayed = true, this._loopRestartInFlight = false, this.dispatchEvent(new Event("play")), A3) return this.hideControls(), this.updatePlayPauseIcon(), this._ambientMode && (this._ambientSampleInterval = 200), void ("mediaSession" in navigator && this._title && (navigator.mediaSession.metadata = new MediaMetadata({ title: this._title })));
         window.setTimeout(() => {
@@ -117161,10 +117161,11 @@ class MoviElement extends HTMLElement {
     return this.player?.getCurrentTime() || 0;
   }
   set currentTime(A) {
-    if (!this.player) return;
+    if (!this.player) return void (this._pendingSeek = A);
     A = this.clampToBufferedWindow(A);
     const v = this.player.getState();
-    Logger$1.info(TAG, `currentTime setter: value=${A.toFixed(2)}, state=${v}, isSeeking=${this.isSeeking}`), "ready" === v || "playing" === v || "paused" === v || "ended" === v || "seeking" === v || "buffering" === v ? this.isSeeking ? this.pendingSeekTarget = A : (this.isSeeking = true, this.player.seek(A).then(() => {
+    if (Logger$1.info(TAG, `currentTime setter: value=${A.toFixed(2)}, state=${v}, isSeeking=${this.isSeeking}`), "ready" !== v && "playing" !== v && "paused" !== v && "ended" !== v && "seeking" !== v && "buffering" !== v) return Logger$1.info(TAG, `Seek held until ready — state=${v}`), void (this._pendingSeek = A);
+    this._pendingSeek = null, this.isSeeking ? this.pendingSeekTarget = A : (this.isSeeking = true, this.player.seek(A).then(() => {
       Logger$1.info(TAG, `Seek resolved: value=${A.toFixed(2)}, newState=${this.player?.getState()}`);
     }).catch((v2) => {
       Logger$1.error(TAG, `Seek error: value=${A.toFixed(2)}`, v2);
@@ -117173,7 +117174,7 @@ class MoviElement extends HTMLElement {
         const A2 = this.pendingSeekTarget;
         this.pendingSeekTarget = null, this.currentTime = A2;
       }
-    })) : Logger$1.warn(TAG, `Seek blocked — state=${v} not allowed`);
+    }));
   }
   get renderer() {
     return this._renderer;