react-modern-audio-player 2.0.0-beta.1 → 2.0.0

package/dist/index.es.js

@@ -1,7 +1,7 @@
 "use client";
 import './index.css';
-import { jsx as i, Fragment as R, jsxs as S } from "react/jsx-runtime";
-import te, { createContext as $, useReducer as nt, useMemo as D, useContext as st, forwardRef as ve, useCallback as T, useRef as E, useEffect as A, memo as z, useState as k, useId as ke, useLayoutEffect as it, cloneElement as lt } from "react";
+import { jsx as i, Fragment as z, jsxs as S } from "react/jsx-runtime";
+import te, { createContext as H, useReducer as nt, useMemo as D, useContext as st, forwardRef as ve, useCallback as g, useRef as A, useEffect as E, memo as W, useState as b, useId as ke, useLayoutEffect as it, cloneElement as lt } from "react";
 import ct, { flushSync as ut } from "react-dom";
 const F = {
   isPlaying: !1,
@@ -10,7 +10,7 @@ const F = {
   repeatType: "ALL",
   currentTime: 0,
   duration: 0
-}, mr = 10, L = {
+}, pr = 10, k = {
   templateArea: {
     artwork: "row1-1",
     trackInfo: "row1-2",
@@ -22,13 +22,13 @@ const F = {
     playButton: "row1-8",
     playList: "row1-9"
   }
-}, w = $(null);
+}, w = H(null);
 w.displayName = "AudioPlayerDispatchContext";
-const be = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Ne = (e, t) => Math.round(Math.random() * (t - e) + e), dt = 1, Le = (e, t, o) => {
+const be = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) => Math.round(Math.random() * (t - e) + e), dt = 1, Ne = (e, t, o) => {
   if (o - t < 1) return e;
-  let r = Ne(t, o);
+  let r = Le(t, o);
   for (; r === e; )
-    r = Ne(t, o);
+    r = Le(t, o);
   return r;
 }, mt = (e, t) => {
   switch (t.type) {
@@ -50,7 +50,7 @@ const be = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Ne = (e, t) =>
             audioResetKey: e.audioResetKey + 1,
             curAudioState: { ...e.curAudioState, currentTime: 0 }
           };
-        const r = Le(
+        const r = Ne(
           e.curIdx,
           0,
           e.playList.length - 1
@@ -85,7 +85,7 @@ const be = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Ne = (e, t) =>
           curAudioState: { ...e.curAudioState, currentTime: 0 }
         };
       if (e.curAudioState.repeatType === "SHUFFLE") {
-        const n = Le(
+        const n = Ne(
           e.curIdx,
           0,
           e.playList.length - 1
@@ -223,18 +223,18 @@ const be = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Ne = (e, t) =>
     default:
       throw new Error("Unhandled action");
   }
-}, he = $(null);
+}, he = H(null);
 he.displayName = "PlaybackContext";
-const Te = $(null);
+const Te = H(null);
 Te.displayName = "AudioAttrsContext";
-const ge = $(null);
+const ge = H(null);
 ge.displayName = "TrackContext";
-const fe = $(null);
+const fe = H(null);
 fe.displayName = "UIContext";
-const Ee = $(null);
-Ee.displayName = "ResourceContext";
-const Ae = $(null);
-Ae.displayName = "TimeContext";
+const Ae = H(null);
+Ae.displayName = "ResourceContext";
+const Ee = H(null);
+Ee.displayName = "TimeContext";
 function pt(e) {
   const {
     playList: t,
@@ -253,7 +253,7 @@ function pt(e) {
     playListPlacement: (a == null ? void 0 : a.playList) || "bottom",
     interfacePlacement: (a == null ? void 0 : a.interface) || {
       templateArea: {
-        playButton: L.templateArea.playButton
+        playButton: k.templateArea.playButton
       }
     },
     volumeSliderPlacement: a == null ? void 0 : a.volumeSlider
@@ -262,7 +262,7 @@ function pt(e) {
     playList: t,
     curPlayId: (o == null ? void 0 : o.curPlayId) || 1,
     curIdx: o != null && o.curPlayId ? t.findIndex(
-      (p) => p.id === (o == null ? void 0 : o.curPlayId)
+      (m) => m.id === (o == null ? void 0 : o.curPlayId)
     ) : 0,
     curAudioState: c,
     activeUI: l,
@@ -278,7 +278,7 @@ const yt = ({
   colorScheme: t,
   ...o
 }) => {
-  var d, y;
+  var d, p;
   const [r, a] = nt(
     mt,
     o,
@@ -335,21 +335,21 @@ const yt = ({
       r.volumeSliderPlacement,
       t
     ]
-  ), { audioInitialState: u } = o, p = D(() => {
+  ), { audioInitialState: u } = o, m = D(() => {
     if (!u) return {};
     const {
-      isPlaying: v,
-      repeatType: h,
-      isLoadedMetaData: g,
-      currentTime: C,
+      isPlaying: h,
+      repeatType: v,
+      isLoadedMetaData: T,
+      currentTime: L,
       duration: N,
-      volume: W,
-      muted: H,
+      volume: B,
+      muted: R,
       curPlayId: G,
       ...ae
     } = u;
     return ae;
-  }, [u]), m = D(
+  }, [u]), y = D(
     () => ({
       elementRefs: r.elementRefs,
       customIcons: r.customIcons,
@@ -357,12 +357,12 @@ const yt = ({
     }),
     [
       (d = r.elementRefs) == null ? void 0 : d.audioEl,
-      (y = r.elementRefs) == null ? void 0 : y.waveformInst,
+      (p = r.elementRefs) == null ? void 0 : p.waveformInst,
       r.customIcons,
       r.coverImgsCss
     ]
   );
-  return /* @__PURE__ */ i(Ae.Provider, { value: s, children: /* @__PURE__ */ i(he.Provider, { value: n, children: /* @__PURE__ */ i(ge.Provider, { value: c, children: /* @__PURE__ */ i(fe.Provider, { value: l, children: /* @__PURE__ */ i(Ee.Provider, { value: m, children: /* @__PURE__ */ i(Te.Provider, { value: p, children: /* @__PURE__ */ i(w.Provider, { value: a, children: e }) }) }) }) }) }) });
+  return /* @__PURE__ */ i(Ee.Provider, { value: s, children: /* @__PURE__ */ i(he.Provider, { value: n, children: /* @__PURE__ */ i(ge.Provider, { value: c, children: /* @__PURE__ */ i(fe.Provider, { value: l, children: /* @__PURE__ */ i(Ae.Provider, { value: y, children: /* @__PURE__ */ i(Te.Provider, { value: m, children: /* @__PURE__ */ i(w.Provider, { value: a, children: e }) }) }) }) }) }) });
 }, f = (e) => {
   const t = st(e);
   if (!t) {
@@ -435,26 +435,26 @@ const ht = ({
     ...l
   }, u) => {
     if (!t) return null;
-    const p = {
+    const m = {
       gridArea: o,
       width: r,
       justifySelf: a,
       padding: s ?? "0 5px",
       ...c
     };
-    return /* @__PURE__ */ i("div", { ref: u, className: n, style: p, ...l, children: e });
+    return /* @__PURE__ */ i("div", { ref: u, className: n, style: m, ...l, children: e });
   }
 );
 Me.displayName = "GridItem";
 const M = Tt;
 M.Item = Me;
-const b = () => f(he), re = () => f(Ae), V = () => f(ge), P = () => f(Ee), xe = ({
+const C = () => f(he), re = () => f(Ee), V = () => f(ge), P = () => f(Ae), xe = ({
   children: e,
   id: t,
   ...o
 }) => {
-  var p, m;
-  const r = b(), a = re(), s = V(), n = O(), c = P(), l = {
+  var m, y;
+  const r = C(), a = re(), s = V(), n = O(), c = P(), l = {
     curAudioState: {
       isPlaying: r.isPlaying,
       volume: r.volume,
@@ -469,7 +469,7 @@ const b = () => f(he), re = () => f(Ae), V = () => f(ge), P = () => f(Ee), xe =
     ...s,
     ...n,
     ...c
-  }, u = (m = (p = n.interfacePlacement) == null ? void 0 : p.customComponentsArea) == null ? void 0 : m[t];
+  }, u = (y = (m = n.interfacePlacement) == null ? void 0 : m.customComponentsArea) == null ? void 0 : y[t];
   return /* @__PURE__ */ i(
     M.Item,
     {
@@ -485,17 +485,17 @@ const b = () => f(he), re = () => f(Ae), V = () => f(ge), P = () => f(Ee), xe =
     volume: t,
     repeatType: o,
     audioResetKey: r
-  } = b(), { currentTime: a, seekRequestKey: s } = re(), { elementRefs: n } = P(), c = f(w), l = T(
-    (y) => {
-      if (y.currentTarget.readyState === 0) return;
-      const v = y.currentTarget.currentTime;
+  } = C(), { currentTime: a, seekRequestKey: s } = re(), { elementRefs: n } = P(), c = f(w), l = g(
+    (p) => {
+      if (p.currentTarget.readyState === 0) return;
+      const h = p.currentTarget.currentTime;
       c({
         type: "SET_AUDIO_STATE",
-        audioState: { currentTime: v }
+        audioState: { currentTime: h }
       });
     },
     [c]
-  ), u = T(() => {
+  ), u = g(() => {
     if (n != null && n.audioEl) {
       if (o === "ONE") {
         ut(() => {
@@ -505,45 +505,45 @@ const b = () => f(he), re = () => f(Ae), V = () => f(ge), P = () => f(Ee), xe =
       }
       c({ type: "NEXT_AUDIO" });
     }
-  }, [c, o, n == null ? void 0 : n.audioEl]), p = T(
-    (y) => {
-      const { duration: v } = y.currentTarget;
-      t != null && (y.currentTarget.volume = t), c({
+  }, [c, o, n == null ? void 0 : n.audioEl]), m = g(
+    (p) => {
+      const { duration: h } = p.currentTarget;
+      t != null && (p.currentTarget.volume = t), c({
         type: "SET_AUDIO_STATE",
-        audioState: { isLoadedMetaData: !0, duration: v }
+        audioState: { isLoadedMetaData: !0, duration: h }
       });
     },
     [c, t]
-  ), m = E(!1);
-  A(() => {
+  ), y = A(!1);
+  E(() => {
     if (n != null && n.audioEl) {
-      if (!m.current) {
-        m.current = !0;
+      if (!y.current) {
+        y.current = !0;
         return;
       }
       n.audioEl.currentTime = 0;
     }
-  }, [r, n == null ? void 0 : n.audioEl]), A(() => {
+  }, [r, n == null ? void 0 : n.audioEl]), E(() => {
     n != null && n.audioEl && (e ? n.audioEl.play().catch(() => {
       c({
         type: "SET_AUDIO_STATE",
         audioState: { isPlaying: !1 }
       });
     }) : n.audioEl.pause());
-  }, [n == null ? void 0 : n.audioEl, e, c]), A(() => {
+  }, [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 d = E(0);
-  return A(() => {
+  const d = A(0);
+  return E(() => {
     if (s === d.current) return;
     d.current = s;
-    const y = n == null ? void 0 : n.audioEl;
-    if (!y || a == null) return;
-    y.currentTime = a;
-    const v = n == null ? void 0 : n.waveformInst, h = y.duration, g = Number.isFinite(h) && h > 0;
-    if (!v || !g) return;
-    const C = a / h, N = Math.min(1, Math.max(0, C));
-    v.seekTo(N);
+    const p = n == null ? void 0 : n.audioEl;
+    if (!p || a == null) return;
+    p.currentTime = a;
+    const h = n == null ? void 0 : n.waveformInst, v = p.duration, T = Number.isFinite(v) && v > 0;
+    if (!h || !T) return;
+    const L = a / v, N = Math.min(1, Math.max(0, L));
+    h.seekTo(N);
   }, [
     s,
     a,
@@ -552,13 +552,13 @@ const b = () => f(he), re = () => f(Ae), V = () => f(ge), P = () => f(Ee), xe =
   ]), {
     onTimeUpdate: l,
     onEnded: u,
-    onLoadedMetadata: p
+    onLoadedMetadata: m
   };
 }, _e = te.memo(({ audioRef: e }) => {
-  const t = E(null), { muted: o } = b(), { curPlayId: r, playList: a } = V(), s = gt(), n = f(w), c = a.find(
+  const t = A(null), { muted: o } = C(), { curPlayId: r, playList: a } = V(), s = gt(), n = f(w), c = a.find(
     (u) => u.id === r
   ), l = ft();
-  return A(() => {
+  return E(() => {
     t.current && (n({
       type: "SET_ELEMENT_REFS",
       elementRefs: { audioEl: t.current }
@@ -576,7 +576,7 @@ const b = () => f(he), re = () => f(Ae), V = () => f(ge), P = () => f(Ee), xe =
   );
 });
 _e.displayName = "Audio";
-const q = ve(({ className: e, type: t = "button", ...o }, r) => /* @__PURE__ */ i(
+const Y = ve(({ className: e, type: t = "button", ...o }, r) => /* @__PURE__ */ i(
   "button",
   {
     ref: r,
@@ -585,7 +585,7 @@ const q = ve(({ className: e, type: t = "button", ...o }, r) => /* @__PURE__ */
     ...o
   }
 ));
-q.displayName = "StyledBtn";
+Y.displayName = "StyledBtn";
 const Ie = (e) => (
   // eslint-disable-next-line react/display-name
   ({ size: t = "1em", color: o, style: r, ...a }) => /* @__PURE__ */ i(
@@ -606,7 +606,7 @@ const Ie = (e) => (
       dangerouslySetInnerHTML: { __html: e }
     }
   )
-), Y = (e) => (
+), q = (e) => (
   // eslint-disable-next-line react/display-name
   ({ size: t = "1em", color: o, style: r, ...a }) => /* @__PURE__ */ i(
     "svg",
@@ -660,31 +660,31 @@ const Ve = Ie(
   '<path fill="none" d="M0 0h24v24H0z"/><path d="M3 10h11v2H3zM3 6h11v2H3zM3 14h7v2H3zM16 13v8l6-4z"/>'
 );
 Ve.displayName = "MdPlaylistPlay";
-const Be = Y(
+const Be = q(
   '<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"/>'
 );
 Be.displayName = "TbRepeat";
-const Ke = Y(
+const Ke = q(
   '<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"/>'
 );
 Ke.displayName = "TbRepeatOnce";
-const Fe = Y(
+const $e = q(
   '<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 $e = Y(
+$e.displayName = "TbRepeatOff";
+const Fe = q(
   '<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"/>'
 );
-$e.displayName = "TbArrowsShuffle";
-const He = Y(
+Fe.displayName = "TbArrowsShuffle";
+const He = q(
   '<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"/>'
 );
 He.displayName = "TbVolume";
-const Re = Y(
+const Re = q(
   '<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"/>'
 );
 Re.displayName = "TbVolume2";
-const ze = Y(
+const ze = q(
   '<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"/>'
 );
 ze.displayName = "TbVolume3";
@@ -696,10 +696,10 @@ const Ge = De(
   '<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"/>'
 );
 Ge.displayName = "ImNext";
-const x = ({ render: e, customIcon: t }) => /* @__PURE__ */ i(R, { children: t ?? e }), Et = z(function() {
-  const { isPlaying: t } = b(), { customIcons: o } = P(), r = f(w);
+const x = ({ render: e, customIcon: t }) => /* @__PURE__ */ i(z, { children: t ?? e }), At = W(function() {
+  const { isPlaying: t } = C(), { customIcons: o } = P(), r = f(w);
   return /* @__PURE__ */ i(
-    q,
+    Y,
     {
       type: "button",
       "aria-label": t ? "Pause" : "Play",
@@ -715,10 +715,10 @@ const x = ({ render: e, customIcon: t }) => /* @__PURE__ */ i(R, { children: t ?
       ) : /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(Oe, {}), customIcon: o == null ? void 0 : o.play })
     }
   );
-}), At = z(function({ isVisible: t }) {
+}), Et = W(function({ isVisible: t }) {
   const { customIcons: o, elementRefs: r } = P(), a = f(w);
   return t ? /* @__PURE__ */ i(
-    q,
+    Y,
     {
       type: "button",
       "aria-label": "Previous track",
@@ -732,10 +732,10 @@ const x = ({ render: e, customIcon: t }) => /* @__PURE__ */ i(R, { children: t ?
       children: /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(We, {}), customIcon: o == null ? void 0 : o.prev })
     }
   ) : null;
-}), It = z(function({ isVisible: t }) {
+}), It = W(function({ isVisible: t }) {
   const { customIcons: o } = P(), r = f(w);
   return t ? /* @__PURE__ */ i(
-    q,
+    Y,
     {
       type: "button",
       "aria-label": "Next track",
@@ -757,15 +757,15 @@ const x = ({ render: e, customIcon: t }) => /* @__PURE__ */ i(R, { children: t ?
   ONE: "NONE",
   NONE: "SHUFFLE",
   SHUFFLE: "ALL"
-}, Pt = z(function() {
-  const { repeatType: t } = b(), { customIcons: o } = P(), r = f(w), a = () => {
+}, Pt = W(function() {
+  const { repeatType: t } = C(), { customIcons: o } = P(), r = f(w), a = () => {
     r({
       type: "SET_REPEAT_TYPE",
       repeatType: wt[t]
     });
   };
   return /* @__PURE__ */ S(
-    q,
+    Y,
     {
       type: "button",
       "aria-label": St[t],
@@ -776,28 +776,28 @@ const x = ({ render: e, customIcon: t }) => /* @__PURE__ */ i(R, { children: t ?
       children: [
         t === "ALL" && /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(Be, {}), customIcon: o == null ? void 0 : o.repeatAll }),
         t === "ONE" && /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(Ke, {}), customIcon: o == null ? void 0 : o.repeatOne }),
-        t === "NONE" && /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(Fe, {}), customIcon: o == null ? void 0 : o.repeatNone }),
+        t === "NONE" && /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i($e, {}), customIcon: o == null ? void 0 : o.repeatNone }),
         t === "SHUFFLE" && /* @__PURE__ */ i(
           x,
           {
-            render: /* @__PURE__ */ i($e, {}),
+            render: /* @__PURE__ */ i(Fe, {}),
             customIcon: o == null ? void 0 : o.repeatShuffle
           }
         )
       ]
     }
   );
-}), me = { size: "100%" }, je = z(
+}), me = { size: "100%" }, je = W(
   ve((e, t) => {
-    var m;
-    const { volume: o, muted: r } = b(), { customIcons: a, elementRefs: s } = P(), n = f(
+    var y;
+    const { volume: o, muted: r } = C(), { customIcons: a, elementRefs: s } = P(), n = f(
       w
-    ), c = T(
+    ), c = g(
       () => n({ type: "SET_MUTED", muted: !r }),
       [n, r]
-    ), l = o ?? ((m = s == null ? void 0 : s.audioEl) == null ? void 0 : m.volume) ?? 0, u = l > 0 && l <= 0.5, p = l > 0.5;
+    ), l = o ?? ((y = s == null ? void 0 : s.audioEl) == null ? void 0 : y.volume) ?? 0, u = l > 0 && l <= 0.5, m = l > 0.5;
     return /* @__PURE__ */ i(
-      q,
+      Y,
       {
         type: "button",
         "aria-label": r ? "Unmute" : "Mute",
@@ -819,7 +819,7 @@ const x = ({ render: e, customIcon: t }) => /* @__PURE__ */ i(R, { children: t ?
             render: /* @__PURE__ */ i(Re, { ...me }),
             customIcon: a == null ? void 0 : a.volumeHalf
           }
-        ) : p ? /* @__PURE__ */ i(
+        ) : m ? /* @__PURE__ */ i(
           x,
           {
             render: /* @__PURE__ */ i(He, { ...me }),
@@ -831,10 +831,10 @@ const x = ({ render: e, customIcon: t }) => /* @__PURE__ */ i(R, { children: t ?
   })
 );
 je.displayName = "VolumeTriggerBtn";
-const le = $(null);
+const le = H(null);
 le.displayName = "DrawerContext";
-const qe = (e, t) => {
-  A(() => {
+const Ye = (e, t) => {
+  E(() => {
     const o = (r) => {
       const a = e.current, { target: s } = r;
       !r || !a || a.contains(s) || t(r);
@@ -848,22 +848,22 @@ const qe = (e, t) => {
   isOpen: r,
   onOpenChange: a
 }) => {
-  const s = E(null), [n, c] = te.Children.toArray(o), [l, u] = k(!1), p = ke();
-  qe(s, () => {
+  const s = A(null), [n, c] = te.Children.toArray(o), [l, u] = b(!1), m = ke();
+  Ye(s, () => {
     e && (u(!1), a && a(!1));
-  }), A(() => {
+  }), E(() => {
     r !== void 0 && u(r);
   }, [r]);
-  const m = D(
-    () => ({ isOpen: l, setIsOpen: u, onOpenChange: a, drawerId: p }),
-    [l, u, a, p]
+  const y = D(
+    () => ({ isOpen: l, setIsOpen: u, onOpenChange: a, drawerId: m }),
+    [l, u, a, m]
   );
-  return /* @__PURE__ */ i("div", { className: "rmap-drawer-container", ref: s, children: /* @__PURE__ */ i(le.Provider, { value: m, children: /* @__PURE__ */ S(R, { children: [
+  return /* @__PURE__ */ i("div", { className: "rmap-drawer-container", ref: s, children: /* @__PURE__ */ i(le.Provider, { value: y, children: /* @__PURE__ */ S(z, { children: [
     t === "top" && c,
     n,
     t === "bottom" && c
   ] }) }) });
-}, Ye = typeof window < "u", pe = Ye ? it : A, Se = ({
+}, qe = typeof window < "u", pe = qe ? it : E, Se = ({
   visible: e,
   name: t,
   leaveTime: o,
@@ -873,65 +873,65 @@ const qe = (e, t) => {
   onEntered: n,
   children: c
 }) => {
-  const [l, u] = k(""), [p, m] = k(!1), d = E(n), y = E(s), v = E(t), h = E(r), g = E(o), C = E(a);
+  const [l, u] = b(""), [m, y] = b(!1), d = A(n), p = A(s), h = A(t), v = A(r), T = A(o), L = A(a);
   return pe(() => {
-    d.current = n, y.current = s, v.current = t, h.current = r, g.current = o, C.current = a;
+    d.current = n, p.current = s, h.current = t, v.current = r, T.current = o, L.current = a;
   }), pe(() => {
-    const N = e ? "enter" : "leave", W = v.current, H = e ? h.current : g.current;
-    e && !p && m(!0), u(`${W}-${N}`);
+    const N = e ? "enter" : "leave", B = h.current, R = e ? v.current : T.current;
+    e && !m && y(!0), u(`${B}-${N}`);
     const G = setTimeout(() => {
       var X, oe;
       u(
-        `${W}-${N} ${W}-${N}-active`
-      ), N === "leave" ? (X = y.current) == null || X.call(y) : (oe = d.current) == null || oe.call(d);
-    }, H), ae = setTimeout(() => {
-      e || (u(W), m(!1));
-    }, H + C.current);
+        `${B}-${N} ${B}-${N}-active`
+      ), N === "leave" ? (X = p.current) == null || X.call(p) : (oe = d.current) == null || oe.call(d);
+    }, R), ae = setTimeout(() => {
+      e || (u(B), y(!1));
+    }, R + L.current);
     return () => {
       clearTimeout(G), clearTimeout(ae);
     };
-  }, [e, p]), p ? lt(c, {
+  }, [e, m]), m ? lt(c, {
     className: `${c.props.className} ${l}`
   }) : null;
-}, Nt = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [role="button"]:not([aria-disabled="true"])', Lt = ({
+}, Lt = '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 = ({
   children: e,
   isWithAnimation: t = !0,
   "aria-label": o = "Dialog"
 }) => {
-  const { isOpen: r, setIsOpen: a, onOpenChange: s, drawerId: n } = f(le), c = E(null), l = E(null), u = T(
+  const { isOpen: r, setIsOpen: a, onOpenChange: s, drawerId: n } = f(le), c = A(null), l = A(null), u = g(
     () => {
-      var h;
-      return (h = c.current) == null ? void 0 : h.querySelectorAll(Nt);
+      var v;
+      return (v = c.current) == null ? void 0 : v.querySelectorAll(Lt);
     },
     []
-  ), p = T(() => {
-    var h, g;
-    (g = (h = u()) == null ? void 0 : h[0]) == null || g.focus();
-  }, [u]), m = T(() => {
-    l.current = document.activeElement, p();
-  }, [p]), d = T(() => {
-    var h;
-    (h = l.current) == null || h.focus();
+  ), m = g(() => {
+    var v, T;
+    (T = (v = u()) == null ? void 0 : v[0]) == null || T.focus();
+  }, [u]), y = g(() => {
+    l.current = document.activeElement, m();
+  }, [m]), d = g(() => {
+    var v;
+    (v = l.current) == null || v.focus();
   }, []);
-  A(() => {
-    var h;
-    r && !t ? (l.current = document.activeElement, p()) : !r && !t && ((h = l.current) == null || h.focus());
-  }, [r, t, p]);
-  const y = T(
-    (h) => {
-      if (h.key === "Escape") {
+  E(() => {
+    var v;
+    r && !t ? (l.current = document.activeElement, m()) : !r && !t && ((v = l.current) == null || v.focus());
+  }, [r, t, m]);
+  const p = g(
+    (v) => {
+      if (v.key === "Escape") {
         a(!1), s && s(!1);
         return;
       }
-      if (h.key === "Tab") {
-        const g = u();
-        if (!g || g.length === 0) return;
-        const C = g[0], N = g[g.length - 1];
-        h.shiftKey ? document.activeElement === C && (h.preventDefault(), N.focus()) : document.activeElement === N && (h.preventDefault(), C.focus());
+      if (v.key === "Tab") {
+        const T = u();
+        if (!T || T.length === 0) return;
+        const L = T[0], N = T[T.length - 1];
+        v.shiftKey ? document.activeElement === L && (v.preventDefault(), N.focus()) : document.activeElement === N && (v.preventDefault(), L.focus());
       }
     },
     [a, s, u]
-  ), v = /* @__PURE__ */ i(
+  ), h = /* @__PURE__ */ i(
     "div",
     {
       ref: c,
@@ -940,7 +940,7 @@ const qe = (e, t) => {
       "aria-modal": "true",
       "aria-label": o,
       id: n,
-      onKeyDown: y,
+      onKeyDown: p,
       children: e
     }
   );
@@ -952,22 +952,22 @@ const qe = (e, t) => {
       enterTime: 20,
       leaveTime: 60,
       clearTime: 300,
-      onEntered: m,
+      onEntered: y,
       onExited: d,
-      children: v
+      children: h
     }
-  ) : r ? v : null;
+  ) : r ? h : null;
 }, kt = ({
   children: e,
   "aria-label": t,
   "data-testid": o
 }) => {
-  const { isOpen: r, setIsOpen: a, onOpenChange: s, drawerId: n } = f(le), c = T(() => {
+  const { isOpen: r, setIsOpen: a, onOpenChange: s, drawerId: n } = f(le), c = g(() => {
     const l = !r;
     a(l), s == null || s(l);
   }, [r, a, s]);
   return /* @__PURE__ */ i(
-    q,
+    Y,
     {
       className: "rmap-drawer-trigger",
       type: "button",
@@ -980,7 +980,7 @@ const qe = (e, t) => {
     }
   );
 };
-se.Content = Lt;
+se.Content = Nt;
 se.Trigger = kt;
 const ye = ({ children: e }) => /* @__PURE__ */ i("ul", { className: "rmap-sortable-list-container", "aria-label": "Sortable list", children: e }), bt = ({
   index: e,
@@ -1010,18 +1010,18 @@ const ye = ({ children: e }) => /* @__PURE__ */ i("ul", { className: "rmap-sorta
   },
   onDrop: (l) => {
     l.stopPropagation(), l.currentTarget.classList.remove("rmap-drag-over");
-    const u = [...o], p = o[t];
+    const u = [...o], m = o[t];
     u.splice(t, 1);
-    const m = (t < e ? [
+    const y = (t < e ? [
       ...u.slice(0, e),
-      p,
+      m,
       ...u.slice(e, u.length)
     ] : [
       ...u.slice(0, e),
-      p,
+      m,
       ...u.slice(e, u.length)
-    ]).map((d, y) => ({ ...d, index: y }));
-    n == null || n(l, m);
+    ]).map((d, p) => ({ ...d, index: p }));
+    n == null || n(l, y);
   },
   onClick: (l) => {
     l.stopPropagation(), c == null || c(l);
@@ -1031,7 +1031,7 @@ const ye = ({ children: e }) => /* @__PURE__ */ i("ul", { className: "rmap-sorta
   return /* @__PURE__ */ i("li", { className: "rmap-sortable-item", ...r, children: /* @__PURE__ */ i("div", { className: "rmap-sortable-item-inner", children: t }) });
 };
 ye.Item = Ct;
-const Mt = z(function({
+const Mt = W(function({
   data: t
 }) {
   const { curPlayId: o } = V(), { coverImgsCss: r } = P(), a = o === t.id;
@@ -1061,7 +1061,7 @@ const Mt = z(function({
 }), xt = ({
   setIsOpen: e
 }) => {
-  const { playList: t } = V(), { activeUI: o } = O(), r = f(w), [a, s] = k(0), n = T(
+  const { playList: t } = V(), { activeUI: o } = O(), r = f(w), [a, s] = b(0), n = g(
     (c) => {
       r({
         type: "SET_CURRENT_AUDIO",
@@ -1120,7 +1120,7 @@ const Mt = z(function({
       }
     ),
     document.querySelector(".rmap-sortable-playlist") ?? document.body
-  ) : /* @__PURE__ */ i(R, {});
+  ) : /* @__PURE__ */ i(z, {});
 }, Dt = () => {
   const { customIcons: e } = P();
   return /* @__PURE__ */ i(
@@ -1141,15 +1141,15 @@ const Mt = z(function({
   const r = e / t;
   return isFinite(r) ? r : o;
 }, Xe = () => {
-  const { isLoadedMetaData: e } = b(), { elementRefs: t } = P(), [o, r] = k(!1), a = T(
+  const { isLoadedMetaData: e } = C(), { elementRefs: t } = P(), [o, r] = b(!1), a = g(
     (s) => {
       if (!(t != null && t.audioEl) || !e) return;
-      const { clientX: n } = s, { clientWidth: c } = s.currentTarget, l = s.currentTarget.getBoundingClientRect(), u = n - l.x, p = ce(u, c) * t.audioEl.duration;
-      t.audioEl.currentTime = p;
+      const { clientX: n } = s, { clientWidth: c } = s.currentTarget, l = s.currentTarget.getBoundingClientRect(), u = n - l.x, m = ce(u, c) * t.audioEl.duration;
+      t.audioEl.currentTime = m;
     },
     [e, t == null ? void 0 : t.audioEl]
   );
-  return A(() => {
+  return E(() => {
     if (!o) return;
     const s = (n) => n.preventDefault();
     return document.addEventListener("selectstart", s), () => {
@@ -1163,8 +1163,8 @@ const Mt = z(function({
     onClick: a
   };
 }, Qe = (e) => {
-  const { isLoadedMetaData: t } = b(), { elementRefs: o } = P();
-  return T(
+  const { isLoadedMetaData: t } = C(), { elementRefs: o } = P();
+  return g(
     (r) => {
       if (!(o != null && o.audioEl) || !t) return;
       const a = o.audioEl;
@@ -1190,15 +1190,15 @@ const Mt = z(function({
     [o == null ? void 0 : o.audioEl, t, e]
   );
 }, Ut = () => {
-  const { currentTime: e, duration: t } = re(), o = E(null), [r, a] = k(0);
-  A(() => {
+  const { currentTime: e, duration: t } = re(), o = A(null), [r, a] = b(0);
+  E(() => {
     const u = o.current;
     if (!u) return;
     a(u.offsetWidth);
-    const p = new ResizeObserver(([m]) => {
-      a(m.contentBoxSize[0].inlineSize);
+    const m = new ResizeObserver(([y]) => {
+      a(y.contentBoxSize[0].inlineSize);
     });
-    return p.observe(u), () => p.disconnect();
+    return m.observe(u), () => m.disconnect();
   }, []);
   const s = ce(e, t), n = Xe(), c = Qe(), l = s * r;
   return /* @__PURE__ */ S(
@@ -1239,7 +1239,7 @@ const Mt = z(function({
     }
   );
 }, Vt = (e, t) => {
-  const o = E(), r = T(() => {
+  const o = A(), r = g(() => {
     const a = document.getElementsByClassName("rmap-player-provider")[0];
     if (!a) return;
     const s = Object.entries(
@@ -1262,21 +1262,26 @@ const Mt = z(function({
   progressColor: "--rm-audio-player-waveform-bar",
   waveColor: "--rm-audio-player-waveform-background"
 }, Kt = (e) => {
-  const t = f(w), { isPlaying: o } = b(), { curPlayId: r } = V(), { elementRefs: a } = P(), { colorScheme: s } = O(), n = Vt(Bt, s), c = E(a == null ? void 0 : a.waveformInst);
-  c.current = a == null ? void 0 : a.waveformInst, A(() => {
-    var d, y;
-    if (a != null && a.waveformInst || !((d = n.current) != null && d.progressColor) || !((y = n.current) != null && y.waveColor))
+  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);
+}, $t = (e) => {
+  const t = f(w), { isPlaying: o } = C(), { curPlayId: r } = V(), { elementRefs: a } = P(), { colorScheme: s } = O(), n = Vt(Bt, s), c = A(a == null ? void 0 : a.waveformInst);
+  c.current = a == null ? void 0 : a.waveformInst, E(() => {
+    var p, h;
+    if (a != null && a.waveformInst || !((p = n.current) != null && p.progressColor) || !((h = n.current) != null && h.waveColor))
       return;
-    let m = !1;
+    let d = !1;
     return import("./wavesurfer-_j5aw4gZ.mjs").then((v) => v.w).then(({ default: v }) => {
-      var g, C;
-      if (m || !e.current || !((g = n.current) != null && g.progressColor) || !((C = n.current) != null && C.waveColor)) {
+      var L, N;
+      if (d || !e.current || !((L = n.current) != null && L.progressColor) || !((N = n.current) != null && N.waveColor)) {
         console.error("[useWaveSurfer] missing required dependencies");
         return;
       }
-      let h;
+      let T;
       try {
-        h = v.create({
+        T = v.create({
           barWidth: 1,
           cursorWidth: 2,
           container: e.current,
@@ -1288,50 +1293,50 @@ const Mt = z(function({
           backend: "MediaElement",
           removeMediaElementOnDestroy: !1
         });
-      } catch (N) {
+      } catch (B) {
         console.error(
           "[useWaveSurfer] failed to create WaveSurfer instance",
-          N
+          B
         );
         return;
       }
       t({
         type: "SET_ELEMENT_REFS",
-        elementRefs: { waveformInst: h }
+        elementRefs: { waveformInst: T }
       });
     }).catch((v) => {
       console.error("[useWaveSurfer] failed to load wavesurfer.js", v);
     }), () => {
-      m = !0;
+      d = !0;
     };
   }, [a == null ? void 0 : a.waveformInst, t, n]);
-  const l = E(r);
-  A(() => {
+  const l = A(r);
+  E(() => {
     if (!(a != null && a.audioEl) || !(a != null && a.waveformInst)) return;
-    const m = a.audioEl, d = a.waveformInst, y = l.current !== r;
+    const d = a.audioEl, p = a.waveformInst, h = l.current !== r;
     l.current = r;
-    const v = y ? 0 : m.currentTime, h = o;
-    d.load(m);
-    const g = () => {
-      !y && v > 0 && m.duration && (m.currentTime = v, d.seekTo(v / m.duration)), h && m.play();
+    const v = h ? 0 : d.currentTime, T = o;
+    Kt(p), p.load(d);
+    const L = () => {
+      !h && v > 0 && d.duration && (d.currentTime = v, p.seekTo(v / d.duration)), T && d.play();
     };
-    return d.on("ready", g), () => {
-      d.un("ready", g);
+    return p.on("ready", L), () => {
+      p.un("ready", L);
     };
-  }, [r, a == null ? void 0 : a.audioEl, a == null ? void 0 : a.waveformInst]), A(() => {
+  }, [r, a == null ? void 0 : a.audioEl, a == null ? void 0 : a.waveformInst]), E(() => {
     if (!e.current || !(a != null && a.waveformInst)) return;
-    const m = () => {
-      var y, v;
-      (v = (y = a.waveformInst) == null ? void 0 : y.drawer) == null || v.fireEvent("redraw");
-    }, d = new ResizeObserver(m);
-    return d.observe(e.current), () => {
-      d.disconnect();
+    const d = () => {
+      var h, v;
+      (v = (h = a.waveformInst) == null ? void 0 : h.drawer) == null || v.fireEvent("redraw");
+    }, p = new ResizeObserver(d);
+    return p.observe(e.current), () => {
+      p.disconnect();
     };
-  }, [a == null ? void 0 : a.waveformInst, e]), A(
+  }, [a == null ? void 0 : a.waveformInst, e]), E(
     () => () => {
-      var d, y;
-      const m = (d = e.current) == null ? void 0 : d.querySelector("wave");
-      m && m.remove(), (y = c.current) == null || y.destroy(), t({
+      var p, h;
+      const d = (p = e.current) == null ? void 0 : p.querySelector("wave");
+      d && d.remove(), (h = c.current) == null || h.destroy(), t({
         type: "SET_ELEMENT_REFS",
         elementRefs: { waveformInst: void 0 }
       });
@@ -1339,30 +1344,25 @@ const Mt = z(function({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [t]
   );
-  const u = E(void 0);
-  u.current = () => {
-    var d, y;
-    const m = (d = e.current) == null ? void 0 : d.querySelector("wave");
-    m && m.remove(), (y = a == null ? void 0 : a.waveformInst) == null || y.destroy(), t({
-      type: "SET_ELEMENT_REFS",
-      elementRefs: { waveformInst: void 0 }
-    });
-  }, A(() => {
-    const m = () => {
-      var y;
-      return (y = u.current) == null ? void 0 : y.call(u);
-    }, d = window.matchMedia("(prefers-color-scheme: dark)");
-    return d.addEventListener("change", m), () => d.removeEventListener("change", m);
+  const u = () => {
+    var v, T;
+    const d = c.current;
+    if (!(d != null && d.isReady)) return;
+    const p = (v = n.current) == null ? void 0 : v.waveColor, h = (T = n.current) == null ? void 0 : T.progressColor;
+    p && d.setWaveColor(p), h && d.setProgressColor(h);
+  }, m = A(u);
+  m.current = u;
+  const y = A(s);
+  E(() => {
+    y.current !== s && (y.current = s, m.current());
+  }, [s, a == null ? void 0 : a.waveformInst]), E(() => {
+    const d = () => m.current(), p = window.matchMedia("(prefers-color-scheme: dark)");
+    return p.addEventListener("change", d), () => p.removeEventListener("change", d);
   }, []);
-  const p = E(s);
-  A(() => {
-    var m;
-    p.current !== s && (p.current = s, (m = u.current) == null || m.call(u));
-  }, [s]);
 }, Ft = ({ isActive: e }) => {
-  var l, u, p, m;
-  const t = E(null), { isLoadedMetaData: o, isPlaying: r } = b(), { elementRefs: a } = P();
-  Kt(t), A(() => {
+  var l, u, m, y;
+  const t = A(null), { isLoadedMetaData: o, isPlaying: r } = C(), { elementRefs: a } = P();
+  $t(t), E(() => {
     if (!e || !(a != null && a.waveformInst) || !(a != null && a.audioEl) || !o || r)
       return;
     const d = ce(
@@ -1377,10 +1377,10 @@ const Mt = z(function({
     a == null ? void 0 : a.audioEl,
     r
   ]);
-  const s = Xe(), n = T(
-    (d, y) => {
-      var v;
-      y && ((v = a == null ? void 0 : a.waveformInst) == null || v.seekTo(ce(d, y)));
+  const s = Xe(), n = g(
+    (d, p) => {
+      var h;
+      p && ((h = a == null ? void 0 : a.waveformInst) == null || h.seekTo(ce(d, p)));
     },
     [a == null ? void 0 : a.waveformInst]
   ), c = Qe(n);
@@ -1398,35 +1398,35 @@ const Mt = z(function({
         (((l = a == null ? void 0 : a.audioEl) == null ? void 0 : l.currentTime) ?? 0) / (((u = a == null ? void 0 : a.audioEl) == null ? void 0 : u.duration) || 1) * 100
       ),
       "aria-valuetext": `${ee(
-        ((p = a == null ? void 0 : a.audioEl) == null ? void 0 : p.currentTime) ?? 0
-      )} of ${ee(((m = a == null ? void 0 : a.audioEl) == null ? void 0 : m.duration) ?? 0)}`,
+        ((m = a == null ? void 0 : a.audioEl) == null ? void 0 : m.currentTime) ?? 0
+      )} of ${ee(((y = a == null ? void 0 : a.audioEl) == null ? void 0 : y.duration) ?? 0)}`,
       onKeyDown: c,
       ...s
     }
   ) });
-}, $t = () => {
-  const { activeUI: e } = O(), t = e.progress ?? (e.all ? "bar" : !1), o = t === "waveform", r = t === "bar", [a, s] = k(o);
-  return A(() => {
+}, Ht = () => {
+  const { activeUI: e } = O(), t = e.progress ?? (e.all ? "bar" : !1), o = t === "waveform", r = t === "bar", [a, s] = b(o);
+  return E(() => {
     o && !a && s(!0);
   }, [o, a]), /* @__PURE__ */ S("div", { className: "rmap-progress-container", children: [
     a && /* @__PURE__ */ i(Ft, { isActive: o }),
     r && /* @__PURE__ */ i(Ut, {})
   ] });
-}, Ht = ({
+}, Rt = ({
   placement: e
 }) => {
-  var m;
-  const t = E(null), { volume: o, muted: r } = b(), { elementRefs: a } = P(), s = f(w), n = T(
+  var y;
+  const t = A(null), { volume: o, muted: r } = C(), { elementRefs: a } = P(), s = f(w), n = g(
     (d) => {
       d.stopPropagation(), d.preventDefault(), r && s({ type: "SET_MUTED", muted: !1 });
-      const { value: y } = d.target, v = parseFloat(y);
+      const { value: p } = d.target, h = parseFloat(p);
       s({
         type: "SET_VOLUME",
-        volume: v
+        volume: h
       });
     },
     [r, s]
-  ), c = o ?? ((m = a == null ? void 0 : a.audioEl) == null ? void 0 : m.volume) ?? 0, l = c * 100, u = Math.round(l), p = D(
+  ), c = o ?? ((y = a == null ? void 0 : a.audioEl) == null ? void 0 : y.volume) ?? 0, l = c * 100, u = Math.round(l), m = D(
     () => ({
       "--rm-audio-player-volume-value": `${l}%`
     }),
@@ -1439,7 +1439,7 @@ const Mt = z(function({
       className: "rmap-volume-container",
       "data-placement": e,
       "data-testid": "volume-slider",
-      style: p,
+      style: m,
       children: /* @__PURE__ */ i("div", { className: "rmap-volume-panel", children: /* @__PURE__ */ i(
         "input",
         {
@@ -1457,7 +1457,7 @@ const Mt = z(function({
       ) })
     }
   );
-}, ue = $(null);
+}, ue = H(null);
 ue.displayName = "DropdownContext";
 const Je = ({
   clickArea: e,
@@ -1466,23 +1466,23 @@ const Je = ({
   setIsOpen: r,
   onOpenChange: a
 }) => {
-  const s = E(), n = (p) => {
-    const m = () => {
+  const s = A(), n = (m) => {
+    const y = () => {
       clearTimeout(s.current), s.current = void 0;
-    }, d = (y) => {
-      r(y), a && a(y), m();
+    }, d = (p) => {
+      r(p), a && a(p), y();
     };
-    if (m(), p) {
+    if (y(), m) {
       s.current = window.setTimeout(() => d(!0), 100);
       return;
     }
     s.current = window.setTimeout(() => d(!1), 100);
-  }, c = (p) => {
-    t === "hover" && n(p);
+  }, c = (m) => {
+    t === "hover" && n(m);
   };
   return {
-    onClick: e === "content" ? (p) => {
-      p.stopPropagation(), p.nativeEvent.stopImmediatePropagation();
+    onClick: e === "content" ? (m) => {
+      m.stopPropagation(), m.nativeEvent.stopImmediatePropagation();
     } : () => {
       t === "click" && (r(!o), a && a(!o));
     },
@@ -1502,40 +1502,40 @@ const Je = ({
   onOpenChange: n,
   "data-testid": c
 }) => {
-  const l = E(null), [u, p] = te.Children.toArray(o), [m, d] = k(!1), y = Je({
+  const l = A(null), [u, m] = te.Children.toArray(o), [y, d] = b(!1), p = Je({
     setIsOpen: d,
-    isOpen: m,
+    isOpen: y,
     triggerType: e,
     clickArea: "root"
-  }), v = ke();
-  qe(l, () => t && d(!1)), A(() => {
+  }), h = ke();
+  Ye(l, () => t && d(!1)), E(() => {
     r !== void 0 && d(r);
   }, [r]);
-  const h = D(
+  const v = D(
     () => ({
       dropdownRef: l,
       placement: a,
-      isOpen: m,
+      isOpen: y,
       setIsOpen: d,
       onOpenChange: n,
-      dropdownId: v
+      dropdownId: h
     }),
-    [a, m, n, v]
+    [a, y, n, h]
   );
-  return /* @__PURE__ */ i(ue.Provider, { value: h, children: /* @__PURE__ */ i(
+  return /* @__PURE__ */ i(ue.Provider, { value: v, children: /* @__PURE__ */ i(
     "div",
     {
       className: "rmap-dropdown-container",
       ref: l,
       "data-testid": c,
-      ...y,
-      children: /* @__PURE__ */ S(R, { children: [
+      ...p,
+      children: /* @__PURE__ */ S(z, { children: [
         u,
-        !s && p
+        !s && m
       ] })
     }
   ) });
-}, Rt = (e, t) => D(() => {
+}, zt = (e, t) => D(() => {
   if (t)
     return {
       position: "absolute",
@@ -1546,29 +1546,29 @@ const Je = ({
       left: e === "right" ? `${t.width}px` : void 0,
       right: e === "left" ? `${t.width}px` : void 0
     };
-}, [t, e]), zt = ({
+}, [t, e]), Wt = ({
   children: e,
   isWithAnimation: t = !0,
   ...o
 }) => {
-  const { dropdownRef: r, placement: a, isOpen: s, setIsOpen: n, dropdownId: c } = f(ue), [l, u] = k(), { onClick: p } = Je({
+  const { dropdownRef: r, placement: a, isOpen: s, setIsOpen: n, dropdownId: c } = f(ue), [l, u] = b(), { onClick: m } = Je({
     setIsOpen: n,
     isOpen: s,
     clickArea: "content"
-  }), m = () => n(!1), d = () => n(!0);
-  A(() => {
+  }), y = () => n(!1), d = () => n(!0);
+  E(() => {
     r.current && u({
       width: r.current.offsetWidth,
       height: r.current.offsetHeight
     });
   }, [r]);
-  const y = Rt(a, l), v = l ? /* @__PURE__ */ i(
+  const p = zt(a, l), h = l ? /* @__PURE__ */ i(
     "div",
     {
       ...o,
       id: c,
-      style: { ...y, ...o.style },
-      onClick: p,
+      style: { ...p, ...o.style },
+      onClick: m,
       children: e
     }
   ) : null;
@@ -1580,12 +1580,12 @@ const Je = ({
       enterTime: 20,
       leaveTime: 60,
       clearTime: 300,
-      onExited: m,
+      onExited: y,
       onEntered: d,
-      children: v
+      children: h
     }
-  ) : s ? v : null;
-}, Wt = ({ children: e }) => {
+  ) : s ? h : null;
+}, Gt = ({ children: e }) => {
   const { isOpen: t, setIsOpen: o, dropdownId: r } = f(ue);
   return /* @__PURE__ */ i(
     "div",
@@ -1602,14 +1602,14 @@ const Je = ({
     }
   );
 };
-ie.Content = zt;
-ie.Trigger = Wt;
-const Gt = ({
+ie.Content = Wt;
+ie.Trigger = Gt;
+const jt = ({
   triggerRef: e,
   initialState: t
 }) => {
-  const { playerPlacement: o } = O(), [r, a] = k(t);
-  return A(() => {
+  const { playerPlacement: o } = O(), [r, a] = b(t);
+  return E(() => {
     if (e.current) {
       const s = () => e.current.getBoundingClientRect().top < window.innerHeight / 2 ? "bottom" : "top", n = setTimeout(() => {
         a(s());
@@ -1619,11 +1619,11 @@ const Gt = ({
       };
     }
   }, [o, e]), r;
-}, jt = () => {
-  const e = E(null), {
+}, Yt = () => {
+  const e = A(null), {
     activeUI: { volumeSlider: t },
     volumeSliderPlacement: o
-  } = O(), r = Gt({
+  } = O(), r = jt({
     triggerRef: e,
     initialState: "bottom"
   });
@@ -1637,7 +1637,7 @@ const Gt = ({
       children: [
         /* @__PURE__ */ i(ie.Trigger, { children: /* @__PURE__ */ i(je, { ref: e }) }),
         /* @__PURE__ */ i(ie.Content, { role: "tooltip", children: /* @__PURE__ */ i(
-          Ht,
+          Rt,
           {
             placement: o || r
           }
@@ -1646,22 +1646,22 @@ const Gt = ({
     }
   );
 }, qt = () => {
-  var r, a, s, n, c, l, u, p, m, d;
+  var r, a, s, n, c, l, u, m, y, d;
   const { interfacePlacement: e, activeUI: t } = O(), o = !!(t.prevNnext ?? t.all);
-  return /* @__PURE__ */ S(R, { children: [
+  return /* @__PURE__ */ S(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) || L.templateArea.progress,
+        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) || k.templateArea.progress,
         width: "100%",
         visible: !!(t.progress !== void 0 ? t.progress : t.all),
-        children: /* @__PURE__ */ i($t, {})
+        children: /* @__PURE__ */ i(Ht, {})
       }
     ),
     /* @__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) || L.templateArea.repeatType,
+        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) || k.templateArea.repeatType,
         visible: !!(t.repeatType ?? t.all),
         children: /* @__PURE__ */ i(Pt, {})
       }
@@ -1669,11 +1669,11 @@ const Gt = ({
     /* @__PURE__ */ i(
       M.Item,
       {
-        gridArea: ((c = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : c.playButton) || ((l = e == null ? void 0 : e.templateArea) == null ? void 0 : l.playButton) || L.templateArea.playButton,
+        gridArea: ((c = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : c.playButton) || ((l = e == null ? void 0 : e.templateArea) == null ? void 0 : l.playButton) || k.templateArea.playButton,
         visible: !!(t.playButton ?? t.all),
         children: /* @__PURE__ */ S("div", { className: "rmap-ctrl-btn-wrapper", children: [
-          /* @__PURE__ */ i(At, { isVisible: o }),
-          /* @__PURE__ */ i(Et, {}),
+          /* @__PURE__ */ i(Et, { isVisible: o }),
+          /* @__PURE__ */ i(At, {}),
           /* @__PURE__ */ i(It, { isVisible: o })
         ] })
       }
@@ -1681,21 +1681,21 @@ const Gt = ({
     /* @__PURE__ */ i(
       M.Item,
       {
-        gridArea: ((u = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : u.volume) || ((p = e == null ? void 0 : e.templateArea) == null ? void 0 : p.volume) || L.templateArea.volume,
+        gridArea: ((u = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : u.volume) || ((m = e == null ? void 0 : e.templateArea) == null ? void 0 : m.volume) || k.templateArea.volume,
         visible: !!(t.volume ?? t.all),
-        children: /* @__PURE__ */ i(jt, {})
+        children: /* @__PURE__ */ i(Yt, {})
       }
     ),
     /* @__PURE__ */ i(
       M.Item,
       {
-        gridArea: ((m = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : m.playList) || ((d = e == null ? void 0 : e.templateArea) == null ? void 0 : d.playList) || L.templateArea.playList,
+        gridArea: ((y = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : y.playList) || ((d = e == null ? void 0 : e.templateArea) == null ? void 0 : d.playList) || k.templateArea.playList,
         visible: !!(t.playList ?? t.all),
         children: /* @__PURE__ */ i(Ot, {})
       }
     )
   ] });
-}, Yt = z(function() {
+}, Xt = W(function() {
   const { playList: t, curIdx: o } = V(), { coverImgsCss: r } = P(), 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(
     "div",
@@ -1707,9 +1707,9 @@ const Gt = ({
       children: (a == null ? void 0 : a.name) || "♪"
     }
   ) });
-}), Xt = z(function() {
+}), 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__ */ S(R, { children: [
+  return /* @__PURE__ */ i("div", { className: "rmap-track-info-container", children: r != null && r.customTrackInfo ? r.customTrackInfo : /* @__PURE__ */ S(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 })
   ] }) });
@@ -1721,7 +1721,7 @@ const Gt = ({
     ...r,
     children: o
   }
-), Qt = ({ position: e }) => {
+), Jt = ({ position: e }) => {
   const { currentTime: t } = re();
   return /* @__PURE__ */ i(Ze, { position: e, className: "rmap-track-time-current", children: /* @__PURE__ */ i(
     "span",
@@ -1731,7 +1731,7 @@ const Gt = ({
       children: ee(t)
     }
   ) });
-}, Jt = ({ position: e }) => {
+}, Zt = ({ position: e }) => {
   const { duration: t } = re();
   return /* @__PURE__ */ i(
     Ze,
@@ -1741,18 +1741,18 @@ const Gt = ({
       children: /* @__PURE__ */ i("span", { className: "rmap-track-duration", children: ee(t) })
     }
   );
-}, Zt = () => {
-  var c, l, u, p, m, d, y, v;
-  const { interfacePlacement: e, activeUI: t } = O(), o = T(
-    (h) => +h.split(/[^\d]/).join(""),
+}, er = () => {
+  var c, l, u, m, y, d, p, h;
+  const { interfacePlacement: e, activeUI: t } = O(), o = g(
+    (v) => +v.split(/[^\d]/).join(""),
     []
   ), r = o(
-    ((c = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : c.trackTimeCurrent) || ((l = e == null ? void 0 : e.templateArea) == null ? void 0 : l.trackTimeCurrent) || L.templateArea.trackTimeCurrent
+    ((c = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : c.trackTimeCurrent) || ((l = e == null ? void 0 : e.templateArea) == null ? void 0 : l.trackTimeCurrent) || k.templateArea.trackTimeCurrent
   ), a = o(
-    ((u = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : u.trackTimeDuration) || ((p = e == null ? void 0 : e.templateArea) == null ? void 0 : p.trackTimeDuration) || L.templateArea.trackTimeDuration
-  ), s = T(
-    (h) => {
-      switch (h) {
+    ((u = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : u.trackTimeDuration) || ((m = e == null ? void 0 : e.templateArea) == null ? void 0 : m.trackTimeDuration) || k.templateArea.trackTimeDuration
+  ), s = g(
+    (v) => {
+      switch (v) {
         case 1:
           return "right";
         case -1:
@@ -1766,133 +1766,133 @@ const Gt = ({
     current: s(r - a),
     duration: s(a - r)
   };
-  return /* @__PURE__ */ S(R, { children: [
+  return /* @__PURE__ */ S(z, { children: [
     /* @__PURE__ */ i(
       M.Item,
       {
-        gridArea: ((m = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : m.trackTimeCurrent) || ((d = e == null ? void 0 : e.templateArea) == null ? void 0 : d.trackTimeCurrent) || L.templateArea.trackTimeCurrent,
+        gridArea: ((y = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : y.trackTimeCurrent) || ((d = e == null ? void 0 : e.templateArea) == null ? void 0 : d.trackTimeCurrent) || k.templateArea.trackTimeCurrent,
         visible: !!(t.trackTime ?? t.all),
-        children: /* @__PURE__ */ i(Qt, { position: n.current })
+        children: /* @__PURE__ */ i(Jt, { position: n.current })
       }
     ),
     /* @__PURE__ */ i(
       M.Item,
       {
-        gridArea: ((y = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : y.trackTimeDuration) || ((v = e == null ? void 0 : e.templateArea) == null ? void 0 : v.trackTimeDuration) || L.templateArea.trackTimeDuration,
+        gridArea: ((p = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : p.trackTimeDuration) || ((h = e == null ? void 0 : e.templateArea) == null ? void 0 : h.trackTimeDuration) || k.templateArea.trackTimeDuration,
         visible: !!(t.trackTime ?? t.all),
-        children: /* @__PURE__ */ i(Jt, { position: n.duration })
+        children: /* @__PURE__ */ i(Zt, { position: n.duration })
       }
     )
   ] });
-}, er = () => {
-  var s, n, c, l, u, p, m, d;
+}, tr = () => {
+  var s, n, c, l, u, m, y, d;
   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__ */ S(R, { children: [
+  return /* @__PURE__ */ S(z, { children: [
     /* @__PURE__ */ i(
       M.Item,
       {
-        gridArea: ((l = o == null ? void 0 : o.itemCustomArea) == null ? void 0 : l.artwork) || ((u = o == null ? void 0 : o.templateArea) == null ? void 0 : u.artwork) || L.templateArea.artwork,
-        visible: !!((p = e[t]) != null && p.img && (r.artwork ?? r.all)),
-        children: /* @__PURE__ */ i(Yt, {})
+        gridArea: ((l = o == null ? void 0 : o.itemCustomArea) == null ? void 0 : l.artwork) || ((u = o == null ? void 0 : o.templateArea) == null ? void 0 : u.artwork) || k.templateArea.artwork,
+        visible: !!((m = e[t]) != null && m.img && (r.artwork ?? r.all)),
+        children: /* @__PURE__ */ i(Xt, {})
       }
     ),
     /* @__PURE__ */ i(
       M.Item,
       {
-        gridArea: ((m = o == null ? void 0 : o.itemCustomArea) == null ? void 0 : m.trackInfo) || ((d = o == null ? void 0 : o.templateArea) == null ? void 0 : d.trackInfo) || L.templateArea.trackInfo,
+        gridArea: ((y = o == null ? void 0 : o.itemCustomArea) == null ? void 0 : y.trackInfo) || ((d = o == null ? void 0 : o.templateArea) == null ? void 0 : d.trackInfo) || k.templateArea.trackInfo,
         visible: a,
-        children: /* @__PURE__ */ i(Xt, {})
+        children: /* @__PURE__ */ i(Qt, {})
       }
     ),
-    /* @__PURE__ */ i(Zt, {})
+    /* @__PURE__ */ i(er, {})
   ] });
-}, tr = (e, t, o) => {
-  const r = T(
-    (d, y, v) => {
-      const h = Object.keys(
-        L.templateArea
-      ).filter((I) => (I === "trackTimeCurrent" || I === "trackTimeDuration") && d.trackTime === !1 ? !1 : d[I] !== void 0 ? d[I] : !0), g = d.all ? h : Object.entries(d).filter(([, I]) => I).map(([I]) => I);
+}, rr = (e, t, o) => {
+  const r = g(
+    (d, p, h) => {
+      const v = Object.keys(
+        k.templateArea
+      ).filter((I) => (I === "trackTimeCurrent" || I === "trackTimeDuration") && d.trackTime === !1 ? !1 : d[I] !== void 0 ? d[I] : !0), T = d.all ? v : Object.entries(d).filter(([, I]) => I).map(([I]) => I);
       (() => {
-        g.find((I) => I === "trackTime") && (g.splice(g.indexOf("trackTime"), 1), g.push("trackTimeCurrent"), g.push("trackTimeDuration"));
+        T.find((I) => I === "trackTime") && (T.splice(T.indexOf("trackTime"), 1), T.push("trackTimeCurrent"), T.push("trackTimeDuration"));
       })();
       const N = {
-        ...L.templateArea,
-        ...y
-      }, W = Object.entries(
+        ...k.templateArea,
+        ...p
+      }, B = Object.entries(
         N
-      ).filter(([I]) => g.includes(I));
-      let H = 1;
+      ).filter(([I]) => T.includes(I));
+      let R = 1;
       const G = {}, ae = [
-        ...W,
-        ...Object.entries(v || {})
+        ...B,
+        ...Object.entries(h || {})
       ].flatMap(([I, _]) => {
         if (_ == null) return [];
-        const [B, K] = _.split("-"), j = +B.split("row")[1];
-        return H = Math.max(H, j), G[j] = G[j] ? G[j] + 1 : 1, [
+        const [K, $] = _.split("-"), j = +K.split("row")[1];
+        return R = Math.max(R, j), G[j] = G[j] ? G[j] + 1 : 1, [
           {
             key: I,
             row: j,
-            col: +K
+            col: +$
           }
         ];
       }).sort((I, _) => I.col - _.col), X = Math.max(...Object.values(G));
       let oe;
-      const et = new Array(H).fill("").map((I, _) => {
-        let B = "", K;
-        const j = ae.filter((U) => U.row !== _ + 1 ? !1 : (U.key === "progress" && (K = U), !0));
-        if (K) {
+      const et = 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}-${K.col}`, ne = [];
+          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);
           }
           const at = ne.indexOf(de), ot = ne.lastIndexOf(de);
-          oe = Math.floor((at + ot) / 2), B = " " + ne.join(" ");
+          oe = Math.floor((at + ot) / 2), K = " " + ne.join(" ");
         } else
           for (let U = 0; U < X; U++)
-            B += ` row${_ + 1}-${U + 1}`;
-        return B.trimStart();
-      }), tt = Ye ? window.innerWidth - 100 : 1500, rt = new Array(H).fill("").map((I, _) => {
-        let B = "";
-        for (let K = 0; K < X; K++) {
-          if (oe === K && _ === 0) {
-            B += " 1fr";
+            K += ` row${_ + 1}-${U + 1}`;
+        return K.trimStart();
+      }), tt = qe ? window.innerWidth - 100 : 1500, rt = new Array(R).fill("").map((I, _) => {
+        let K = "";
+        for (let $ = 0; $ < X; $++) {
+          if (oe === $ && _ === 0) {
+            K += " 1fr";
             continue;
           }
-          B += ` fit-content(${tt}px)`;
+          K += ` fit-content(${tt}px)`;
         }
-        return B.trimStart();
+        return K.trimStart();
       });
       return { gridAreas: et, gridColumns: rt };
     },
     []
-  ), [a, s] = k(e), [n, c] = k({
+  ), [a, s] = b(e), [n, c] = b({
     templateArea: t,
     customComponentsArea: o
-  }), [l, u] = k();
+  }), [l, u] = b();
   if (!l) {
-    const { gridAreas: d, gridColumns: y } = r(
+    const { gridAreas: d, gridColumns: p } = r(
       a,
       n.templateArea,
       n.customComponentsArea
     );
-    return u({ gridAreas: d, gridColumns: y }), [d, y];
+    return u({ gridAreas: d, gridColumns: p }), [d, p];
   }
   if (a !== e || n.templateArea !== t || n.customComponentsArea !== o) {
     s(e), c({ templateArea: t, customComponentsArea: o });
-    const { gridAreas: d, gridColumns: y } = r(
+    const { gridAreas: d, gridColumns: p } = r(
       e,
       t,
       o
     );
-    u({ gridAreas: d, gridColumns: y });
+    u({ gridAreas: d, gridColumns: p });
   }
-  const { gridAreas: p, gridColumns: m } = l;
-  return [p, m];
-}, rr = ({ children: e }) => {
-  const { interfacePlacement: t, activeUI: o, playListPlacement: r } = O(), a = te.Children.toArray(e), [s, n] = tr(
+  const { gridAreas: m, gridColumns: y } = l;
+  return [m, y];
+}, ar = ({ children: e }) => {
+  const { interfacePlacement: t, activeUI: o, playListPlacement: r } = O(), a = te.Children.toArray(e), [s, n] = rr(
     o,
     t == null ? void 0 : t.templateArea,
     t == null ? void 0 : t.customComponentsArea
@@ -1916,7 +1916,7 @@ const Gt = ({
             columns: n,
             UNSAFE_className: "rmap-interface-grid",
             children: [
-              /* @__PURE__ */ i(er, {}),
+              /* @__PURE__ */ i(tr, {}),
               /* @__PURE__ */ i(qt, {}),
               a
             ]
@@ -1927,14 +1927,14 @@ const Gt = ({
     }
   );
 }, Z = (e, t) => {
-  const o = E(!1);
-  A(() => {
+  const o = A(!1);
+  E(() => {
     if (o.current)
       return e();
-  }, t), A(() => (o.current = !0, () => {
+  }, t), E(() => (o.current = !0, () => {
     o.current = !1;
   }), []);
-}, ar = ({
+}, or = ({
   placement: e = {},
   activeUI: t,
   coverImgsCss: o,
@@ -1948,14 +1948,14 @@ const Gt = ({
       player: c,
       playList: l,
       interface: u,
-      volumeSlider: p
+      volumeSlider: m
     } = e;
     n({
       type: "SET_PLACEMENTS",
       playerPlacement: c,
       playListPlacement: l,
       interfacePlacement: u,
-      volumeSliderPlacement: p
+      volumeSliderPlacement: m
     });
   }, [n, e]), Z(() => {
     t && n({ type: "SET_ACTIVE_UI", activeUI: t });
@@ -1972,33 +1972,33 @@ const Gt = ({
   }, [n, a]), Z(() => {
     s && n({ type: "SET_CUSTOM_ICONS", customIcons: s });
   }, [s, n]);
-}, or = ({
+}, nr = ({
   audioRef: e,
   children: t,
   ...o
-}) => (ar(o), /* @__PURE__ */ S("div", { id: "rm-audio-player", className: "rmap-player-container", children: [
+}) => (or(o), /* @__PURE__ */ S("div", { id: "rm-audio-player", className: "rmap-player-container", children: [
   /* @__PURE__ */ i(_e, { audioRef: e }),
-  /* @__PURE__ */ i(rr, { children: t })
+  /* @__PURE__ */ i(ar, { children: t })
 ] }));
 function we({
   rootContainerProps: e,
   ...t
 }) {
-  return /* @__PURE__ */ i(yt, { ...t, children: /* @__PURE__ */ i(Ce, { rootContainerProps: e, children: /* @__PURE__ */ i(or, { ...t }) }) });
+  return /* @__PURE__ */ i(yt, { ...t, children: /* @__PURE__ */ i(Ce, { rootContainerProps: e, children: /* @__PURE__ */ i(nr, { ...t }) }) });
 }
 we.displayName = "AudioPlayerWithProviders";
 we.CustomComponent = xe;
-const nr = () => {
-  const e = f(w), { isPlaying: t, repeatType: o } = b(), r = T(() => {
+const sr = () => {
+  const e = f(w), { isPlaying: t, repeatType: o } = C(), r = g(() => {
     e({ type: "CHANGE_PLAYING_STATE", state: !0 });
-  }, [e]), a = T(() => {
+  }, [e]), a = g(() => {
     e({ type: "CHANGE_PLAYING_STATE", state: !1 });
-  }, [e]), s = T(() => {
+  }, [e]), s = g(() => {
     e({ type: "CHANGE_PLAYING_STATE" });
   }, [e]);
   return { isPlaying: t, repeatType: o, play: r, pause: a, togglePlay: s };
-}, sr = () => {
-  const e = f(w), { playList: t, curIdx: o, curPlayId: r } = V(), { elementRefs: a } = P(), s = T(
+}, ir = () => {
+  const e = f(w), { playList: t, curIdx: o, curPlayId: r } = V(), { elementRefs: a } = P(), s = g(
     (l) => {
       const u = t[l];
       u && e({
@@ -2008,9 +2008,9 @@ const nr = () => {
       });
     },
     [e, t]
-  ), n = T(() => {
+  ), n = g(() => {
     t.length !== 0 && e({ type: "NEXT_AUDIO" });
-  }, [e, t.length]), c = T(() => {
+  }, [e, t.length]), c = g(() => {
     var u;
     if (t.length === 0) return;
     const l = ((u = a == null ? void 0 : a.audioEl) == null ? void 0 : u.currentTime) ?? 0;
@@ -2025,26 +2025,26 @@ const nr = () => {
     next: n,
     prev: c
   };
-}, ir = () => {
-  const e = f(w), { volume: t, muted: o } = b(), r = T(
+}, lr = () => {
+  const e = f(w), { volume: t, muted: o } = C(), r = g(
     (s) => {
       e({ type: "SET_VOLUME", volume: s });
     },
     [e]
-  ), a = T(() => {
+  ), a = g(() => {
     e({ type: "SET_MUTED", muted: !o });
   }, [e, o]);
   return { volume: t, muted: o, setVolume: r, toggleMute: a };
-}, lr = () => {
-  const e = f(w), { currentTime: t, duration: o } = re(), r = T(
+}, cr = () => {
+  const e = f(w), { currentTime: t, duration: o } = re(), r = g(
     (a) => {
       e({ type: "SEEK", time: a });
     },
     [e]
   );
   return { currentTime: t, duration: o, seek: r };
-}, pr = () => {
-  const e = nr(), t = sr(), o = ir(), r = lr();
+}, yr = () => {
+  const e = sr(), t = ir(), o = lr(), r = cr();
   return {
     isPlaying: e.isPlaying,
     volume: o.volume,
@@ -2065,7 +2065,7 @@ const nr = () => {
     toggleMute: o.toggleMute,
     setTrack: t.setTrack
   };
-}, yr = () => {
+}, vr = () => {
   const { elementRefs: e } = P();
   return {
     audioEl: e == null ? void 0 : e.audioEl,
@@ -2074,7 +2074,7 @@ const nr = () => {
 };
 we.CustomComponent = xe;
 export {
-  or as AudioPlayer,
+  nr as AudioPlayer,
   Ce as AudioPlayerContainer,
   yt as AudioPlayerStateProvider,
   F as DEFAULT_AUDIO_STATE,
@@ -2082,17 +2082,17 @@ export {
   w as audioPlayerDispatchContext,
   mt as audioPlayerReducer,
   we as default,
-  L as defaultInterfacePlacement,
-  mr as defaultInterfacePlacementMaxLength,
+  k as defaultInterfacePlacement,
+  pr as defaultInterfacePlacementMaxLength,
   he as playbackContext,
-  Ee as resourceContext,
-  Ae as timeContext,
+  Ae as resourceContext,
+  Ee as timeContext,
   ge as trackContext,
   fe as uiContext,
-  pr as useAudioPlayer,
-  yr as useAudioPlayerElement,
-  nr as useAudioPlayerPlayback,
-  lr as useAudioPlayerTime,
-  sr as useAudioPlayerTrack,
-  ir as useAudioPlayerVolume
+  yr as useAudioPlayer,
+  vr as useAudioPlayerElement,
+  sr as useAudioPlayerPlayback,
+  cr as useAudioPlayerTime,
+  ir as useAudioPlayerTrack,
+  lr as useAudioPlayerVolume
 };