movi-player 0.3.4 → 0.3.5

package/dist/element.cjs

@@ -51298,10 +51298,10 @@ class CanvasRenderer {
         Logger$1.error(TAG$d, "Error redrawing frame after resize", A2);
       }
       if (this.subtitleOverlay) {
-        const b2 = A, j2 = v, s3 = CanvasRenderer.computeSubtitleBottomPadding(j2);
-        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 = `${b2}px`, this.subtitleOverlay.style.height = `${j2}px`, this.subtitleOverlay.style.margin = "0", this.subtitleOverlay.style.padding = "0";
-        const E2 = this.subtitleControlsPadding > 0 ? this.subtitleControlsPadding : s3;
-        this.subtitleOverlay.style.paddingBottom = `${E2}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 && _ && this.scheduleSubtitleRerender();
+        const b2 = ((this.rotation ?? 0) % 360 + 360) % 360, j2 = 90 === b2 || 270 === b2, s3 = j2 ? v : A, E2 = j2 ? A : v, F2 = CanvasRenderer.computeSubtitleBottomPadding(E2);
+        this.subtitleOverlay.style.position = "absolute", this.subtitleOverlay.style.right = "auto", this.subtitleOverlay.style.bottom = "auto", this.subtitleOverlay.style.width = `${s3}px`, this.subtitleOverlay.style.height = `${E2}px`, this.subtitleOverlay.style.left = (A - s3) / 2 + "px", this.subtitleOverlay.style.top = (v - E2) / 2 + "px", this.subtitleOverlay.style.margin = "0", this.subtitleOverlay.style.padding = "0";
+        const k2 = this.subtitleControlsPadding > 0 ? this.subtitleControlsPadding : F2;
+        this.subtitleOverlay.style.paddingBottom = `${k2}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 = b2 ? `rotate(${b2}deg)` : "none", this.subtitleOverlay.style.boxSizing = "border-box", this.activeSubtitleCue && _ && this.scheduleSubtitleRerender();
       }
     }
   }
@@ -51605,15 +51605,17 @@ class CanvasRenderer {
         const A2 = k - N - D;
         P = A2 < 0 ? Math.max(0, k - N - 10) : A2, P = Math.max(0, Math.min(P, k - N));
       }
-      R = Math.max(0, Math.min(R, F - w)), 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 = `${F}px`, this.subtitleOverlay.style.height = `${k}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 H = CanvasRenderer.computeSubtitleBottomPadding(k), M = this.subtitleControlsPadding > 0 ? this.subtitleControlsPadding : H;
-      this.subtitleOverlay.style.paddingBottom = `${M}px`, this.subtitleOverlay.style.textAlign = "center", this.subtitleOverlay.style.boxSizing = "border-box", this.subtitleOverlay.style.margin = "0";
-      let G = this.subtitleOverlay.querySelector("img.movi-subtitle-image");
-      if (Logger$1.debug(TAG$d, `Rendering image subtitle in overlay: ${G ? "img exists" : "creating img"}, x=${R.toFixed(0)}, y=${P.toFixed(0)}, width=${(A.image.width * T).toFixed(0)}, height=${(A.image.height * B).toFixed(0)}`), G || (G = document.createElement("img"), G.className = "movi-subtitle-image", G.style.display = "block", G.style.position = "relative", G.style.margin = "0", G.style.padding = "0", G.style.border = "none", G.style.outline = "none", this.subtitleOverlay.innerHTML = "", this.subtitleOverlay.appendChild(G)), A.position?.x) {
+      R = Math.max(0, Math.min(R, F - w));
+      const H = ((this.rotation ?? 0) % 360 + 360) % 360, M = 90 === H || 270 === H, G = M ? k : F, O = M ? F : k;
+      this.subtitleOverlay.style.position = "absolute", this.subtitleOverlay.style.right = "auto", this.subtitleOverlay.style.bottom = "auto", this.subtitleOverlay.style.width = `${G}px`, this.subtitleOverlay.style.height = `${O}px`, this.subtitleOverlay.style.left = (F - G) / 2 + "px", this.subtitleOverlay.style.top = (k - O) / 2 + "px", this.subtitleOverlay.style.pointerEvents = "none", this.subtitleOverlay.style.transformOrigin = "center center", this.subtitleOverlay.style.transform = H ? `rotate(${H}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 J = CanvasRenderer.computeSubtitleBottomPadding(O), U = this.subtitleControlsPadding > 0 ? this.subtitleControlsPadding : J;
+      this.subtitleOverlay.style.paddingBottom = `${U}px`, this.subtitleOverlay.style.textAlign = "center", this.subtitleOverlay.style.boxSizing = "border-box", this.subtitleOverlay.style.margin = "0";
+      let K = this.subtitleOverlay.querySelector("img.movi-subtitle-image");
+      if (Logger$1.debug(TAG$d, `Rendering image subtitle in overlay: ${K ? "img exists" : "creating img"}, x=${R.toFixed(0)}, y=${P.toFixed(0)}, width=${(A.image.width * T).toFixed(0)}, height=${(A.image.height * B).toFixed(0)}`), K || (K = document.createElement("img"), K.className = "movi-subtitle-image", K.style.display = "block", K.style.position = "relative", K.style.margin = "0", K.style.padding = "0", K.style.border = "none", K.style.outline = "none", this.subtitleOverlay.innerHTML = "", this.subtitleOverlay.appendChild(K)), A.position?.x) {
         const A2 = R - (F - w) / 2;
-        G.style.marginLeft = `${A2}px`, G.style.marginRight = "0";
-      } else G.style.marginLeft = "auto", G.style.marginRight = "auto";
-      G.src = j, G.style.width = `${w}px`, G.style.height = `${N}px`, G.style.maxWidth = `${F}px`, G.style.maxHeight = `${k}px`, G.style.objectFit = "contain", G.style.display = "block", G.style.visibility = "visible", G.style.opacity = "1", Logger$1.debug(TAG$d, `Image subtitle rendered: src set, dimensions=${(A.image.width * T).toFixed(0)}x${(A.image.height * B).toFixed(0)}, position=(${R.toFixed(0)}, ${P.toFixed(0)})`);
+        K.style.marginLeft = `${A2}px`, K.style.marginRight = "0";
+      } else K.style.marginLeft = "auto", K.style.marginRight = "auto";
+      K.src = j, K.style.width = `${w}px`, K.style.height = `${N}px`, K.style.maxWidth = `${G}px`, K.style.maxHeight = `${O}px`, K.style.objectFit = "contain", K.style.display = "block", K.style.visibility = "visible", K.style.opacity = "1", Logger$1.debug(TAG$d, `Image subtitle rendered: src set, dimensions=${(A.image.width * T).toFixed(0)}x${(A.image.height * B).toFixed(0)}, position=(${R.toFixed(0)}, ${P.toFixed(0)})`);
     } catch (A2) {
       Logger$1.error(TAG$d, "Failed to render image subtitle in overlay", A2);
     }
@@ -51650,49 +51652,49 @@ class CanvasRenderer {
     if (j.image) return this.subtitleOverlay ? void this.renderImageSubtitleInOverlay(j) : void 0;
     if (this.subtitleOverlay) {
       if (!j.text) return this.subtitleOverlay.textContent = "", void (this.subtitleOverlay.style.display = "none");
-      const A2 = this.canvas instanceof HTMLCanvasElement ? this.canvas : null, s2 = A2?.getBoundingClientRect(), E = s2?.width || v, F = s2?.height || b, k = CanvasRenderer.computeSubtitleBottomPadding(F);
-      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 = `${E}px`, this.subtitleOverlay.style.height = `${F}px`, this.subtitleOverlay.style.margin = "0", this.subtitleOverlay.style.padding = "0";
-      const x = this.subtitleControlsPadding > 0 ? this.subtitleControlsPadding : k;
-      this.subtitleOverlay.style.paddingBottom = `${x}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 _ = `${j.start.toFixed(3)}|${j.text}`;
-      if (_ === this._lastRenderedSubtitleKey) return;
-      this._lastRenderedSubtitleKey = _;
-      const T = "⟨⟨GHOST⟩⟩", B = j.text.indexOf(T), S = B >= 0 ? j.text.slice(0, B) : j.text, I = B >= 0 ? j.text.slice(B + T.length) : j.text, $ = (() => {
+      const A2 = this.canvas instanceof HTMLCanvasElement ? this.canvas : null, s2 = A2?.getBoundingClientRect(), E = s2?.width || v, F = s2?.height || b, k = ((this.rotation ?? 0) % 360 + 360) % 360, x = 90 === k || 270 === k, _ = x ? F : E, T = x ? E : F, B = CanvasRenderer.computeSubtitleBottomPadding(T);
+      this.subtitleOverlay.style.position = "absolute", this.subtitleOverlay.style.right = "auto", this.subtitleOverlay.style.bottom = "auto", this.subtitleOverlay.style.width = `${_}px`, this.subtitleOverlay.style.height = `${T}px`, this.subtitleOverlay.style.left = (E - _) / 2 + "px", this.subtitleOverlay.style.top = (F - T) / 2 + "px", this.subtitleOverlay.style.margin = "0", this.subtitleOverlay.style.padding = "0";
+      const S = this.subtitleControlsPadding > 0 ? this.subtitleControlsPadding : B;
+      this.subtitleOverlay.style.paddingBottom = `${S}px`, this.subtitleOverlay.style.transformOrigin = "center center", this.subtitleOverlay.style.transform = k ? `rotate(${k}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 I = `${j.start.toFixed(3)}|${j.text}`;
+      if (I === this._lastRenderedSubtitleKey) return;
+      this._lastRenderedSubtitleKey = I;
+      const $ = "⟨⟨GHOST⟩⟩", q = j.text.indexOf($), w = q >= 0 ? j.text.slice(0, q) : j.text, N = q >= 0 ? j.text.slice(q + $.length) : j.text, C = (() => {
         const A3 = this._subtitleFontCache;
         if (A3 && A3.viewport === window.innerWidth) return A3.font;
         const v2 = document.createElement("div");
         v2.className = "movi-subtitle-line", v2.style.position = "absolute", v2.style.left = "-99999px", v2.style.top = "-99999px", v2.style.visibility = "hidden", v2.textContent = "M", this.subtitleOverlay.parentNode?.appendChild(v2);
         const b2 = window.getComputedStyle(v2), j2 = `${b2.fontStyle} ${b2.fontWeight} ${b2.fontSize} ${b2.fontFamily}`;
         return v2.remove(), this._subtitleFontCache = { viewport: window.innerWidth, font: j2 }, j2;
-      })(), q = (A3) => {
-        const v2 = A3.indexOf(T);
+      })(), L = (A3) => {
+        const v2 = A3.indexOf($);
         return v2 >= 0 ? A3.slice(0, v2) : A3;
       };
-      let w = I;
-      const N = this.subtitleCues.indexOf(this.activeSubtitleCue);
-      if (N >= 0) {
-        let A3 = S;
-        for (let v2 = N + 1; v2 < this.subtitleCues.length; v2++) {
+      let D = N;
+      const R = this.subtitleCues.indexOf(this.activeSubtitleCue);
+      if (R >= 0) {
+        let A3 = w;
+        for (let v2 = R + 1; v2 < this.subtitleCues.length; v2++) {
           const b2 = this.subtitleCues[v2];
           if (!b2?.text) break;
-          const j2 = q(b2.text);
-          if (j2.length > A3.length && j2.startsWith(A3)) A3 = j2, w = b2.text.length > j2.length ? b2.text : j2;
+          const j2 = L(b2.text);
+          if (j2.length > A3.length && j2.startsWith(A3)) A3 = j2, D = b2.text.length > j2.length ? b2.text : j2;
           else if (!j2.startsWith(A3)) break;
         }
       }
-      const C = q(w).replace(/<[^>]*>/g, ""), L = (this._subtitleMeasureCanvas ||= document.createElement("canvas")).getContext("2d");
-      let D = 0;
-      if (L) {
-        L.font = $;
-        for (const A3 of C.split("\n")) {
-          const v2 = Math.ceil(L.measureText(A3).width);
-          v2 > D && (D = v2);
+      const P = L(D).replace(/<[^>]*>/g, ""), H = (this._subtitleMeasureCanvas ||= document.createElement("canvas")).getContext("2d");
+      let M = 0;
+      if (H) {
+        H.font = C;
+        for (const A3 of P.split("\n")) {
+          const v2 = Math.ceil(H.measureText(A3).width);
+          v2 > M && (M = v2);
         }
       }
-      const R = S.split("\n"), P = this._lastRenderedSubtitlePlain, H = P && S.startsWith(P) && S.length > P.length ? P.split(/\s+/).filter(Boolean).length : 0;
-      this._lastRenderedSubtitlePlain = S;
-      let M = 0;
-      const G = R.map((A3) => {
+      const G = w.split("\n"), O = this._lastRenderedSubtitlePlain, J = O && w.startsWith(O) && w.length > O.length ? O.split(/\s+/).filter(Boolean).length : 0;
+      this._lastRenderedSubtitlePlain = w;
+      let U = 0;
+      const K = G.map((A3) => {
         const v2 = [];
         let b2 = A3.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#0?39;/g, "'").replace(/&#x27;/g, "'").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&");
         b2 = b2.replace(/<(\/?)i>/gi, (A4) => {
@@ -51727,24 +51729,24 @@ class CanvasRenderer {
         }
         const _2 = [], T2 = [];
         for (const A4 of k2) {
-          const v3 = (A5) => A5 < H ? _2 : T2;
+          const v3 = (A5) => A5 < J ? _2 : T2;
           if ("ws" === A4.kind) {
-            const b4 = v3(M);
-            if (b4 === _2 && 0 === _2.length && 0 === M) continue;
+            const b4 = v3(U);
+            if (b4 === _2 && 0 === _2.length && 0 === U) continue;
             b4.push(A4.text);
             continue;
           }
-          const b3 = v3(M);
+          const b3 = v3(U);
           if (b3 === T2 && 0 === T2.length && _2.length > 0) {
             const A5 = _2[_2.length - 1];
             /\s$/.test(A5) || _2.push(" ");
           }
-          b3.push(A4.text), M += 1;
+          b3.push(A4.text), U += 1;
         }
         const B2 = _2.join("").replace(/\s+$/, " "), S2 = T2.join(""), I2 = ['<div class="movi-subtitle-line">'];
         return B2 && I2.push(`<span class="movi-subtitle-static">${B2}</span>`), S2 && I2.push(`<span class="movi-subtitle-new">${S2}</span>`), I2.push("</div>"), I2.join("");
-      }).join(""), O = parseFloat(this.subtitleOverlay.style.width) || 0, J = O > 0 && D > 0 && D <= 0.92 * O, U = J ? Math.max(0, Math.floor((O - D) / 2)) : 0, K = J ? U > 0 ? ` style="padding-left:${U}px"` : "" : ' style="text-align:center"';
-      return void (this.subtitleOverlay.innerHTML = `<div class="movi-subtitle-anchor"${K}><div class="movi-subtitle-block">${G}</div></div>`);
+      }).join(""), V = parseFloat(this.subtitleOverlay.style.width) || 0, z = V > 0 && M > 0 && M <= 0.92 * V, X = z ? Math.max(0, Math.floor((V - M) / 2)) : 0, Y = z ? X > 0 ? ` style="padding-left:${X}px"` : "" : ' style="text-align:center"';
+      return void (this.subtitleOverlay.innerHTML = `<div class="movi-subtitle-anchor"${Y}><div class="movi-subtitle-block">${K}</div></div>`);
     }
   }
   setPlaybackRate(A) {
@@ -108895,7 +108897,7 @@ class MoviPlayer extends EventEmitter$1 {
     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;
@@ -109464,6 +109466,7 @@ class MoviElement extends HTMLElement {
   _posterCoverUrl = "";
   _posterCoverLoading = false;
   _coverArtBgEl = null;
+  _coverArtBgUrl = "";
   _coverArtResolved = false;
   _lastStripDispatched = null;
   controlsTimeout = null;
@@ -110418,7 +110421,7 @@ class MoviElement extends HTMLElement {
           if (A.preventDefault(), this.player && !this._pipWindow) {
             const A2 = 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>', `${A2}°`);
-            const v2 = this.shadowRoot?.querySelector(".movi-rotate-status");
+            const v2 = this.contextMenuRoot().querySelector(".movi-rotate-status");
             v2 && (v2.textContent = `${A2}°`), this.syncThumbnailRotation(A2);
           }
           break;
@@ -110583,18 +110586,20 @@ class MoviElement extends HTMLElement {
       } else {
         v.classList.remove("movi-context-menu-mobile");
         const j3 = A.querySelector(".movi-context-menu-backdrop");
-        if (j3 && (j3.style.display = "none"), this.classList.contains("movi-audio-strip")) {
-          v.style.position = "fixed", v.style.maxHeight = `${Math.max(180, window.innerHeight - 40)}px`, v.style.display = "block", v.style.visibility = "hidden";
+        j3 && (j3.style.display = "none");
+        const s4 = this.classList.contains("movi-audio-strip"), E3 = this.isFullscreenActive();
+        if (s4 || E3) {
+          E3 && this.classList.add("movi-menu-overflow"), v.style.position = "fixed", v.style.maxHeight = `${Math.max(180, window.innerHeight - 40)}px`, v.style.display = "block", v.style.visibility = "hidden";
           const A2 = v.offsetWidth, j4 = v.offsetHeight;
           v.style.visibility = "visible";
-          let s5 = b2.clientX, E4 = b2.clientY;
-          return s5 + A2 > window.innerWidth && (s5 = window.innerWidth - A2 - 10), s5 < 10 && (s5 = 10), E4 + j4 > window.innerHeight && (E4 = window.innerHeight - j4 - 10), E4 < 10 && (E4 = 10), v.style.left = `${s5}px`, v.style.top = `${E4}px`, this.clampMenuToViewport(v), requestAnimationFrame(() => v.classList.add("visible")), void (this._contextMenuVisible = true);
+          let s5 = b2.clientX, F4 = b2.clientY;
+          return s5 + A2 > window.innerWidth && (s5 = window.innerWidth - A2 - 10), s5 < 10 && (s5 = 10), F4 + j4 > window.innerHeight && (F4 = window.innerHeight - j4 - 10), F4 < 10 && (F4 = 10), v.style.left = `${s5}px`, v.style.top = `${F4}px`, this.clampMenuToViewport(v), requestAnimationFrame(() => v.classList.add("visible")), void (this._contextMenuVisible = true);
         }
         this.portalContextMenu(v), v.style.position = "fixed";
-        let s4 = b2.clientX, E3 = b2.clientY;
+        let F3 = b2.clientX, k2 = b2.clientY;
         v.style.maxHeight = `${Math.max(180, window.innerHeight - 40)}px`, v.style.display = "block", v.style.visibility = "hidden";
-        const F3 = v.offsetWidth, k2 = v.offsetHeight;
-        v.style.visibility = "visible", s4 + F3 > window.innerWidth - 10 && (s4 -= F3), E3 + k2 > window.innerHeight - 10 && (E3 -= k2), v.style.left = `${s4}px`, v.style.top = `${E3}px`, this.clampMenuToViewport(v);
+        const x2 = v.offsetWidth, _2 = v.offsetHeight;
+        v.style.visibility = "visible", F3 + x2 > window.innerWidth - 10 && (F3 -= x2), k2 + _2 > window.innerHeight - 10 && (k2 -= _2), v.style.left = `${F3}px`, v.style.top = `${k2}px`, this.clampMenuToViewport(v);
       }
       return requestAnimationFrame(() => {
         v.classList.add("visible");
@@ -110729,8 +110734,8 @@ class MoviElement extends HTMLElement {
       } else if ("hdr-toggle" === E2) this.hdr = !this.hdr, this.showOSD(OSD_hdr, this.hdr ? "HDR On" : "HDR Off"), j();
       else if ("rotate-video" === E2) {
         if (this.player && !this._pipWindow) {
-          const v2 = this.player.rotateVideo(), b3 = A.querySelector(".movi-rotate-status");
-          b3 && (b3.textContent = `${v2}°`), this.syncThumbnailRotation(v2), 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 ${v2}°`);
+          const A2 = this.player.rotateVideo(), v2 = this.contextMenuRoot().querySelector(".movi-rotate-status");
+          v2 && (v2.textContent = `${A2}°`), this.syncThumbnailRotation(A2), 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 ${A2}°`);
         }
         j();
       } else if ("loop-toggle" === E2) this.loop = !this.loop, this.showOSD(OSD_loop, this.loop ? "Loop On" : "Loop Off"), j();
@@ -116072,7 +116077,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);
@@ -116102,7 +116107,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);
@@ -117782,6 +117787,16 @@ class MoviElement extends HTMLElement {
       this._posterCoverUrl === v && (this._posterCoverLoading = false, this._posterCoverUrl = "", this.updateCoverArtOverlay());
     }, b.src = v;
   }
+  makeCoverArtBgUrl(A) {
+    try {
+      const v = 96, b = A.width / A.height, j = Math.max(1, b >= 1 ? v : Math.round(v * b)), s2 = Math.max(1, b >= 1 ? Math.round(v / b) : v), E = document.createElement("canvas");
+      E.width = j, E.height = s2;
+      const F = E.getContext("2d");
+      return F ? (F.drawImage(A, 0, 0, j, s2), E.toDataURL("image/jpeg", 0.7)) : "";
+    } catch {
+      return "";
+    }
+  }
   updateCoverArtOverlay() {
     const A = this.coverArtOverlay, v = this.coverArtCanvas;
     if (!A || !v) return;
@@ -117796,7 +117811,7 @@ class MoviElement extends HTMLElement {
     const H = v.getContext("2d");
     if (!H) return;
     if (H.save(), H.scale(D, D), this._coverArtBgEl) {
-      const A2 = this.coverArtBitmap ? "" : this._posterCoverUrl;
+      const A2 = this.coverArtBitmap ? this._coverArtBgUrl : this._posterCoverUrl;
       this._coverArtBgEl.style.backgroundImage = A2 ? `url("${A2.replace(/"/g, '\\"')}")` : "none";
     }
     H.clearRect(0, 0, C, L);
@@ -117994,12 +118009,12 @@ class MoviElement extends HTMLElement {
     };
     this.player.on("error", _), this.eventHandlers.set("error", () => this.player?.off("error", _));
     const T = (A2) => {
-      this.coverArtBitmap = A2, this._coverArtResolved = true, this.updateCoverArtOverlay(), A2 && (this.setMediaSessionArtworkFromBitmap(A2), this.dispatchEvent(new CustomEvent("coverart", { detail: { bitmap: A2, width: A2.width, height: A2.height }, bubbles: true, composed: true })));
+      this.coverArtBitmap = A2, this._coverArtBgUrl = A2 ? this.makeCoverArtBgUrl(A2) : "", this._coverArtResolved = true, this.updateCoverArtOverlay(), A2 && (this.setMediaSessionArtworkFromBitmap(A2), this.dispatchEvent(new CustomEvent("coverart", { detail: { bitmap: A2, width: A2.width, height: A2.height }, bubbles: true, composed: true })));
     };
     this.player.on("coverart", T), this.eventHandlers.set("coverart", () => this.player?.off("coverart", T));
   }
   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 {
     }
@@ -118527,22 +118542,24 @@ class MoviElement extends HTMLElement {
   set loop(A) {
     this._loop = !!A, this._loop ? this.setAttribute("loop", "") : this.removeAttribute("loop"), this.updateLoopUI();
   }
+  contextMenuRoot() {
+    return this._menuPortalRoot?.querySelector(".movi-context-menu") ? this._menuPortalRoot : this.shadowRoot;
+  }
   updateLoopUI() {
     const A = this.shadowRoot;
     if (!A) return;
-    const v = A.querySelector(".movi-loop-btn"), b = A.querySelector('.movi-context-menu-item[data-action="loop-toggle"]'), j = A.querySelector(".movi-loop-status"), s2 = A.querySelector(".movi-context-menu-loop-outline"), E = A.querySelector(".movi-context-menu-loop-filled");
-    this._loop ? (v?.classList.add("active"), b?.classList.add("movi-context-menu-active"), j && (j.textContent = "On"), s2 && (s2.style.display = "none"), E && (E.style.display = "block")) : (v?.classList.remove("active"), b?.classList.remove("movi-context-menu-active"), j && (j.textContent = "Off"), s2 && (s2.style.display = "block"), E && (E.style.display = "none"));
+    const v = this.contextMenuRoot(), b = A.querySelector(".movi-loop-btn"), j = v.querySelector('.movi-context-menu-item[data-action="loop-toggle"]'), s2 = v.querySelector(".movi-loop-status"), E = v.querySelector(".movi-context-menu-loop-outline"), F = v.querySelector(".movi-context-menu-loop-filled");
+    this._loop ? (b?.classList.add("active"), j?.classList.add("movi-context-menu-active"), s2 && (s2.textContent = "On"), E && (E.style.display = "none"), F && (F.style.display = "block")) : (b?.classList.remove("active"), j?.classList.remove("movi-context-menu-active"), s2 && (s2.textContent = "Off"), E && (E.style.display = "block"), F && (F.style.display = "none"));
   }
   updateAmbientUI() {
-    const A = this.shadowRoot;
-    if (!A) return;
-    const v = A.querySelector('.movi-context-menu-item[data-action="ambient-toggle"]'), b = A.querySelector(".movi-ambient-status"), j = A.querySelector(".movi-context-menu-ambient-outline"), s2 = A.querySelector(".movi-context-menu-ambient-filled");
+    if (!this.shadowRoot) return;
+    const A = this.contextMenuRoot(), v = A.querySelector('.movi-context-menu-item[data-action="ambient-toggle"]'), b = A.querySelector(".movi-ambient-status"), j = A.querySelector(".movi-context-menu-ambient-outline"), s2 = A.querySelector(".movi-context-menu-ambient-filled");
     this._ambientMode ? (v?.classList.add("movi-context-menu-active"), b && (b.textContent = "On"), j && (j.style.display = "none"), s2 && (s2.style.display = "block")) : (v?.classList.remove("movi-context-menu-active"), b && (b.textContent = "Off"), j && (j.style.display = "block"), s2 && (s2.style.display = "none"));
   }
   updateStableAudioUI(A = this.shadowRoot) {
     if (!A) return;
-    const v = this.player?.getStableAudio() ?? true, b = A.querySelector(".movi-stable-audio-btn"), j = A.querySelector('.movi-context-menu-item[data-action="stable-audio-toggle"]'), s2 = A.querySelector(".movi-stable-audio-status"), E = A.querySelector(".movi-context-menu-stable-outline"), F = A.querySelector(".movi-context-menu-stable-filled");
-    v ? (b?.classList.add("active"), j?.classList.add("movi-context-menu-active"), s2 && (s2.textContent = "On"), E && (E.style.display = "none"), F && (F.style.display = "block")) : (b?.classList.remove("active"), j?.classList.remove("movi-context-menu-active"), s2 && (s2.textContent = "Off"), E && (E.style.display = "block"), F && (F.style.display = "none"));
+    const v = this.player?.getStableAudio() ?? true, b = this.contextMenuRoot(), j = A.querySelector(".movi-stable-audio-btn"), s2 = b.querySelector('.movi-context-menu-item[data-action="stable-audio-toggle"]'), E = b.querySelector(".movi-stable-audio-status"), F = b.querySelector(".movi-context-menu-stable-outline"), k = b.querySelector(".movi-context-menu-stable-filled");
+    v ? (j?.classList.add("active"), s2?.classList.add("movi-context-menu-active"), E && (E.textContent = "On"), F && (F.style.display = "none"), k && (k.style.display = "block")) : (j?.classList.remove("active"), s2?.classList.remove("movi-context-menu-active"), E && (E.textContent = "Off"), F && (F.style.display = "block"), k && (k.style.display = "none"));
   }
   toggleNerdStats(A = this.shadowRoot) {
     if (!A) return;
@@ -119110,8 +119127,8 @@ class MoviElement extends HTMLElement {
     return !!this.player?.isHDRSupported?.();
   }
   updateHDRUI() {
-    const A = this.shadowRoot?.querySelector(".movi-hdr-btn"), v = this.shadowRoot?.querySelector(".movi-hdr-status"), b = this.shadowRoot?.querySelector('.movi-context-menu-item[data-action="hdr-toggle"]');
-    this._hdr ? (A?.classList.add("movi-hdr-active"), b?.classList.add("movi-context-menu-active"), v && (v.textContent = "On")) : (A?.classList.remove("movi-hdr-active"), b?.classList.remove("movi-context-menu-active"), v && (v.textContent = "Off"));
+    const A = this.contextMenuRoot(), v = this.shadowRoot?.querySelector(".movi-hdr-btn"), b = A.querySelector(".movi-hdr-status"), j = A.querySelector('.movi-context-menu-item[data-action="hdr-toggle"]');
+    this._hdr ? (v?.classList.add("movi-hdr-active"), j?.classList.add("movi-context-menu-active"), b && (b.textContent = "On")) : (v?.classList.remove("movi-hdr-active"), j?.classList.remove("movi-context-menu-active"), b && (b.textContent = "Off"));
   }
   async takeSnapshot() {
     if (this.player) try {