movi-player 0.3.4 → 0.3.5

package/dist/element.js

@@ -51313,10 +51313,10 @@ class CanvasRenderer {
         v.error(Y, "Error redrawing frame after resize", A3);
       }
       if (this.subtitleOverlay) {
-        const v2 = A2, n3 = t2, b3 = CanvasRenderer.computeSubtitleBottomPadding(n3);
-        this.subtitleOverlay.style.position = "absolute", this.subtitleOverlay.style.top = "0", this.subtitleOverlay.style.left = "0", this.subtitleOverlay.style.right = "auto", this.subtitleOverlay.style.bottom = "auto", this.subtitleOverlay.style.width = `${v2}px`, this.subtitleOverlay.style.height = `${n3}px`, this.subtitleOverlay.style.margin = "0", this.subtitleOverlay.style.padding = "0";
-        const j3 = this.subtitleControlsPadding > 0 ? this.subtitleControlsPadding : b3;
-        this.subtitleOverlay.style.paddingBottom = `${j3}px`, this.subtitleOverlay.style.display = "flex", this.subtitleOverlay.style.flexDirection = "column", this.subtitleOverlay.style.justifyContent = "flex-end", this.subtitleOverlay.style.alignItems = "center", this.subtitleOverlay.style.transform = "none", this.subtitleOverlay.style.boxSizing = "border-box", this.activeSubtitleCue && u2 && this.scheduleSubtitleRerender();
+        const v2 = ((this.rotation ?? 0) % 360 + 360) % 360, n3 = 90 === v2 || 270 === v2, b3 = n3 ? t2 : A2, j3 = n3 ? A2 : t2, s3 = CanvasRenderer.computeSubtitleBottomPadding(j3);
+        this.subtitleOverlay.style.position = "absolute", this.subtitleOverlay.style.right = "auto", this.subtitleOverlay.style.bottom = "auto", this.subtitleOverlay.style.width = `${b3}px`, this.subtitleOverlay.style.height = `${j3}px`, this.subtitleOverlay.style.left = (A2 - b3) / 2 + "px", this.subtitleOverlay.style.top = (t2 - j3) / 2 + "px", this.subtitleOverlay.style.margin = "0", this.subtitleOverlay.style.padding = "0";
+        const f3 = this.subtitleControlsPadding > 0 ? this.subtitleControlsPadding : s3;
+        this.subtitleOverlay.style.paddingBottom = `${f3}px`, this.subtitleOverlay.style.display = "flex", this.subtitleOverlay.style.flexDirection = "column", this.subtitleOverlay.style.justifyContent = "flex-end", this.subtitleOverlay.style.alignItems = "center", this.subtitleOverlay.style.transformOrigin = "center center", this.subtitleOverlay.style.transform = v2 ? `rotate(${v2}deg)` : "none", this.subtitleOverlay.style.boxSizing = "border-box", this.activeSubtitleCue && u2 && this.scheduleSubtitleRerender();
       }
     }
   }
@@ -51620,15 +51620,17 @@ class CanvasRenderer {
         const A3 = l2 - g2 - _2;
         B2 = A3 < 0 ? Math.max(0, l2 - g2 - 10) : A3, B2 = Math.max(0, Math.min(B2, l2 - g2));
       }
-      T2 = Math.max(0, Math.min(T2, f2 - k2)), this.subtitleOverlay.style.position = "absolute", this.subtitleOverlay.style.top = "0", this.subtitleOverlay.style.left = "0", this.subtitleOverlay.style.right = "auto", this.subtitleOverlay.style.bottom = "auto", this.subtitleOverlay.style.width = `${f2}px`, this.subtitleOverlay.style.height = `${l2}px`, this.subtitleOverlay.style.pointerEvents = "none", this.subtitleOverlay.style.transform = "none", this.subtitleOverlay.style.display = "flex", this.subtitleOverlay.style.flexDirection = "column", this.subtitleOverlay.style.justifyContent = "flex-end", this.subtitleOverlay.style.alignItems = "center", this.subtitleOverlay.style.overflow = "hidden", this.subtitleOverlay.style.padding = "0";
-      const S2 = CanvasRenderer.computeSubtitleBottomPadding(l2), I2 = this.subtitleControlsPadding > 0 ? this.subtitleControlsPadding : S2;
-      this.subtitleOverlay.style.paddingBottom = `${I2}px`, this.subtitleOverlay.style.textAlign = "center", this.subtitleOverlay.style.boxSizing = "border-box", this.subtitleOverlay.style.margin = "0";
-      let q2 = this.subtitleOverlay.querySelector("img.movi-subtitle-image");
-      if (v.debug(Y, `Rendering image subtitle in overlay: ${q2 ? "img exists" : "creating img"}, x=${T2.toFixed(0)}, y=${B2.toFixed(0)}, width=${(A2.image.width * d2).toFixed(0)}, height=${(A2.image.height * c2).toFixed(0)}`), q2 || (q2 = document.createElement("img"), q2.className = "movi-subtitle-image", q2.style.display = "block", q2.style.position = "relative", q2.style.margin = "0", q2.style.padding = "0", q2.style.border = "none", q2.style.outline = "none", this.subtitleOverlay.innerHTML = "", this.subtitleOverlay.appendChild(q2)), A2.position?.x) {
+      T2 = Math.max(0, Math.min(T2, f2 - k2));
+      const S2 = ((this.rotation ?? 0) % 360 + 360) % 360, I2 = 90 === S2 || 270 === S2, q2 = I2 ? l2 : f2, w2 = I2 ? f2 : l2;
+      this.subtitleOverlay.style.position = "absolute", this.subtitleOverlay.style.right = "auto", this.subtitleOverlay.style.bottom = "auto", this.subtitleOverlay.style.width = `${q2}px`, this.subtitleOverlay.style.height = `${w2}px`, this.subtitleOverlay.style.left = (f2 - q2) / 2 + "px", this.subtitleOverlay.style.top = (l2 - w2) / 2 + "px", this.subtitleOverlay.style.pointerEvents = "none", this.subtitleOverlay.style.transformOrigin = "center center", this.subtitleOverlay.style.transform = S2 ? `rotate(${S2}deg)` : "none", this.subtitleOverlay.style.display = "flex", this.subtitleOverlay.style.flexDirection = "column", this.subtitleOverlay.style.justifyContent = "flex-end", this.subtitleOverlay.style.alignItems = "center", this.subtitleOverlay.style.overflow = "hidden", this.subtitleOverlay.style.padding = "0";
+      const $2 = CanvasRenderer.computeSubtitleBottomPadding(w2), N2 = this.subtitleControlsPadding > 0 ? this.subtitleControlsPadding : $2;
+      this.subtitleOverlay.style.paddingBottom = `${N2}px`, this.subtitleOverlay.style.textAlign = "center", this.subtitleOverlay.style.boxSizing = "border-box", this.subtitleOverlay.style.margin = "0";
+      let C2 = this.subtitleOverlay.querySelector("img.movi-subtitle-image");
+      if (v.debug(Y, `Rendering image subtitle in overlay: ${C2 ? "img exists" : "creating img"}, x=${T2.toFixed(0)}, y=${B2.toFixed(0)}, width=${(A2.image.width * d2).toFixed(0)}, height=${(A2.image.height * c2).toFixed(0)}`), C2 || (C2 = document.createElement("img"), C2.className = "movi-subtitle-image", C2.style.display = "block", C2.style.position = "relative", C2.style.margin = "0", C2.style.padding = "0", C2.style.border = "none", C2.style.outline = "none", this.subtitleOverlay.innerHTML = "", this.subtitleOverlay.appendChild(C2)), A2.position?.x) {
         const A3 = T2 - (f2 - k2) / 2;
-        q2.style.marginLeft = `${A3}px`, q2.style.marginRight = "0";
-      } else q2.style.marginLeft = "auto", q2.style.marginRight = "auto";
-      q2.src = b2, q2.style.width = `${k2}px`, q2.style.height = `${g2}px`, q2.style.maxWidth = `${f2}px`, q2.style.maxHeight = `${l2}px`, q2.style.objectFit = "contain", q2.style.display = "block", q2.style.visibility = "visible", q2.style.opacity = "1", v.debug(Y, `Image subtitle rendered: src set, dimensions=${(A2.image.width * d2).toFixed(0)}x${(A2.image.height * c2).toFixed(0)}, position=(${T2.toFixed(0)}, ${B2.toFixed(0)})`);
+        C2.style.marginLeft = `${A3}px`, C2.style.marginRight = "0";
+      } else C2.style.marginLeft = "auto", C2.style.marginRight = "auto";
+      C2.src = b2, C2.style.width = `${k2}px`, C2.style.height = `${g2}px`, C2.style.maxWidth = `${q2}px`, C2.style.maxHeight = `${w2}px`, C2.style.objectFit = "contain", C2.style.display = "block", C2.style.visibility = "visible", C2.style.opacity = "1", v.debug(Y, `Image subtitle rendered: src set, dimensions=${(A2.image.width * d2).toFixed(0)}x${(A2.image.height * c2).toFixed(0)}, position=(${T2.toFixed(0)}, ${B2.toFixed(0)})`);
     } catch (A3) {
       v.error(Y, "Failed to render image subtitle in overlay", A3);
     }
@@ -51665,49 +51667,49 @@ class CanvasRenderer {
     if (n2.image) return this.subtitleOverlay ? void this.renderImageSubtitleInOverlay(n2) : void 0;
     if (this.subtitleOverlay) {
       if (!n2.text) return this.subtitleOverlay.textContent = "", void (this.subtitleOverlay.style.display = "none");
-      const A3 = this.canvas instanceof HTMLCanvasElement ? this.canvas : null, b2 = A3?.getBoundingClientRect(), j2 = b2?.width || t2, s2 = b2?.height || v2, f2 = CanvasRenderer.computeSubtitleBottomPadding(s2);
-      this.subtitleOverlay.style.position = "absolute", this.subtitleOverlay.style.top = "0", this.subtitleOverlay.style.left = "0", this.subtitleOverlay.style.right = "auto", this.subtitleOverlay.style.bottom = "auto", this.subtitleOverlay.style.width = `${j2}px`, this.subtitleOverlay.style.height = `${s2}px`, this.subtitleOverlay.style.margin = "0", this.subtitleOverlay.style.padding = "0";
-      const l2 = this.subtitleControlsPadding > 0 ? this.subtitleControlsPadding : f2;
-      this.subtitleOverlay.style.paddingBottom = `${l2}px`, this.subtitleOverlay.style.transform = "none", this.subtitleOverlay.style.boxSizing = "border-box", this.subtitleOverlay.style.display = "flex", this.subtitleOverlay.style.flexDirection = "column", this.subtitleOverlay.style.justifyContent = "flex-end", this.subtitleOverlay.style.alignItems = "center", this.subtitleOverlay.style.textAlign = "left", this.subtitleOverlay.style.pointerEvents = "none";
-      const E2 = `${n2.start.toFixed(3)}|${n2.text}`;
-      if (E2 === this._lastRenderedSubtitleKey) return;
-      this._lastRenderedSubtitleKey = E2;
-      const u2 = "⟨⟨GHOST⟩⟩", d2 = n2.text.indexOf(u2), c2 = d2 >= 0 ? n2.text.slice(0, d2) : n2.text, F2 = d2 >= 0 ? n2.text.slice(d2 + u2.length) : n2.text, h2 = (() => {
+      const A3 = this.canvas instanceof HTMLCanvasElement ? this.canvas : null, b2 = A3?.getBoundingClientRect(), j2 = b2?.width || t2, s2 = b2?.height || v2, f2 = ((this.rotation ?? 0) % 360 + 360) % 360, l2 = 90 === f2 || 270 === f2, E2 = l2 ? s2 : j2, u2 = l2 ? j2 : s2, d2 = CanvasRenderer.computeSubtitleBottomPadding(u2);
+      this.subtitleOverlay.style.position = "absolute", this.subtitleOverlay.style.right = "auto", this.subtitleOverlay.style.bottom = "auto", this.subtitleOverlay.style.width = `${E2}px`, this.subtitleOverlay.style.height = `${u2}px`, this.subtitleOverlay.style.left = (j2 - E2) / 2 + "px", this.subtitleOverlay.style.top = (s2 - u2) / 2 + "px", this.subtitleOverlay.style.margin = "0", this.subtitleOverlay.style.padding = "0";
+      const c2 = this.subtitleControlsPadding > 0 ? this.subtitleControlsPadding : d2;
+      this.subtitleOverlay.style.paddingBottom = `${c2}px`, this.subtitleOverlay.style.transformOrigin = "center center", this.subtitleOverlay.style.transform = f2 ? `rotate(${f2}deg)` : "none", this.subtitleOverlay.style.boxSizing = "border-box", this.subtitleOverlay.style.display = "flex", this.subtitleOverlay.style.flexDirection = "column", this.subtitleOverlay.style.justifyContent = "flex-end", this.subtitleOverlay.style.alignItems = "center", this.subtitleOverlay.style.textAlign = "left", this.subtitleOverlay.style.pointerEvents = "none";
+      const F2 = `${n2.start.toFixed(3)}|${n2.text}`;
+      if (F2 === this._lastRenderedSubtitleKey) return;
+      this._lastRenderedSubtitleKey = F2;
+      const h2 = "⟨⟨GHOST⟩⟩", p2 = n2.text.indexOf(h2), m2 = p2 >= 0 ? n2.text.slice(0, p2) : n2.text, k2 = p2 >= 0 ? n2.text.slice(p2 + h2.length) : n2.text, g2 = (() => {
         const A4 = this._subtitleFontCache;
         if (A4 && A4.viewport === window.innerWidth) return A4.font;
         const t3 = document.createElement("div");
         t3.className = "movi-subtitle-line", t3.style.position = "absolute", t3.style.left = "-99999px", t3.style.top = "-99999px", t3.style.visibility = "hidden", t3.textContent = "M", this.subtitleOverlay.parentNode?.appendChild(t3);
         const v3 = window.getComputedStyle(t3), n3 = `${v3.fontStyle} ${v3.fontWeight} ${v3.fontSize} ${v3.fontFamily}`;
         return t3.remove(), this._subtitleFontCache = { viewport: window.innerWidth, font: n3 }, n3;
-      })(), p2 = (A4) => {
-        const t3 = A4.indexOf(u2);
+      })(), x2 = (A4) => {
+        const t3 = A4.indexOf(h2);
         return t3 >= 0 ? A4.slice(0, t3) : A4;
       };
-      let m2 = F2;
-      const k2 = this.subtitleCues.indexOf(this.activeSubtitleCue);
-      if (k2 >= 0) {
-        let A4 = c2;
-        for (let t3 = k2 + 1; t3 < this.subtitleCues.length; t3++) {
+      let y2 = k2;
+      const _2 = this.subtitleCues.indexOf(this.activeSubtitleCue);
+      if (_2 >= 0) {
+        let A4 = m2;
+        for (let t3 = _2 + 1; t3 < this.subtitleCues.length; t3++) {
           const v3 = this.subtitleCues[t3];
           if (!v3?.text) break;
-          const n3 = p2(v3.text);
-          if (n3.length > A4.length && n3.startsWith(A4)) A4 = n3, m2 = v3.text.length > n3.length ? v3.text : n3;
+          const n3 = x2(v3.text);
+          if (n3.length > A4.length && n3.startsWith(A4)) A4 = n3, y2 = v3.text.length > n3.length ? v3.text : n3;
           else if (!n3.startsWith(A4)) break;
         }
       }
-      const g2 = p2(m2).replace(/<[^>]*>/g, ""), x2 = (this._subtitleMeasureCanvas ||= document.createElement("canvas")).getContext("2d");
-      let y2 = 0;
-      if (x2) {
-        x2.font = h2;
-        for (const A4 of g2.split("\n")) {
-          const t3 = Math.ceil(x2.measureText(A4).width);
-          t3 > y2 && (y2 = t3);
+      const T2 = x2(y2).replace(/<[^>]*>/g, ""), B2 = (this._subtitleMeasureCanvas ||= document.createElement("canvas")).getContext("2d");
+      let S2 = 0;
+      if (B2) {
+        B2.font = g2;
+        for (const A4 of T2.split("\n")) {
+          const t3 = Math.ceil(B2.measureText(A4).width);
+          t3 > S2 && (S2 = t3);
         }
       }
-      const _2 = c2.split("\n"), T2 = this._lastRenderedSubtitlePlain, B2 = T2 && c2.startsWith(T2) && c2.length > T2.length ? T2.split(/\s+/).filter(Boolean).length : 0;
-      this._lastRenderedSubtitlePlain = c2;
-      let S2 = 0;
-      const I2 = _2.map((A4) => {
+      const I2 = m2.split("\n"), q2 = this._lastRenderedSubtitlePlain, w2 = q2 && m2.startsWith(q2) && m2.length > q2.length ? q2.split(/\s+/).filter(Boolean).length : 0;
+      this._lastRenderedSubtitlePlain = m2;
+      let $2 = 0;
+      const N2 = I2.map((A4) => {
         const t3 = [];
         let v3 = A4.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#0?39;/g, "'").replace(/&#x27;/g, "'").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&");
         v3 = v3.replace(/<(\/?)i>/gi, (A5) => {
@@ -51742,24 +51744,24 @@ class CanvasRenderer {
         }
         const E3 = [], u3 = [];
         for (const A5 of f3) {
-          const t4 = (A6) => A6 < B2 ? E3 : u3;
+          const t4 = (A6) => A6 < w2 ? E3 : u3;
           if ("ws" === A5.kind) {
-            const v5 = t4(S2);
-            if (v5 === E3 && 0 === E3.length && 0 === S2) continue;
+            const v5 = t4($2);
+            if (v5 === E3 && 0 === E3.length && 0 === $2) continue;
             v5.push(A5.text);
             continue;
           }
-          const v4 = t4(S2);
+          const v4 = t4($2);
           if (v4 === u3 && 0 === u3.length && E3.length > 0) {
             const A6 = E3[E3.length - 1];
             /\s$/.test(A6) || E3.push(" ");
           }
-          v4.push(A5.text), S2 += 1;
+          v4.push(A5.text), $2 += 1;
         }
         const d3 = E3.join("").replace(/\s+$/, " "), c3 = u3.join(""), F3 = ['<div class="movi-subtitle-line">'];
         return d3 && F3.push(`<span class="movi-subtitle-static">${d3}</span>`), c3 && F3.push(`<span class="movi-subtitle-new">${c3}</span>`), F3.push("</div>"), F3.join("");
-      }).join(""), q2 = parseFloat(this.subtitleOverlay.style.width) || 0, w2 = q2 > 0 && y2 > 0 && y2 <= 0.92 * q2, $2 = w2 ? Math.max(0, Math.floor((q2 - y2) / 2)) : 0, N2 = w2 ? $2 > 0 ? ` style="padding-left:${$2}px"` : "" : ' style="text-align:center"';
-      return void (this.subtitleOverlay.innerHTML = `<div class="movi-subtitle-anchor"${N2}><div class="movi-subtitle-block">${I2}</div></div>`);
+      }).join(""), C2 = parseFloat(this.subtitleOverlay.style.width) || 0, R2 = C2 > 0 && S2 > 0 && S2 <= 0.92 * C2, H2 = R2 ? Math.max(0, Math.floor((C2 - S2) / 2)) : 0, P2 = R2 ? H2 > 0 ? ` style="padding-left:${H2}px"` : "" : ' style="text-align:center"';
+      return void (this.subtitleOverlay.innerHTML = `<div class="movi-subtitle-anchor"${P2}><div class="movi-subtitle-block">${N2}</div></div>`);
     }
   }
   setPlaybackRate(A2) {
@@ -108998,7 +109000,7 @@ class MoviPlayer extends j {
     return this.trackManager.getAudioTracks().length > 0 || this.hasNativeAudio() || null !== this.streamWrapper;
   }
   usesNativeAudio() {
-    return null !== this.streamWrapper || this.isNativeAudioActive();
+    return null !== this.streamWrapper || null !== this.nativeAudioEl;
   }
   isLiveStream() {
     return this.streamWrapper?.isLive?.() ?? false;
@@ -109569,6 +109571,7 @@ class MoviElement extends HTMLElement {
   _posterCoverUrl = "";
   _posterCoverLoading = false;
   _coverArtBgEl = null;
+  _coverArtBgUrl = "";
   _coverArtResolved = false;
   _lastStripDispatched = null;
   controlsTimeout = null;
@@ -110523,7 +110526,7 @@ class MoviElement extends HTMLElement {
           if (A2.preventDefault(), this.player && !this._pipWindow) {
             const A3 = this.player.rotateVideo();
             this.showOSD('<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>', `${A3}°`);
-            const t3 = this.shadowRoot?.querySelector(".movi-rotate-status");
+            const t3 = this.contextMenuRoot().querySelector(".movi-rotate-status");
             t3 && (t3.textContent = `${A3}°`), this.syncThumbnailRotation(A3);
           }
           break;
@@ -110688,18 +110691,20 @@ class MoviElement extends HTMLElement {
       } else {
         t2.classList.remove("movi-context-menu-mobile");
         const v2 = A2.querySelector(".movi-context-menu-backdrop");
-        if (v2 && (v2.style.display = "none"), this.classList.contains("movi-audio-strip")) {
-          t2.style.position = "fixed", t2.style.maxHeight = `${Math.max(180, window.innerHeight - 40)}px`, t2.style.display = "block", t2.style.visibility = "hidden";
+        v2 && (v2.style.display = "none");
+        const b4 = this.classList.contains("movi-audio-strip"), j4 = this.isFullscreenActive();
+        if (b4 || j4) {
+          j4 && this.classList.add("movi-menu-overflow"), t2.style.position = "fixed", t2.style.maxHeight = `${Math.max(180, window.innerHeight - 40)}px`, t2.style.display = "block", t2.style.visibility = "hidden";
           const A3 = t2.offsetWidth, v3 = t2.offsetHeight;
           t2.style.visibility = "visible";
-          let b5 = n3.clientX, j5 = n3.clientY;
-          return b5 + A3 > window.innerWidth && (b5 = window.innerWidth - A3 - 10), b5 < 10 && (b5 = 10), j5 + v3 > window.innerHeight && (j5 = window.innerHeight - v3 - 10), j5 < 10 && (j5 = 10), t2.style.left = `${b5}px`, t2.style.top = `${j5}px`, this.clampMenuToViewport(t2), requestAnimationFrame(() => t2.classList.add("visible")), void (this._contextMenuVisible = true);
+          let b5 = n3.clientX, s5 = n3.clientY;
+          return b5 + A3 > window.innerWidth && (b5 = window.innerWidth - A3 - 10), b5 < 10 && (b5 = 10), s5 + v3 > window.innerHeight && (s5 = window.innerHeight - v3 - 10), s5 < 10 && (s5 = 10), t2.style.left = `${b5}px`, t2.style.top = `${s5}px`, this.clampMenuToViewport(t2), requestAnimationFrame(() => t2.classList.add("visible")), void (this._contextMenuVisible = true);
         }
         this.portalContextMenu(t2), t2.style.position = "fixed";
-        let b4 = n3.clientX, j4 = n3.clientY;
+        let s4 = n3.clientX, f4 = n3.clientY;
         t2.style.maxHeight = `${Math.max(180, window.innerHeight - 40)}px`, t2.style.display = "block", t2.style.visibility = "hidden";
-        const s4 = t2.offsetWidth, f4 = t2.offsetHeight;
-        t2.style.visibility = "visible", b4 + s4 > window.innerWidth - 10 && (b4 -= s4), j4 + f4 > window.innerHeight - 10 && (j4 -= f4), t2.style.left = `${b4}px`, t2.style.top = `${j4}px`, this.clampMenuToViewport(t2);
+        const l3 = t2.offsetWidth, E3 = t2.offsetHeight;
+        t2.style.visibility = "visible", s4 + l3 > window.innerWidth - 10 && (s4 -= l3), f4 + E3 > window.innerHeight - 10 && (f4 -= E3), t2.style.left = `${s4}px`, t2.style.top = `${f4}px`, this.clampMenuToViewport(t2);
       }
       return requestAnimationFrame(() => {
         t2.classList.add("visible");
@@ -110834,8 +110839,8 @@ class MoviElement extends HTMLElement {
       } else if ("hdr-toggle" === j3) this.hdr = !this.hdr, this.showOSD(lj, this.hdr ? "HDR On" : "HDR Off"), b2();
       else if ("rotate-video" === j3) {
         if (this.player && !this._pipWindow) {
-          const t3 = this.player.rotateVideo(), v3 = A2.querySelector(".movi-rotate-status");
-          v3 && (v3.textContent = `${t3}°`), this.syncThumbnailRotation(t3), this.showOSD('<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>', `Rotate ${t3}°`);
+          const A3 = this.player.rotateVideo(), t3 = this.contextMenuRoot().querySelector(".movi-rotate-status");
+          t3 && (t3.textContent = `${A3}°`), this.syncThumbnailRotation(A3), this.showOSD('<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>', `Rotate ${A3}°`);
         }
         b2();
       } else if ("loop-toggle" === j3) this.loop = !this.loop, this.showOSD(oj, this.loop ? "Loop On" : "Loop Off"), b2();
@@ -116177,7 +116182,7 @@ class MoviElement extends HTMLElement {
         border: 1px solid rgba(255, 255, 255, 0.12);
         border-radius: 16px;
         padding: 8px 4px;
-        min-width: 160px;
+        min-width: 230px;
         visibility: hidden;
         opacity: 0;
         box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
@@ -116207,7 +116212,7 @@ class MoviElement extends HTMLElement {
         border: 1px solid rgba(255, 255, 255, 0.12);
         border-radius: 16px;
         padding: 8px 4px;
-        min-width: 160px;
+        min-width: 230px;
         visibility: hidden;
         opacity: 0;
         box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
@@ -117887,6 +117892,16 @@ class MoviElement extends HTMLElement {
       this._posterCoverUrl === t2 && (this._posterCoverLoading = false, this._posterCoverUrl = "", this.updateCoverArtOverlay());
     }, v2.src = t2;
   }
+  makeCoverArtBgUrl(A2) {
+    try {
+      const t2 = 96, v2 = A2.width / A2.height, n2 = Math.max(1, v2 >= 1 ? t2 : Math.round(t2 * v2)), b2 = Math.max(1, v2 >= 1 ? Math.round(t2 / v2) : t2), j2 = document.createElement("canvas");
+      j2.width = n2, j2.height = b2;
+      const s2 = j2.getContext("2d");
+      return s2 ? (s2.drawImage(A2, 0, 0, n2, b2), j2.toDataURL("image/jpeg", 0.7)) : "";
+    } catch {
+      return "";
+    }
+  }
   updateCoverArtOverlay() {
     const A2 = this.coverArtOverlay, t2 = this.coverArtCanvas;
     if (!A2 || !t2) return;
@@ -117901,7 +117916,7 @@ class MoviElement extends HTMLElement {
     const B2 = t2.getContext("2d");
     if (!B2) return;
     if (B2.save(), B2.scale(y2, y2), this._coverArtBgEl) {
-      const A3 = this.coverArtBitmap ? "" : this._posterCoverUrl;
+      const A3 = this.coverArtBitmap ? this._coverArtBgUrl : this._posterCoverUrl;
       this._coverArtBgEl.style.backgroundImage = A3 ? `url("${A3.replace(/"/g, '\\"')}")` : "none";
     }
     B2.clearRect(0, 0, g2, x2);
@@ -118099,12 +118114,12 @@ class MoviElement extends HTMLElement {
     };
     this.player.on("error", u2), this.eventHandlers.set("error", () => this.player?.off("error", u2));
     const d2 = (A3) => {
-      this.coverArtBitmap = A3, this._coverArtResolved = true, this.updateCoverArtOverlay(), A3 && (this.setMediaSessionArtworkFromBitmap(A3), this.dispatchEvent(new CustomEvent("coverart", { detail: { bitmap: A3, width: A3.width, height: A3.height }, bubbles: true, composed: true })));
+      this.coverArtBitmap = A3, this._coverArtBgUrl = A3 ? this.makeCoverArtBgUrl(A3) : "", this._coverArtResolved = true, this.updateCoverArtOverlay(), A3 && (this.setMediaSessionArtworkFromBitmap(A3), this.dispatchEvent(new CustomEvent("coverart", { detail: { bitmap: A3, width: A3.width, height: A3.height }, bubbles: true, composed: true })));
     };
     this.player.on("coverart", d2), this.eventHandlers.set("coverart", () => this.player?.off("coverart", d2));
   }
   async load() {
-    if (this._titleAutoLoaded = false, this._lastDuration = 0, this.coverArtBitmap = null, this._coverArtResolved = false, this._posterCoverBitmap) try {
+    if (this._titleAutoLoaded = false, this._lastDuration = 0, this.coverArtBitmap = null, this._coverArtBgUrl = "", this._coverArtResolved = false, this._posterCoverBitmap) try {
       this._posterCoverBitmap.close();
     } catch {
     }
@@ -118632,22 +118647,24 @@ class MoviElement extends HTMLElement {
   set loop(A2) {
     this._loop = !!A2, this._loop ? this.setAttribute("loop", "") : this.removeAttribute("loop"), this.updateLoopUI();
   }
+  contextMenuRoot() {
+    return this._menuPortalRoot?.querySelector(".movi-context-menu") ? this._menuPortalRoot : this.shadowRoot;
+  }
   updateLoopUI() {
     const A2 = this.shadowRoot;
     if (!A2) return;
-    const t2 = A2.querySelector(".movi-loop-btn"), v2 = A2.querySelector('.movi-context-menu-item[data-action="loop-toggle"]'), n2 = A2.querySelector(".movi-loop-status"), b2 = A2.querySelector(".movi-context-menu-loop-outline"), j2 = A2.querySelector(".movi-context-menu-loop-filled");
-    this._loop ? (t2?.classList.add("active"), v2?.classList.add("movi-context-menu-active"), n2 && (n2.textContent = "On"), b2 && (b2.style.display = "none"), j2 && (j2.style.display = "block")) : (t2?.classList.remove("active"), v2?.classList.remove("movi-context-menu-active"), n2 && (n2.textContent = "Off"), b2 && (b2.style.display = "block"), j2 && (j2.style.display = "none"));
+    const t2 = this.contextMenuRoot(), v2 = A2.querySelector(".movi-loop-btn"), n2 = t2.querySelector('.movi-context-menu-item[data-action="loop-toggle"]'), b2 = t2.querySelector(".movi-loop-status"), j2 = t2.querySelector(".movi-context-menu-loop-outline"), s2 = t2.querySelector(".movi-context-menu-loop-filled");
+    this._loop ? (v2?.classList.add("active"), n2?.classList.add("movi-context-menu-active"), b2 && (b2.textContent = "On"), j2 && (j2.style.display = "none"), s2 && (s2.style.display = "block")) : (v2?.classList.remove("active"), n2?.classList.remove("movi-context-menu-active"), b2 && (b2.textContent = "Off"), j2 && (j2.style.display = "block"), s2 && (s2.style.display = "none"));
   }
   updateAmbientUI() {
-    const A2 = this.shadowRoot;
-    if (!A2) return;
-    const t2 = A2.querySelector('.movi-context-menu-item[data-action="ambient-toggle"]'), v2 = A2.querySelector(".movi-ambient-status"), n2 = A2.querySelector(".movi-context-menu-ambient-outline"), b2 = A2.querySelector(".movi-context-menu-ambient-filled");
+    if (!this.shadowRoot) return;
+    const A2 = this.contextMenuRoot(), t2 = A2.querySelector('.movi-context-menu-item[data-action="ambient-toggle"]'), v2 = A2.querySelector(".movi-ambient-status"), n2 = A2.querySelector(".movi-context-menu-ambient-outline"), b2 = A2.querySelector(".movi-context-menu-ambient-filled");
     this._ambientMode ? (t2?.classList.add("movi-context-menu-active"), v2 && (v2.textContent = "On"), n2 && (n2.style.display = "none"), b2 && (b2.style.display = "block")) : (t2?.classList.remove("movi-context-menu-active"), v2 && (v2.textContent = "Off"), n2 && (n2.style.display = "block"), b2 && (b2.style.display = "none"));
   }
   updateStableAudioUI(A2 = this.shadowRoot) {
     if (!A2) return;
-    const t2 = this.player?.getStableAudio() ?? true, v2 = A2.querySelector(".movi-stable-audio-btn"), n2 = A2.querySelector('.movi-context-menu-item[data-action="stable-audio-toggle"]'), b2 = A2.querySelector(".movi-stable-audio-status"), j2 = A2.querySelector(".movi-context-menu-stable-outline"), s2 = A2.querySelector(".movi-context-menu-stable-filled");
-    t2 ? (v2?.classList.add("active"), n2?.classList.add("movi-context-menu-active"), b2 && (b2.textContent = "On"), j2 && (j2.style.display = "none"), s2 && (s2.style.display = "block")) : (v2?.classList.remove("active"), n2?.classList.remove("movi-context-menu-active"), b2 && (b2.textContent = "Off"), j2 && (j2.style.display = "block"), s2 && (s2.style.display = "none"));
+    const t2 = this.player?.getStableAudio() ?? true, v2 = this.contextMenuRoot(), n2 = A2.querySelector(".movi-stable-audio-btn"), b2 = v2.querySelector('.movi-context-menu-item[data-action="stable-audio-toggle"]'), j2 = v2.querySelector(".movi-stable-audio-status"), s2 = v2.querySelector(".movi-context-menu-stable-outline"), f2 = v2.querySelector(".movi-context-menu-stable-filled");
+    t2 ? (n2?.classList.add("active"), b2?.classList.add("movi-context-menu-active"), j2 && (j2.textContent = "On"), s2 && (s2.style.display = "none"), f2 && (f2.style.display = "block")) : (n2?.classList.remove("active"), b2?.classList.remove("movi-context-menu-active"), j2 && (j2.textContent = "Off"), s2 && (s2.style.display = "block"), f2 && (f2.style.display = "none"));
   }
   toggleNerdStats(A2 = this.shadowRoot) {
     if (!A2) return;
@@ -119215,8 +119232,8 @@ class MoviElement extends HTMLElement {
     return !!this.player?.isHDRSupported?.();
   }
   updateHDRUI() {
-    const A2 = this.shadowRoot?.querySelector(".movi-hdr-btn"), t2 = this.shadowRoot?.querySelector(".movi-hdr-status"), v2 = this.shadowRoot?.querySelector('.movi-context-menu-item[data-action="hdr-toggle"]');
-    this._hdr ? (A2?.classList.add("movi-hdr-active"), v2?.classList.add("movi-context-menu-active"), t2 && (t2.textContent = "On")) : (A2?.classList.remove("movi-hdr-active"), v2?.classList.remove("movi-context-menu-active"), t2 && (t2.textContent = "Off"));
+    const A2 = this.contextMenuRoot(), t2 = this.shadowRoot?.querySelector(".movi-hdr-btn"), v2 = A2.querySelector(".movi-hdr-status"), n2 = A2.querySelector('.movi-context-menu-item[data-action="hdr-toggle"]');
+    this._hdr ? (t2?.classList.add("movi-hdr-active"), n2?.classList.add("movi-context-menu-active"), v2 && (v2.textContent = "On")) : (t2?.classList.remove("movi-hdr-active"), n2?.classList.remove("movi-context-menu-active"), v2 && (v2.textContent = "Off"));
   }
   async takeSnapshot() {
     if (this.player) try {