@muibook/components 19.6.0 → 20.1.0

package/dist/esm/components/mui-media-player/index.js

@@ -1,35 +1,62 @@
 import "../mui-button/index.js";
 import "../mui-body/index.js";
+import "../mui-dropdown/index.js";
 import "../mui-hint/index.js";
-import "../mui-range-input/index.js";
-import "../mui-icons/play-rectangle/index.js";
-import "../mui-icons/stop/index.js";
+import "../mui-icons/fullscreen/index.js";
+import "../mui-icons/pause/index.js";
+import "../mui-icons/picture-in-picture/index.js";
+import "../mui-icons/play-fill/index.js";
+import "../mui-icons/reload/index.js";
 import "../mui-icons/music-microphone/index.js";
-import "../mui-icons/movie-clapper/index.js";
-class m extends HTMLElement {
+import "../mui-icons/speaker-mute/index.js";
+import "../mui-icons/speaker-one-wave/index.js";
+import "../mui-icons/speaker-two-wave/index.js";
+import "../mui-icons/stop-fill/index.js";
+import "../mui-icons/vertical-ellipsis/index.js";
+import "../mui-link/index.js";
+import "../mui-spinner/index.js";
+const J = class J extends HTMLElement {
   constructor() {
-    super(), this.countdownMode = !1, this.attachShadow({ mode: "open" });
+    super(), this.countdownMode = !1, this.cleanupControlBindings = null, this.waveformAbortController = null, this.waveformResizeObserver = null, this.waveformThemeObserver = null, this.metadataResizeObserver = null, this.cleanupMetadataBindings = null, this.autoSizedMetadataItems = /* @__PURE__ */ new WeakMap(), this.waveformRenderId = 0, this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["src", "type", "autoplay", "muted", "loop", "poster", "prefer-native-controls"];
+    return [
+      "src",
+      "type",
+      "autoplay",
+      "muted",
+      "loop",
+      "poster",
+      "artwork",
+      "media-title",
+      "height",
+      "center-play",
+      "loading",
+      "controls",
+      "waveform"
+    ];
   }
   connectedCallback() {
-    this.render(), this.bindControls();
+    this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.render(), this.bindControls(), this.renderWaveform();
   }
-  attributeChangedCallback(e, t) {
-    e !== t && (this.render(), this.bindControls());
+  attributeChangedCallback(e, a, o) {
+    a !== o && (this.render(), this.bindControls(), this.renderWaveform());
+  }
+  disconnectedCallback() {
+    var e, a, o;
+    (e = this.cleanupControlBindings) == null || e.call(this), this.cleanupControlBindings = null, (a = this.cleanupMetadataBindings) == null || a.call(this), this.cleanupMetadataBindings = null, (o = this.metadataResizeObserver) == null || o.disconnect(), this.metadataResizeObserver = null, this.cleanupWaveform();
   }
   resolveType(e) {
-    const t = (this.getAttribute("type") || "").toLowerCase();
-    if (t === "video" || t === "audio" || t === "youtube" || t === "soundcloud")
-      return t;
+    const a = (this.getAttribute("type") || "").toLowerCase();
+    if (a === "video" || a === "audio" || a === "youtube" || a === "soundcloud")
+      return a;
     try {
-      const i = new URL(e), o = i.hostname.toLowerCase(), a = i.pathname.toLowerCase();
-      if (o === "youtu.be" || o.endsWith("youtube.com") || o.endsWith("youtube-nocookie.com"))
+      const o = new URL(e), l = o.hostname.toLowerCase(), m = o.pathname.toLowerCase();
+      if (l === "youtu.be" || l.endsWith("youtube.com") || l.endsWith("youtube-nocookie.com"))
         return "youtube";
-      if (o.endsWith("soundcloud.com")) return "soundcloud";
-      if (/\.(mp4|webm|mov|m4v|ogv)$/.test(a)) return "video";
-      if (/\.(mp3|wav|m4a|aac|flac|ogg|oga)$/.test(a)) return "audio";
+      if (l.endsWith("soundcloud.com")) return "soundcloud";
+      if (/\.(mp4|webm|mov|m4v|ogv)$/.test(m)) return "video";
+      if (/\.(mp3|wav|m4a|aac|flac|ogg|oga)$/.test(m)) return "audio";
     } catch {
       return "audio";
     }
@@ -37,10 +64,10 @@ class m extends HTMLElement {
   }
   getYouTubeEmbed(e) {
     try {
-      const t = new URL(e);
-      if (t.hostname.toLowerCase() === "youtu.be") return `https://www.youtube.com/embed/${t.pathname.replace("/", "")}?rel=0`;
-      const o = t.searchParams.get("v");
-      if (o) return `https://www.youtube.com/embed/${o}?rel=0`;
+      const a = new URL(e);
+      if (a.hostname.toLowerCase() === "youtu.be") return `https://www.youtube.com/embed/${a.pathname.replace("/", "")}?rel=0`;
+      const l = a.searchParams.get("v");
+      if (l) return `https://www.youtube.com/embed/${l}?rel=0`;
     } catch {
       return "";
     }
@@ -49,59 +76,683 @@ class m extends HTMLElement {
   getSoundcloudEmbed(e) {
     return `https://w.soundcloud.com/player/?url=${encodeURIComponent(e)}&auto_play=false&show_comments=false&show_teaser=false&visual=false`;
   }
+  cleanupWaveform() {
+    var e, a, o;
+    (e = this.waveformAbortController) == null || e.abort(), this.waveformAbortController = null, (a = this.waveformResizeObserver) == null || a.disconnect(), this.waveformResizeObserver = null, (o = this.waveformThemeObserver) == null || o.disconnect(), this.waveformThemeObserver = null, this.waveformRenderId += 1;
+  }
+  async getWaveformPeaks(e, a) {
+    const o = J.waveformPeaksCache.get(e);
+    if (o) return o;
+    const l = window.AudioContext || window.webkitAudioContext;
+    if (!l) return [];
+    const n = await (await fetch(e, { signal: a })).arrayBuffer(), f = new l();
+    try {
+      const p = await f.decodeAudioData(n), c = 192, y = Math.max(1, Math.floor(p.length / c)), C = Array.from({ length: c }, (b, w) => {
+        let g = 0;
+        const z = w * y, x = Math.min(p.length, z + y);
+        for (let T = 0; T < p.numberOfChannels; T += 1) {
+          const q = p.getChannelData(T);
+          for (let d = z; d < x; d += 1)
+            g = Math.max(g, Math.abs(q[d] || 0));
+        }
+        return Math.min(1, g);
+      });
+      return J.waveformPeaksCache.set(e, C), C;
+    } finally {
+      f.close();
+    }
+  }
+  getVisibleWaveformPeaks(e, a) {
+    const o = Math.min(e.length, Math.max(72, Math.min(192, Math.floor(a / 4.5))));
+    return o >= e.length ? e : Array.from({ length: o }, (l, m) => {
+      const n = Math.floor(m / o * e.length), f = Math.max(n + 1, Math.floor((m + 1) / o * e.length));
+      let p = 0;
+      for (let c = n; c < f; c += 1)
+        p = Math.max(p, e[c] || 0);
+      return p;
+    });
+  }
+  drawWaveform(e, a, o = 0, l = -1) {
+    const m = e.getBoundingClientRect();
+    if (!m.width || !m.height || !a.length) return;
+    const n = getComputedStyle(e), f = n.getPropertyValue("--media-player-waveform-color").trim() || "rgba(255, 255, 255, 0.42)", p = n.getPropertyValue("--media-player-waveform-mirror-color").trim() || "rgba(255, 255, 255, 0.18)", c = n.getPropertyValue("--media-player-waveform-active-color").trim() || "rgba(255, 255, 255, 0.78)", y = n.getPropertyValue("--media-player-waveform-active-mirror-color").trim() || "rgba(255, 255, 255, 0.32)", C = n.getPropertyValue("--media-player-waveform-current-color").trim() || "rgba(255, 255, 255, 0.64)", b = n.getPropertyValue("--media-player-waveform-current-mirror-color").trim() || "rgba(255, 255, 255, 0.24)", w = window.devicePixelRatio || 1, g = Math.max(1, Math.floor(m.width * w)), z = Math.max(1, Math.floor(m.height * w)), x = e.getContext("2d");
+    if (!x) return;
+    e.width = g, e.height = z, x.clearRect(0, 0, g, z);
+    const T = z / 2, q = Math.max(1, Math.round(2 * w)), d = this.getVisibleWaveformPeaks(a, m.width), V = g / d.length, k = Math.max(1, Math.floor(V - q) + w), i = Math.floor(Math.max(0, Math.min(1, o)) * d.length), v = l >= 0 ? Math.floor(Math.max(0, Math.min(1, l)) * d.length) : -1;
+    d.forEach((E, S) => {
+      const L = S * V + (V - k) / 2, I = Math.max(2 * w, E * T * 0.92);
+      let M = f, $ = p, F = 1;
+      v >= 0 ? v < i ? S <= v ? (M = c, $ = y) : S <= i ? (M = C, $ = b) : (M = f, $ = p) : S <= i ? (M = c, $ = y) : S <= v ? (M = c, $ = y, F = 0.5) : (M = f, $ = p) : S <= i ? (M = c, $ = y) : (M = f, $ = p), x.globalAlpha = F, x.fillStyle = M, x.fillRect(L, T - I, k, I), x.fillStyle = $, x.fillRect(L, T, k, I * 0.72);
+    }), x.globalAlpha = 1;
+  }
+  getMetadataAvatarChipSize() {
+    const e = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 10, o = this.getBoundingClientRect().width / e;
+    return o < 52 ? "small" : o < 70 ? "medium" : "large";
+  }
+  getMetadataButtonSize() {
+    const e = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 10, o = this.getBoundingClientRect().width / e;
+    return o < 52 ? "x-small" : o < 70 ? "small" : "medium";
+  }
+  syncMetaSlotItems() {
+    const e = this.getMetadataAvatarChipSize(), a = this.getMetadataButtonSize();
+    Array.from(this.children).forEach((o) => {
+      const l = o.getAttribute("slot"), m = o.tagName.toLowerCase(), n = l === "meta-before" || l === "meta-after", f = m === "mui-avatar-chip" ? e : m === "mui-button" ? a : "";
+      if (!n || !f) return;
+      const p = this.autoSizedMetadataItems.get(o);
+      if (!(o.hasAttribute("size") && !p)) {
+        if (p && o.getAttribute("size") !== p) {
+          this.autoSizedMetadataItems.delete(o);
+          return;
+        }
+        o.setAttribute("size", f), this.autoSizedMetadataItems.set(o, f);
+      }
+    });
+  }
+  syncMetadataSlotContent() {
+    const e = (a) => {
+      a.tagName.toLowerCase() === "mui-avatar-chip" && a.setAttribute("usage", "media-player"), a.querySelectorAll("mui-avatar-chip").forEach((o) => {
+        o.setAttribute("usage", "media-player");
+      });
+    };
+    ["meta-before", "meta-after"].forEach((a) => {
+      var l;
+      this.querySelectorAll(`[slot="${a}"]`).forEach(e);
+      const o = (l = this.shadowRoot) == null ? void 0 : l.querySelector(`slot[name="${a}"]`);
+      o == null || o.assignedElements({ flatten: !0 }).forEach(e);
+    }), this.syncMetaSlotItems();
+  }
+  bindMetadataSlots() {
+    var o, l, m;
+    (o = this.cleanupMetadataBindings) == null || o.call(this);
+    const e = [], a = () => this.syncMetadataSlotContent();
+    (l = this.shadowRoot) == null || l.querySelectorAll('slot[name="meta-before"], slot[name="meta-after"]').forEach((n) => {
+      n.addEventListener("slotchange", a), e.push(() => n.removeEventListener("slotchange", a));
+    }), (m = this.metadataResizeObserver) == null || m.disconnect(), this.metadataResizeObserver = new ResizeObserver(a), this.metadataResizeObserver.observe(this), e.push(() => {
+      var n;
+      (n = this.metadataResizeObserver) == null || n.disconnect(), this.metadataResizeObserver = null;
+    }), this.cleanupMetadataBindings = () => {
+      e.forEach((n) => n());
+    };
+  }
+  async renderWaveform() {
+    if (this.cleanupWaveform(), !this.shadowRoot || !this.hasAttribute("waveform")) return;
+    const e = this.getAttribute("src") || "", a = this.shadowRoot.querySelector(".audio-waveform");
+    if (!e || !a) return;
+    const o = this.waveformRenderId, l = new AbortController();
+    this.waveformAbortController = l;
+    try {
+      const m = await this.getWaveformPeaks(e, l.signal);
+      if (l.signal.aborted || o !== this.waveformRenderId || !m.length) return;
+      a.__muiWaveformPeaks = m;
+      const n = () => this.drawWaveform(
+        a,
+        m,
+        Number(a.dataset.progress || 0),
+        a.dataset.hoverProgress ? Number(a.dataset.hoverProgress) : -1
+      ), f = () => {
+        requestAnimationFrame(n), requestAnimationFrame(() => requestAnimationFrame(n)), window.setTimeout(n, 80), window.setTimeout(n, 180);
+      };
+      f(), this.waveformResizeObserver = new ResizeObserver(n), this.waveformResizeObserver.observe(a), this.waveformThemeObserver = new MutationObserver(f), this.waveformThemeObserver.observe(document.documentElement, {
+        attributes: !0,
+        attributeFilter: ["class", "style", "data-brand", "data-theme", "theme"]
+      }), document.body && this.waveformThemeObserver.observe(document.body, {
+        attributes: !0,
+        attributeFilter: ["class", "style", "data-brand", "data-theme", "theme"]
+      });
+    } catch {
+      a.hidden = !0;
+    }
+  }
   formatTime(e) {
-    const t = Number.isFinite(e) ? Math.max(0, Math.floor(e)) : 0, i = Math.floor(t / 60), o = t % 60;
-    return `${i}:${String(o).padStart(2, "0")}`;
+    const a = Number.isFinite(e) ? Math.max(0, Math.floor(e)) : 0, o = Math.floor(a / 60), l = a % 60;
+    return `${o}:${String(l).padStart(2, "0")}`;
+  }
+  getControlIcon(e) {
+    const a = {
+      play: "mui-icon-play-fill",
+      pause: "mui-icon-pause",
+      stop: "mui-icon-stop-fill",
+      reload: "mui-icon-reload",
+      muted: "mui-icon-speaker-mute",
+      volumeLow: "mui-icon-speaker-one-wave",
+      volumeHigh: "mui-icon-speaker-two-wave",
+      pip: "mui-icon-picture-in-picture",
+      fullscreen: "mui-icon-fullscreen",
+      more: "mui-icon-vertical-ellipsis"
+    }[e];
+    return `<${a} class="control-icon" size="medium" aria-hidden="true"></${a}>`;
+  }
+  getVolumeIconName(e, a) {
+    return e || a === 0 ? "muted" : a < 0.5 ? "volumeLow" : "volumeHigh";
+  }
+  getControlsMode() {
+    const e = (this.getAttribute("controls") || "").toLowerCase();
+    return e === "player" || e === "none" ? e : "player";
+  }
+  renderSeekControl() {
+    return '<input class="range seek" data-action="seek" type="range" min="0" max="0" value="0" step="0.01" aria-label="Media seek" />';
+  }
+  renderVolumeControl(e) {
+    return `<input class="range volume" data-action="volume" type="range" min="0" max="1" value="${e ? "0" : "1"}" step="0.01" aria-label="Volume" />`;
+  }
+  renderPlayHintControl() {
+    return `<mui-hint placement="top" disable-on-touch>
+      <mui-button slot="trigger" data-action="play" size="small" icon-only variant="tertiary" aria-label="Play media">
+        ${this.getControlIcon("play")}
+      </mui-button>
+      <span data-hint="play">Play</span>
+    </mui-hint>`;
+  }
+  renderTimeControl() {
+    return `<mui-hint placement="top" disable-on-touch>
+      <mui-button slot="trigger" data-action="time-mode" size="small" variant="tertiary" aria-pressed="false" aria-label="Toggle time display">
+        <span class="time-label-full">0:00 / 0:00</span>
+        <span class="time-label-compact">0:00</span>
+      </mui-button>
+      Time
+    </mui-hint>`;
+  }
+  renderMuteControl(e) {
+    return `<mui-hint placement="top" disable-on-touch>
+      <mui-button slot="trigger" data-action="mute" size="small" icon-only variant="tertiary" aria-label="Mute media">
+        ${this.getControlIcon(this.getVolumeIconName(e, e ? 0 : 1))}
+      </mui-button>
+      Volume
+    </mui-hint>`;
+  }
+  renderPictureInPictureControl() {
+    return `<mui-hint placement="top" disable-on-touch>
+      <mui-button slot="trigger" data-action="pip" size="small" icon-only variant="tertiary" aria-label="Picture in picture" aria-pressed="false">
+        ${this.getControlIcon("pip")}
+      </mui-button>
+      Picture in picture
+    </mui-hint>`;
+  }
+  shouldRenderPictureInPictureControl() {
+    return "pictureInPictureEnabled" in document || "webkitSupportsPresentationMode" in HTMLVideoElement.prototype || "webkitSetPresentationMode" in HTMLVideoElement.prototype;
+  }
+  renderFullscreenControl() {
+    return `<mui-hint placement="top" disable-on-touch>
+      <mui-button slot="trigger" data-action="fullscreen" size="small" icon-only variant="tertiary" aria-label="Fullscreen" aria-pressed="false">
+        ${this.getControlIcon("fullscreen")}
+      </mui-button>
+      Fullscreen
+    </mui-hint>`;
+  }
+  renderOptionsMenu(e, a) {
+    return `<mui-dropdown class="options-menu" position="right" vertical-position="up" zindex="4" style="--dropdown-offset: ${a};">
+      <mui-button slot="action" data-action="options" size="small" icon-only variant="tertiary" aria-label="Media options">
+        ${this.getControlIcon("more")}
+      </mui-button>
+      <mui-link class="options-item" role="menuitem" variant="tertiary" size="small" href="${e}" download>
+        Download
+      </mui-link>
+      <mui-link class="options-item" role="menuitem" variant="tertiary" size="small" href="${e}" target="_blank">
+        Open source
+      </mui-link>
+    </mui-dropdown>`;
+  }
+  renderOverlayControls(e, a, o) {
+    return `<div class="controls-row scrub-row">
+      ${this.renderSeekControl()}
+    </div>
+    <div class="controls-row action-row">
+      <span class="controls-left">
+        ${this.renderPlayHintControl()}
+        ${this.renderTimeControl()}
+      </span>
+      <span class="controls-right">
+        ${this.renderMuteControl(a)}
+        ${this.renderVolumeControl(a)}
+        ${e === "video" && this.shouldRenderPictureInPictureControl() ? this.renderPictureInPictureControl() : ""}
+        ${e === "video" ? this.renderFullscreenControl() : ""}
+        ${this.renderOptionsMenu(o, e === "video" ? "var(--space-500)" : "var(--space-400)")}
+      </span>
+    </div>`;
+  }
+  renderCompactAudioControls(e, a) {
+    return `<div class="controls-row compact-scrub-row">
+      ${this.renderSeekControl()}
+    </div>
+    <div class="controls-row compact-action-row">
+      <span class="controls-left">
+        ${this.renderPlayHintControl()}
+        ${this.renderTimeControl()}
+      </span>
+      <span class="controls-right">
+        ${this.renderMuteControl(e)}
+        ${this.renderVolumeControl(e)}
+        ${this.renderOptionsMenu(a, "var(--space-400)")}
+      </span>
+    </div>`;
+  }
+  renderPlayerControls(e, a, o, l, m) {
+    const n = e === "audio" ? "medium" : "large", f = e === "video" || a, p = f ? this.renderOverlayControls(e, o, l) : this.renderCompactAudioControls(o, l), c = `<mui-icon-play-fill class="control-icon" size="${n}" aria-hidden="true"></mui-icon-play-fill>`;
+    return `${e === "video" ? m ? `<mui-button class="center-play" data-action="play" variant="tertiary" type="button" aria-label="Play media" size="${n}">
+      ${c}
+    </mui-button>` : `<div class="center-play" aria-hidden="true">
+      ${c}
+    </div>` : a ? `<mui-button class="center-play" data-action="play" variant="tertiary" type="button" aria-label="Play media" size="${n}">
+      ${c}
+    </mui-button>` : ""}
+    ${e === "audio" && a ? '<div class="controls-hover-zone" aria-hidden="true"></div>' : ""}
+    <div class="controls" part="controls">
+      ${p}
+    </div>
+    ${f ? '<span class="controls-peek" aria-hidden="true"></span>' : ""}`;
   }
   bindControls() {
-    if (!this.shadowRoot) return;
+    var xe;
+    if ((xe = this.cleanupControlBindings) == null || xe.call(this), this.cleanupControlBindings = null, !this.shadowRoot) return;
     const e = this.shadowRoot.querySelector("video, audio");
     if (!e) return;
-    const t = this.shadowRoot.querySelector('[data-action="play"]'), i = this.shadowRoot.querySelector('[data-action="mute"]'), o = this.shadowRoot.querySelector('[data-action="seek"]'), a = this.shadowRoot.querySelector('[data-action="time-mode"]');
-    if (!!!(t || i || o || a)) return;
-    let d = null, l = null;
-    const r = () => {
-      const s = e.paused;
-      if (t == null || t.setAttribute("aria-label", s ? "Play media" : "Pause media"), t && s !== d && (t.innerHTML = s ? '<mui-icon-play-rectangle size="x-small"></mui-icon-play-rectangle>' : '<mui-icon-stop size="x-small"></mui-icon-stop>', d = s), i && e.muted !== l && (i.setAttribute("aria-label", e.muted ? "Unmute media" : "Mute media"), l = e.muted), o) {
-        const n = o, c = Number.isFinite(e.duration) ? e.duration : 0;
-        o.setAttribute("max", String(c || 0)), n.value = e.currentTime || 0;
+    const a = this.shadowRoot.querySelector(".frame"), o = Array.from(this.shadowRoot.querySelectorAll('[data-action="play"]')), l = this.shadowRoot.querySelector(".center-play"), m = this.shadowRoot.querySelector('.center-play[data-action="play"]'), n = o.filter((t) => t !== m), f = this.shadowRoot.querySelector('[data-hint="play"]'), p = this.shadowRoot.querySelector('[data-action="mute"]'), c = this.shadowRoot.querySelector('[data-action="seek"]'), y = this.shadowRoot.querySelector('[data-action="volume"]'), C = this.shadowRoot.querySelector('[data-action="time-mode"]'), b = this.shadowRoot.querySelector('[data-action="pip"]'), w = b == null ? void 0 : b.closest("mui-hint"), g = this.shadowRoot.querySelector('[data-action="fullscreen"]'), z = this.shadowRoot.querySelector(".controls"), x = this.shadowRoot.querySelector(".controls-peek"), T = this.shadowRoot.querySelector(".controls-hover-zone"), q = this.shadowRoot.querySelector(".options-menu"), d = this.shadowRoot.querySelector(".audio-waveform");
+    if (!!!(o.length || p || c || y || C || b || g)) return;
+    const k = e instanceof HTMLVideoElement, i = k ? e : null, v = a, E = document, S = !!(a && !a.classList.contains("audio-player-only"));
+    let L = null, I = null, M = null, $ = null, F = !1, W = 0, re = 0, Q = 0, ee = 0, oe = 0, ie = 0, me = 0, pe = 0, R = !1, _ = !1;
+    const he = [], s = (t, r, u) => {
+      t && (t.addEventListener(r, u), he.push(() => t.removeEventListener(r, u)));
+    }, U = (t, r, u) => {
+      if (!t) return;
+      const P = u > 0 ? Math.max(0, Math.min(100, r / u * 100)) : 0;
+      t.style.setProperty("--media-player-range-progress", `${P}%`), t.classList.contains("is-previewing") || t.style.setProperty("--media-player-range-solid-end", `${P}%`);
+    }, Pe = (t) => {
+      if (!c) return;
+      const r = c.getBoundingClientRect(), u = Number(c.max || 0);
+      if (!r.width || u <= 0) return;
+      const P = Math.max(0, Math.min(100, (t.clientX - r.left) / r.width * 100)), Z = Math.max(0, Math.min(100, (Number(c.value || 0) || 0) / u * 100)), G = Math.min(Z, P), qe = Math.max(Z, P);
+      c.classList.add("is-previewing"), c.style.setProperty("--media-player-range-solid-end", `${G}%`), c.style.setProperty("--media-player-range-preview-start", `${G}%`), c.style.setProperty("--media-player-range-preview-end", `${qe}%`);
+    }, Ce = () => {
+      if (!c) return;
+      c.classList.remove("is-previewing");
+      const t = Number.isFinite(e.duration) ? e.duration : 0;
+      U(c, Number(c.value || 0), t);
+    }, te = () => {
+      if (!c || F) return;
+      const t = Number.isFinite(e.duration) ? e.duration : 0, r = e.currentTime || 0;
+      c.max = String(t || 0), c.value = String(r), U(c, r, t);
+    }, O = () => {
+      if (!(d != null && d.__muiWaveformPeaks)) return;
+      const t = Number.isFinite(e.duration) ? e.duration : 0, r = t > 0 ? Math.max(0, Math.min(1, (e.currentTime || 0) / t)) : 0;
+      d.dataset.progress = String(r);
+      const u = d.dataset.hoverProgress ? Number(d.dataset.hoverProgress) : -1;
+      this.drawWaveform(d, d.__muiWaveformPeaks, r, u);
+    }, ze = () => {
+      if (!y) return;
+      const t = e.muted ? 0 : e.volume;
+      t !== M && (y.value = String(t), U(y, t, 1), M = t);
+    }, Me = () => {
+      if (!p) return;
+      const t = this.getVolumeIconName(e.muted, e.volume);
+      t !== $ && (p.innerHTML = this.getControlIcon(t), $ = t);
+    }, Y = () => {
+      if (!C) return;
+      const t = Number.isFinite(e.duration) ? e.duration : 0, r = Math.max(0, t - e.currentTime), u = this.countdownMode ? `-${this.formatTime(r)} / ${this.formatTime(t)}` : `${this.formatTime(e.currentTime)} / ${this.formatTime(t)}`, P = this.countdownMode ? `-${this.formatTime(r)}` : this.formatTime(e.currentTime), Z = C.querySelector(".time-label-full"), G = C.querySelector(".time-label-compact");
+      Z && (Z.textContent = u), G && (G.textContent = P), C.setAttribute("aria-label", `Toggle time display, ${u}`), C.setAttribute("aria-pressed", String(this.countdownMode));
+    }, ve = () => {
+      te(), Y(), O(), !e.paused && !e.ended && (W = requestAnimationFrame(ve));
+    }, ae = () => {
+      cancelAnimationFrame(W), W = requestAnimationFrame(ve);
+    }, Se = () => `<mui-spinner class="center-play-loader" size="${k ? "xx-large" : "medium"}" color="inverted" label="Loading media"></mui-spinner>`, $e = (t) => {
+      l && (l.innerHTML = this.getControlIcon(t ? "play" : "pause"));
+    }, ne = () => this.hasAttribute("loading"), Ae = () => !!(a != null && a.classList.contains("has-center-play")), fe = () => {
+      window.clearTimeout(ie), ie = 0;
+    }, ye = (t) => {
+      const r = ne() || t && !Ae();
+      a == null || a.classList.toggle("is-buffering", r), l && (l.innerHTML = r ? Se() : this.getControlIcon(e.paused ? "play" : "pause"));
+    }, A = (t, r = !1) => {
+      if (fe(), !t || ne() || !r) {
+        ye(t);
+        return;
+      }
+      ie = window.setTimeout(() => {
+        R && !e.paused && !e.ended && ye(!0);
+      }, 200);
+    }, N = () => {
+      window.clearTimeout(Q), window.clearTimeout(ee), Q = 0, ee = 0, a == null || a.classList.remove("is-controls-revealing", "is-controls-ready");
+    }, H = (t = !1) => {
+      !S || !a || !t && (a.classList.contains("is-controls-ready") || a.classList.contains("is-controls-revealing")) || (window.clearTimeout(Q), a.classList.remove("is-controls-ready"), a.classList.add("is-controls-revealing"), Q = window.setTimeout(() => {
+        a.classList.remove("is-controls-revealing"), a.classList.add("is-controls-ready");
+      }, 300));
+    }, ge = () => {
+      H(!0), window.clearTimeout(ee), ee = window.setTimeout(() => {
+        N();
+      }, 3200);
+    }, Te = (t) => {
+      a && (a.classList.contains("has-center-play") || (window.clearTimeout(oe), l && (l.innerHTML = this.getControlIcon(t ? "pause" : "play")), a.classList.add("show-play-feedback"), oe = window.setTimeout(() => {
+        a.classList.remove("show-play-feedback"), X(e.paused, !0);
+      }, 650)));
+    }, se = () => a && k && !e.paused && !e.ended, j = () => {
+      window.clearTimeout(re), re = 0, a == null || a.classList.remove("is-video-inactive");
+    }, B = () => {
+      j(), se() && (re = window.setTimeout(() => {
+        se() && !_ && (N(), a == null || a.classList.add("is-video-inactive"));
+      }, 1600));
+    }, be = (t) => {
+      if (!a) return !1;
+      const r = a.getBoundingClientRect().bottom - t.clientY;
+      return r >= 0 && r <= 24;
+    }, Re = (t) => {
+      if (!(t instanceof PointerEvent) || !a || t.pointerType === "touch" || t.clientX === me && t.clientY === pe) return;
+      me = t.clientX, pe = t.clientY;
+      const r = !!(z && t.composedPath().includes(z));
+      if (be(t) || r) {
+        H(k && a.classList.contains("is-video-inactive")), k && B();
+        return;
+      }
+      _ || N(), k && B();
+    }, Ee = (t) => {
+      !(t instanceof PointerEvent) || t.pointerType === "touch" || be(t) || _ || (N(), le());
+    }, Le = (t) => {
+      if (!S) return;
+      const r = t.composedPath();
+      if (r.includes(z) || x && r.includes(x) || l && r.includes(l) || d && r.includes(d) || r.some(
+        (P) => P instanceof HTMLElement && (P.classList.contains("controls-hover-zone") || P.classList.contains("meta-overlay-background") || P.classList.contains("media-meta-slot"))
+      ))
+        return;
+      const u = !e.paused;
+      ce(), le(), N(), k && Te(u), k && B();
+    }, X = (t, r = !1) => {
+      o.forEach((u) => {
+        u.setAttribute("aria-label", t ? "Play media" : "Pause media"), u.setAttribute("aria-pressed", String(!t));
+      }), a == null || a.classList.toggle("is-playing", !t), a == null || a.classList.toggle("is-paused", t), o.length && (r || t !== L) && (n.forEach((u) => {
+        u.innerHTML = this.getControlIcon(t ? "play" : "pause");
+      }), a != null && a.classList.contains("is-buffering") || $e(t), f && (f.textContent = t ? "Play" : "Pause"), L = t);
+    }, we = () => !!(i && "pictureInPictureEnabled" in document && document.pictureInPictureEnabled && "requestPictureInPicture" in i), ke = () => {
+      var t;
+      return !!((t = i == null ? void 0 : i.webkitSupportsPresentationMode) != null && t.call(i, "picture-in-picture") && i.webkitSetPresentationMode);
+    }, Ie = () => !!(i && document.pictureInPictureElement === i || (i == null ? void 0 : i.webkitPresentationMode) === "picture-in-picture"), Fe = () => !!(v != null && v.requestFullscreen || v != null && v.webkitRequestFullscreen || v != null && v.webkitRequestFullScreen || i != null && i.webkitSupportsFullscreen || i != null && i.webkitEnterFullscreen), Be = () => !!(document.fullscreenElement === v || E.webkitFullscreenElement === v || i != null && i.webkitDisplayingFullscreen || (i == null ? void 0 : i.webkitPresentationMode) === "fullscreen"), h = () => {
+      const t = e.paused;
+      X(t), ne() ? A(!0) : (t || e.ended) && (R = !1, A(!1)), p && e.muted !== I && (p.setAttribute("aria-label", e.muted ? "Unmute media" : "Mute media"), I = e.muted), Me(), b && (ke() || we() ? (w == null || w.removeAttribute("hidden"), b.removeAttribute("disabled"), b.setAttribute("aria-pressed", String(Ie()))) : (w == null || w.setAttribute("hidden", ""), b.setAttribute("disabled", ""), b.setAttribute("aria-pressed", "false"))), g && a && (Fe() ? (g.removeAttribute("disabled"), g.setAttribute("aria-pressed", String(Be()))) : (g.setAttribute("disabled", ""), g.setAttribute("aria-pressed", "false"))), te(), ze(), Y(), O(), se() || j();
+    }, le = () => {
+      var r;
+      const t = (r = this.shadowRoot) == null ? void 0 : r.activeElement;
+      t && (a != null && a.contains(t)) && t.blur();
+    }, ce = () => {
+      e.paused ? (R = !0, A(!0), X(!1, !0), e.play().catch(() => {
+        A(!1), h();
+      })) : (R = !1, A(!1), X(!0, !0), e.pause());
+    };
+    s(this, "keydown", (t) => {
+      if (!(t instanceof KeyboardEvent) || t.key !== " " && t.code !== "Space") return;
+      const u = t.composedPath()[0];
+      u.tagName.toLowerCase() === "button" || u.tagName.toLowerCase() === "input" || u.tagName.toLowerCase() === "mui-button" || (t.preventDefault(), ce(), k && H(!0));
+    }), o.forEach((t) => s(t, "click", ce)), s(a, "pointerleave", (t) => {
+      t instanceof PointerEvent && t.pointerType === "touch" || (N(), !(!S || e.paused) && le());
+    }), s(a, "pointerdown", Le), s(a, "pointermove", Re), s(z, "pointerleave", Ee), s(q, "dropdown-toggle", (t) => {
+      var r;
+      if (_ = !!((r = t.detail) != null && r.open), _) {
+        H(!0);
+        return;
+      }
+      k && B();
+    }), s(T, "pointerdown", (t) => {
+      if (t instanceof PointerEvent && t.pointerType === "touch") {
+        ge();
+        return;
       }
-      if (a) {
-        const n = Number.isFinite(e.duration) ? e.duration : 0, c = Math.max(0, n - e.currentTime);
-        a.textContent = this.countdownMode ? `-${this.formatTime(c)} / ${this.formatTime(n)}` : `${this.formatTime(e.currentTime)} / ${this.formatTime(n)}`, a.setAttribute("aria-pressed", String(this.countdownMode));
+      H(!0);
+    }), s(x, "pointerdown", (t) => {
+      if (t.preventDefault(), t.stopPropagation(), t instanceof PointerEvent && t.pointerType === "touch") {
+        ge();
+        return;
       }
+      H(!0);
+    }), s(p, "click", () => {
+      e.muted = !e.muted, h();
+    }), s(c, "pointerdown", () => {
+      F = !0;
+    }), s(c, "pointerup", () => {
+      F = !1, h(), e.paused || ae();
+    }), s(c, "input", () => {
+      if (!c) return;
+      const t = Number.isFinite(e.duration) ? e.duration : 0, r = Number(c.value || 0);
+      U(c, r, t), e.currentTime = r, Y(), O();
+    }), s(c, "pointermove", (t) => {
+      t instanceof PointerEvent && t.pointerType !== "touch" && Pe(t);
+    }), s(c, "pointerleave", Ce);
+    let K = !1;
+    const de = (t) => {
+      if (!d) return 0;
+      const r = d.getBoundingClientRect();
+      return r.width ? Math.max(0, Math.min(1, (t.clientX - r.left) / r.width)) : 0;
     };
-    t == null || t.addEventListener("click", () => {
-      e.paused ? e.play().catch(() => {
-      }) : e.pause();
-    }), i == null || i.addEventListener("click", () => {
-      e.muted = !e.muted, r();
-    }), o == null || o.addEventListener("input", (s) => {
-      const n = s.detail || {};
-      e.currentTime = Number(n.value || 0), r();
-    }), a == null || a.addEventListener("click", () => {
-      this.countdownMode = !this.countdownMode, r();
-    }), e.addEventListener("timeupdate", r), e.addEventListener("loadedmetadata", r), e.addEventListener("play", r), e.addEventListener("pause", r), r();
+    if (d) {
+      s(d, "pointerdown", (r) => {
+        if (!(r instanceof PointerEvent)) return;
+        r.preventDefault(), r.stopPropagation(), K = !0, F = !0, d.setPointerCapture(r.pointerId);
+        const u = de(r), P = Number.isFinite(e.duration) ? e.duration : 0;
+        e.currentTime = u * P, d.dataset.hoverProgress = String(u), te(), Y(), O();
+      }), s(d, "pointermove", (r) => {
+        if (r instanceof PointerEvent) {
+          if (K) {
+            const u = de(r), P = Number.isFinite(e.duration) ? e.duration : 0;
+            e.currentTime = u * P, d.dataset.hoverProgress = String(u), te(), Y(), O();
+          } else if (r.pointerType !== "touch") {
+            const u = de(r);
+            d.dataset.hoverProgress = String(u), O();
+          }
+        }
+      });
+      const t = (r) => {
+        r instanceof PointerEvent && K && (d.releasePointerCapture(r.pointerId), K = !1, F = !1, d.dataset.hoverProgress = "", h(), e.paused || ae());
+      };
+      s(d, "pointerup", t), s(d, "pointercancel", t), s(d, "pointerleave", (r) => {
+        r instanceof PointerEvent && (K || (d.dataset.hoverProgress = "", O()));
+      });
+    }
+    s(y, "input", () => {
+      if (!y) return;
+      const t = Math.max(0, Math.min(1, Number(y.value || 0)));
+      e.volume = t, e.muted = t === 0, U(y, t, 1), h();
+    }), s(C, "click", () => {
+      this.countdownMode = !this.countdownMode, h();
+    });
+    const D = async () => {
+      i != null && i.paused && (await i.play(), X(!1, !0));
+    };
+    s(b, "click", async () => {
+      var t, r;
+      if (i) {
+        try {
+          if (ke()) {
+            if (i.webkitPresentationMode === "picture-in-picture") {
+              (t = i.webkitSetPresentationMode) == null || t.call(i, "inline"), h();
+              return;
+            }
+            await D(), (r = i.webkitSetPresentationMode) == null || r.call(i, "picture-in-picture");
+          } else if (we())
+            document.pictureInPictureElement === i ? await document.exitPictureInPicture() : (await D(), await i.requestPictureInPicture());
+          else
+            return;
+        } catch {
+          return;
+        }
+        h();
+      }
+    }), s(g, "click", async () => {
+      var t;
+      if (!(!a || !v)) {
+        try {
+          if (document.fullscreenElement === v)
+            await document.exitFullscreen();
+          else if (E.webkitFullscreenElement === v)
+            await ((t = E.webkitExitFullscreen) == null ? void 0 : t.call(E));
+          else if (i != null && i.webkitDisplayingFullscreen && i.webkitExitFullscreen)
+            i.webkitExitFullscreen();
+          else if (v.requestFullscreen)
+            await D(), await v.requestFullscreen();
+          else if (v.webkitRequestFullscreen)
+            await D(), await v.webkitRequestFullscreen();
+          else if (v.webkitRequestFullScreen)
+            await D(), await v.webkitRequestFullScreen();
+          else if (i != null && i.webkitEnterFullscreen)
+            await D(), i.webkitEnterFullscreen();
+          else
+            return;
+        } catch {
+          return;
+        }
+        h();
+      }
+    }), s(e, "timeupdate", h), s(e, "loadedmetadata", h), s(e, "loadeddata", h), s(e, "canplay", h), s(e, "canplaythrough", h), s(e, "volumechange", h), s(e, "enterpictureinpicture", h), s(e, "leavepictureinpicture", h), s(e, "webkitbeginfullscreen", h), s(e, "webkitendfullscreen", h), s(e, "webkitpresentationmodechanged", h), s(document, "fullscreenchange", () => {
+      h(), B();
+    }), s(document, "webkitfullscreenchange", () => {
+      h(), B();
+    }), s(e, "play", () => {
+      R = !0, h(), ae(), B();
+    }), s(e, "waiting", () => {
+      R && !e.paused && !e.ended && A(!0, !0);
+    }), s(e, "stalled", () => {
+      R && !e.paused && !e.ended && A(!0, !0);
+    }), s(e, "seeking", () => {
+      R && !e.paused && !e.ended && A(!0, !0);
+    }), s(e, "playing", () => {
+      A(!1), h(), ae(), B();
+    }), s(e, "seeked", () => {
+      (e.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA || e.paused || e.ended) && A(!1), h();
+    }), s(e, "pause", () => {
+      R = !1, A(!1), cancelAnimationFrame(W), j(), h();
+    }), s(e, "ended", () => {
+      R = !1, A(!1), cancelAnimationFrame(W), j(), h();
+    }), this.cleanupControlBindings = () => {
+      cancelAnimationFrame(W), window.clearTimeout(oe), fe(), N(), j(), he.forEach((t) => t());
+    }, h();
   }
   render() {
     if (!this.shadowRoot) return;
-    const e = this.getAttribute("src") || "", t = this.getAttribute("poster") || "", i = this.hasAttribute("muted"), o = this.hasAttribute("autoplay"), a = this.hasAttribute("loop"), u = this.resolveType(e), d = this.getAttribute("prefer-native-controls") !== "false", l = u === "youtube" ? `<div class="media-shell video-shell">
+    const e = this.getAttribute("src") || "", a = this.getAttribute("poster") || "", o = this.hasAttribute("muted"), l = this.hasAttribute("autoplay"), m = this.hasAttribute("loop"), n = this.resolveType(e), f = e.replace(/"/g, "&quot;"), p = n === "video" || n === "audio", c = this.getControlsMode(), y = p && c !== "none", C = this.hasAttribute("center-play"), b = this.getAttribute("artwork") || "", w = this.hasAttribute("waveform"), g = this.getAttribute("media-title") || "", z = this.getAttribute("height") || "", x = z ? ` style="--media-player-audio-height: ${z.replace(/"/g, "&quot;")}"` : "", T = this.querySelector('[slot="meta-before"]') !== null, q = this.querySelector('[slot="meta-after"]') !== null, d = T || q, V = g.replace(/</g, "&lt;").replace(/>/g, "&gt;"), k = (L = "") => {
+      if (!g && !d) return "";
+      const I = L === "audio" && !b ? "surface" : "image", M = g ? `<mui-body size="small" weight="bold">${V}</mui-body>` : "";
+      return `<div class="meta-overlay-background" data-overlay="${L}" data-overlay-surface="${I}"></div>
+          <div class="media-meta-zones">
+            <slot class="media-meta-slot is-before" name="meta-before">${M}</slot>
+            <slot class="media-meta-slot is-after" name="meta-after"></slot>
+          </div>`;
+    }, i = n === "audio" && y && !!(b || g || d || w), v = i ? `<div class="audio-visual ${b ? "has-artwork" : ""} ${w ? "has-waveform" : ""}" part="audio-visual"${x}>
+            ${b ? `<img class="audio-artwork" src="${b.replace(/"/g, "&quot;")}" alt="" loading="lazy" />` : ""}
+            ${w ? '<canvas class="audio-waveform" aria-hidden="true"></canvas>' : ""}
+            ${k("audio")}
+          </div>` : "", E = n === "video" && (g || d) ? k("video") : "", S = n === "youtube" ? `<div class="media-shell video-shell">
             <iframe class="embed" src="${this.getYouTubeEmbed(e)}" title="Video preview" loading="lazy" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen></iframe>
-          </div>` : u === "soundcloud" ? `<div class="media-shell soundcloud-shell">
+          </div>` : n === "soundcloud" ? `<div class="media-shell soundcloud-shell">
               <iframe class="embed soundcloud" src="${this.getSoundcloudEmbed(e)}" title="Audio preview" loading="lazy"></iframe>
-            </div>` : u === "video" ? `<div class="media-shell video-shell">
-                <video ${o ? "autoplay" : ""} ${i ? "muted" : ""} ${a ? "loop" : ""} ${d ? "controls" : ""} ${t ? `poster="${t.replace(/"/g, "&quot;")}"` : ""} playsinline src="${e.replace(/"/g, "&quot;")}"></video>
-              </div>` : `<audio ${o ? "autoplay" : ""} ${i ? "muted" : ""} ${a ? "loop" : ""} ${d ? "controls" : ""} src="${e.replace(/"/g, "&quot;")}"></audio>`, s = (u === "video" || u === "audio") && !d;
+          </div>` : n === "video" ? `<div class="media-shell video-shell">
+                <video part="media" ${l ? "autoplay" : ""} ${o ? "muted" : ""} ${m ? "loop" : ""} ${a ? `poster="${a.replace(/"/g, "&quot;")}"` : ""} preload="metadata" playsinline webkit-playsinline src="${f}"></video>
+                ${E}
+                ${y ? '<slot name="system-controls"></slot>' : ""}
+              </div>` : `${v}<audio part="media" ${l ? "autoplay" : ""} ${o ? "muted" : ""} ${m ? "loop" : ""} src="${f}"></audio>`;
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
         :host {
           display: block;
           width: 100%;
+          container-type: inline-size;
+          --media-player-range-progress: 0%;
+          --media-player-range-solid-end: var(--media-player-range-progress);
+          --media-player-range-preview-start: var(--media-player-range-progress);
+          --media-player-range-preview-end: var(--media-player-range-progress);
+          --media-player-range-thumb-size: var(--space-400);
+          --media-player-range-track-height: var(--space-050);
+          --media-player-waveform-color: color-mix(in srgb, var(--text-color) 46%, transparent);
+          --media-player-waveform-mirror-color: color-mix(in srgb, var(--text-color) 24%, transparent);
+          --media-player-waveform-active-color: var(--media-player-range-color);
+          --media-player-waveform-active-mirror-color: color-mix(
+            in srgb,
+            var(--media-player-range-color) 42%,
+            transparent
+          );
+          --media-player-waveform-current-color: var(--black-opacity-80);
+          --media-player-waveform-current-mirror-color: var(--black-opacity-40);
+          --dropdown-min-width: 16rem;
+          --dropdown-offset: var(--space-100);
+        }
+        :host(:focus-visible) {
+          outline: var(--action-focus-outline);
+          outline-offset: var(--action-focus-outline-offset);
+          border-radius: var(--radius-200);
+        }
+        mui-hint[hidden] {
+          display: none;
+        }
+        mui-button::part(border-radius) {
+          border-radius: var(--radius-400);
         }
         .frame {
           width: 100%;
           display: grid;
+          position: relative;
+          --media-player-main-radius: 2rem;
+        }
+        .frame.custom-controls {
+          border-radius: var(--media-player-main-radius);
+          overflow: hidden;
+          background: var(--surface-elevated-200);
+          border: var(--border-thin);
+          transition:
+            background-color var(--speed-200) ease,
+            border-color var(--speed-200) ease,
+            box-shadow var(--speed-200) ease;
+        }
+        .video-frame.custom-controls {
+          border: 0;
+          background: transparent;
+          overflow: hidden;
+          border-radius: var(--media-player-main-radius);
+        }
+        .video-frame.custom-controls,
+        .video-frame.custom-controls .media-shell,
+        .video-frame.custom-controls .controls,
+        .audio-frame.custom-controls.has-artwork,
+        .audio-frame.custom-controls.has-artwork .controls,
+        .audio-visual.has-artwork {
+          --text-color: var(--white);
+          --text-color-optional: rgba(255, 255, 255, 0.72);
+          --link-text-color-default: var(--white);
+          --link-text-color-default-hover: var(--white);
+          --link-text-color-default-focus: var(--white);
+          --link-text-color-default-disabled: rgba(255, 255, 255, 0.48);
+          --icon-color-default: var(--white);
+          --icon-color-inverted: var(--white);
+          --media-player-range-color: var(--media-player-dark-range-color);
+          --media-player-range-thumb-color: var(--media-player-dark-range-thumb-color);
+          --media-player-range-track-color: var(--media-player-dark-range-track-color);
+          --media-player-range-preview-color: var(--white-opacity-50);
+          --media-player-range-thumb-shadow: var(--media-player-dark-range-thumb-shadow);
+          --media-player-waveform-color: rgba(255, 255, 255, 0.48);
+          --media-player-waveform-mirror-color: rgba(255, 255, 255, 0.22);
+          --media-player-waveform-active-color: var(--media-player-range-color);
+          --media-player-waveform-active-mirror-color: color-mix(
+            in srgb,
+            var(--media-player-range-color) 42%,
+            transparent
+          );
+          --media-player-waveform-current-color: var(--white-opacity-80);
+          --media-player-waveform-current-mirror-color: var(--white-opacity-40);
+          --action-tertiary-background: transparent;
+          --action-tertiary-background-hover: var(--media-player-dark-control-background-hover);
+          --action-tertiary-background-focus: var(--media-player-dark-control-background-hover);
+          --action-tertiary-border: var(--stroke-size-100) var(--stroke-solid) transparent;
+          --action-tertiary-border-hover: var(--stroke-size-100) var(--stroke-solid) transparent;
+          --action-tertiary-border-focus: var(--stroke-size-100) var(--stroke-solid) transparent;
+          --action-tertiary-text-color: var(--white);
+          --action-tertiary-text-color-hover: var(--white);
+          --action-tertiary-text-color-focus: var(--white);
+          --dropdown-background: var(--black-opacity-80);
+          --dropdown-border-color: var(--white-opacity-30);
+          --dropdown-shadow-color: var(--black-opacity-30);
+          --dropdown-radius: 1.2rem;
+          --hint-background: var(--black-opacity-80);
+          --hint-border-color: var(--white-opacity-30);
+          --hint-shadow: 0 var(--space-100) var(--space-200) var(--black-opacity-30);
+          --hint-text-color: var(--white);
+        }
+        .audio-frame.custom-controls {
+          box-sizing: border-box;
+          position: relative;
+          border-radius: var(--media-player-main-radius);
+          background: var(--surface-elevated-200);
         }
         .media-shell {
           position: relative;
@@ -110,11 +761,37 @@ class m extends HTMLElement {
           overflow: hidden;
           background: var(--surface-elevated-200);
         }
+        .custom-controls .media-shell {
+          border-radius: 0;
+          background: var(--surface-elevated-100);
+        }
+        .video-frame.custom-controls .media-shell {
+          background: var(--media-player-dark-background);
+          border-radius: var(--media-player-main-radius);
+          box-shadow: var(--media-player-video-shadow);
+        }
+        .video-frame.custom-controls .media-shell::after {
+          content: "";
+          position: absolute;
+          inset: 0;
+          pointer-events: none;
+          background: linear-gradient(to top, var(--black-opacity-80) 0%, transparent 44%);
+          opacity: 1;
+          transition: opacity var(--speed-300) ease;
+        }
+        .video-frame.custom-controls.has-metadata .media-shell::after {
+          background:
+            linear-gradient(to bottom, var(--black-opacity-70) 0%, transparent 28%),
+            linear-gradient(to top, var(--black-opacity-80) 0%, transparent 44%);
+        }
+        .video-frame.custom-controls.is-playing .media-shell::after {
+          opacity: 0.42;
+        }
         .video-shell {
-          aspect-ratio: var(--media-player-video-ratio, 16 / 9);
+          aspect-ratio: 16 / 9;
         }
         .soundcloud-shell {
-          aspect-ratio: var(--media-player-soundcloud-ratio, 16 / 5);
+          aspect-ratio: 16 / 5;
           min-height: 16rem;
         }
         .media-shell > video,
@@ -124,11 +801,23 @@ class m extends HTMLElement {
           width: 100%;
           height: 100%;
         }
+        .media-shell > video {
+          transition:
+            filter var(--speed-300) ease,
+            transform var(--speed-300) ease;
+        }
+        .video-frame.custom-controls:hover .media-shell > video {
+          filter: brightness(1.06) saturate(1.04);
+          transform: scale(1.01);
+        }
         video,
         audio {
           width: 100%;
           background: var(--surface-elevated-100);
         }
+        audio:not([controls]) {
+          display: none;
+        }
         video {
           object-fit: cover;
         }
@@ -140,45 +829,850 @@ class m extends HTMLElement {
           display: inline-flex;
           width: 100%;
           align-items: center;
-          padding: var(--space-100);
+          gap: var(--space-050);
+          padding: var(--space-200);
+          box-sizing: border-box;
+          background: var(--media-player-control-background);
+          color: var(--media-player-control-color);
+        }
+
+        /* Overlay controls for video and audio presentations */
+        .video-frame.custom-controls .controls,
+        .audio-frame.custom-controls:not(.audio-player-only) .controls {
+          position: absolute;
+          z-index: 5;
+          inset: auto var(--space-000) var(--space-000);
+          width: auto;
+          display: grid;
+          grid-template-rows: auto auto;
+          align-items: stretch;
+          border-radius: 0;
+          background: linear-gradient(180deg, transparent 0%, var(--media-player-surface-overlay-end) 100%);
+          color: var(--media-player-control-color);
+          transform: translateY(var(--space-300));
+          opacity: 0;
+          pointer-events: none;
+          transition:
+            opacity var(--speed-300) ease,
+            transform var(--speed-300) ease;
+        }
+        .audio-frame.custom-controls:not(.audio-player-only):not(.has-artwork) .controls {
+          background: linear-gradient(
+            180deg,
+            transparent 0%,
+            color-mix(in srgb, var(--media-player-surface-overlay-end) 72%, var(--grey-50) 28%) 50%,
+            color-mix(in srgb, var(--media-player-surface-overlay-end) 62%, var(--grey-50) 38%) 100%
+          );
+        }
+        :host-context(html[data-theme="dark"])
+          .audio-frame.custom-controls:not(.audio-player-only):not(.has-artwork)
+          .controls {
+          background: linear-gradient(
+            180deg,
+            transparent 0%,
+            color-mix(in srgb, var(--media-player-surface-overlay-end) 72%, var(--grey-1200) 28%) 50%,
+            color-mix(in srgb, var(--media-player-surface-overlay-end) 62%, var(--grey-1200) 38%) 100%
+          );
+        }
+        .video-frame.custom-controls .controls,
+        .audio-frame.custom-controls.has-artwork .controls {
+          background: linear-gradient(
+            180deg,
+            transparent 0%,
+            var(--media-player-dark-overlay-controls-background, var(--media-player-dark-overlay-background)) 100%
+          );
+          color: var(--media-player-dark-control-color);
+        }
+        .controls-peek {
+          display: none;
+          position: absolute;
+          z-index: 4;
+          left: 50%;
+          bottom: 0;
+          width: var(--space-600);
+          height: var(--space-500);
+          border-radius: 999rem;
+          opacity: 0.6;
+          pointer-events: auto;
+          transform: translateX(-50%);
+          cursor: pointer;
+          transition:
+            opacity var(--speed-200) ease,
+            transform var(--speed-200) ease;
+        }
+        .controls-peek::before {
+          content: "";
+          position: absolute;
+          left: 0;
+          top: 50%;
+          width: 100%;
+          height: var(--space-050);
+          border-radius: inherit;
+          background: var(--media-player-controls-peek-background);
+          box-shadow: var(--media-player-controls-peek-shadow);
+          transform: translateY(-50%);
+        }
+        .video-frame.custom-controls .controls-peek,
+        .audio-frame.custom-controls:not(.audio-player-only) .controls-peek {
+          display: block;
+        }
+        .audio-frame.custom-controls:not(.has-artwork):not(.audio-player-only) .controls-peek {
+          --media-player-controls-peek-background: var(--media-player-audio-controls-peek-background);
+          --media-player-controls-peek-shadow: var(--media-player-audio-controls-peek-shadow);
+        }
+        .frame.custom-controls:fullscreen .controls-peek,
+        .video-frame.custom-controls.is-controls-revealing .controls-peek,
+        .video-frame.custom-controls.is-controls-ready .controls-peek,
+        .audio-frame.custom-controls:not(.audio-player-only).is-controls-revealing .controls-peek,
+        .audio-frame.custom-controls:not(.audio-player-only).is-controls-ready .controls-peek,
+        .frame.custom-controls .controls:focus-within + .controls-peek {
+          opacity: 0;
+          transform: translate(-50%, var(--space-050));
+        }
+        .video-frame.custom-controls.is-controls-revealing .controls,
+        .video-frame.custom-controls.is-controls-ready .controls,
+        .audio-frame.custom-controls:not(.audio-player-only).is-controls-revealing .controls,
+        .audio-frame.custom-controls:not(.audio-player-only).is-controls-ready .controls,
+        .frame.custom-controls .controls:focus-within {
+          opacity: 1;
+          transform: translateY(0);
+        }
+        .video-frame.custom-controls.is-controls-ready .controls,
+        .audio-frame.custom-controls:not(.audio-player-only).is-controls-ready .controls,
+        .frame.custom-controls .controls:focus-within {
+          pointer-events: auto;
+        }
+        .video-frame.custom-controls.is-video-inactive {
+          cursor: none;
+        }
+        .video-frame.custom-controls.is-video-inactive .controls {
+          opacity: 0;
+          transform: translateY(var(--space-300));
+          pointer-events: none;
+        }
+        .video-frame.custom-controls.is-video-inactive .controls-peek {
+          opacity: 0.6;
+          transform: translateX(-50%);
+        }
+        .video-frame.custom-controls.is-video-inactive:fullscreen .controls-peek {
+          opacity: 0;
+          transform: translate(-50%, var(--space-050));
+        }
+        /* Bottom proximity trigger for audio presentation controls */
+        .controls-hover-zone {
+          display: none;
+        }
+        .audio-frame.custom-controls:not(.audio-player-only) .controls-hover-zone {
+          display: block;
+          position: absolute;
+          z-index: 5;
+          inset: auto var(--space-000) var(--space-000);
+          height: var(--space-500);
+          pointer-events: auto;
+        }
+        /* Center play feedback */
+        .center-play {
+          position: absolute;
+          z-index: 4;
+          inset: 50% auto auto 50%;
+          display: grid;
+          place-items: center;
+          color: var(--media-player-dark-control-color);
+          opacity: 0;
+          pointer-events: none;
+          transform: translate(-50%, -50%) scale(0.92);
+          transition:
+            opacity var(--speed-300) ease,
+            transform var(--speed-300) ease;
+        }
+        .center-play-loader {
+          margin: auto;
+        }
+        .video-frame.custom-controls .center-play,
+        .audio-frame.custom-controls.has-artwork .center-play {
+          color: var(--media-player-dark-control-color);
+        }
+        div.center-play,
+        .video-frame.custom-controls .center-play::part(background),
+        .audio-frame.custom-controls.has-artwork .center-play::part(background) {
+          border-radius: 999rem;
+          background: var(--media-player-center-action-overlay-background);
+        }
+        div.center-play {
+          appearance: none;
+          border: 0;
+          box-sizing: border-box;
+          width: var(--space-800);
+          height: var(--space-800);
+          min-height: var(--space-800);
+          padding: var(--action-icon-only-padding);
+          font: inherit;
+          line-height: 1;
+        }
+        .center-play::part(background) {
+          display: grid;
+          place-items: center;
+          padding: var(--action-icon-only-padding);
+          transition: background var(--speed-200) ease;
+        }
+        .video-frame.custom-controls .center-play:hover::part(background),
+        .video-frame.custom-controls .center-play:focus-visible::part(background),
+        .audio-frame.custom-controls.has-artwork .center-play:hover::part(background),
+        .audio-frame.custom-controls.has-artwork .center-play:focus-visible::part(background) {
+          background: var(--media-player-center-action-overlay-background-hover);
+        }
+        .video-frame.custom-controls .center-play::part(background) {
+          width: var(--space-800);
+          height: var(--space-800);
+          min-height: var(--space-800);
+          box-sizing: border-box;
+        }
+        .video-frame.custom-controls .center-play mui-icon-play-fill,
+        .video-frame.custom-controls .center-play mui-icon-pause-fill,
+        .video-frame.custom-controls .center-play mui-icon-pause {
+          width: 4rem;
+          height: 4rem;
+        }
+        .video-frame.custom-controls.has-center-play .center-play {
+          opacity: 1;
+          pointer-events: auto;
+          transform: translate(-50%, -50%) scale(1);
+        }
+        .video-frame.custom-controls.has-center-play.is-playing .center-play {
+          opacity: 0;
+          pointer-events: none;
+          transform: translate(-50%, -50%) scale(0.92);
+        }
+        .video-frame.custom-controls.has-center-play.is-controls-revealing .center-play,
+        .video-frame.custom-controls.has-center-play.is-controls-ready .center-play {
+          opacity: 0;
+          pointer-events: none;
+          transform: translate(-50%, -50%) scale(0.92);
+        }
+        .audio-frame.custom-controls .center-play::part(background) {
+          background: var(--media-player-center-action-background);
+          border-radius: 100%;
+        }
+        .audio-frame.custom-controls.has-artwork .center-play::part(background) {
+          background: var(--media-player-center-action-overlay-background);
+        }
+        .audio-frame.custom-controls:not(.has-artwork) .center-play:hover::part(background),
+        .audio-frame.custom-controls:not(.has-artwork) .center-play:focus-visible::part(background) {
+          background: color-mix(
+            in srgb,
+            var(--media-player-center-action-background) 82%,
+            var(--media-player-control-color) 18%
+          );
+        }
+        :host-context(html[data-theme="dark"])
+          .audio-frame.custom-controls:not(.has-artwork)
+          .center-play:hover::part(background),
+        :host-context(html[data-theme="dark"])
+          .audio-frame.custom-controls:not(.has-artwork)
+          .center-play:focus-visible::part(background) {
+          background: color-mix(
+            in srgb,
+            var(--media-player-center-action-background) 82%,
+            var(--grey-1200) 18%
+          );
+        }
+        .audio-frame.custom-controls .center-play {
+          width: auto;
+          height: auto;
+          opacity: 1;
+          pointer-events: auto;
+          transform: translate(-50%, -50%) scale(1);
+        }
+        .audio-frame.custom-controls .center-play::part(background) {
+          width: var(--action-size-medium);
+          height: var(--action-size-medium);
+          min-height: var(--action-size-medium);
           box-sizing: border-box;
         }
-        .controls mui-range-input {
+        .audio-frame.custom-controls.is-playing .center-play {
+          opacity: 0;
+          transform: translate(-50%, -50%) scale(0.92);
+          pointer-events: none;
+        }
+        .audio-frame.custom-controls.is-controls-revealing .center-play,
+        .audio-frame.custom-controls.is-controls-ready .center-play {
+          opacity: 0;
+          transform: translate(-50%, -50%) scale(0.92);
+          pointer-events: none;
+        }
+        .frame.custom-controls.show-play-feedback .center-play {
+          opacity: 1;
+          transform: translate(-50%, -50%) scale(1);
+        }
+        .video-frame.custom-controls.is-buffering .center-play,
+        .audio-frame.custom-controls.is-buffering .center-play,
+        .video-frame.custom-controls.has-center-play.is-buffering.is-playing .center-play,
+        .audio-frame.custom-controls.is-buffering.is-playing .center-play,
+        .frame.custom-controls.is-buffering.show-play-feedback .center-play {
+          z-index: 6;
+          opacity: 1;
+          pointer-events: none;
+          transform: translate(-50%, -50%) scale(1);
+        }
+        /* Control row layout */
+        .control-group {
+          display: inline-flex;
+          align-items: center;
+          gap: var(--space-025);
+          flex: 0 0 auto;
+        }
+        .controls-row {
+          display: flex;
+          align-items: center;
+          gap: var(--space-050);
+          min-width: 0;
+          padding: var(--space-000) var(--space-200);
+          box-sizing: border-box;
+        }
+        .controls-row.scrub-row {
+          grid-row: 1;
+          width: 100%;
+        }
+        .controls-row.action-row {
+          grid-row: 2;
+          justify-content: space-between;
+        }
+        .video-frame.custom-controls .controls-row.action-row {
+          margin-block-end: var(--space-050);
+        }
+        .controls-left,
+        .controls-right {
+          display: inline-flex;
+          align-items: center;
+          gap: var(--space-050);
+          min-width: 0;
+        }
+        .controls-right {
+          margin-left: auto;
+        }
+        /* Compact audio player */
+        .audio-frame.custom-controls.audio-player-only {
+          padding: var(--space-000);
+          background: transparent;
+          box-shadow: none;
+        }
+        .audio-frame.custom-controls.audio-player-only .controls {
+          position: static;
+          inset: auto;
+          width: 100%;
+          min-height: var(--action-size-medium);
+          display: grid;
+          grid-template-rows: auto auto;
+          align-items: stretch;
+          padding-block: var(--space-100);
+          color: var(--media-player-control-color);
+          background: var(--media-player-control-background);
+          box-shadow: none;
+        }
+        .audio-frame.custom-controls.audio-player-only .compact-scrub-row {
+          width: 100%;
+          padding-inline: var(--space-300);
+          padding-block-start: var(--space-100);
+          padding-block-end: var(--space-000);
+        }
+        .audio-frame.custom-controls.audio-player-only .compact-action-row {
+          width: 100%;
+          justify-content: space-between;
+          padding-inline-start: var(--space-050);
+          padding-inline-end: var(--space-000);
+        }
+        /* Audio metadata and artwork presentation */
+        .audio-visual {
+          display: flex;
+          align-items: flex-start;
+          min-height: 11.6rem;
+          height: var(--media-player-audio-height, 11.6rem);
+          gap: var(--space-300);
+          padding: var(--space-400);
+          background:
+            linear-gradient(135deg, var(--media-player-surface-overlay-end), transparent 52%),
+            var(--surface-elevated-100);
+          position: relative;
+          border-radius: var(--media-player-main-radius);
+        }
+        .audio-visual.has-artwork {
+          align-items: flex-start;
+          color: var(--media-player-dark-control-color);
+          background: var(--media-player-dark-background);
+          overflow: hidden;
+        }
+        .audio-frame.custom-controls.has-artwork,
+        .audio-frame.custom-controls.has-artwork .controls {
+          overflow: hidden;
+        }
+        .audio-visual::after {
+          content: "";
+          position: absolute;
+          inset: 0;
+          pointer-events: none;
+          background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.06), transparent);
+          opacity: 0.5;
+        }
+        .audio-visual.has-artwork::after {
+          z-index: 1;
+          background: linear-gradient(to top, var(--black-opacity-80) 0%, transparent 44%);
+          opacity: 1;
+        }
+        .audio-frame.custom-controls.has-artwork.has-metadata .audio-visual::after {
+          background:
+            linear-gradient(to bottom, var(--black-opacity-70) 0%, transparent 28%),
+            linear-gradient(to top, var(--black-opacity-80) 0%, transparent 44%);
+        }
+        .audio-artwork {
+          position: relative;
+          z-index: 1;
+          width: 6.4rem;
+          height: 6.4rem;
+          border-radius: 1.6rem;
+          object-fit: cover;
+          flex: 0 0 auto;
+          box-shadow: var(--media-player-artwork-shadow);
+        }
+        .audio-visual.has-artwork .audio-artwork {
+          position: absolute;
+          z-index: 0;
+          inset: 0;
+          width: 100%;
+          height: 100%;
+          border-radius: 0;
+          box-shadow: none;
+          transform: scale(1);
+          transition:
+            filter var(--speed-300) ease,
+            transform var(--speed-300) ease;
+        }
+        .audio-waveform {
+          position: absolute;
+          z-index: 1;
+          inset: auto var(--space-400) var(--space-600);
+          width: calc(100% - (var(--space-400) * 2));
+          height: 5.6rem;
+          opacity: 1;
+          pointer-events: auto;
+          cursor: pointer;
+          bottom: calc(var(--space-500) + var(--stroke-size-300));
+        }
+        .audio-visual.has-artwork .audio-waveform {
+          z-index: 3;
+          opacity: 1;
+          filter: drop-shadow(0 var(--stroke-size-100) var(--stroke-size-100) var(--black-opacity-90));
+          --media-player-waveform-color: var(--white-opacity-50);
+          --media-player-waveform-mirror-color: var(--white-opacity-30);
+          --media-player-waveform-active-color: var(--white);
+          --media-player-waveform-active-mirror-color: var(--white-opacity-60);
+          --media-player-waveform-current-color: var(--white-opacity-80);
+          --media-player-waveform-current-mirror-color: var(--white-opacity-40);
+        }
+        .audio-visual.has-waveform:not(.has-artwork) {
+          --media-player-audio-height: 14rem;
+          --media-player-waveform-color: color-mix(in srgb, var(--text-color) 40%, transparent);
+          --media-player-waveform-mirror-color: color-mix(in srgb, var(--text-color) 20%, transparent);
+          --media-player-waveform-active-color: var(--media-player-range-color);
+          --media-player-waveform-active-mirror-color: color-mix(
+            in srgb,
+            var(--media-player-range-color) 40%,
+            transparent
+          );
+          --media-player-waveform-current-color: color-mix(in srgb, var(--text-color) 60%, transparent);
+          --media-player-waveform-current-mirror-color: color-mix(in srgb, var(--text-color) 40%, transparent);
+        }
+        .audio-visual.has-waveform:not(.has-artwork) .audio-waveform {
+          opacity: 0.85;
+        }
+        .audio-frame.has-artwork:hover .audio-visual.has-artwork .audio-artwork,
+        .audio-frame.has-artwork.is-controls-revealing .audio-visual.has-artwork .audio-artwork,
+        .audio-frame.has-artwork.is-controls-ready .audio-visual.has-artwork .audio-artwork {
+          filter: saturate(1.08) brightness(1.03);
+          transform: scale(1.025);
+        }
+        .meta-overlay-background {
+          appearance: none;
+          border: 0;
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 1;
+          min-width: 0;
+          box-sizing: border-box;
+          width: 100%;
+          height: var(--meta-overlay-height, 14rem);
+          pointer-events: none;
+          opacity: 1;
+          visibility: visible;
+          transition:
+            opacity var(--speed-200) ease,
+            visibility var(--speed-200) ease;
+        }
+        .meta-overlay-background[data-overlay-surface="image"] {
+          background: linear-gradient(180deg, var(--media-player-dark-overlay-background) 28%, transparent);
+        }
+        .media-meta-zones {
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 2;
+          display: flex;
+          align-items: flex-start;
+          justify-content: space-between;
+          gap: var(--space-300);
+          box-sizing: border-box;
+          width: 100%;
+          padding: var(--space-500);
+          pointer-events: none;
+          opacity: 1;
+          visibility: visible;
+          transition:
+            opacity var(--speed-200) ease,
+            visibility var(--speed-200) ease;
+        }
+        .audio-visual .media-meta-zones {
+          padding: var(--space-400);
+        }
+        .media-meta-slot {
+          display: flex;
+          align-items: center;
+          gap: var(--space-300);
+          min-width: 0;
+          max-width: 100%;
+          pointer-events: auto;
+          --text-color-optional: var(--text-color);
+          --text-font-size-m: var(--text-font-size-s);
+          --text-line-height-m: var(--text-line-height-s);
+        }
+        .media-meta-slot.is-before {
+          justify-content: flex-start;
+        }
+        .media-meta-slot.is-after {
+          justify-content: flex-end;
+          margin-inline-start: auto;
+        }
+        .audio-visual.has-artwork .meta-overlay-background {
+          z-index: 2;
+        }
+        .meta-overlay-background[data-overlay-surface="surface"] {
+          background: linear-gradient(180deg, var(--media-player-surface-overlay-start), transparent);
+        }
+        .video-frame.custom-controls.is-playing .meta-overlay-background,
+        .video-frame.custom-controls.is-playing .media-meta-zones {
+          opacity: 0;
+          visibility: hidden;
+          pointer-events: none;
+        }
+        slot[name="meta-before"],
+        slot[name="meta-after"] {
+          display: flex;
+          align-items: center;
+          max-width: 100%;
+        }
+        slot[name="meta-before"]::slotted(*),
+        slot[name="meta-after"]::slotted(*) {
+          max-width: 100%;
+        }
+        slot[name="meta-before"]::slotted(mui-avatar),
+        slot[name="meta-after"]::slotted(mui-avatar) {
+          border: var(--border-thin);
+          box-shadow: none;
+        }
+        slot[name="meta-before"]::slotted(mui-button),
+        slot[name="meta-after"]::slotted(mui-button) {
+          --action-avatar-border: var(--border-thin);
+          --action-avatar-shadow: none;
+        }
+        .audio-visual.has-artwork slot[name="meta-before"]::slotted(mui-avatar),
+        .audio-visual.has-artwork slot[name="meta-after"]::slotted(mui-avatar),
+        .video-frame.custom-controls slot[name="meta-before"]::slotted(mui-avatar),
+        .video-frame.custom-controls slot[name="meta-after"]::slotted(mui-avatar) {
+          border: var(--media-player-dark-thumbnail-border);
+          box-shadow: var(--media-player-dark-thumbnail-shadow);
+        }
+        .audio-visual.has-artwork slot[name="meta-before"]::slotted(mui-button),
+        .audio-visual.has-artwork slot[name="meta-after"]::slotted(mui-button),
+        .video-frame.custom-controls slot[name="meta-before"]::slotted(mui-button),
+        .video-frame.custom-controls slot[name="meta-after"]::slotted(mui-button) {
+          --action-avatar-border: var(--media-player-dark-thumbnail-border);
+          --action-avatar-shadow: var(--media-player-dark-thumbnail-shadow);
+        }
+        .audio-visual.has-artwork slot[name="meta-before"]::slotted(mui-link),
+        .audio-visual.has-artwork slot[name="meta-after"]::slotted(mui-link),
+        .video-frame.custom-controls slot[name="meta-before"]::slotted(mui-link),
+        .video-frame.custom-controls slot[name="meta-after"]::slotted(mui-link) {
+          --action-avatar-border: none;
+          --action-avatar-shadow: none;
+        }
+        .audio-visual.has-artwork slot[name="meta-before"]::slotted(mui-avatar-chip),
+        .audio-visual.has-artwork slot[name="meta-after"]::slotted(mui-avatar-chip),
+        .video-frame.custom-controls slot[name="meta-before"]::slotted(mui-avatar-chip),
+        .video-frame.custom-controls slot[name="meta-after"]::slotted(mui-avatar-chip) {
+          --avatar-chip-avatar-border: var(--media-player-dark-thumbnail-border);
+          --avatar-chip-avatar-shadow: var(--media-player-dark-thumbnail-shadow);
+        }
+        .audio-visual.has-artwork slot[name="meta-before"]::slotted(mui-avatar-chip),
+        .audio-visual.has-artwork slot[name="meta-after"]::slotted(mui-avatar-chip),
+        .video-frame.custom-controls slot[name="meta-before"]::slotted(mui-avatar-chip),
+        .video-frame.custom-controls slot[name="meta-after"]::slotted(mui-avatar-chip),
+        .audio-visual.has-artwork slot[name="meta-before"]::slotted(mui-link),
+        .audio-visual.has-artwork slot[name="meta-after"]::slotted(mui-link),
+        .video-frame.custom-controls slot[name="meta-before"]::slotted(mui-link),
+        .video-frame.custom-controls slot[name="meta-after"]::slotted(mui-link),
+        .audio-visual.has-artwork slot[name="meta-before"]::slotted(mui-button),
+        .audio-visual.has-artwork slot[name="meta-after"]::slotted(mui-button),
+        .video-frame.custom-controls slot[name="meta-before"]::slotted(mui-button),
+        .video-frame.custom-controls slot[name="meta-after"]::slotted(mui-button) {
+          --avatar-chip-text-color: var(--white);
+          --avatar-chip-secondary-color: var(--white);
+          --avatar-chip-link-color: var(--white);
+          --avatar-chip-link-color-hover: var(--white);
+          --avatar-chip-link-color-focus: var(--white);
+          --text-color: var(--white);
+          --text-color-optional: var(--white);
+          --link-text-color-default: var(--white);
+          --link-text-color-default-hover: var(--white);
+          --link-text-color-default-focus: var(--white);
+          --link-text-color-default-disabled: rgba(255, 255, 255, 0.48);
+        }
+        .audio-visual.has-artwork slot[name="meta-before"]::slotted(*),
+        .audio-visual.has-artwork slot[name="meta-after"]::slotted(*),
+        .video-frame.custom-controls slot[name="meta-before"]::slotted(*),
+        .video-frame.custom-controls slot[name="meta-after"]::slotted(*) {
+          color: var(--white);
+        }
+        .audio-frame .video-only {
+          display: none;
+        }
+        /* Range controls */
+        .range {
           flex: 1 1 auto;
           min-width: 0;
-          --range-input-accent-color: var(--media-player-seek-color, var(--grey-1200));
-          --range-input-bubble-background: var(--media-player-seek-time-background, var(--surface-elevated-100));
-          --range-input-bubble-border-color: var(--media-player-seek-time-border-color, var(--border-color));
+          appearance: none;
+          -webkit-appearance: none;
+          height: var(--space-400);
+          padding: 0;
+          border: 0;
+          border-radius: 999rem;
+          background: transparent;
+          cursor: pointer;
+          margin: 0;
+          transition: filter var(--speed-200) ease;
+          width: 100%;
+        }
+        .video-frame.custom-controls .range {
+          margin-block-end: var(--space-050);
+        }
+        .video-frame.custom-controls .volume {
+          margin-block-end: var(--space-000);
+        }
+
+        .range:hover,
+        .range:focus-visible {
+          filter: brightness(1.12);
+        }
+        .range::-webkit-slider-runnable-track {
+          height: var(--media-player-range-track-height);
+          border: 0;
+          border-radius: 999rem;
+          background:
+            linear-gradient(
+              to right,
+              var(--media-player-range-color, var(--white)) 0%,
+              var(--media-player-range-color, var(--white)) var(--media-player-range-solid-end),
+              var(--media-player-range-preview-color, var(--white-opacity-50)) var(--media-player-range-preview-start),
+              var(--media-player-range-preview-color, var(--white-opacity-50)) var(--media-player-range-preview-end),
+              var(--media-player-range-track-color, var(--white-opacity-30)) var(--media-player-range-preview-end),
+              var(--media-player-range-track-color, var(--white-opacity-30)) 100%
+            );
+        }
+        .range::-moz-range-track {
+          height: var(--media-player-range-track-height);
+          border: 0;
+          border-radius: 999rem;
+          background:
+            linear-gradient(
+              to right,
+              var(--media-player-range-track-color, var(--white-opacity-30)) 0%,
+              var(--media-player-range-track-color, var(--white-opacity-30)) var(--media-player-range-preview-start),
+              var(--media-player-range-preview-color, var(--white-opacity-50)) var(--media-player-range-preview-start),
+              var(--media-player-range-preview-color, var(--white-opacity-50)) var(--media-player-range-preview-end),
+              var(--media-player-range-track-color, var(--white-opacity-30)) var(--media-player-range-preview-end),
+              var(--media-player-range-track-color, var(--white-opacity-30)) 100%
+            );
+        }
+        .range::-moz-range-progress {
+          height: var(--media-player-range-track-height);
+          border: 0;
+          border-radius: 999rem;
+          background: var(--media-player-range-color, var(--white));
+        }
+        .range::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          appearance: none;
+          width: var(--media-player-range-thumb-size);
+          height: var(--media-player-range-thumb-size);
+          margin-top: calc((var(--media-player-range-track-height) - var(--media-player-range-thumb-size)) / 2);
+          border: 0;
+          border-radius: 999rem;
+          background: var(--media-player-range-thumb-color, var(--media-player-range-color, var(--white)));
+          box-shadow: var(--media-player-range-thumb-shadow);
+        }
+        .range::-moz-range-thumb {
+          width: var(--media-player-range-thumb-size);
+          height: var(--media-player-range-thumb-size);
+          border: 0;
+          border-radius: 999rem;
+          background: var(--media-player-range-thumb-color, var(--media-player-range-color, var(--white)));
+          box-shadow: var(--media-player-range-thumb-shadow);
+        }
+        .range:hover::-webkit-slider-runnable-track,
+        .range:focus-visible::-webkit-slider-runnable-track {
+          height: 0.5rem;
+        }
+        .range:hover::-moz-range-track,
+        .range:hover::-moz-range-progress,
+        .range:focus-visible::-moz-range-track,
+        .range:focus-visible::-moz-range-progress {
+          height: 0.5rem;
+        }
+        .range:hover::-webkit-slider-thumb,
+        .range:focus-visible::-webkit-slider-thumb {
+          width: 1.8rem;
+          height: 1.8rem;
+          margin-top: calc((0.5rem - 1.8rem) / 2);
+        }
+        .range:hover::-moz-range-thumb,
+        .range:focus-visible::-moz-range-thumb {
+          width: 1.8rem;
+          height: 1.8rem;
+        }
+        .range:focus-visible {
+          outline: var(--action-focus-outline);
+          outline-offset: var(--action-focus-outline-offset);
+        }
+        .seek {
+          flex: 1 1 auto;
+        }
+        .volume {
+          width: var(--space-800);
+          flex: 0 0 var(--space-800);
         }
         [data-action="time-mode"] {
           white-space: nowrap;
           flex: 0 0 auto;
+          font-variant-numeric: tabular-nums;
+        }
+        [data-action="time-mode"]::part(font-size) {
+          font-variant-numeric: tabular-nums;
+        }
+        .time-label-compact {
+          display: none;
+        }
+        .options-menu {
+          flex: 0 0 auto;
+        }
+
+        .control-icon {
+          fill: currentColor;
+          color: currentColor;
+        }
+        .controls mui-button {
+          transition: filter var(--speed-200) ease;
+        }
+        .controls mui-button:hover,
+        .controls mui-button:focus-visible {
+          filter: brightness(1.12);
+        }
+        .controls mui-button:active {
+          filter: brightness(0.96);
+        }
+        mui-button[disabled] {
+          opacity: var(--opacity-disabled);
+          pointer-events: none;
+        }
+        @container (max-width: 102.4rem) {
+          .frame {
+            --media-player-main-radius: 1.8rem;
+          }
+        }
+        @container (max-width: 70rem) {
+          .frame {
+            --media-player-main-radius: 1.6rem;
+          }
+
+          .media-meta-zones {
+            padding: var(--space-400) var(--space-400);
+          }
+
+          .meta-overlay-background[data-overlay-surface="image"] {
+            background: linear-gradient(180deg, var(--media-player-dark-overlay-background) 28%, transparent);
+          }
+
+        }
+        @container (max-width: 52rem) {
+          .frame {
+            --media-player-main-radius: 1.2rem;
+          }
+
+          .volume,
+          .video-only {
+            display: none;
+          }
+          .audio-visual {
+            gap: var(--space-200);
+          }
+
+          .media-meta-zones {
+            padding: var(--space-300) var(--space-300);
+          }
+
+          .audio-artwork {
+            width: var(--space-700);
+            height: var(--space-700);
+          }
+        }
+        @container (max-width: 42rem) {
+          .frame {
+            --media-player-main-radius: 1rem;
+          }
+
+          .controls-row {
+            padding: var(--space-000) var(--space-000);
+          }
+          .controls-left {
+            gap: var(--space-000);
+          }
+          .controls-right {
+            gap: var(--space-000);
+          }
+          [data-action="pip"] {
+            display: none;
+          }
+          .time-label-full {
+            display: none;
+          }
+          .time-label-compact {
+            display: inline;
+          }
+          .audio-frame.custom-controls.audio-player-only .controls {
+            display: grid;
+            grid-template-rows: auto auto;
+            padding-block: var(--space-100);
+          }
+          .audio-frame.custom-controls.audio-player-only .compact-action-row {
+            justify-content: space-between;
+          }
         }
 
       </style>
-      <div class="frame">
-        ${l}
-        ${s ? `<div class="controls">
-                <mui-hint placement="top">
-                  <mui-button slot="trigger" data-action="play" size="x-small" icon-only variant="tertiary" aria-label="Play media">
-                    <mui-icon-play-rectangle size="x-small"></mui-icon-play-rectangle>
-                  </mui-button>
-                  Play/Stop
-                </mui-hint>
-                <mui-range-input data-action="seek" min="0" max="0" value="0" step="0.1" bubble bubble-format="time" label="Media seek"></mui-range-input>
-                <mui-hint placement="top">
-                  <mui-button slot="trigger" data-action="mute" size="x-small" icon-only variant="tertiary" aria-label="Mute media">
-                    <mui-icon-music-microphone size="x-small"></mui-icon-music-microphone>
-                  </mui-button>
-                  Mute
-                </mui-hint>
-                <mui-hint placement="top">
-                  <mui-button slot="trigger" data-action="time-mode" size="x-small" variant="tertiary" aria-pressed="false">0:00 / 0:00</mui-button>
-                  Time
-                </mui-hint>
-              </div>` : ""}
+      <div class="frame ${y ? "custom-controls" : ""} ${C ? "has-center-play" : ""} ${n}-frame ${(n === "video" || n === "audio") && (g || d) ? "has-metadata" : ""} ${n === "audio" && b ? "has-artwork" : ""} ${n === "audio" && y && !i ? "audio-player-only" : ""}">
+        ${S}
+        ${y ? this.renderPlayerControls(n, i, o, f, C) : ""}
       </div>
-    `;
+    `, this.syncMetadataSlotContent(), this.bindMetadataSlots();
   }
-}
-customElements.get("mui-media-player") || customElements.define("mui-media-player", m);
+};
+J.waveformPeaksCache = /* @__PURE__ */ new Map();
+let ue = J;
+customElements.get("mui-media-player") || customElements.define("mui-media-player", ue);