react-modern-audio-player 2.1.0 → 2.3.0

package/dist/index.es.js

@@ -1,16 +1,17 @@
 "use client";
 import './index.css';
-import { jsx as i, Fragment as z, jsxs as w } from "react/jsx-runtime";
-import te, { createContext as H, useReducer as it, useMemo as D, useContext as lt, forwardRef as ve, useCallback as f, useRef as A, useEffect as E, memo as W, useState as C, useId as Ne, useLayoutEffect as ct, cloneElement as ut } from "react";
-import dt, { flushSync as be } from "react-dom";
-const F = {
+import { jsx as c, Fragment as G, jsxs as w } from "react/jsx-runtime";
+import te, { createContext as K, useContext as he, useReducer as xt, useMemo as x, forwardRef as Pe, useCallback as E, useRef as S, useEffect as P, memo as z, useState as N, useId as $e, useLayoutEffect as Mt, cloneElement as _t, isValidElement as Dt } from "react";
+import Rt, { flushSync as Fe } from "react-dom";
+const O = {
   isPlaying: !1,
   volume: 1,
   muted: !1,
   repeatType: "ALL",
   currentTime: 0,
-  duration: 0
-}, pr = 10, N = {
+  duration: 0,
+  playbackRate: 1
+}, Or = 11, de = {
   templateArea: {
     artwork: "row1-1",
     trackInfo: "row1-2",
@@ -20,17 +21,18 @@ const F = {
     repeatType: "row1-6",
     volume: "row1-7",
     playButton: "row1-8",
-    playList: "row1-9"
+    playList: "row1-9",
+    playbackRate: "row1-10"
   }
-}, P = H(null);
-P.displayName = "AudioPlayerDispatchContext";
-const Ce = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) => Math.round(Math.random() * (t - e) + e), mt = 1, ke = (e, t, o) => {
-  if (o - t < 1) return e;
-  let r = Le(t, o);
-  for (; r === e; )
-    r = Le(t, o);
-  return r;
-}, pt = (e, t) => {
+}, b = K(null);
+b.displayName = "AudioPlayerDispatchContext";
+const He = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Ke = (e, t) => Math.round(Math.random() * (t - e) + e), Ut = 1, Ve = (e, t, n) => {
+  if (n - t < 1) return e;
+  let a = Ke(t, n);
+  for (; a === e; )
+    a = Ke(t, n);
+  return a;
+}, Ot = (e, t) => {
   switch (t.type) {
     case "NEXT_AUDIO": {
       if (e.playList.length === 0) return e;
@@ -51,7 +53,7 @@ const Ce = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) =>
             audioResetKey: e.audioResetKey + 1,
             curAudioState: { ...e.curAudioState, currentTime: 0 }
           };
-        const r = ke(
+        const a = Ve(
           e.curIdx,
           0,
           e.playList.length - 1
@@ -59,8 +61,8 @@ const Ce = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) =>
         return {
           ...e,
           audioResetKey: e.audioResetKey + 1,
-          curPlayId: e.playList[r].id,
-          curIdx: r,
+          curPlayId: e.playList[a].id,
+          curIdx: a,
           curAudioState: {
             ...e.curAudioState,
             isLoadedMetaData: !1,
@@ -68,41 +70,43 @@ const Ce = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) =>
           }
         };
       }
-      const o = (e.curIdx + 1) % e.playList.length;
+      const n = (e.curIdx + 1) % e.playList.length;
       return {
         ...e,
         audioResetKey: e.audioResetKey + 1,
-        curIdx: o,
-        curPlayId: e.playList[o].id,
+        curIdx: n,
+        curPlayId: e.playList[n].id,
         curAudioState: { ...e.curAudioState, currentTime: 0 }
       };
     }
     case "PREV_AUDIO": {
-      const o = e.playList.length <= 1, r = t.currentTime > mt, a = e.curAudioState.repeatType === "NONE" && e.curIdx === 0;
-      if (o || r || a)
+      const n = e.playList.length <= 1, a = t.currentTime > Ut, r = e.curAudioState.repeatType === "NONE" && e.curIdx === 0;
+      if (n || a || r)
         return {
           ...e,
           audioResetKey: e.audioResetKey + 1,
           curAudioState: { ...e.curAudioState, currentTime: 0 }
         };
       if (e.curAudioState.repeatType === "SHUFFLE") {
-        const n = ke(
+        const s = Ve(
           e.curIdx,
           0,
           e.playList.length - 1
         );
         return {
           ...e,
-          curPlayId: e.playList[n].id,
-          curIdx: n,
+          audioResetKey: e.audioResetKey + 1,
+          curPlayId: e.playList[s].id,
+          curIdx: s,
           curAudioState: { ...e.curAudioState, currentTime: 0 }
         };
       }
-      const s = (e.curIdx - 1 + e.playList.length) % e.playList.length;
+      const i = (e.curIdx - 1 + e.playList.length) % e.playList.length;
       return {
         ...e,
-        curPlayId: e.playList[s].id,
-        curIdx: s,
+        audioResetKey: e.audioResetKey + 1,
+        curPlayId: e.playList[i].id,
+        curIdx: i,
         curAudioState: {
           ...e.curAudioState,
           isLoadedMetaData: !1,
@@ -126,7 +130,7 @@ const Ce = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) =>
           }
         };
       if (!t.playList.find(
-        (a) => a.id === e.curPlayId
+        (r) => r.id === e.curPlayId
       ))
         return {
           ...e,
@@ -140,13 +144,13 @@ const Ce = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) =>
             isLoadedMetaData: !1
           }
         };
-      const r = t.playList.findIndex(
-        (a) => a.id === e.curPlayId
+      const a = t.playList.findIndex(
+        (r) => r.id === e.curPlayId
       );
       return {
         ...e,
         playList: t.playList,
-        curIdx: r
+        curIdx: a
       };
     }
     case "SET_VOLUME":
@@ -154,7 +158,15 @@ const Ce = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) =>
         ...e,
         curAudioState: {
           ...e.curAudioState,
-          volume: Ce(t.volume)
+          volume: He(t.volume)
+        }
+      };
+    case "SET_PLAYBACK_RATE":
+      return {
+        ...e,
+        curAudioState: {
+          ...e.curAudioState,
+          playbackRate: t.playbackRate
         }
       };
     case "SET_AUDIO_STATE":
@@ -247,370 +259,396 @@ const Ce = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) =>
     default:
       throw new Error("Unhandled action");
   }
-}, Te = H(null);
-Te.displayName = "PlaybackContext";
-const he = H(null);
-he.displayName = "AudioAttrsContext";
-const fe = H(null);
-fe.displayName = "TrackContext";
-const ge = H(null);
-ge.displayName = "UIContext";
-const Ae = H(null);
-Ae.displayName = "ResourceContext";
-const Ee = H(null);
-Ee.displayName = "TimeContext";
-function yt(e) {
+}, Se = K(null);
+Se.displayName = "PlaybackContext";
+const Ie = K(null);
+Ie.displayName = "AudioAttrsContext";
+const we = K(null);
+we.displayName = "TrackContext";
+const be = K(null);
+be.displayName = "UIContext";
+const Le = K(null);
+Le.displayName = "ResourceContext";
+const Ne = K(null);
+Ne.displayName = "TimeContext";
+const A = (e) => {
+  const t = he(e);
+  if (!t) {
+    const n = e.displayName || "Context";
+    throw new Error(`${n} is not provided`);
+  }
+  return t;
+}, k = () => A(Se), re = () => A(Ne), $ = () => A(we), M = () => A(be), L = () => A(Le), Kt = () => A(Ie);
+function Vt(e) {
   const {
     playList: t,
-    audioInitialState: o,
-    activeUI: r,
-    placement: a,
-    customIcons: s,
-    coverImgsCss: n
-  } = e, c = {
-    isPlaying: (o == null ? void 0 : o.isPlaying) ?? F.isPlaying,
-    repeatType: (o == null ? void 0 : o.repeatType) ?? F.repeatType,
-    volume: typeof (o == null ? void 0 : o.volume) == "number" ? Ce(o.volume) : F.volume,
-    muted: (o == null ? void 0 : o.muted) ?? F.muted
-  }, d = r || { playButton: !0 }, m = {
-    playerPlacement: a == null ? void 0 : a.player,
-    playListPlacement: (a == null ? void 0 : a.playList) || "bottom",
-    interfacePlacement: (a == null ? void 0 : a.interface) || {
+    audioInitialState: n,
+    activeUI: a,
+    placement: r,
+    customIcons: i,
+    coverImgsCss: s
+  } = e, o = {
+    isPlaying: (n == null ? void 0 : n.isPlaying) ?? O.isPlaying,
+    repeatType: (n == null ? void 0 : n.repeatType) ?? O.repeatType,
+    volume: typeof (n == null ? void 0 : n.volume) == "number" ? He(n.volume) : O.volume,
+    muted: (n == null ? void 0 : n.muted) ?? O.muted,
+    playbackRate: (n == null ? void 0 : n.playbackRate) ?? O.playbackRate
+  }, u = a || { playButton: !0 }, d = {
+    playerPlacement: r == null ? void 0 : r.player,
+    playListPlacement: (r == null ? void 0 : r.playList) || "bottom",
+    interfacePlacement: (r == null ? void 0 : r.interface) || {
       templateArea: {
-        playButton: N.templateArea.playButton
+        playButton: de.templateArea.playButton
       }
     },
-    volumeSliderPlacement: a == null ? void 0 : a.volumeSlider
-  }, l = t.length === 0, y = o == null ? void 0 : o.curPlayId, u = y == null ? -1 : t.findIndex((p) => p.id === y);
+    volumeSliderPlacement: r == null ? void 0 : r.volumeSlider,
+    speedSelectorPlacement: r == null ? void 0 : r.speedSelector
+  }, l = t.length === 0, m = n == null ? void 0 : n.curPlayId, p = m == null ? -1 : t.findIndex((v) => v.id === m);
   return {
     playList: t,
-    curPlayId: l ? 0 : u >= 0 ? y : t[0].id,
-    curIdx: l ? -1 : u >= 0 ? u : 0,
-    curAudioState: c,
-    activeUI: d,
+    curPlayId: l ? 0 : p >= 0 ? m : t[0].id,
+    curIdx: l ? -1 : p >= 0 ? p : 0,
+    curAudioState: o,
+    activeUI: u,
     audioResetKey: 0,
     seekRequestKey: 0,
-    ...m,
-    customIcons: s,
-    coverImgsCss: n
+    ...d,
+    customIcons: i,
+    coverImgsCss: s
   };
 }
-const vt = ({
+const Bt = ({
   children: e,
   colorScheme: t,
-  ...o
+  ...n
 }) => {
-  var u, p;
-  const [r, a] = it(
-    pt,
-    o,
-    yt
-  ), s = D(
+  var v, f;
+  const [a, r] = xt(
+    Ot,
+    n,
+    Vt
+  ), i = x(
     () => ({
-      currentTime: r.curAudioState.currentTime ?? F.currentTime,
-      duration: r.curAudioState.duration ?? F.duration,
-      seekRequestKey: r.seekRequestKey
+      currentTime: a.curAudioState.currentTime ?? O.currentTime,
+      duration: a.curAudioState.duration ?? O.duration,
+      seekRequestKey: a.seekRequestKey
     }),
     [
-      r.curAudioState.currentTime,
-      r.curAudioState.duration,
-      r.seekRequestKey
+      a.curAudioState.currentTime,
+      a.curAudioState.duration,
+      a.seekRequestKey
     ]
-  ), n = D(
+  ), s = x(
     () => ({
-      isPlaying: r.curAudioState.isPlaying ?? F.isPlaying,
-      volume: r.curAudioState.volume ?? F.volume,
-      muted: r.curAudioState.muted ?? F.muted,
-      repeatType: r.curAudioState.repeatType,
-      isLoadedMetaData: r.curAudioState.isLoadedMetaData,
-      audioResetKey: r.audioResetKey
+      isPlaying: a.curAudioState.isPlaying ?? O.isPlaying,
+      volume: a.curAudioState.volume ?? O.volume,
+      muted: a.curAudioState.muted ?? O.muted,
+      repeatType: a.curAudioState.repeatType,
+      isLoadedMetaData: a.curAudioState.isLoadedMetaData,
+      audioResetKey: a.audioResetKey,
+      playbackRate: a.curAudioState.playbackRate ?? O.playbackRate
     }),
     [
-      r.curAudioState.isPlaying,
-      r.curAudioState.isLoadedMetaData,
-      r.curAudioState.volume,
-      r.curAudioState.muted,
-      r.curAudioState.repeatType,
-      r.audioResetKey
+      a.curAudioState.isPlaying,
+      a.curAudioState.isLoadedMetaData,
+      a.curAudioState.volume,
+      a.curAudioState.muted,
+      a.curAudioState.repeatType,
+      a.curAudioState.playbackRate,
+      a.audioResetKey
     ]
-  ), c = D(
+  ), o = x(
     () => ({
-      playList: r.playList,
-      curPlayId: r.curPlayId,
-      curIdx: r.curIdx
+      playList: a.playList,
+      curPlayId: a.curPlayId,
+      curIdx: a.curIdx
     }),
-    [r.playList, r.curPlayId, r.curIdx]
-  ), d = D(
+    [a.playList, a.curPlayId, a.curIdx]
+  ), { audioInitialState: u } = n, d = u == null ? void 0 : u.playListExpanded, l = x(
     () => ({
-      activeUI: r.activeUI,
-      playListPlacement: r.playListPlacement,
-      playerPlacement: r.playerPlacement,
-      interfacePlacement: r.interfacePlacement,
-      volumeSliderPlacement: r.volumeSliderPlacement,
-      colorScheme: t
+      activeUI: a.activeUI,
+      playListPlacement: a.playListPlacement,
+      playerPlacement: a.playerPlacement,
+      interfacePlacement: a.interfacePlacement,
+      volumeSliderPlacement: a.volumeSliderPlacement,
+      speedSelectorPlacement: a.speedSelectorPlacement,
+      colorScheme: t,
+      playListExpanded: d
     }),
     [
-      r.activeUI,
-      r.playListPlacement,
-      r.playerPlacement,
-      r.interfacePlacement,
-      r.volumeSliderPlacement,
-      t
+      a.activeUI,
+      a.playListPlacement,
+      a.playerPlacement,
+      a.interfacePlacement,
+      a.volumeSliderPlacement,
+      a.speedSelectorPlacement,
+      t,
+      d
     ]
-  ), { audioInitialState: m } = o, l = D(() => {
-    if (!m) return {};
+  ), m = x(() => {
+    if (!u) return {};
     const {
-      isPlaying: T,
-      repeatType: v,
+      isPlaying: y,
+      repeatType: T,
       isLoadedMetaData: h,
-      currentTime: S,
-      duration: k,
-      volume: B,
-      muted: R,
-      curPlayId: G,
-      ...ae
-    } = m;
-    return ae;
-  }, [m]), y = D(
+      currentTime: g,
+      duration: C,
+      volume: W,
+      muted: se,
+      playbackRate: R,
+      curPlayId: ce,
+      playListExpanded: ae,
+      ...ye
+    } = u;
+    return ye;
+  }, [u]), p = x(
     () => ({
-      elementRefs: r.elementRefs,
-      customIcons: r.customIcons,
-      coverImgsCss: r.coverImgsCss
+      elementRefs: a.elementRefs,
+      customIcons: a.customIcons,
+      coverImgsCss: a.coverImgsCss
     }),
     [
-      (u = r.elementRefs) == null ? void 0 : u.audioEl,
-      (p = r.elementRefs) == null ? void 0 : p.waveformInst,
-      r.customIcons,
-      r.coverImgsCss
+      (v = a.elementRefs) == null ? void 0 : v.audioEl,
+      (f = a.elementRefs) == null ? void 0 : f.waveformInst,
+      a.customIcons,
+      a.coverImgsCss
     ]
   );
-  return /* @__PURE__ */ i(Ee.Provider, { value: s, children: /* @__PURE__ */ i(Te.Provider, { value: n, children: /* @__PURE__ */ i(fe.Provider, { value: c, children: /* @__PURE__ */ i(ge.Provider, { value: d, children: /* @__PURE__ */ i(Ae.Provider, { value: y, children: /* @__PURE__ */ i(he.Provider, { value: l, children: /* @__PURE__ */ i(P.Provider, { value: a, children: e }) }) }) }) }) }) });
-}, g = (e) => {
-  const t = lt(e);
-  if (!t) {
-    const o = e.displayName || "Context";
-    throw new Error(`${o} is not provided`);
-  }
-  return t;
-}, O = () => g(ge), J = {
+  return /* @__PURE__ */ c(Ne.Provider, { value: i, children: /* @__PURE__ */ c(Se.Provider, { value: s, children: /* @__PURE__ */ c(we.Provider, { value: o, children: /* @__PURE__ */ c(be.Provider, { value: l, children: /* @__PURE__ */ c(Le.Provider, { value: p, children: /* @__PURE__ */ c(Ie.Provider, { value: m, children: /* @__PURE__ */ c(b.Provider, { value: r, children: e }) }) }) }) }) }) });
+}, J = {
   top: "auto",
   right: "auto",
   bottom: "auto",
   left: "auto"
-}, Tt = {
+}, $t = {
   bottom: { ...J, bottom: 0 },
   top: { ...J, top: 0 },
   "bottom-left": { ...J, bottom: 0, left: 0 },
   "bottom-right": { ...J, bottom: 0, right: 0 },
   "top-left": { ...J, top: 0, left: 0 },
   "top-right": { ...J, top: 0, right: 0 }
-}, Me = te.memo(({ children: e, rootContainerProps: t }) => {
-  const { playerPlacement: o, colorScheme: r } = O(), a = D(
-    () => o ? Tt[o] : void 0,
-    [o]
-  ), n = {
+}, Ge = te.memo(({ children: e, rootContainerProps: t }) => {
+  const { playerPlacement: n, colorScheme: a } = M(), r = x(
+    () => n ? $t[n] : void 0,
+    [n]
+  ), s = {
     width: "100%",
-    position: o !== "static" && !!o ? "fixed" : "static",
-    ...a,
+    position: n !== "static" && !!n ? "fixed" : "static",
+    ...r,
     ...(t == null ? void 0 : t.style) ?? {}
   };
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ c(
     "div",
     {
       ...t,
       className: `rmap-player-provider${t != null && t.className ? ` ${t.className}` : ""}`,
-      "data-theme": r ?? void 0,
-      style: n,
+      "data-theme": a ?? void 0,
+      style: s,
       children: e
     }
   );
 });
-Me.displayName = "AudioPlayerContainer";
-const ht = ({
+Ge.displayName = "AudioPlayerContainer";
+const Ft = ({
   areas: e,
   columns: t,
-  alignItems: o,
-  justifyContent: r,
-  minHeight: a,
-  UNSAFE_className: s,
-  children: n
+  alignItems: n,
+  justifyContent: a,
+  minHeight: r,
+  UNSAFE_className: i,
+  children: s
 }) => {
-  const c = {
+  const o = {
     display: "grid",
-    gridTemplateAreas: e == null ? void 0 : e.map((d) => `"${d}"`).join(" "),
+    gridTemplateAreas: e == null ? void 0 : e.map((u) => `"${u}"`).join(" "),
     gridTemplateColumns: t == null ? void 0 : t.join(" "),
-    alignItems: o,
-    justifyContent: r,
-    minHeight: a
+    alignItems: n,
+    justifyContent: a,
+    minHeight: r
   };
-  return /* @__PURE__ */ i("div", { className: s, style: c, children: n });
-}, ft = ht, xe = ve(
+  return /* @__PURE__ */ c("div", { className: i, style: o, children: s });
+}, Ht = Ft, ze = Pe(
   ({
     children: e,
     visible: t = !0,
-    gridArea: o,
-    width: r,
-    justifySelf: a = "center",
-    padding: s,
-    UNSAFE_className: n,
-    style: c,
-    ...d
-  }, m) => {
+    gridArea: n,
+    width: a,
+    justifySelf: r = "center",
+    padding: i,
+    UNSAFE_className: s,
+    style: o,
+    ...u
+  }, d) => {
     if (!t) return null;
     const l = {
-      gridArea: o,
-      width: r,
-      justifySelf: a,
-      padding: s ?? "0 5px",
-      ...c
+      gridArea: n,
+      width: a,
+      justifySelf: r,
+      padding: i ?? "0 5px",
+      ...o
     };
-    return /* @__PURE__ */ i("div", { ref: m, className: n, style: l, ...d, children: e });
+    return /* @__PURE__ */ c("div", { ref: d, className: s, style: l, ...u, children: e });
   }
 );
-xe.displayName = "GridItem";
-const M = ft;
-M.Item = xe;
-const b = () => g(Te), re = () => g(Ee), V = () => g(fe), L = () => g(Ae), _e = ({
+ze.displayName = "GridItem";
+const _ = Ht;
+_.Item = ze;
+const Gt = ({
   children: e,
   id: t,
-  ...o
+  ...n
 }) => {
-  var l, y;
-  const r = b(), a = re(), s = V(), n = O(), c = L(), d = {
+  var l, m;
+  const a = k(), r = re(), i = $(), s = M(), o = L(), u = {
     curAudioState: {
-      isPlaying: r.isPlaying,
-      volume: r.volume,
-      muted: r.muted,
-      repeatType: r.repeatType,
-      isLoadedMetaData: r.isLoadedMetaData,
-      currentTime: a.currentTime,
-      duration: a.duration
+      isPlaying: a.isPlaying,
+      volume: a.volume,
+      muted: a.muted,
+      repeatType: a.repeatType,
+      isLoadedMetaData: a.isLoadedMetaData,
+      currentTime: r.currentTime,
+      duration: r.duration
     },
-    audioResetKey: r.audioResetKey,
-    ...a,
+    audioResetKey: a.audioResetKey,
+    ...r,
+    ...i,
     ...s,
-    ...n,
-    ...c
-  }, m = (y = (l = n.interfacePlacement) == null ? void 0 : l.customComponentsArea) == null ? void 0 : y[t];
-  return /* @__PURE__ */ i(
-    M.Item,
+    ...o
+  }, d = (m = (l = s.interfacePlacement) == null ? void 0 : l.customComponentsArea) == null ? void 0 : m[t];
+  return /* @__PURE__ */ c(
+    _.Item,
     {
       UNSAFE_className: "rmap-custom-component",
-      gridArea: m,
-      ...o,
-      children: te.cloneElement(e, { audioPlayerState: d })
+      gridArea: d,
+      ...n,
+      children: te.cloneElement(e, { audioPlayerState: u })
     }
   );
-}, gt = () => g(he), At = () => {
+}, We = "PlayListEmpty", je = () => null;
+je.displayName = We;
+const zt = () => {
   const {
     isPlaying: e,
     volume: t,
-    repeatType: o,
-    audioResetKey: r
-  } = b(), { currentTime: a, seekRequestKey: s } = re(), { elementRefs: n } = L(), c = g(P), d = f(
-    (p) => {
-      if (p.currentTarget.readyState === 0) return;
-      const T = p.currentTarget.currentTime;
-      c({
+    repeatType: n,
+    audioResetKey: a,
+    playbackRate: r
+  } = k(), { currentTime: i, seekRequestKey: s } = re(), { elementRefs: o } = L(), u = A(b), d = E(
+    (y) => {
+      if (y.currentTarget.readyState === 0) return;
+      const T = y.currentTarget.currentTime;
+      u({
         type: "SET_AUDIO_STATE",
         audioState: { currentTime: T }
       });
     },
-    [c]
-  ), m = f(() => {
-    if (n != null && n.audioEl) {
-      if (o === "ONE") {
-        be(() => {
-          c({ type: "SEEK", time: 0 });
-        }), n.audioEl.play();
+    [u]
+  ), l = E(() => {
+    if (o != null && o.audioEl) {
+      if (n === "ONE") {
+        Fe(() => {
+          u({ type: "SEEK", time: 0 });
+        }), o.audioEl.play();
         return;
       }
-      c({ type: "NEXT_AUDIO" });
+      u({ type: "NEXT_AUDIO" });
     }
-  }, [c, o, n == null ? void 0 : n.audioEl]), l = f(
-    (p) => {
-      const { duration: T } = p.currentTarget;
-      t != null && (p.currentTarget.volume = t), c({
+  }, [u, n, o == null ? void 0 : o.audioEl]), m = E(
+    (y) => {
+      t != null && (y.volume = t), r != null && (y.playbackRate = r);
+    },
+    [t, r]
+  ), p = E(
+    (y) => {
+      const { duration: T } = y.currentTarget;
+      m(y.currentTarget), u({
         type: "SET_AUDIO_STATE",
         audioState: { isLoadedMetaData: !0, duration: T }
       });
     },
-    [c, t]
-  ), y = A(!1);
-  E(() => {
-    if (n != null && n.audioEl) {
-      if (!y.current) {
-        y.current = !0;
+    [u, m]
+  ), v = S(!1);
+  P(() => {
+    if (o != null && o.audioEl) {
+      if (!v.current) {
+        v.current = !0;
         return;
       }
-      n.audioEl.currentTime = 0;
+      o.audioEl.currentTime = 0;
     }
-  }, [r, n == null ? void 0 : n.audioEl]), E(() => {
-    n != null && n.audioEl && (e ? n.audioEl.play().catch(() => {
-      c({
+  }, [a, o == null ? void 0 : o.audioEl]), P(() => {
+    o != null && o.audioEl && (e ? o.audioEl.play().catch((y) => {
+      (y == null ? void 0 : y.name) !== "AbortError" && u({
         type: "SET_AUDIO_STATE",
         audioState: { isPlaying: !1 }
       });
-    }) : n.audioEl.pause());
-  }, [n == null ? void 0 : n.audioEl, e, c]), E(() => {
-    !(n != null && n.audioEl) || t == null || (n.audioEl.volume = t);
-  }, [n == null ? void 0 : n.audioEl, t]);
-  const u = A(0);
-  return E(() => {
-    if (s === u.current) return;
-    u.current = s;
-    const p = n == null ? void 0 : n.audioEl;
-    if (!p || a == null) return;
-    p.currentTime = a;
-    const T = n == null ? void 0 : n.waveformInst, v = p.duration, h = Number.isFinite(v) && v > 0;
-    if (!T || !h) return;
-    const S = a / v, k = Math.min(1, Math.max(0, S));
-    T.seekTo(k);
+    }) : o.audioEl.pause());
+  }, [o == null ? void 0 : o.audioEl, e, u, a]), P(() => {
+    !(o != null && o.audioEl) || t == null || (o.audioEl.volume = t);
+  }, [o == null ? void 0 : o.audioEl, t]), P(() => {
+    !(o != null && o.audioEl) || r == null || (o.audioEl.playbackRate = r);
+  }, [o == null ? void 0 : o.audioEl, r]);
+  const f = S(0);
+  return P(() => {
+    if (s === f.current) return;
+    f.current = s;
+    const y = o == null ? void 0 : o.audioEl;
+    if (!y || i == null) return;
+    y.currentTime = i;
+    const T = o == null ? void 0 : o.waveformInst, h = y.duration, g = Number.isFinite(h) && h > 0;
+    if (!T || !g) return;
+    const C = i / h, W = Math.min(1, Math.max(0, C));
+    T.seekTo(W);
   }, [
     s,
-    a,
-    n == null ? void 0 : n.audioEl,
-    n == null ? void 0 : n.waveformInst
+    i,
+    o == null ? void 0 : o.audioEl,
+    o == null ? void 0 : o.waveformInst
   ]), {
     onTimeUpdate: d,
-    onEnded: m,
-    onLoadedMetadata: l
+    onEnded: l,
+    onLoadedMetadata: p
   };
-}, De = te.memo(({ audioRef: e }) => {
-  const t = A(null), { muted: o } = b(), { curPlayId: r, playList: a } = V(), s = gt(), n = g(P), c = a.find(
-    (m) => m.id === r
-  ), d = At();
-  return E(() => {
-    t.current && (n({
+}, Ye = te.memo(({ audioRef: e }) => {
+  const t = S(null), { muted: n } = k(), { curPlayId: a, playList: r } = $(), i = Kt(), s = A(b), o = r.find(
+    (d) => d.id === a
+  ), u = zt();
+  return P(() => {
+    t.current && (s({
       type: "SET_ELEMENT_REFS",
       elementRefs: { audioEl: t.current }
     }), e && (e.current = t.current));
-  }, [n, e]), /* @__PURE__ */ i(
+  }, [s, e]), /* @__PURE__ */ c(
     "audio",
     {
       id: "rm-audio-player-audio",
-      ...s,
-      muted: o,
+      ...i,
+      muted: n,
       ref: t,
-      src: c == null ? void 0 : c.src,
-      ...d
+      src: o == null ? void 0 : o.src,
+      ...u
     }
   );
 });
-De.displayName = "Audio";
-const q = ve(({ className: e, type: t = "button", ...o }, r) => /* @__PURE__ */ i(
+Ye.displayName = "Audio";
+function B(e, t) {
+  var a, r;
+  const { interfacePlacement: n } = M();
+  return t ?? ((a = n == null ? void 0 : n.itemCustomArea) == null ? void 0 : a[e]) ?? ((r = n == null ? void 0 : n.templateArea) == null ? void 0 : r[e]) ?? de.templateArea[e];
+}
+const q = Pe(({ className: e, type: t = "button", ...n }, a) => /* @__PURE__ */ c(
   "button",
   {
-    ref: r,
+    ref: a,
     type: t,
     className: `styled-btn${e ? ` ${e}` : ""}`,
-    ...o
+    ...n
   }
 ));
 q.displayName = "StyledBtn";
-const Ie = (e) => (
+const ke = (e) => (
   // eslint-disable-next-line react/display-name
-  ({ size: t = "1em", color: o, style: r, ...a }) => /* @__PURE__ */ i(
+  ({ size: t = "1em", color: n, style: a, ...r }) => /* @__PURE__ */ c(
     "svg",
     {
       "aria-hidden": "true",
@@ -621,16 +659,16 @@ const Ie = (e) => (
       viewBox: "0 0 24 24",
       height: t,
       width: t,
-      color: o,
-      style: o ? { color: o, ...r } : r,
+      color: n,
+      style: n ? { color: n, ...a } : a,
       xmlns: "http://www.w3.org/2000/svg",
-      ...a,
+      ...r,
       dangerouslySetInnerHTML: { __html: e }
     }
   )
-), Y = (e) => (
+), X = (e) => (
   // eslint-disable-next-line react/display-name
-  ({ size: t = "1em", color: o, style: r, ...a }) => /* @__PURE__ */ i(
+  ({ size: t = "1em", color: n, style: a, ...r }) => /* @__PURE__ */ c(
     "svg",
     {
       "aria-hidden": "true",
@@ -643,16 +681,16 @@ const Ie = (e) => (
       strokeLinejoin: "round",
       height: t,
       width: t,
-      color: o,
-      style: o ? { color: o, ...r } : r,
+      color: n,
+      style: n ? { color: n, ...a } : a,
       xmlns: "http://www.w3.org/2000/svg",
-      ...a,
+      ...r,
       dangerouslySetInnerHTML: { __html: e }
     }
   )
-), Oe = (e, t = "0 0 16 16") => (
+), qe = (e, t = "0 0 16 16") => (
   // eslint-disable-next-line react/display-name
-  ({ size: o = "1em", color: r, style: a, ...s }) => /* @__PURE__ */ i(
+  ({ size: n = "1em", color: a, style: r, ...i }) => /* @__PURE__ */ c(
     "svg",
     {
       "aria-hidden": "true",
@@ -661,358 +699,404 @@ const Ie = (e) => (
       fill: "currentColor",
       strokeWidth: 0,
       viewBox: t,
-      height: o,
-      width: o,
-      color: r,
-      style: r ? { color: r, ...a } : a,
+      height: n,
+      width: n,
+      color: a,
+      style: a ? { color: a, ...r } : r,
       xmlns: "http://www.w3.org/2000/svg",
-      ...s,
+      ...i,
       dangerouslySetInnerHTML: { __html: e }
     }
   )
-), Ue = Ie(
+), Xe = ke(
   '<path fill="none" d="M0 0h24v24H0z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/>'
 );
-Ue.displayName = "MdPlayCircleFilled";
-const Ve = Ie(
+Xe.displayName = "MdPlayCircleFilled";
+const Qe = ke(
   '<path fill="none" d="M0 0h24v24H0z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"/>'
 );
-Ve.displayName = "MdPauseCircleFilled";
-const Be = Ie(
+Qe.displayName = "MdPauseCircleFilled";
+const Je = ke(
   '<path fill="none" d="M0 0h24v24H0z"/><path d="M3 10h11v2H3zM3 6h11v2H3zM3 14h7v2H3zM16 13v8l6-4z"/>'
 );
-Be.displayName = "MdPlaylistPlay";
-const Ke = Y(
+Je.displayName = "MdPlaylistPlay";
+const Ze = X(
   '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3"/><path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"/>'
 );
-Ke.displayName = "TbRepeat";
-const $e = Y(
+Ze.displayName = "TbRepeat";
+const et = X(
   '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3"/><path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"/><path d="M11 11l1 -1v4"/>'
 );
-$e.displayName = "TbRepeatOnce";
-const Fe = Y(
+et.displayName = "TbRepeatOnce";
+const tt = X(
   '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 12v-3c0 -1.336 .873 -2.468 2.08 -2.856m3.92 -.144h10m-3 -3l3 3l-3 3"/><path d="M20 12v3a3 3 0 0 1 -.133 .886m-1.99 1.984a3 3 0 0 1 -.877 .13h-13m3 3l-3 -3l3 -3"/><path d="M3 3l18 18"/>'
 );
-Fe.displayName = "TbRepeatOff";
-const He = Y(
+tt.displayName = "TbRepeatOff";
+const rt = X(
   '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 4l3 3l-3 3"/><path d="M18 20l3 -3l-3 -3"/><path d="M3 7h3a5 5 0 0 1 5 5a5 5 0 0 0 5 5h5"/><path d="M21 7h-5a4.978 4.978 0 0 0 -2.998 .998m-4.002 8.003a4.984 4.984 0 0 1 -3 .999h-3"/>'
 );
-He.displayName = "TbArrowsShuffle";
-const Re = Y(
+rt.displayName = "TbArrowsShuffle";
+const at = X(
   '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 8a5 5 0 0 1 0 8"/><path d="M17.7 5a9 9 0 0 1 0 14"/><path d="M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a0.8 .8 0 0 1 1.5 .5v14a0.8 .8 0 0 1 -1.5 .5l-3.5 -4.5"/>'
 );
-Re.displayName = "TbVolume";
-const ze = Y(
+at.displayName = "TbVolume";
+const nt = X(
   '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 8a5 5 0 0 1 0 8"/><path d="M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a0.8 .8 0 0 1 1.5 .5v14a0.8 .8 0 0 1 -1.5 .5l-3.5 -4.5"/>'
 );
-ze.displayName = "TbVolume2";
-const We = Y(
+nt.displayName = "TbVolume2";
+const ot = X(
   '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a0.8 .8 0 0 1 1.5 .5v14a0.8 .8 0 0 1 -1.5 .5l-3.5 -4.5"/><path d="M16 10l4 4m0 -4l-4 4"/>'
 );
-We.displayName = "TbVolume3";
-const Ge = Oe(
+ot.displayName = "TbVolume3";
+const it = qe(
   '<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5z"/><path d="M7 8l4-3v6z"/><path d="M5 5h2v6h-2v-6z"/>'
 );
-Ge.displayName = "ImPrevious";
-const je = Oe(
+it.displayName = "ImPrevious";
+const st = qe(
   '<path d="M8 0c4.418 0 8 3.582 8 8s-3.582 8-8 8-8-3.582-8-8 3.582-8 8-8zM8 14.5c3.59 0 6.5-2.91 6.5-6.5s-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5 2.91 6.5 6.5 6.5z"/><path d="M9 8l-4-3v6z"/><path d="M11 5h-2v6h2v-6z"/>'
 );
-je.displayName = "ImNext";
-const x = ({ render: e, customIcon: t }) => /* @__PURE__ */ i(z, { children: t ?? e }), Et = W(function() {
-  const { isPlaying: t } = b(), { customIcons: o } = L(), r = g(P);
-  return /* @__PURE__ */ i(
+st.displayName = "ImNext";
+const D = ({ render: e, customIcon: t }) => /* @__PURE__ */ c(G, { children: t ?? e }), Wt = z(function() {
+  const { isPlaying: t } = k(), { customIcons: n } = L(), a = A(b);
+  return /* @__PURE__ */ c(
     q,
     {
       type: "button",
       "aria-label": t ? "Pause" : "Play",
-      onClick: () => r({ type: "CHANGE_PLAYING_STATE" }),
+      onClick: () => a({ type: "CHANGE_PLAYING_STATE" }),
       className: "rmap-play-btn",
       "data-testid": "play-btn",
-      children: t ? /* @__PURE__ */ i(
-        x,
+      children: t ? /* @__PURE__ */ c(
+        D,
         {
-          render: /* @__PURE__ */ i(Ve, {}),
-          customIcon: o == null ? void 0 : o.pause
+          render: /* @__PURE__ */ c(Qe, {}),
+          customIcon: n == null ? void 0 : n.pause
         }
-      ) : /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(Ue, {}), customIcon: o == null ? void 0 : o.play })
+      ) : /* @__PURE__ */ c(D, { render: /* @__PURE__ */ c(Xe, {}), customIcon: n == null ? void 0 : n.play })
     }
   );
-}), It = W(function({ isVisible: t }) {
-  const { customIcons: o, elementRefs: r } = L(), a = g(P);
-  return t ? /* @__PURE__ */ i(
+}), jt = z(function({ isVisible: t }) {
+  const { customIcons: n, elementRefs: a } = L(), r = A(b);
+  return t ? /* @__PURE__ */ c(
     q,
     {
       type: "button",
       "aria-label": "Previous track",
       onClick: () => {
-        var c;
-        const n = ((c = r == null ? void 0 : r.audioEl) == null ? void 0 : c.currentTime) ?? 0;
-        a({ type: "PREV_AUDIO", currentTime: n });
+        var o;
+        const s = ((o = a == null ? void 0 : a.audioEl) == null ? void 0 : o.currentTime) ?? 0;
+        r({ type: "PREV_AUDIO", currentTime: s });
       },
       className: "rmap-prev-btn",
       "data-testid": "prev-btn",
-      children: /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(Ge, {}), customIcon: o == null ? void 0 : o.prev })
+      children: /* @__PURE__ */ c(D, { render: /* @__PURE__ */ c(it, {}), customIcon: n == null ? void 0 : n.prev })
     }
   ) : null;
-}), St = W(function({ isVisible: t }) {
-  const { customIcons: o } = L(), r = g(P);
-  return t ? /* @__PURE__ */ i(
+}), Yt = z(function({ isVisible: t }) {
+  const { customIcons: n } = L(), a = A(b);
+  return t ? /* @__PURE__ */ c(
     q,
     {
       type: "button",
       "aria-label": "Next track",
       onClick: () => {
-        r({ type: "NEXT_AUDIO" });
+        a({ type: "NEXT_AUDIO" });
       },
       className: "rmap-next-btn",
       "data-testid": "next-btn",
-      children: /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(je, {}), customIcon: o == null ? void 0 : o.next })
+      children: /* @__PURE__ */ c(D, { render: /* @__PURE__ */ c(st, {}), customIcon: n == null ? void 0 : n.next })
     }
   ) : null;
-}), wt = {
+}), ct = ({
+  gridArea: e,
+  visible: t,
+  ...n
+}) => {
+  const { activeUI: a } = M(), r = !!(a.prevNnext ?? a.all), i = B("playButton", e);
+  return /* @__PURE__ */ c(_.Item, { gridArea: i, visible: t ?? !0, ...n, children: /* @__PURE__ */ w(
+    "div",
+    {
+      className: "rmap-ctrl-btn-wrapper",
+      role: "group",
+      "aria-label": "Playback controls",
+      children: [
+        /* @__PURE__ */ c(jt, { isVisible: r }),
+        /* @__PURE__ */ c(Wt, {}),
+        /* @__PURE__ */ c(Yt, { isVisible: r })
+      ]
+    }
+  ) });
+}, qt = {
   ALL: "Repeat: All tracks",
   ONE: "Repeat: One track",
   NONE: "Repeat: Off",
   SHUFFLE: "Shuffle"
-}, Pt = {
+}, Xt = {
   ALL: "ONE",
   ONE: "NONE",
   NONE: "SHUFFLE",
   SHUFFLE: "ALL"
-}, Lt = W(function() {
-  const { repeatType: t } = b(), { customIcons: o } = L(), r = g(P), a = () => {
-    r({
-      type: "SET_REPEAT_TYPE",
-      repeatType: Pt[t]
-    });
-  };
-  return /* @__PURE__ */ w(
-    q,
-    {
-      type: "button",
-      "aria-label": wt[t],
-      onClick: a,
-      className: "rmap-repeat-btn",
-      "data-testid": "repeat-btn",
-      "data-repeattype": t,
-      children: [
-        t === "ALL" && /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(Ke, {}), customIcon: o == null ? void 0 : o.repeatAll }),
-        t === "ONE" && /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i($e, {}), customIcon: o == null ? void 0 : o.repeatOne }),
-        t === "NONE" && /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(Fe, {}), customIcon: o == null ? void 0 : o.repeatNone }),
-        t === "SHUFFLE" && /* @__PURE__ */ i(
-          x,
+}, lt = z(
+  function({ gridArea: t, visible: n, ...a }) {
+    const { repeatType: r } = k(), { customIcons: i } = L(), s = A(
+      b
+    ), o = () => {
+      s({
+        type: "SET_REPEAT_TYPE",
+        repeatType: Xt[r]
+      });
+    }, u = B("repeatType", t);
+    return /* @__PURE__ */ c(
+      _.Item,
+      {
+        gridArea: u,
+        visible: n ?? !0,
+        ...a,
+        children: /* @__PURE__ */ w(
+          q,
           {
-            render: /* @__PURE__ */ i(He, {}),
-            customIcon: o == null ? void 0 : o.repeatShuffle
+            type: "button",
+            "aria-label": qt[r],
+            onClick: o,
+            className: "rmap-repeat-btn",
+            "data-testid": "repeat-btn",
+            "data-repeattype": r,
+            children: [
+              r === "ALL" && /* @__PURE__ */ c(D, { render: /* @__PURE__ */ c(Ze, {}), customIcon: i == null ? void 0 : i.repeatAll }),
+              r === "ONE" && /* @__PURE__ */ c(
+                D,
+                {
+                  render: /* @__PURE__ */ c(et, {}),
+                  customIcon: i == null ? void 0 : i.repeatOne
+                }
+              ),
+              r === "NONE" && /* @__PURE__ */ c(
+                D,
+                {
+                  render: /* @__PURE__ */ c(tt, {}),
+                  customIcon: i == null ? void 0 : i.repeatNone
+                }
+              ),
+              r === "SHUFFLE" && /* @__PURE__ */ c(
+                D,
+                {
+                  render: /* @__PURE__ */ c(rt, {}),
+                  customIcon: i == null ? void 0 : i.repeatShuffle
+                }
+              )
+            ]
           }
         )
-      ]
-    }
-  );
-}), me = { size: "100%" }, qe = W(() => {
-  var n;
-  const { volume: e, muted: t } = b(), { customIcons: o, elementRefs: r } = L(), a = e ?? ((n = r == null ? void 0 : r.audioEl) == null ? void 0 : n.volume) ?? 0, s = a > 0 && a <= 0.5;
-  return t || a === 0 ? /* @__PURE__ */ i(
-    x,
+      }
+    );
+  }
+), Te = { size: "100%" }, ut = z(() => {
+  var s;
+  const { volume: e, muted: t } = k(), { customIcons: n, elementRefs: a } = L(), r = e ?? ((s = a == null ? void 0 : a.audioEl) == null ? void 0 : s.volume) ?? 0, i = r > 0 && r <= 0.5;
+  return t || r === 0 ? /* @__PURE__ */ c(
+    D,
     {
-      render: /* @__PURE__ */ i(We, { ...me }),
-      customIcon: o == null ? void 0 : o.volumeMuted
+      render: /* @__PURE__ */ c(ot, { ...Te }),
+      customIcon: n == null ? void 0 : n.volumeMuted
     }
-  ) : s ? /* @__PURE__ */ i(
-    x,
+  ) : i ? /* @__PURE__ */ c(
+    D,
     {
-      render: /* @__PURE__ */ i(ze, { ...me }),
-      customIcon: o == null ? void 0 : o.volumeHalf
+      render: /* @__PURE__ */ c(nt, { ...Te }),
+      customIcon: n == null ? void 0 : n.volumeHalf
     }
-  ) : /* @__PURE__ */ i(
-    x,
+  ) : /* @__PURE__ */ c(
+    D,
     {
-      render: /* @__PURE__ */ i(Re, { ...me }),
-      customIcon: o == null ? void 0 : o.volumeFull
+      render: /* @__PURE__ */ c(at, { ...Te }),
+      customIcon: n == null ? void 0 : n.volumeFull
     }
   );
 });
-qe.displayName = "VolumeIcon";
-const le = H(null);
-le.displayName = "DrawerContext";
-const Ye = (e, t) => {
-  E(() => {
-    const o = (r) => {
-      const a = e.current, { target: s } = r;
-      !r || !a || a.contains(s) || t(r);
+ut.displayName = "VolumeIcon";
+const ie = K(null);
+ie.displayName = "DrawerContext";
+const dt = (e, t) => {
+  P(() => {
+    const n = (a) => {
+      const r = e.current, { target: i } = a;
+      !a || !r || r.contains(i) || t(a);
     };
-    return document.addEventListener("click", o), () => document.removeEventListener("click", o);
+    return document.addEventListener("click", n), () => document.removeEventListener("click", n);
   }, [e, t]);
-}, se = ({
+}, oe = ({
   outboundClickActive: e = !1,
   placement: t = "bottom",
-  children: o,
-  isOpen: r,
-  onOpenChange: a
+  children: n,
+  isOpen: a,
+  onOpenChange: r,
+  initialOpen: i
 }) => {
-  const s = A(null), [n, c] = te.Children.toArray(o), [d, m] = C(!1), l = Ne();
-  Ye(s, () => {
-    e && (m(!1), a && a(!1));
-  }), E(() => {
-    r !== void 0 && m(r);
-  }, [r]);
-  const y = D(
-    () => ({ isOpen: d, setIsOpen: m, onOpenChange: a, drawerId: l }),
-    [d, m, a, l]
+  const s = S(null), [o, u] = te.Children.toArray(n), [d, l] = N(
+    a !== void 0 ? a : i ?? !1
+  ), m = $e();
+  dt(s, () => {
+    e && (l(!1), r && r(!1));
+  }), P(() => {
+    a !== void 0 && l(a);
+  }, [a]);
+  const p = x(
+    () => ({ isOpen: d, setIsOpen: l, onOpenChange: r, drawerId: m }),
+    [d, l, r, m]
   );
-  return /* @__PURE__ */ i("div", { className: "rmap-drawer-container", ref: s, children: /* @__PURE__ */ i(le.Provider, { value: y, children: /* @__PURE__ */ w(z, { children: [
-    t === "top" && c,
-    n,
-    t === "bottom" && c
+  return /* @__PURE__ */ c("div", { className: "rmap-drawer-container", ref: s, children: /* @__PURE__ */ c(ie.Provider, { value: p, children: /* @__PURE__ */ w(G, { children: [
+    t === "top" && u,
+    o,
+    t === "bottom" && u
   ] }) }) });
-}, Xe = typeof window < "u", pe = Xe ? ct : E, Se = ({
+}, pt = typeof window < "u", ge = pt ? Mt : P, Ce = ({
   visible: e,
   name: t,
-  leaveTime: o,
-  enterTime: r,
-  clearTime: a,
-  onExited: s,
-  onEntered: n,
-  children: c
+  leaveTime: n,
+  enterTime: a,
+  clearTime: r,
+  onExited: i,
+  onEntered: s,
+  children: o
 }) => {
-  const [d, m] = C(""), [l, y] = C(!1), u = A(n), p = A(s), T = A(t), v = A(r), h = A(o), S = A(a);
-  return pe(() => {
-    u.current = n, p.current = s, T.current = t, v.current = r, h.current = o, S.current = a;
-  }), pe(() => {
-    const k = e ? "enter" : "leave", B = T.current, R = e ? v.current : h.current;
-    e && !l && y(!0), m(`${B}-${k}`);
-    const G = setTimeout(() => {
-      var X, oe;
-      m(
-        `${B}-${k} ${B}-${k}-active`
-      ), k === "leave" ? (X = p.current) == null || X.call(p) : (oe = u.current) == null || oe.call(u);
-    }, R), ae = setTimeout(() => {
-      e || (m(B), y(!1));
-    }, R + S.current);
+  const [u, d] = N(""), [l, m] = N(!1), p = S(s), v = S(i), f = S(t), y = S(a), T = S(n), h = S(r);
+  return ge(() => {
+    p.current = s, v.current = i, f.current = t, y.current = a, T.current = n, h.current = r;
+  }), ge(() => {
+    const g = e ? "enter" : "leave", C = f.current, W = e ? y.current : T.current;
+    e && !l && m(!0), d(`${C}-${g}`);
+    const se = setTimeout(() => {
+      var ce, ae;
+      d(
+        `${C}-${g} ${C}-${g}-active`
+      ), g === "leave" ? (ce = v.current) == null || ce.call(v) : (ae = p.current) == null || ae.call(p);
+    }, W), R = setTimeout(() => {
+      e || (d(C), m(!1));
+    }, W + h.current);
     return () => {
-      clearTimeout(G), clearTimeout(ae);
+      clearTimeout(se), clearTimeout(R);
     };
-  }, [e, l]), l ? ut(c, {
-    className: `${c.props.className} ${d}`
+  }, [e, l]), l ? _t(o, {
+    className: `${o.props.className} ${u}`
   }) : null;
-}, kt = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [role="button"]:not([aria-disabled="true"])', Nt = ({
+}, Qt = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [role="button"]:not([aria-disabled="true"])', Jt = ({
   children: e,
   isWithAnimation: t = !0,
-  "aria-label": o = "Dialog"
+  "aria-label": n = "Dialog"
 }) => {
-  const { isOpen: r, setIsOpen: a, onOpenChange: s, drawerId: n } = g(le), c = A(null), d = A(null), m = f(
+  const { isOpen: a, setIsOpen: r, onOpenChange: i, drawerId: s } = A(ie), o = S(null), u = S(null), d = E(
     () => {
-      var v;
-      return (v = c.current) == null ? void 0 : v.querySelectorAll(kt);
+      var y;
+      return (y = o.current) == null ? void 0 : y.querySelectorAll(Qt);
     },
     []
-  ), l = f(() => {
-    var v, h;
-    (h = (v = m()) == null ? void 0 : v[0]) == null || h.focus();
-  }, [m]), y = f(() => {
-    d.current = document.activeElement, l();
-  }, [l]), u = f(() => {
-    var v;
-    (v = d.current) == null || v.focus();
+  ), l = E(() => {
+    var y, T;
+    (T = (y = d()) == null ? void 0 : y[0]) == null || T.focus();
+  }, [d]), m = E(() => {
+    u.current = document.activeElement, l();
+  }, [l]), p = E(() => {
+    var y;
+    (y = u.current) == null || y.focus();
   }, []);
-  E(() => {
-    var v;
-    r && !t ? (d.current = document.activeElement, l()) : !r && !t && ((v = d.current) == null || v.focus());
-  }, [r, t, l]);
-  const p = f(
-    (v) => {
-      if (v.key === "Escape") {
-        a(!1), s && s(!1);
+  P(() => {
+    var y;
+    a && !t ? (u.current = document.activeElement, l()) : !a && !t && ((y = u.current) == null || y.focus());
+  }, [a, t, l]);
+  const v = E(
+    (y) => {
+      if (y.key === "Escape") {
+        r(!1), i && i(!1);
         return;
       }
-      if (v.key === "Tab") {
-        const h = m();
-        if (!h || h.length === 0) return;
-        const S = h[0], k = h[h.length - 1];
-        v.shiftKey ? document.activeElement === S && (v.preventDefault(), k.focus()) : document.activeElement === k && (v.preventDefault(), S.focus());
+      if (y.key === "Tab") {
+        const T = d();
+        if (!T || T.length === 0) return;
+        const h = T[0], g = T[T.length - 1];
+        y.shiftKey ? document.activeElement === h && (y.preventDefault(), g.focus()) : document.activeElement === g && (y.preventDefault(), h.focus());
       }
     },
-    [a, s, m]
-  ), T = /* @__PURE__ */ i(
+    [r, i, d]
+  ), f = /* @__PURE__ */ c(
     "div",
     {
-      ref: c,
+      ref: o,
       className: "rmap-drawer-content-container",
       role: "dialog",
       "aria-modal": "true",
-      "aria-label": o,
-      id: n,
-      onKeyDown: p,
+      "aria-label": n,
+      id: s,
+      onKeyDown: v,
       children: e
     }
   );
-  return t ? /* @__PURE__ */ i(
-    Se,
+  return t ? /* @__PURE__ */ c(
+    Ce,
     {
-      visible: r,
+      visible: a,
       name: "rmap-drawer-content",
       enterTime: 20,
       leaveTime: 60,
       clearTime: 300,
-      onEntered: y,
-      onExited: u,
-      children: T
+      onEntered: m,
+      onExited: p,
+      children: f
     }
-  ) : r ? T : null;
-}, bt = ({
+  ) : a ? f : null;
+}, Zt = ({
   children: e,
   "aria-label": t,
-  "data-testid": o
+  "data-testid": n
 }) => {
-  const { isOpen: r, setIsOpen: a, onOpenChange: s, drawerId: n } = g(le), c = f(() => {
-    const d = !r;
-    a(d), s == null || s(d);
-  }, [r, a, s]);
-  return /* @__PURE__ */ i(
+  const { isOpen: a, setIsOpen: r, onOpenChange: i, drawerId: s } = A(ie), o = E(() => {
+    const u = !a;
+    r(u), i == null || i(u);
+  }, [a, r, i]);
+  return /* @__PURE__ */ c(
     q,
     {
       className: "rmap-drawer-trigger",
       type: "button",
-      "aria-expanded": r,
-      "aria-controls": n,
+      "aria-expanded": a,
+      "aria-controls": s,
       "aria-label": t,
-      "data-testid": o,
-      onClick: c,
+      "data-testid": n,
+      onClick: o,
       children: e
     }
   );
 };
-se.Content = Nt;
-se.Trigger = bt;
-const ye = ({ children: e }) => /* @__PURE__ */ i("ul", { className: "rmap-sortable-list-container", "aria-label": "Sortable list", children: e }), Ct = ({
+oe.Content = Jt;
+oe.Trigger = Zt;
+const Ee = ({ children: e }) => /* @__PURE__ */ c("ul", { className: "rmap-sortable-list-container", "aria-label": "Sortable list", children: e }), er = ({
   index: e,
   dragStartIdx: t,
-  listData: o,
-  draggable: r = !0,
-  onDragStart: a,
-  onDragOver: s,
-  onDrop: n,
-  onReorder: c,
-  onClick: d
+  listData: n,
+  draggable: a = !0,
+  onDragStart: r,
+  onDragOver: i,
+  onDrop: s,
+  onReorder: o,
+  onClick: u
 }) => {
-  const m = (l, y) => {
-    if (l < 0 || l >= o.length) return;
-    const u = [...o], p = u.splice(e, 1)[0];
-    u.splice(l, 0, p);
-    const T = u.map((h, S) => ({
-      ...h,
-      index: S
-    })), v = (y == null ? void 0 : y.parentElement) ?? null;
-    if (be(() => {
-      c == null || c(T);
-    }), v) {
-      const h = v.children[l];
-      h == null || h.focus();
+  const d = (l, m) => {
+    if (l < 0 || l >= n.length) return;
+    const p = [...n], v = p.splice(e, 1)[0];
+    p.splice(l, 0, v);
+    const f = p.map((T, h) => ({
+      ...T,
+      index: h
+    })), y = (m == null ? void 0 : m.parentElement) ?? null;
+    if (Fe(() => {
+      o == null || o(f);
+    }), y) {
+      const T = y.children[l];
+      T == null || T.focus();
     }
   };
   return {
     tabIndex: 0,
-    draggable: r,
+    draggable: a,
     onKeyDown: (l) => {
       switch (l.key) {
         case "Enter":
@@ -1020,25 +1104,25 @@ const ye = ({ children: e }) => /* @__PURE__ */ i("ul", { className: "rmap-sorta
           l.preventDefault(), l.currentTarget.click();
           break;
         case "ArrowUp":
-          if (l.preventDefault(), r && l.altKey)
-            m(e - 1, l.currentTarget);
+          if (l.preventDefault(), a && l.altKey)
+            d(e - 1, l.currentTarget);
           else {
-            const y = l.currentTarget.previousElementSibling;
-            y == null || y.focus();
+            const m = l.currentTarget.previousElementSibling;
+            m == null || m.focus();
           }
           break;
         case "ArrowDown":
-          if (l.preventDefault(), r && l.altKey)
-            m(e + 1, l.currentTarget);
+          if (l.preventDefault(), a && l.altKey)
+            d(e + 1, l.currentTarget);
           else {
-            const y = l.currentTarget.nextElementSibling;
-            y == null || y.focus();
+            const m = l.currentTarget.nextElementSibling;
+            m == null || m.focus();
           }
           break;
       }
     },
     onDragStart: (l) => {
-      l.stopPropagation(), l.currentTarget.classList.add("rmap-drag-start"), a == null || a(l);
+      l.stopPropagation(), l.currentTarget.classList.add("rmap-drag-start"), r == null || r(l);
     },
     onDragEnd: (l) => {
       l.stopPropagation(), l.currentTarget.classList.remove("rmap-drag-start");
@@ -1050,67 +1134,71 @@ const ye = ({ children: e }) => /* @__PURE__ */ i("ul", { className: "rmap-sorta
       l.stopPropagation(), l.currentTarget.classList.remove("rmap-drag-over");
     },
     onDragOver: (l) => {
-      l.preventDefault(), l.stopPropagation(), s == null || s(l);
+      l.preventDefault(), l.stopPropagation(), i == null || i(l);
     },
     onDrop: (l) => {
       l.stopPropagation(), l.currentTarget.classList.remove("rmap-drag-over");
-      const y = [...o], u = o[t];
-      y.splice(t, 1);
-      const p = [
-        ...y.slice(0, e),
-        u,
-        ...y.slice(e, y.length)
-      ].map((T, v) => ({ ...T, index: v }));
-      n == null || n(l, p);
+      const m = [...n], p = n[t];
+      m.splice(t, 1);
+      const v = [
+        ...m.slice(0, e),
+        p,
+        ...m.slice(e, m.length)
+      ].map((f, y) => ({ ...f, index: y }));
+      s == null || s(l, v);
     },
     onClick: (l) => {
-      l.stopPropagation(), d == null || d(l);
+      l.stopPropagation(), u == null || u(l);
     }
   };
-}, Mt = (e) => {
-  const { children: t, ...o } = e, r = Ct(o);
-  return /* @__PURE__ */ i("li", { className: "rmap-sortable-item", ...r, children: /* @__PURE__ */ i("div", { className: "rmap-sortable-item-inner", children: t }) });
+}, tr = (e) => {
+  const { children: t, ...n } = e, a = er(n);
+  return /* @__PURE__ */ c("li", { className: "rmap-sortable-item", ...a, children: /* @__PURE__ */ c("div", { className: "rmap-sortable-item-inner", children: t }) });
 };
-ye.Item = Mt;
-const xt = W(function({
+Ee.Item = tr;
+const xe = K(null);
+xe.displayName = "PlayListPortalContext";
+const Me = K(null);
+Me.displayName = "PlayListEmptyContext";
+const rr = z(function({
   data: t
 }) {
-  const { curPlayId: o } = V(), { coverImgsCss: r } = L(), a = o === t.id;
-  return /* @__PURE__ */ i(
+  const { curPlayId: n } = $(), { coverImgsCss: a } = L(), r = n === t.id;
+  return /* @__PURE__ */ c(
     "div",
     {
-      className: `rmap-playlist-item${a ? " rmap-cur-played" : ""}`,
+      className: `rmap-playlist-item${r ? " rmap-cur-played" : ""}`,
       "data-testid": "playlist-item",
-      "aria-current": a ? "true" : void 0,
+      "aria-current": r ? "true" : void 0,
       children: /* @__PURE__ */ w("div", { className: "rmap-playlist-item-contents", children: [
-        /* @__PURE__ */ i("div", { className: "rmap-playlist-album-cover", children: t.img && /* @__PURE__ */ i(
+        /* @__PURE__ */ c("div", { className: "rmap-playlist-album-cover", children: t.img && /* @__PURE__ */ c(
           "img",
           {
             src: t.img,
             alt: t.name || "Album thumbnail",
-            style: r == null ? void 0 : r.listThumbnail
+            style: a == null ? void 0 : a.listThumbnail
           }
         ) }),
         /* @__PURE__ */ w("div", { className: "rmap-playlist-album-info", children: [
-          t.writer && /* @__PURE__ */ i("span", { className: "rmap-playlist-writer", children: t.writer }),
-          t.name && /* @__PURE__ */ i("span", { className: "rmap-playlist-title", children: t.name }),
-          t.description && /* @__PURE__ */ i("div", { className: "rmap-playlist-description", children: t.description })
+          t.writer && /* @__PURE__ */ c("span", { className: "rmap-playlist-writer", children: t.writer }),
+          t.name && /* @__PURE__ */ c("span", { className: "rmap-playlist-title", children: t.name }),
+          t.description && /* @__PURE__ */ c("div", { className: "rmap-playlist-description", children: t.description })
         ] })
       ] })
     }
   );
-}), _t = ({
+}), ar = ({
   setIsOpen: e
 }) => {
-  const { playList: t } = V(), { activeUI: o } = O(), r = g(P), [a, s] = C(0), n = f(
-    (c) => {
-      r({
+  const { playList: t } = $(), { activeUI: n } = M(), a = A(b), [r, i] = N(0), s = E(
+    (o) => {
+      a({
         type: "SET_CURRENT_AUDIO",
-        currentIndex: c,
-        currentAudioId: t[c].id
+        currentIndex: o,
+        currentAudioId: t[o].id
       });
     },
-    [r, t]
+    [a, t]
   );
   return {
     cssTransitionEventProps: {
@@ -1118,138 +1206,155 @@ const xt = W(function({
       onEntered: () => e(!0)
     },
     sortableItemEventProps: {
-      draggable: o.playList !== "unSortable",
-      dragStartIdx: a,
-      onDragStart: (c) => s(c),
-      onDrop: (c, d) => r({
+      draggable: n.playList !== "unSortable",
+      dragStartIdx: r,
+      onDragStart: (o) => i(o),
+      onDrop: (o, u) => a({
         type: "UPDATE_PLAY_LIST",
-        playList: d
+        playList: u
       }),
-      onReorder: (c) => r({
+      onReorder: (o) => a({
         type: "UPDATE_PLAY_LIST",
-        playList: c
+        playList: o
       }),
-      onClick: (c) => n(c)
+      onClick: (o) => s(o)
     }
   };
-}, Dt = () => {
-  const { playList: e } = V(), { isOpen: t, setIsOpen: o } = g(le), { cssTransitionEventProps: r, sortableItemEventProps: a } = _t({
-    setIsOpen: o
+}, nr = () => {
+  const { playList: e } = $(), { isOpen: t, setIsOpen: n } = A(ie), a = he(xe), r = he(Me), { cssTransitionEventProps: i, sortableItemEventProps: s } = ar({
+    setIsOpen: n
   }), {
-    onClick: s,
-    onDragStart: n,
-    ...c
-  } = a;
-  return e.length !== 0 ? dt.createPortal(
-    /* @__PURE__ */ i(
-      Se,
+    onClick: o,
+    onDragStart: u,
+    ...d
+  } = s;
+  if (!a) return /* @__PURE__ */ c(G, {});
+  const l = e.length === 0;
+  return l && !r ? /* @__PURE__ */ c(G, {}) : Rt.createPortal(
+    /* @__PURE__ */ c(
+      Ce,
       {
         visible: t,
         name: "rmap-playlist-content",
         enterTime: 20,
         leaveTime: 20,
         clearTime: 300,
-        ...r,
-        children: /* @__PURE__ */ i("div", { className: "rmap-playlist-container", children: /* @__PURE__ */ i(ye, { children: e.map((d, m) => /* @__PURE__ */ i(
-          ye.Item,
+        ...i,
+        children: /* @__PURE__ */ c("div", { className: "rmap-playlist-container", children: l ? r : /* @__PURE__ */ c(Ee, { children: e.map((m, p) => /* @__PURE__ */ c(
+          Ee.Item,
           {
-            index: m,
+            index: p,
             listData: e,
-            onClick: () => s(m),
-            onDragStart: () => n(m),
-            ...c,
-            children: /* @__PURE__ */ i(xt, { data: d })
+            onClick: () => o(p),
+            onDragStart: () => u(p),
+            ...d,
+            children: /* @__PURE__ */ c(rr, { data: m })
           },
-          `sortable-item-${m}`
+          m.id
         )) }) })
       }
     ),
-    document.querySelector(".rmap-sortable-playlist") ?? document.body
-  ) : /* @__PURE__ */ i(z, {});
-}, Ot = () => {
+    a
+  );
+}, or = () => {
   const { customIcons: e } = L();
-  return /* @__PURE__ */ i(
-    x,
+  return /* @__PURE__ */ c(
+    D,
     {
-      render: /* @__PURE__ */ i(Be, { size: "100%" }),
+      render: /* @__PURE__ */ c(Je, { size: "100%" }),
       customIcon: e == null ? void 0 : e.playList
     }
   );
-}, Ut = () => /* @__PURE__ */ w(se, { children: [
-  /* @__PURE__ */ i(se.Trigger, { "aria-label": "Playlist", "data-testid": "playlist-trigger-btn", children: /* @__PURE__ */ i(Ot, {}) }),
-  /* @__PURE__ */ i(se.Content, { "aria-label": "Playlist", children: /* @__PURE__ */ i(Dt, {}) })
-] }), ee = (e) => {
-  const t = `${Math.floor(e / 60)}`.padStart(2, "0"), o = `${Math.floor(e % 60)}`.padStart(2, "0");
-  return `${t}:${o}`;
-}, ce = (e, t, o = 0) => {
-  if (!t) return o;
-  const r = e / t;
-  return isFinite(r) ? r : o;
-}, Qe = () => {
-  const { isLoadedMetaData: e } = b(), { elementRefs: t } = L(), [o, r] = C(!1), a = f(
-    (s) => {
+}, mt = ({
+  initialExpanded: e,
+  gridArea: t,
+  visible: n,
+  ...a
+}) => {
+  const { playListExpanded: r } = M(), i = e ?? r, s = B("playList", t);
+  return /* @__PURE__ */ c(_.Item, { gridArea: s, visible: n ?? !0, ...a, children: /* @__PURE__ */ w(oe, { initialOpen: i, children: [
+    /* @__PURE__ */ c(
+      oe.Trigger,
+      {
+        "aria-label": "Playlist",
+        "data-testid": "playlist-trigger-btn",
+        children: /* @__PURE__ */ c(or, {})
+      }
+    ),
+    /* @__PURE__ */ c(oe.Content, { "aria-label": "Playlist", children: /* @__PURE__ */ c(nr, {}) })
+  ] }) });
+}, ee = (e) => {
+  const t = `${Math.floor(e / 60)}`.padStart(2, "0"), n = `${Math.floor(e % 60)}`.padStart(2, "0");
+  return `${t}:${n}`;
+}, pe = (e, t, n = 0) => {
+  if (!t) return n;
+  const a = e / t;
+  return isFinite(a) ? a : n;
+}, yt = () => {
+  const { isLoadedMetaData: e } = k(), { elementRefs: t } = L(), [n, a] = N(!1), r = E(
+    (i) => {
       if (!(t != null && t.audioEl) || !e) return;
-      const { clientX: n } = s, { clientWidth: c } = s.currentTarget, d = s.currentTarget.getBoundingClientRect(), m = n - d.x, l = ce(m, c) * t.audioEl.duration;
+      const { clientX: s } = i, { clientWidth: o } = i.currentTarget, u = i.currentTarget.getBoundingClientRect(), d = s - u.x, l = pe(d, o) * t.audioEl.duration;
       t.audioEl.currentTime = l;
     },
     [e, t == null ? void 0 : t.audioEl]
   );
-  return E(() => {
-    if (!o) return;
-    const s = (n) => n.preventDefault();
-    return document.addEventListener("selectstart", s), () => {
-      document.removeEventListener("selectstart", s);
+  return P(() => {
+    if (!n) return;
+    const i = (s) => s.preventDefault();
+    return document.addEventListener("selectstart", i), () => {
+      document.removeEventListener("selectstart", i);
     };
-  }, [o]), {
-    onMouseDown: () => r(!0),
-    onMouseUp: () => r(!1),
-    onMouseLeave: () => r(!1),
-    onMouseMove: o ? a : void 0,
-    onClick: a
+  }, [n]), {
+    onMouseDown: () => a(!0),
+    onMouseUp: () => a(!1),
+    onMouseLeave: () => a(!1),
+    onMouseMove: n ? r : void 0,
+    onClick: r
   };
-}, Je = (e) => {
-  const { isLoadedMetaData: t } = b(), { elementRefs: o } = L();
-  return f(
-    (r) => {
-      if (!(o != null && o.audioEl) || !t) return;
-      const a = o.audioEl;
-      let s = null;
-      switch (r.key) {
+}, vt = (e) => {
+  const { isLoadedMetaData: t } = k(), { elementRefs: n } = L();
+  return E(
+    (a) => {
+      if (!(n != null && n.audioEl) || !t) return;
+      const r = n.audioEl;
+      let i = null;
+      switch (a.key) {
         case "ArrowRight":
         case "ArrowUp":
-          r.preventDefault(), s = Math.min(a.currentTime + 5, a.duration);
+          a.preventDefault(), i = Math.min(r.currentTime + 5, r.duration);
           break;
         case "ArrowLeft":
         case "ArrowDown":
-          r.preventDefault(), s = Math.max(a.currentTime - 5, 0);
+          a.preventDefault(), i = Math.max(r.currentTime - 5, 0);
           break;
         case "Home":
-          r.preventDefault(), s = 0;
+          a.preventDefault(), i = 0;
           break;
         case "End":
-          r.preventDefault(), s = a.duration;
+          a.preventDefault(), i = r.duration;
           break;
       }
-      s !== null && isFinite(a.duration) && (a.currentTime = s, e == null || e(s, a.duration));
+      i !== null && isFinite(r.duration) && (r.currentTime = i, e == null || e(i, r.duration));
     },
-    [o == null ? void 0 : o.audioEl, t, e]
+    [n == null ? void 0 : n.audioEl, t, e]
   );
-}, Vt = () => {
-  const { currentTime: e, duration: t } = re(), o = A(null), [r, a] = C(0);
-  E(() => {
-    const m = o.current;
-    if (!m) return;
-    a(m.offsetWidth);
-    const l = new ResizeObserver(([y]) => {
-      a(y.contentBoxSize[0].inlineSize);
+}, ir = () => {
+  const { currentTime: e, duration: t } = re(), n = S(null), [a, r] = N(0);
+  P(() => {
+    const d = n.current;
+    if (!d) return;
+    r(d.offsetWidth);
+    const l = new ResizeObserver(([m]) => {
+      r(m.contentBoxSize[0].inlineSize);
     });
-    return l.observe(m), () => l.disconnect();
+    return l.observe(d), () => l.disconnect();
   }, []);
-  const s = ce(e, t), n = Qe(), c = Je(), d = s * r;
+  const i = pe(e, t), s = yt(), o = vt(), u = i * a;
   return /* @__PURE__ */ w(
     "div",
     {
-      ref: o,
+      ref: n,
       className: "rmap-bar-progress-wrapper",
       "data-testid": "progress-bar",
       role: "slider",
@@ -1257,133 +1362,133 @@ const xt = W(function({
       "aria-label": "Seek",
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      "aria-valuenow": Math.round(s * 100),
+      "aria-valuenow": Math.round(i * 100),
       "aria-valuetext": `${ee(
         e
       )} of ${ee(t)}`,
-      onKeyDown: c,
-      ...n,
+      onKeyDown: o,
+      ...s,
       children: [
-        /* @__PURE__ */ i("div", { className: "rmap-progress-bar", children: /* @__PURE__ */ i(
+        /* @__PURE__ */ c("div", { className: "rmap-progress-bar", children: /* @__PURE__ */ c(
           "div",
           {
             className: "rmap-progress-fill",
-            style: { transform: `scaleX(${s})` }
+            style: { transform: `scaleX(${i})` }
           }
         ) }),
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ c(
           "div",
           {
             className: "rmap-progress-handle",
             style: {
-              transform: `translateX(${d}px)`
+              transform: `translateX(${u}px)`
             }
           }
         )
       ]
     }
   );
-}, Bt = (e, t) => {
-  const o = A(), r = f(() => {
-    const a = document.getElementsByClassName("rmap-player-provider")[0];
-    if (!a) return;
-    const s = Object.entries(
+}, sr = (e, t) => {
+  const n = S(), a = E(() => {
+    const r = document.getElementsByClassName("rmap-player-provider")[0];
+    if (!r) return;
+    const i = Object.entries(
       e
     ).reduce(
-      (n, [c, d]) => ({
-        ...n,
-        [c]: window.getComputedStyle(a).getPropertyValue(`${d}`)
+      (s, [o, u]) => ({
+        ...s,
+        [o]: window.getComputedStyle(r).getPropertyValue(`${u}`)
       }),
       {}
     );
-    o.current = s;
+    n.current = i;
   }, [e]);
-  return pe(() => {
-    r();
-    const a = window.matchMedia("(prefers-color-scheme: dark)");
-    return a.addEventListener("change", r), () => a.removeEventListener("change", r);
-  }, [r, t]), o;
-}, Kt = {
+  return ge(() => {
+    a();
+    const r = window.matchMedia("(prefers-color-scheme: dark)");
+    return r.addEventListener("change", a), () => r.removeEventListener("change", a);
+  }, [a, t]), n;
+}, cr = {
   progressColor: "--rm-audio-player-waveform-bar",
   waveColor: "--rm-audio-player-waveform-background"
-}, $t = (e) => {
+}, lr = (e) => {
   const t = e.backend;
   if (!(!(t != null && t.media) || !t.mediaListeners))
-    for (const [o, r] of Object.entries(t.mediaListeners))
-      t.media.removeEventListener(o, r);
-}, Ft = (e) => {
-  const t = g(P), { isPlaying: o } = b(), { curPlayId: r } = V(), { elementRefs: a } = L(), { colorScheme: s } = O(), n = Bt(Kt, s), c = A(a == null ? void 0 : a.waveformInst);
-  c.current = a == null ? void 0 : a.waveformInst, E(() => {
-    var p, T;
-    if (a != null && a.waveformInst || !((p = n.current) != null && p.progressColor) || !((T = n.current) != null && T.waveColor))
+    for (const [n, a] of Object.entries(t.mediaListeners))
+      t.media.removeEventListener(n, a);
+}, ur = (e) => {
+  const t = A(b), { isPlaying: n } = k(), { curPlayId: a } = $(), { elementRefs: r } = L(), { colorScheme: i } = M(), s = sr(cr, i), o = S(r == null ? void 0 : r.waveformInst);
+  o.current = r == null ? void 0 : r.waveformInst, P(() => {
+    var v, f;
+    if (r != null && r.waveformInst || !((v = s.current) != null && v.progressColor) || !((f = s.current) != null && f.waveColor))
       return;
-    let u = !1;
-    return import("./wavesurfer-_j5aw4gZ.mjs").then((v) => v.w).then(({ default: v }) => {
-      var S, k;
-      if (u || !e.current || !((S = n.current) != null && S.progressColor) || !((k = n.current) != null && k.waveColor)) {
+    let p = !1;
+    return import("./wavesurfer-_j5aw4gZ.mjs").then((y) => y.w).then(({ default: y }) => {
+      var h, g;
+      if (p || !e.current || !((h = s.current) != null && h.progressColor) || !((g = s.current) != null && g.waveColor)) {
         console.error("[useWaveSurfer] missing required dependencies");
         return;
       }
-      let h;
+      let T;
       try {
-        h = v.create({
+        T = y.create({
           barWidth: 1,
           cursorWidth: 2,
           container: e.current,
           height: 80,
-          progressColor: n.current.progressColor,
+          progressColor: s.current.progressColor,
           responsive: !0,
-          waveColor: n.current.waveColor,
+          waveColor: s.current.waveColor,
           cursorColor: "var(--rm-audio-player-waveform-cursor)",
           backend: "MediaElement",
           removeMediaElementOnDestroy: !1
         });
-      } catch (B) {
+      } catch (C) {
         console.error(
           "[useWaveSurfer] failed to create WaveSurfer instance",
-          B
+          C
         );
         return;
       }
       t({
         type: "SET_ELEMENT_REFS",
-        elementRefs: { waveformInst: h }
+        elementRefs: { waveformInst: T }
       });
-    }).catch((v) => {
-      console.error("[useWaveSurfer] failed to load wavesurfer.js", v);
+    }).catch((y) => {
+      console.error("[useWaveSurfer] failed to load wavesurfer.js", y);
     }), () => {
-      u = !0;
+      p = !0;
     };
-  }, [a == null ? void 0 : a.waveformInst, t, n]);
-  const d = A(r);
-  E(() => {
-    if (!(a != null && a.audioEl) || !(a != null && a.waveformInst)) return;
-    const u = a.audioEl;
-    if (!u.getAttribute("src")) return;
-    const p = a.waveformInst, T = d.current !== r;
-    d.current = r;
-    const v = T ? 0 : u.currentTime, h = o;
-    $t(p), p.load(u);
-    const S = () => {
-      !T && v > 0 && u.duration && (u.currentTime = v, p.seekTo(v / u.duration)), h && u.play();
+  }, [r == null ? void 0 : r.waveformInst, t, s]);
+  const u = S(a);
+  P(() => {
+    if (!(r != null && r.audioEl) || !(r != null && r.waveformInst)) return;
+    const p = r.audioEl;
+    if (!p.getAttribute("src")) return;
+    const v = r.waveformInst, f = u.current !== a;
+    u.current = a;
+    const y = f ? 0 : p.currentTime, T = n;
+    lr(v), v.load(p);
+    const h = () => {
+      !f && y > 0 && p.duration && (p.currentTime = y, v.seekTo(y / p.duration)), T && p.play();
     };
-    return p.on("ready", S), () => {
-      p.un("ready", S);
+    return v.on("ready", h), () => {
+      v.un("ready", h);
     };
-  }, [r, a == null ? void 0 : a.audioEl, a == null ? void 0 : a.waveformInst]), E(() => {
-    if (!e.current || !(a != null && a.waveformInst)) return;
-    const u = () => {
-      var T, v;
-      (v = (T = a.waveformInst) == null ? void 0 : T.drawer) == null || v.fireEvent("redraw");
-    }, p = new ResizeObserver(u);
-    return p.observe(e.current), () => {
-      p.disconnect();
+  }, [a, r == null ? void 0 : r.audioEl, r == null ? void 0 : r.waveformInst]), P(() => {
+    if (!e.current || !(r != null && r.waveformInst)) return;
+    const p = () => {
+      var f, y;
+      (y = (f = r.waveformInst) == null ? void 0 : f.drawer) == null || y.fireEvent("redraw");
+    }, v = new ResizeObserver(p);
+    return v.observe(e.current), () => {
+      v.disconnect();
     };
-  }, [a == null ? void 0 : a.waveformInst, e]), E(
+  }, [r == null ? void 0 : r.waveformInst, e]), P(
     () => () => {
-      var p, T;
-      const u = (p = e.current) == null ? void 0 : p.querySelector("wave");
-      u && u.remove(), (T = c.current) == null || T.destroy(), t({
+      var v, f;
+      const p = (v = e.current) == null ? void 0 : v.querySelector("wave");
+      p && p.remove(), (f = o.current) == null || f.destroy(), t({
         type: "SET_ELEMENT_REFS",
         elementRefs: { waveformInst: void 0 }
       });
@@ -1391,47 +1496,47 @@ const xt = W(function({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [t]
   );
-  const m = () => {
-    var v, h;
-    const u = c.current;
-    if (!(u != null && u.isReady)) return;
-    const p = (v = n.current) == null ? void 0 : v.waveColor, T = (h = n.current) == null ? void 0 : h.progressColor;
-    p && u.setWaveColor(p), T && u.setProgressColor(T);
-  }, l = A(m);
-  l.current = m;
-  const y = A(s);
-  E(() => {
-    y.current !== s && (y.current = s, l.current());
-  }, [s, a == null ? void 0 : a.waveformInst]), E(() => {
-    const u = () => l.current(), p = window.matchMedia("(prefers-color-scheme: dark)");
-    return p.addEventListener("change", u), () => p.removeEventListener("change", u);
+  const d = () => {
+    var y, T;
+    const p = o.current;
+    if (!(p != null && p.isReady)) return;
+    const v = (y = s.current) == null ? void 0 : y.waveColor, f = (T = s.current) == null ? void 0 : T.progressColor;
+    v && p.setWaveColor(v), f && p.setProgressColor(f);
+  }, l = S(d);
+  l.current = d;
+  const m = S(i);
+  P(() => {
+    m.current !== i && (m.current = i, l.current());
+  }, [i, r == null ? void 0 : r.waveformInst]), P(() => {
+    const p = () => l.current(), v = window.matchMedia("(prefers-color-scheme: dark)");
+    return v.addEventListener("change", p), () => v.removeEventListener("change", p);
   }, []);
-}, Ht = ({ isActive: e }) => {
-  var d, m, l, y;
-  const t = A(null), { isLoadedMetaData: o, isPlaying: r } = b(), { elementRefs: a } = L();
-  Ft(t), E(() => {
-    if (!e || !(a != null && a.waveformInst) || !(a != null && a.audioEl) || !o || r)
+}, dr = ({ isActive: e }) => {
+  var u, d, l, m;
+  const t = S(null), { isLoadedMetaData: n, isPlaying: a } = k(), { elementRefs: r } = L();
+  ur(t), P(() => {
+    if (!e || !(r != null && r.waveformInst) || !(r != null && r.audioEl) || !n || a)
       return;
-    const u = ce(
-      a.audioEl.currentTime,
-      a.audioEl.duration
+    const p = pe(
+      r.audioEl.currentTime,
+      r.audioEl.duration
     );
-    a.waveformInst.seekTo(u);
+    r.waveformInst.seekTo(p);
   }, [
     e,
-    o,
-    a == null ? void 0 : a.waveformInst,
-    a == null ? void 0 : a.audioEl,
-    r
+    n,
+    r == null ? void 0 : r.waveformInst,
+    r == null ? void 0 : r.audioEl,
+    a
   ]);
-  const s = Qe(), n = f(
-    (u, p) => {
-      var T;
-      p && ((T = a == null ? void 0 : a.waveformInst) == null || T.seekTo(ce(u, p)));
+  const i = yt(), s = E(
+    (p, v) => {
+      var f;
+      v && ((f = r == null ? void 0 : r.waveformInst) == null || f.seekTo(pe(p, v)));
     },
-    [a == null ? void 0 : a.waveformInst]
-  ), c = Je(n);
-  return /* @__PURE__ */ i("div", { className: "rmap-waveform-wrapper", "data-active": e, children: /* @__PURE__ */ i(
+    [r == null ? void 0 : r.waveformInst]
+  ), o = vt(s);
+  return /* @__PURE__ */ c("div", { className: "rmap-waveform-wrapper", "data-active": e, children: /* @__PURE__ */ c(
     "div",
     {
       id: "rm-waveform",
@@ -1442,147 +1547,119 @@ const xt = W(function({
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": Math.round(
-        (((d = a == null ? void 0 : a.audioEl) == null ? void 0 : d.currentTime) ?? 0) / (((m = a == null ? void 0 : a.audioEl) == null ? void 0 : m.duration) || 1) * 100
+        (((u = r == null ? void 0 : r.audioEl) == null ? void 0 : u.currentTime) ?? 0) / (((d = r == null ? void 0 : r.audioEl) == null ? void 0 : d.duration) || 1) * 100
       ),
       "aria-valuetext": `${ee(
-        ((l = a == null ? void 0 : a.audioEl) == null ? void 0 : l.currentTime) ?? 0
-      )} of ${ee(((y = a == null ? void 0 : a.audioEl) == null ? void 0 : y.duration) ?? 0)}`,
-      onKeyDown: c,
-      ...s
+        ((l = r == null ? void 0 : r.audioEl) == null ? void 0 : l.currentTime) ?? 0
+      )} of ${ee(((m = r == null ? void 0 : r.audioEl) == null ? void 0 : m.duration) ?? 0)}`,
+      onKeyDown: o,
+      ...i
     }
   ) });
-}, Rt = () => {
-  const { activeUI: e } = O(), t = e.progress ?? (e.all ? "bar" : !1), o = t === "waveform", r = t === "bar", [a, s] = C(o);
-  return E(() => {
-    o && !a && s(!0);
-  }, [o, a]), /* @__PURE__ */ w("div", { className: "rmap-progress-container", children: [
-    a && /* @__PURE__ */ i(Ht, { isActive: o }),
-    r && /* @__PURE__ */ i(Vt, {})
-  ] });
-}, zt = ({
-  placement: e
+}, ft = ({
+  gridArea: e,
+  visible: t,
+  type: n,
+  width: a,
+  ...r
 }) => {
-  var y;
-  const t = A(null), { volume: o, muted: r } = b(), { elementRefs: a } = L(), s = g(P), n = f(
-    (u) => {
-      u.stopPropagation(), u.preventDefault(), r && s({ type: "SET_MUTED", muted: !1 });
-      const { value: p } = u.target, T = parseFloat(p);
-      s({
-        type: "SET_VOLUME",
-        volume: T
-      });
-    },
-    [r, s]
-  ), c = o ?? ((y = a == null ? void 0 : a.audioEl) == null ? void 0 : y.volume) ?? 0, d = c * 100, m = Math.round(d), l = D(
-    () => ({
-      "--rm-audio-player-volume-value": `${d}%`
-    }),
-    [d]
-  );
-  return /* @__PURE__ */ i(
-    "div",
+  const { activeUI: i } = M(), s = n ?? (i.progress === "waveform" ? "waveform" : "bar"), o = s === "waveform", u = s === "bar", [d, l] = N(o);
+  P(() => {
+    o && !d && l(!0);
+  }, [o, d]);
+  const m = B("progress", e);
+  return /* @__PURE__ */ c(
+    _.Item,
     {
-      ref: t,
-      className: "rmap-volume-container",
-      "data-placement": e,
-      "data-testid": "volume-slider",
-      style: l,
-      children: /* @__PURE__ */ i("div", { className: "rmap-volume-panel", children: /* @__PURE__ */ i(
-        "input",
-        {
-          className: "rmap-volume-slider",
-          type: "range",
-          style: { cursor: "pointer" },
-          value: c,
-          onChange: n,
-          min: "0",
-          max: "1",
-          step: "0.01",
-          "aria-label": r ? "Volume (muted)" : "Volume",
-          "aria-valuetext": `${m} percent`
-        }
-      ) })
+      gridArea: m,
+      width: a ?? "100%",
+      visible: t ?? !0,
+      ...r,
+      children: /* @__PURE__ */ w("div", { className: "rmap-progress-container", children: [
+        d && /* @__PURE__ */ c(dr, { isActive: o }),
+        u && /* @__PURE__ */ c(ir, {})
+      ] })
     }
   );
-}, ue = H(null);
-ue.displayName = "DropdownContext";
-const Ze = ({
+}, me = K(null);
+me.displayName = "DropdownContext";
+const Tt = ({
   clickArea: e,
   triggerType: t,
-  isOpen: o,
-  setIsOpen: r,
-  onOpenChange: a
+  isOpen: n,
+  setIsOpen: a,
+  onOpenChange: r
 }) => {
-  const s = A(), n = (l) => {
-    const y = () => {
-      clearTimeout(s.current), s.current = void 0;
-    }, u = (p) => {
-      r(p), a && a(p), y();
+  const i = S(), s = (l) => {
+    const m = () => {
+      clearTimeout(i.current), i.current = void 0;
+    }, p = (v) => {
+      a(v), r && r(v), m();
     };
-    if (y(), l) {
-      s.current = window.setTimeout(() => u(!0), 100);
+    if (m(), l) {
+      i.current = window.setTimeout(() => p(!0), 100);
       return;
     }
-    s.current = window.setTimeout(() => u(!1), 100);
-  }, c = (l) => {
-    t === "hover" && n(l);
+    i.current = window.setTimeout(() => p(!1), 100);
+  }, o = (l) => {
+    t === "hover" && s(l);
   };
   return {
     onClick: e === "content" ? (l) => {
       l.stopPropagation(), l.nativeEvent.stopImmediatePropagation();
     } : () => {
-      t === "click" && (r(!o), a && a(!o));
+      t === "click" && (a(!n), r && r(!n));
     },
-    onKeyUp: () => c(!0),
-    onMouseEnter: () => c(!0),
-    onMouseLeave: () => c(!1),
-    onFocus: () => c(!0),
-    onBlur: () => c(!1)
+    onKeyUp: () => o(!0),
+    onMouseEnter: () => o(!0),
+    onMouseLeave: () => o(!1),
+    onFocus: () => o(!0),
+    onBlur: () => o(!1)
   };
-}, ie = ({
+}, j = ({
   triggerType: e = "click",
   outboundClickActive: t = !0,
-  children: o,
-  isOpen: r,
-  placement: a = "bottom",
-  disabled: s = !1,
-  onOpenChange: n,
-  "data-testid": c
+  children: n,
+  isOpen: a,
+  placement: r = "bottom",
+  disabled: i = !1,
+  onOpenChange: s,
+  "data-testid": o
 }) => {
-  const d = A(null), [m, l] = te.Children.toArray(o), [y, u] = C(!1), p = Ze({
-    setIsOpen: u,
-    isOpen: y,
+  const u = S(null), [d, l] = te.Children.toArray(n), [m, p] = N(!1), v = Tt({
+    setIsOpen: p,
+    isOpen: m,
     triggerType: e,
     clickArea: "root"
-  }), T = Ne();
-  Ye(d, () => t && u(!1)), E(() => {
-    r !== void 0 && u(r);
-  }, [r]);
-  const v = D(
+  }), f = $e();
+  dt(u, () => t && p(!1)), P(() => {
+    a !== void 0 && p(a);
+  }, [a]);
+  const y = x(
     () => ({
-      dropdownRef: d,
-      placement: a,
-      isOpen: y,
-      setIsOpen: u,
-      onOpenChange: n,
-      dropdownId: T
+      dropdownRef: u,
+      placement: r,
+      isOpen: m,
+      setIsOpen: p,
+      onOpenChange: s,
+      dropdownId: f
     }),
-    [a, y, n, T]
+    [r, m, s, f]
   );
-  return /* @__PURE__ */ i(ue.Provider, { value: v, children: /* @__PURE__ */ i(
+  return /* @__PURE__ */ c(me.Provider, { value: y, children: /* @__PURE__ */ c(
     "div",
     {
       className: "rmap-dropdown-container",
-      ref: d,
-      "data-testid": c,
-      ...p,
-      children: /* @__PURE__ */ w(z, { children: [
-        m,
-        !s && l
+      ref: u,
+      "data-testid": o,
+      ...v,
+      children: /* @__PURE__ */ w(G, { children: [
+        d,
+        !i && l
       ] })
     }
   ) });
-}, Wt = (e, t) => D(() => {
+}, pr = (e, t) => x(() => {
   if (t)
     return {
       position: "absolute",
@@ -1593,199 +1670,327 @@ const Ze = ({
       left: e === "right" ? `${t.width}px` : void 0,
       right: e === "left" ? `${t.width}px` : void 0
     };
-}, [t, e]), Gt = ({
+}, [t, e]), mr = ({
   children: e,
   isWithAnimation: t = !0,
-  ...o
+  ...n
 }) => {
-  const { dropdownRef: r, placement: a, isOpen: s, setIsOpen: n, dropdownId: c } = g(ue), [d, m] = C(), { onClick: l } = Ze({
-    setIsOpen: n,
-    isOpen: s,
+  const { dropdownRef: a, placement: r, isOpen: i, setIsOpen: s, dropdownId: o } = A(me), [u, d] = N(), { onClick: l } = Tt({
+    setIsOpen: s,
+    isOpen: i,
     clickArea: "content"
-  }), y = () => n(!1), u = () => n(!0);
-  E(() => {
-    r.current && m({
-      width: r.current.offsetWidth,
-      height: r.current.offsetHeight
+  }), m = () => s(!1), p = () => s(!0);
+  P(() => {
+    a.current && d({
+      width: a.current.offsetWidth,
+      height: a.current.offsetHeight
     });
-  }, [r]);
-  const p = Wt(a, d), T = d ? /* @__PURE__ */ i(
+  }, [a]);
+  const v = pr(r, u), f = u ? /* @__PURE__ */ c(
     "div",
     {
-      ...o,
-      id: c,
-      style: { ...p, ...o.style },
+      ...n,
+      id: o,
+      style: { ...v, ...n.style },
       onClick: l,
       children: e
     }
   ) : null;
-  return t ? /* @__PURE__ */ i(
-    Se,
+  return t ? /* @__PURE__ */ c(
+    Ce,
     {
-      visible: s,
+      visible: i,
       name: "rmap-dropdown-content",
       enterTime: 20,
       leaveTime: 60,
       clearTime: 300,
-      onExited: y,
-      onEntered: u,
-      children: T
+      onExited: m,
+      onEntered: p,
+      children: f
     }
-  ) : s ? T : null;
-}, et = ve(({ children: e, className: t, ...o }, r) => {
-  const { isOpen: a, dropdownId: s } = g(ue), n = t ? `rmap-dropdown-trigger ${t}` : "rmap-dropdown-trigger";
-  return /* @__PURE__ */ i(
+  ) : i ? f : null;
+}, ht = Pe(({ children: e, className: t, ...n }, a) => {
+  const { isOpen: r, dropdownId: i } = A(me), s = t ? `rmap-dropdown-trigger ${t}` : "rmap-dropdown-trigger";
+  return /* @__PURE__ */ c(
     q,
     {
-      className: n,
+      className: s,
       type: "button",
-      ...o,
+      ...n,
       "aria-haspopup": "true",
-      "aria-expanded": a,
-      "aria-controls": s,
-      ref: r,
+      "aria-expanded": r,
+      "aria-controls": i,
+      ref: a,
       children: e
     }
   );
 });
-et.displayName = "DropdownTrigger";
-ie.Content = Gt;
-ie.Trigger = et;
-const jt = ({
+ht.displayName = "DropdownTrigger";
+j.Content = mr;
+j.Trigger = ht;
+const yr = ({
   triggerRef: e,
   initialState: t
 }) => {
-  const { playerPlacement: o } = O(), [r, a] = C(t);
-  return E(() => {
+  const { playerPlacement: n } = M(), [a, r] = N(t);
+  return P(() => {
     if (e.current) {
-      const s = () => e.current.getBoundingClientRect().top < window.innerHeight / 2 ? "bottom" : "top", n = setTimeout(() => {
-        a(s());
+      const i = () => e.current.getBoundingClientRect().top < window.innerHeight / 2 ? "bottom" : "top", s = setTimeout(() => {
+        r(i());
       }, 0);
       return () => {
-        clearTimeout(n);
+        clearTimeout(s);
       };
     }
-  }, [o, e]), r;
-}, qt = () => {
-  const e = A(null), { muted: t } = b(), o = g(P), r = f(
-    () => o({ type: "SET_MUTED", muted: !t }),
-    [o, t]
+  }, [n, e]), a;
+}, gt = ({
+  triggerType: e,
+  placement: t,
+  contextPlacement: n,
+  triggerRef: a,
+  defaults: r
+}) => {
+  const i = yr({
+    triggerRef: a,
+    initialState: r.placement
+  }), s = e ?? r.triggerType;
+  return {
+    triggerType: s,
+    placement: t ?? n ?? i,
+    contentRole: s === "hover" ? "tooltip" : "dialog"
+  };
+}, vr = [
+  0.5,
+  0.75,
+  1,
+  1.25,
+  1.5,
+  1.75,
+  2
+], fr = (e) => `${e}×`, _e = z(
+  function({
+    gridArea: t,
+    visible: n,
+    options: a,
+    formatRate: r,
+    triggerType: i,
+    placement: s,
+    ...o
+  }) {
+    const u = S(null), { playbackRate: d } = k(), l = A(
+      b
+    ), { speedSelectorPlacement: m } = M(), p = B("playbackRate", t), v = a ?? vr, f = r ?? fr, { triggerType: y, placement: T } = gt({
+      triggerType: i,
+      placement: s,
+      contextPlacement: m,
+      triggerRef: u,
+      defaults: { triggerType: "click", placement: "top" }
+    }), h = E(
+      (g) => {
+        l({ type: "SET_PLAYBACK_RATE", playbackRate: g });
+      },
+      [l]
+    );
+    return /* @__PURE__ */ c(
+      _.Item,
+      {
+        gridArea: p,
+        visible: n ?? !0,
+        ...o,
+        children: /* @__PURE__ */ w(
+          j,
+          {
+            triggerType: y,
+            placement: T,
+            "data-testid": "speed-selector-dropdown",
+            children: [
+              /* @__PURE__ */ c(
+                j.Trigger,
+                {
+                  ref: u,
+                  "aria-label": `Playback speed, currently ${f(
+                    d
+                  )}`,
+                  className: "rmap-speed-selector-trigger",
+                  "data-testid": "speed-selector-trigger",
+                  children: f(d)
+                }
+              ),
+              /* @__PURE__ */ c(j.Content, { children: /* @__PURE__ */ c(
+                "ul",
+                {
+                  role: "menu",
+                  "aria-label": "Playback speed",
+                  className: "rmap-speed-selector-menu",
+                  children: v.map((g) => {
+                    const C = g === d;
+                    return /* @__PURE__ */ c("li", { role: "none", children: /* @__PURE__ */ c(
+                      "button",
+                      {
+                        type: "button",
+                        role: "menuitemradio",
+                        "aria-checked": C,
+                        className: C ? "rmap-speed-selector-option rmap-speed-selector-option--active" : "rmap-speed-selector-option",
+                        "data-testid": "speed-selector-option",
+                        "data-rate": g,
+                        onClick: () => h(g),
+                        children: f(g)
+                      }
+                    ) }, g);
+                  })
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+_e.displayName = "SpeedSelector";
+const Tr = ({
+  placement: e
+}) => {
+  var m;
+  const t = S(null), { volume: n, muted: a } = k(), { elementRefs: r } = L(), i = A(b), s = E(
+    (p) => {
+      p.stopPropagation(), p.preventDefault(), a && i({ type: "SET_MUTED", muted: !1 });
+      const { value: v } = p.target, f = parseFloat(v);
+      i({
+        type: "SET_VOLUME",
+        volume: f
+      });
+    },
+    [a, i]
+  ), o = n ?? ((m = r == null ? void 0 : r.audioEl) == null ? void 0 : m.volume) ?? 0, u = o * 100, d = Math.round(u), l = x(
+    () => ({
+      "--rm-audio-player-volume-value": `${u}%`
+    }),
+    [u]
+  );
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      ref: t,
+      className: "rmap-volume-container",
+      "data-placement": e,
+      "data-testid": "volume-slider",
+      style: l,
+      children: /* @__PURE__ */ c("div", { className: "rmap-volume-panel", children: /* @__PURE__ */ c(
+        "input",
+        {
+          className: "rmap-volume-slider",
+          type: "range",
+          style: { cursor: "pointer" },
+          value: o,
+          onChange: s,
+          min: "0",
+          max: "1",
+          step: "0.01",
+          "aria-label": a ? "Volume (muted)" : "Volume",
+          "aria-valuetext": `${d} percent`
+        }
+      ) })
+    }
+  );
+}, Et = ({
+  gridArea: e,
+  visible: t,
+  triggerType: n,
+  placement: a,
+  ...r
+}) => {
+  const i = S(null), { muted: s } = k(), o = A(b), u = E(
+    () => o({ type: "SET_MUTED", muted: !s }),
+    [o, s]
   ), {
-    activeUI: { volumeSlider: a },
-    volumeSliderPlacement: s
-  } = O(), n = jt({
-    triggerRef: e,
-    initialState: "bottom"
+    activeUI: { volumeSlider: d },
+    volumeSliderPlacement: l
+  } = M(), m = B("volume", e), {
+    triggerType: p,
+    placement: v,
+    contentRole: f
+  } = gt({
+    triggerType: n,
+    placement: a,
+    contextPlacement: l,
+    triggerRef: i,
+    defaults: { triggerType: "hover", placement: "bottom" }
   });
-  return /* @__PURE__ */ w(
-    ie,
+  return /* @__PURE__ */ c(_.Item, { gridArea: m, visible: t ?? !0, ...r, children: /* @__PURE__ */ w(
+    j,
     {
-      placement: s || n,
-      triggerType: "hover",
-      disabled: a === !1,
+      placement: v,
+      triggerType: p,
+      disabled: d === !1,
       "data-testid": "volume-dropdown",
       children: [
-        /* @__PURE__ */ i(
-          ie.Trigger,
+        /* @__PURE__ */ c(
+          j.Trigger,
           {
-            ref: e,
-            "aria-label": t ? "Unmute" : "Mute",
-            "aria-pressed": t,
-            onClick: r,
+            ref: i,
+            "aria-label": s ? "Unmute" : "Mute",
+            "aria-pressed": s,
+            onClick: u,
             className: "rmap-volume-trigger",
             "data-testid": "volume-trigger-btn",
-            "data-muted": String(t),
-            children: /* @__PURE__ */ i(qe, {})
+            "data-muted": String(s),
+            children: /* @__PURE__ */ c(ut, {})
           }
         ),
-        /* @__PURE__ */ i(ie.Content, { role: "tooltip", children: /* @__PURE__ */ i(
-          zt,
-          {
-            placement: s || n
-          }
-        ) })
+        /* @__PURE__ */ c(j.Content, { role: f, children: /* @__PURE__ */ c(Tr, { placement: v }) })
       ]
     }
-  );
-}, Yt = () => {
-  var r, a, s, n, c, d, m, l, y, u;
-  const { interfacePlacement: e, activeUI: t } = O(), o = !!(t.prevNnext ?? t.all);
-  return /* @__PURE__ */ w(z, { children: [
-    /* @__PURE__ */ i(
-      M.Item,
-      {
-        gridArea: ((r = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : r.progress) || ((a = e == null ? void 0 : e.templateArea) == null ? void 0 : a.progress) || N.templateArea.progress,
-        width: "100%",
-        visible: !!(t.progress !== void 0 ? t.progress : t.all),
-        children: /* @__PURE__ */ i(Rt, {})
-      }
-    ),
-    /* @__PURE__ */ i(
-      M.Item,
-      {
-        gridArea: ((s = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : s.repeatType) || ((n = e == null ? void 0 : e.templateArea) == null ? void 0 : n.repeatType) || N.templateArea.repeatType,
-        visible: !!(t.repeatType ?? t.all),
-        children: /* @__PURE__ */ i(Lt, {})
-      }
-    ),
-    /* @__PURE__ */ i(
-      M.Item,
-      {
-        gridArea: ((c = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : c.playButton) || ((d = e == null ? void 0 : e.templateArea) == null ? void 0 : d.playButton) || N.templateArea.playButton,
-        visible: !!(t.playButton ?? t.all),
-        children: /* @__PURE__ */ w("div", { className: "rmap-ctrl-btn-wrapper", children: [
-          /* @__PURE__ */ i(It, { isVisible: o }),
-          /* @__PURE__ */ i(Et, {}),
-          /* @__PURE__ */ i(St, { isVisible: o })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ i(
-      M.Item,
-      {
-        gridArea: ((m = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : m.volume) || ((l = e == null ? void 0 : e.templateArea) == null ? void 0 : l.volume) || N.templateArea.volume,
-        visible: !!(t.volume ?? t.all),
-        children: /* @__PURE__ */ i(qt, {})
-      }
-    ),
-    /* @__PURE__ */ i(
-      M.Item,
-      {
-        gridArea: ((y = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : y.playList) || ((u = e == null ? void 0 : e.templateArea) == null ? void 0 : u.playList) || N.templateArea.playList,
-        visible: !!(t.playList ?? t.all),
-        children: /* @__PURE__ */ i(Ut, {})
-      }
-    )
+  ) });
+}, hr = () => {
+  const { activeUI: e } = M(), t = (n) => !!(e[n] ?? e.all);
+  return /* @__PURE__ */ w(G, { children: [
+    /* @__PURE__ */ c(ft, { visible: t("progress") }),
+    /* @__PURE__ */ c(lt, { visible: t("repeatType") }),
+    /* @__PURE__ */ c(ct, { visible: t("playButton") }),
+    /* @__PURE__ */ c(Et, { visible: t("volume") }),
+    /* @__PURE__ */ c(_e, { visible: t("playbackRate") }),
+    /* @__PURE__ */ c(mt, { visible: t("playList") })
   ] });
-}, Xt = W(function() {
-  const { playList: t, curIdx: o } = V(), { coverImgsCss: r } = L(), a = t[o], s = [a == null ? void 0 : a.writer, a == null ? void 0 : a.name].filter(Boolean).join(" - ") || "Album artwork";
-  return /* @__PURE__ */ i("div", { className: "rmap-artwork-container", children: a != null && a.img ? /* @__PURE__ */ i("img", { src: a.img, alt: s, style: r == null ? void 0 : r.artwork }) : /* @__PURE__ */ i(
+}, At = z(function({
+  gridArea: t,
+  visible: n,
+  ...a
+}) {
+  const { playList: r, curIdx: i } = $(), { coverImgsCss: s } = L(), o = r[i], u = [o == null ? void 0 : o.writer, o == null ? void 0 : o.name].filter(Boolean).join(" - ") || "Album artwork", d = B("artwork", t);
+  return /* @__PURE__ */ c(_.Item, { gridArea: d, visible: n ?? !0, ...a, children: /* @__PURE__ */ c("div", { className: "rmap-artwork-container", children: o != null && o.img ? /* @__PURE__ */ c("img", { src: o.img, alt: u, style: s == null ? void 0 : s.artwork }) : /* @__PURE__ */ c(
     "div",
     {
       className: "rmap-artwork-fallback",
       role: "img",
-      "aria-label": s,
-      style: r == null ? void 0 : r.artwork,
-      children: (a == null ? void 0 : a.name) || "♪"
+      "aria-label": u,
+      style: s == null ? void 0 : s.artwork,
+      children: (o == null ? void 0 : o.name) || "♪"
     }
-  ) });
-}), Qt = W(function() {
-  const { playList: t, curIdx: o } = V(), r = t[o];
-  return /* @__PURE__ */ i("div", { className: "rmap-track-info-container", children: r != null && r.customTrackInfo ? r.customTrackInfo : /* @__PURE__ */ w(z, { children: [
-    (r == null ? void 0 : r.name) && /* @__PURE__ */ i("span", { className: "title", "data-testid": "track-title", children: r.name }),
-    (r == null ? void 0 : r.writer) && /* @__PURE__ */ i("span", { className: "writer", children: r.writer })
-  ] }) });
-}), tt = ({ position: e, className: t, children: o, ...r }) => /* @__PURE__ */ i(
+  ) }) });
+}), De = z(function({
+  gridArea: t,
+  visible: n,
+  ...a
+}) {
+  const { playList: r, curIdx: i } = $(), s = r[i], o = B("trackInfo", t);
+  return /* @__PURE__ */ c(_.Item, { gridArea: o, visible: n ?? !0, ...a, children: /* @__PURE__ */ c("div", { className: "rmap-track-info-container", children: s != null && s.customTrackInfo ? s.customTrackInfo : /* @__PURE__ */ w(G, { children: [
+    (s == null ? void 0 : s.name) && /* @__PURE__ */ c("span", { className: "title", "data-testid": "track-title", children: s.name }),
+    (s == null ? void 0 : s.writer) && /* @__PURE__ */ c("span", { className: "writer", children: s.writer })
+  ] }) }) });
+});
+De.displayName = "TrackInfo";
+const Pt = ({ position: e, className: t, children: n, ...a }) => /* @__PURE__ */ c(
   "div",
   {
     className: `rmap-track-time-container${t ? ` ${t}` : ""}`,
     "data-position": e,
-    ...r,
-    children: o
+    ...a,
+    children: n
   }
-), Jt = ({ position: e }) => {
+), gr = ({ position: e }) => {
   const { currentTime: t } = re();
-  return /* @__PURE__ */ i(tt, { position: e, className: "rmap-track-time-current", children: /* @__PURE__ */ i(
+  return /* @__PURE__ */ c(Pt, { position: e, className: "rmap-track-time-current", children: /* @__PURE__ */ c(
     "span",
     {
       className: "rmap-track-current-time",
@@ -1793,28 +1998,23 @@ const jt = ({
       children: ee(t)
     }
   ) });
-}, Zt = ({ position: e }) => {
+}, Er = ({ position: e }) => {
   const { duration: t } = re();
-  return /* @__PURE__ */ i(
-    tt,
+  return /* @__PURE__ */ c(
+    Pt,
     {
       position: e,
       className: "rmap-track-time-duration",
-      children: /* @__PURE__ */ i("span", { className: "rmap-track-duration", children: ee(t) })
+      children: /* @__PURE__ */ c("span", { className: "rmap-track-duration", children: ee(t) })
     }
   );
-}, er = () => {
-  var c, d, m, l, y, u, p, T;
-  const { interfacePlacement: e, activeUI: t } = O(), o = f(
-    (v) => +v.split(/[^\d]/).join(""),
+}, St = ({ visible: e }) => {
+  const t = B("trackTimeCurrent"), n = B("trackTimeDuration"), a = E(
+    (d) => +d.split(/[^\d]/).join(""),
     []
-  ), r = o(
-    ((c = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : c.trackTimeCurrent) || ((d = e == null ? void 0 : e.templateArea) == null ? void 0 : d.trackTimeCurrent) || N.templateArea.trackTimeCurrent
-  ), a = o(
-    ((m = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : m.trackTimeDuration) || ((l = e == null ? void 0 : e.templateArea) == null ? void 0 : l.trackTimeDuration) || N.templateArea.trackTimeDuration
-  ), s = f(
-    (v) => {
-      switch (v) {
+  ), r = a(t), i = a(n), s = E(
+    (d) => {
+      switch (d) {
         case 1:
           return "right";
         case -1:
@@ -1824,296 +2024,373 @@ const jt = ({
       }
     },
     []
-  ), n = {
-    current: s(r - a),
-    duration: s(a - r)
-  };
-  return /* @__PURE__ */ w(z, { children: [
-    /* @__PURE__ */ i(
-      M.Item,
-      {
-        gridArea: ((y = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : y.trackTimeCurrent) || ((u = e == null ? void 0 : e.templateArea) == null ? void 0 : u.trackTimeCurrent) || N.templateArea.trackTimeCurrent,
-        visible: !!(t.trackTime ?? t.all),
-        children: /* @__PURE__ */ i(Jt, { position: n.current })
-      }
-    ),
-    /* @__PURE__ */ i(
-      M.Item,
-      {
-        gridArea: ((p = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : p.trackTimeDuration) || ((T = e == null ? void 0 : e.templateArea) == null ? void 0 : T.trackTimeDuration) || N.templateArea.trackTimeDuration,
-        visible: !!(t.trackTime ?? t.all),
-        children: /* @__PURE__ */ i(Zt, { position: n.duration })
-      }
-    )
+  ), o = {
+    current: s(r - i),
+    duration: s(i - r)
+  }, u = e ?? !0;
+  return /* @__PURE__ */ w(G, { children: [
+    /* @__PURE__ */ c(_.Item, { gridArea: t, visible: u, children: /* @__PURE__ */ c(gr, { position: o.current }) }),
+    /* @__PURE__ */ c(_.Item, { gridArea: n, visible: u, children: /* @__PURE__ */ c(Er, { position: o.duration }) })
   ] });
-}, tr = () => {
-  var s, n, c, d, m, l, y, u;
-  const { playList: e, curIdx: t } = V(), { interfacePlacement: o, activeUI: r } = O(), a = !!(((s = e[t]) == null ? void 0 : s.customTrackInfo) ?? ((n = e[t]) == null ? void 0 : n.writer) ?? ((c = e[t]) == null ? void 0 : c.name)) && !!(r.trackInfo ?? r.all);
-  return /* @__PURE__ */ w(z, { children: [
-    /* @__PURE__ */ i(
-      M.Item,
-      {
-        gridArea: ((d = o == null ? void 0 : o.itemCustomArea) == null ? void 0 : d.artwork) || ((m = o == null ? void 0 : o.templateArea) == null ? void 0 : m.artwork) || N.templateArea.artwork,
-        visible: !!((l = e[t]) != null && l.img && (r.artwork ?? r.all)),
-        children: /* @__PURE__ */ i(Xt, {})
-      }
-    ),
-    /* @__PURE__ */ i(
-      M.Item,
+}, Ar = () => {
+  var r, i, s, o;
+  const { playList: e, curIdx: t } = $(), { activeUI: n } = M(), a = !!(((r = e[t]) == null ? void 0 : r.customTrackInfo) ?? ((i = e[t]) == null ? void 0 : i.writer) ?? ((s = e[t]) == null ? void 0 : s.name)) && !!(n.trackInfo ?? n.all);
+  return /* @__PURE__ */ w(G, { children: [
+    /* @__PURE__ */ c(
+      At,
       {
-        gridArea: ((y = o == null ? void 0 : o.itemCustomArea) == null ? void 0 : y.trackInfo) || ((u = o == null ? void 0 : o.templateArea) == null ? void 0 : u.trackInfo) || N.templateArea.trackInfo,
-        visible: a,
-        children: /* @__PURE__ */ i(Qt, {})
+        visible: !!((o = e[t]) != null && o.img && (n.artwork ?? n.all))
       }
     ),
-    /* @__PURE__ */ i(er, {})
+    /* @__PURE__ */ c(De, { visible: a }),
+    /* @__PURE__ */ c(St, { visible: !!(n.trackTime ?? n.all) })
   ] });
-}, rr = (e, t, o) => {
-  const r = f(
-    (u, p, T) => {
-      const v = Object.keys(
-        N.templateArea
-      ).filter((I) => (I === "trackTimeCurrent" || I === "trackTimeDuration") && u.trackTime === !1 ? !1 : u[I] !== void 0 ? u[I] : !0), h = u.all ? v : Object.entries(u).filter(([, I]) => I).map(([I]) => I);
+}, Ae = {
+  Progress: { displayName: "Progress", activeUIKey: "progress" },
+  Volume: { displayName: "Volume", activeUIKey: "volume" },
+  SortablePlayList: { displayName: "PlayList", activeUIKey: "playList" },
+  TransportControls: { displayName: "PlayButton", activeUIKey: "playButton" },
+  RepeatTypeBtn: { displayName: "RepeatButton", activeUIKey: "repeatType" },
+  Artwork: { displayName: "Artwork", activeUIKey: "artwork" },
+  TrackInfo: { displayName: "TrackInfo", activeUIKey: "trackInfo" },
+  TrackTime: { displayName: "TrackTime", activeUIKey: "trackTime" },
+  SpeedSelector: { displayName: "SpeedSelector", activeUIKey: "playbackRate" }
+};
+function Pr(e, t) {
+  const n = e[t];
+  return n === !1 ? !1 : n !== void 0 ? !0 : !!e.all;
+}
+function Re(e) {
+  const t = e.type;
+  if (!t) return;
+  const n = t.type ?? t;
+  return n.displayName || n.name || void 0;
+}
+const Sr = (e, t, n, a) => {
+  const r = x(
+    () => (a ?? []).map(Re).map(
+      (h) => {
+        var g;
+        return h ? (g = Ae[h]) == null ? void 0 : g.activeUIKey : void 0;
+      }
+    ).filter((h) => h !== void 0),
+    [a]
+  ), i = x(
+    () => [...r].sort().join(","),
+    [r]
+  ), s = E(
+    (h, g, C, W) => {
+      const se = Object.keys(
+        de.templateArea
+      ).filter((I) => (I === "trackTimeCurrent" || I === "trackTimeDuration") && h.trackTime === !1 ? !1 : h[I] !== void 0 ? h[I] : !0), R = h.all ? se : Object.entries(h).filter(([, I]) => I).map(([I]) => I);
+      for (const I of W)
+        R.includes(I) || R.push(I);
       (() => {
-        h.find((I) => I === "trackTime") && (h.splice(h.indexOf("trackTime"), 1), h.push("trackTimeCurrent"), h.push("trackTimeDuration"));
+        R.find((I) => I === "trackTime") && (R.splice(R.indexOf("trackTime"), 1), R.push("trackTimeCurrent"), R.push("trackTimeDuration"));
       })();
-      const k = {
-        ...N.templateArea,
-        ...p
-      }, B = Object.entries(
-        k
-      ).filter(([I]) => h.includes(I));
-      let R = 1;
-      const G = {}, ae = [
-        ...B,
-        ...Object.entries(T || {})
-      ].flatMap(([I, _]) => {
-        if (_ == null) return [];
-        const [K, $] = _.split("-"), j = +K.split("row")[1];
-        return R = Math.max(R, j), G[j] = G[j] ? G[j] + 1 : 1, [
+      const ae = {
+        ...de.templateArea,
+        ...g
+      }, ye = Object.entries(
+        ae
+      ).filter(([I]) => R.includes(I));
+      let le = 1;
+      const ue = {}, wt = [
+        ...ye,
+        ...Object.entries(C || {})
+      ].flatMap(([I, U]) => {
+        if (U == null) return [];
+        const [F, H] = U.split("-"), Y = +F.split("row")[1];
+        return le = Math.max(le, Y), ue[Y] = ue[Y] ? ue[Y] + 1 : 1, [
           {
             key: I,
-            row: j,
-            col: +$
+            row: Y,
+            col: +H
           }
         ];
-      }).sort((I, _) => I.col - _.col), X = Math.max(...Object.values(G));
-      let oe;
-      const rt = new Array(R).fill("").map((I, _) => {
-        let K = "", $;
-        const j = ae.filter((U) => U.row !== _ + 1 ? !1 : (U.key === "progress" && ($ = U), !0));
-        if ($) {
-          const U = /* @__PURE__ */ new Map();
-          j.forEach((Q) => U.set(Q.col, Q));
-          const de = `row${_ + 1}-${$.col}`, ne = [];
-          for (let Q = 0; Q < X; Q++) {
-            const Pe = Q + 1;
-            U.has(Pe) ? ne.push(`row${_ + 1}-${Pe}`) : ne.push(de);
+      }).sort((I, U) => I.col - U.col), ve = Math.max(...Object.values(ue));
+      let Ue;
+      const bt = new Array(le).fill("").map((I, U) => {
+        let F = "", H;
+        const Y = wt.filter((V) => V.row !== U + 1 ? !1 : (V.key === "progress" && (H = V), !0));
+        if (H) {
+          const V = /* @__PURE__ */ new Map();
+          Y.forEach((Q) => V.set(Q.col, Q));
+          const fe = `row${U + 1}-${H.col}`, ne = [];
+          for (let Q = 0; Q < ve; Q++) {
+            const Oe = Q + 1;
+            V.has(Oe) ? ne.push(`row${U + 1}-${Oe}`) : ne.push(fe);
           }
-          const nt = ne.indexOf(de), st = ne.lastIndexOf(de);
-          oe = Math.floor((nt + st) / 2), K = " " + ne.join(" ");
+          const kt = ne.indexOf(fe), Ct = ne.lastIndexOf(fe);
+          Ue = Math.floor((kt + Ct) / 2), F = " " + ne.join(" ");
         } else
-          for (let U = 0; U < X; U++)
-            K += ` row${_ + 1}-${U + 1}`;
-        return K.trimStart();
-      }), at = Xe ? window.innerWidth - 100 : 1500, ot = new Array(R).fill("").map((I, _) => {
-        let K = "";
-        for (let $ = 0; $ < X; $++) {
-          if (oe === $ && _ === 0) {
-            K += " 1fr";
+          for (let V = 0; V < ve; V++)
+            F += ` row${U + 1}-${V + 1}`;
+        return F.trimStart();
+      }), Lt = pt ? window.innerWidth - 100 : 1500, Nt = new Array(le).fill("").map((I, U) => {
+        let F = "";
+        for (let H = 0; H < ve; H++) {
+          if (Ue === H && U === 0) {
+            F += " 1fr";
             continue;
           }
-          K += ` fit-content(${at}px)`;
+          F += ` fit-content(${Lt}px)`;
         }
-        return K.trimStart();
+        return F.trimStart();
       });
-      return { gridAreas: rt, gridColumns: ot };
+      return { gridAreas: bt, gridColumns: Nt };
     },
     []
-  ), [a, s] = C(e), [n, c] = C({
+  ), [o, u] = N(e), [d, l] = N(i), [m, p] = N({
     templateArea: t,
-    customComponentsArea: o
-  }), [d, m] = C();
-  if (!d) {
-    const { gridAreas: u, gridColumns: p } = r(
-      a,
-      n.templateArea,
-      n.customComponentsArea
+    customComponentsArea: n
+  }), [v, f] = N();
+  if (!v) {
+    const { gridAreas: h, gridColumns: g } = s(
+      o,
+      m.templateArea,
+      m.customComponentsArea,
+      r
     );
-    return m({ gridAreas: u, gridColumns: p }), [u, p];
+    return f({ gridAreas: h, gridColumns: g }), [h, g];
   }
-  if (a !== e || n.templateArea !== t || n.customComponentsArea !== o) {
-    s(e), c({ templateArea: t, customComponentsArea: o });
-    const { gridAreas: u, gridColumns: p } = r(
+  if (o !== e || d !== i || m.templateArea !== t || m.customComponentsArea !== n) {
+    u(e), l(i), p({ templateArea: t, customComponentsArea: n });
+    const { gridAreas: h, gridColumns: g } = s(
       e,
       t,
-      o
+      n,
+      r
     );
-    m({ gridAreas: u, gridColumns: p });
+    f({ gridAreas: h, gridColumns: g });
   }
-  const { gridAreas: l, gridColumns: y } = d;
-  return [l, y];
-}, ar = ({ children: e }) => {
-  const { interfacePlacement: t, activeUI: o, playListPlacement: r } = O(), a = te.Children.toArray(e), [s, n] = rr(
-    o,
+  const { gridAreas: y, gridColumns: T } = v;
+  return [y, T];
+};
+function Ir(e) {
+  return x(() => {
+    const t = te.Children.toArray(e).filter(Dt), n = t.find(Be);
+    return {
+      compoundChildren: t.filter(
+        (a) => !Be(a)
+      ),
+      playListEmptyNode: wr(n)
+    };
+  }, [e]);
+}
+function Be(e) {
+  return Re(e) === We;
+}
+function wr(e) {
+  if (!e) return null;
+  const t = e.props;
+  return (t == null ? void 0 : t.children) ?? null;
+}
+function br({
+  compoundChildren: e,
+  activeUI: t
+}) {
+  const n = e.map(Re).filter((a) => !!(a && Ae[a])).sort().join(",");
+  P(() => {
+    if (process.env.NODE_ENV === "production" || !n) return;
+    const a = /* @__PURE__ */ new Set();
+    for (const r of n.split(",")) {
+      const i = Ae[r];
+      i && (a.has(i.displayName) || Pr(t, i.activeUIKey) && (a.add(i.displayName), console.warn(
+        `[react-modern-audio-player] Both preset and compound '${i.displayName}' are rendered. Set \`activeUI.${i.activeUIKey}=false\` to replace the preset control.`
+      )));
+    }
+  }, [n, t]);
+}
+const Lr = ({ children: e }) => {
+  const { interfacePlacement: t, activeUI: n, playListPlacement: a } = M(), { compoundChildren: r, playListEmptyNode: i } = Ir(e);
+  br({ compoundChildren: r, activeUI: n });
+  const [s, o] = Sr(
+    n,
     t == null ? void 0 : t.templateArea,
-    t == null ? void 0 : t.customComponentsArea
-  );
-  return /* @__PURE__ */ w(
+    t == null ? void 0 : t.customComponentsArea,
+    r
+  ), [u, d] = N(null);
+  return /* @__PURE__ */ c(
     "div",
     {
       className: "rmap-interface-container",
       "data-testid": "audio-player",
       role: "region",
       "aria-label": "Audio player",
-      children: [
-        r === "top" && /* @__PURE__ */ i("div", { className: "rmap-sortable-playlist" }),
+      children: /* @__PURE__ */ c(xe.Provider, { value: u, children: /* @__PURE__ */ w(Me.Provider, { value: i, children: [
+        a === "top" && /* @__PURE__ */ c("div", { ref: d, className: "rmap-sortable-playlist" }),
         /* @__PURE__ */ w(
-          M,
+          _,
           {
             alignItems: "center",
             justifyContent: "center",
             areas: s,
             minHeight: "30px",
-            columns: n,
+            columns: o,
             UNSAFE_className: "rmap-interface-grid",
             children: [
-              /* @__PURE__ */ i(tr, {}),
-              /* @__PURE__ */ i(Yt, {}),
-              a
+              /* @__PURE__ */ c(Ar, {}),
+              /* @__PURE__ */ c(hr, {}),
+              r
             ]
           }
         ),
-        r === "bottom" && /* @__PURE__ */ i("div", { className: "rmap-sortable-playlist" })
-      ]
+        a === "bottom" && /* @__PURE__ */ c("div", { ref: d, className: "rmap-sortable-playlist" })
+      ] }) })
     }
   );
 }, Z = (e, t) => {
-  const o = A(!1);
-  E(() => {
-    if (o.current)
+  const n = S(!1);
+  P(() => {
+    if (n.current)
       return e();
-  }, t), E(() => (o.current = !0, () => {
-    o.current = !1;
+  }, t), P(() => (n.current = !0, () => {
+    n.current = !1;
   }), []);
-}, or = ({
+}, Nr = ({
   placement: e = {},
   activeUI: t,
-  coverImgsCss: o,
-  audioInitialState: r,
-  playList: a,
-  customIcons: s
+  coverImgsCss: n,
+  audioInitialState: a,
+  playList: r,
+  customIcons: i
 }) => {
-  const n = g(P);
+  const s = A(b);
   Z(() => {
     const {
-      player: c,
-      playList: d,
-      interface: m,
+      player: o,
+      playList: u,
+      interface: d,
       volumeSlider: l
     } = e;
-    n({
+    s({
       type: "SET_PLACEMENTS",
-      playerPlacement: c,
-      playListPlacement: d,
-      interfacePlacement: m,
+      playerPlacement: o,
+      playListPlacement: u,
+      interfacePlacement: d,
       volumeSliderPlacement: l
     });
-  }, [n, e]), Z(() => {
-    t && n({ type: "SET_ACTIVE_UI", activeUI: t });
-  }, [t, n]), Z(() => {
-    o && n({ type: "SET_COVER_IMGS_CSS", coverImgsCss: o });
-  }, [n, o]), Z(() => {
-    r && n({
+  }, [s, e]), Z(() => {
+    t && s({ type: "SET_ACTIVE_UI", activeUI: t });
+  }, [t, s]), Z(() => {
+    n && s({ type: "SET_COVER_IMGS_CSS", coverImgsCss: n });
+  }, [s, n]), Z(() => {
+    a && s({
       type: "SET_INITIAL_STATES",
-      audioState: r,
-      curPlayId: r.curPlayId
+      audioState: a,
+      curPlayId: a.curPlayId
     });
-  }, [r, n]), Z(() => {
-    n({ type: "UPDATE_PLAY_LIST", playList: a });
-  }, [n, a]), Z(() => {
-    s && n({ type: "SET_CUSTOM_ICONS", customIcons: s });
-  }, [s, n]);
-}, nr = ({
+  }, [a, s]), Z(() => {
+    s({ type: "UPDATE_PLAY_LIST", playList: r });
+  }, [s, r]), Z(() => {
+    i && s({ type: "SET_CUSTOM_ICONS", customIcons: i });
+  }, [i, s]);
+}, kr = ({
   audioRef: e,
   children: t,
-  ...o
-}) => (or(o), /* @__PURE__ */ w("div", { id: "rm-audio-player", className: "rmap-player-container", children: [
-  /* @__PURE__ */ i(De, { audioRef: e }),
-  /* @__PURE__ */ i(ar, { children: t })
+  ...n
+}) => (Nr(n), /* @__PURE__ */ w("div", { id: "rm-audio-player", className: "rmap-player-container", children: [
+  /* @__PURE__ */ c(Ye, { audioRef: e }),
+  /* @__PURE__ */ c(Lr, { children: t })
 ] }));
-function we({
+function It({
   rootContainerProps: e,
   ...t
 }) {
-  return /* @__PURE__ */ i(vt, { ...t, children: /* @__PURE__ */ i(Me, { rootContainerProps: e, children: /* @__PURE__ */ i(nr, { ...t }) }) });
+  return /* @__PURE__ */ c(Bt, { ...t, children: /* @__PURE__ */ c(Ge, { rootContainerProps: e, children: /* @__PURE__ */ c(kr, { ...t }) }) });
 }
-we.displayName = "AudioPlayerWithProviders";
-we.CustomComponent = _e;
-const sr = () => {
-  const e = g(P), { isPlaying: t, repeatType: o } = b(), r = f(() => {
+It.displayName = "AudioPlayerWithProviders";
+const Kr = Object.assign(It, {
+  Progress: ft,
+  Volume: Et,
+  PlayList: mt,
+  PlayListEmpty: je,
+  PlayButton: ct,
+  RepeatButton: lt,
+  SpeedSelector: _e,
+  Artwork: At,
+  TrackInfo: De,
+  TrackTime: St,
+  CustomComponent: Gt
+}), Cr = () => {
+  const e = A(b), { isPlaying: t, repeatType: n, playbackRate: a } = k(), r = E(() => {
     e({ type: "CHANGE_PLAYING_STATE", state: !0 });
-  }, [e]), a = f(() => {
+  }, [e]), i = E(() => {
     e({ type: "CHANGE_PLAYING_STATE", state: !1 });
-  }, [e]), s = f(() => {
+  }, [e]), s = E(() => {
     e({ type: "CHANGE_PLAYING_STATE" });
-  }, [e]);
-  return { isPlaying: t, repeatType: o, play: r, pause: a, togglePlay: s };
-}, ir = () => {
-  const e = g(P), { playList: t, curIdx: o, curPlayId: r } = V(), { elementRefs: a } = L(), s = f(
-    (d) => {
-      const m = t[d];
-      m && e({
+  }, [e]), o = E(
+    (u) => {
+      e({ type: "SET_PLAYBACK_RATE", playbackRate: u });
+    },
+    [e]
+  );
+  return {
+    isPlaying: t,
+    repeatType: n,
+    playbackRate: a,
+    play: r,
+    pause: i,
+    togglePlay: s,
+    setPlaybackRate: o
+  };
+}, xr = () => {
+  const e = A(b), { playList: t, curIdx: n, curPlayId: a } = $(), { elementRefs: r } = L(), i = E(
+    (u) => {
+      const d = t[u];
+      d && e({
         type: "SET_CURRENT_AUDIO",
-        currentIndex: d,
-        currentAudioId: m.id
+        currentIndex: u,
+        currentAudioId: d.id
       });
     },
     [e, t]
-  ), n = f(() => {
+  ), s = E(() => {
     t.length !== 0 && e({ type: "NEXT_AUDIO" });
-  }, [e, t.length]), c = f(() => {
-    var m;
+  }, [e, t.length]), o = E(() => {
+    var d;
     if (t.length === 0) return;
-    const d = ((m = a == null ? void 0 : a.audioEl) == null ? void 0 : m.currentTime) ?? 0;
-    e({ type: "PREV_AUDIO", currentTime: d });
-  }, [e, t.length, a == null ? void 0 : a.audioEl]);
+    const u = ((d = r == null ? void 0 : r.audioEl) == null ? void 0 : d.currentTime) ?? 0;
+    e({ type: "PREV_AUDIO", currentTime: u });
+  }, [e, t.length, r == null ? void 0 : r.audioEl]);
   return {
-    currentPlayId: r,
-    currentIndex: o,
+    currentPlayId: a,
+    currentIndex: n,
     playList: t,
-    currentTrack: t[o] ?? null,
-    setTrack: s,
-    next: n,
-    prev: c
+    currentTrack: t[n] ?? null,
+    setTrack: i,
+    next: s,
+    prev: o
   };
-}, lr = () => {
-  const e = g(P), { volume: t, muted: o } = b(), r = f(
-    (s) => {
-      e({ type: "SET_VOLUME", volume: s });
+}, Mr = () => {
+  const e = A(b), { volume: t, muted: n } = k(), a = E(
+    (i) => {
+      e({ type: "SET_VOLUME", volume: i });
     },
     [e]
-  ), a = f(() => {
-    e({ type: "SET_MUTED", muted: !o });
-  }, [e, o]);
-  return { volume: t, muted: o, setVolume: r, toggleMute: a };
-}, cr = () => {
-  const e = g(P), { currentTime: t, duration: o } = re(), r = f(
-    (a) => {
-      e({ type: "SEEK", time: a });
+  ), r = E(() => {
+    e({ type: "SET_MUTED", muted: !n });
+  }, [e, n]);
+  return { volume: t, muted: n, setVolume: a, toggleMute: r };
+}, _r = () => {
+  const e = A(b), { currentTime: t, duration: n } = re(), a = E(
+    (r) => {
+      e({ type: "SEEK", time: r });
     },
     [e]
   );
-  return { currentTime: t, duration: o, seek: r };
-}, yr = () => {
-  const e = sr(), t = ir(), o = lr(), r = cr();
+  return { currentTime: t, duration: n, seek: a };
+}, Vr = () => {
+  const e = Cr(), t = xr(), n = Mr(), a = _r();
   return {
     isPlaying: e.isPlaying,
-    volume: o.volume,
-    currentTime: r.currentTime,
-    duration: r.duration,
+    volume: n.volume,
+    currentTime: a.currentTime,
+    duration: a.duration,
     repeatType: e.repeatType,
-    muted: o.muted,
+    muted: n.muted,
+    playbackRate: e.playbackRate,
     currentTrack: t.currentTrack,
     currentIndex: t.currentIndex,
     playList: t.playList,
@@ -2122,39 +2399,45 @@ const sr = () => {
     togglePlay: e.togglePlay,
     next: t.next,
     prev: t.prev,
-    seek: r.seek,
-    setVolume: o.setVolume,
-    toggleMute: o.toggleMute,
-    setTrack: t.setTrack
+    seek: a.seek,
+    setVolume: n.setVolume,
+    toggleMute: n.toggleMute,
+    setTrack: t.setTrack,
+    setPlaybackRate: e.setPlaybackRate
   };
-}, vr = () => {
+}, Br = () => {
   const { elementRefs: e } = L();
   return {
     audioEl: e == null ? void 0 : e.audioEl,
     waveformInst: e == null ? void 0 : e.waveformInst
   };
 };
-we.CustomComponent = _e;
 export {
-  nr as AudioPlayer,
-  Me as AudioPlayerContainer,
-  vt as AudioPlayerStateProvider,
-  F as DEFAULT_AUDIO_STATE,
-  he as audioAttrsContext,
-  P as audioPlayerDispatchContext,
-  pt as audioPlayerReducer,
-  we as default,
-  N as defaultInterfacePlacement,
-  pr as defaultInterfacePlacementMaxLength,
-  Te as playbackContext,
-  Ae as resourceContext,
-  Ee as timeContext,
-  fe as trackContext,
-  ge as uiContext,
-  yr as useAudioPlayer,
-  vr as useAudioPlayerElement,
-  sr as useAudioPlayerPlayback,
-  cr as useAudioPlayerTime,
-  ir as useAudioPlayerTrack,
-  lr as useAudioPlayerVolume
+  kr as AudioPlayer,
+  Ge as AudioPlayerContainer,
+  Bt as AudioPlayerStateProvider,
+  O as DEFAULT_AUDIO_STATE,
+  Or as DEFAULT_INTERFACE_GRID_BOUND,
+  Ie as audioAttrsContext,
+  b as audioPlayerDispatchContext,
+  Ot as audioPlayerReducer,
+  Kr as default,
+  de as defaultInterfacePlacement,
+  Se as playbackContext,
+  Le as resourceContext,
+  Ne as timeContext,
+  we as trackContext,
+  be as uiContext,
+  Kt as useAudioAttrsContext,
+  Vr as useAudioPlayer,
+  Br as useAudioPlayerElement,
+  Cr as useAudioPlayerPlayback,
+  _r as useAudioPlayerTime,
+  xr as useAudioPlayerTrack,
+  Mr as useAudioPlayerVolume,
+  k as usePlaybackContext,
+  L as useResourceContext,
+  re as useTimeContext,
+  $ as useTrackContext,
+  M as useUIContext
 };