react-modern-audio-player 2.0.0 → 2.1.0

package/dist/index.es.js

@@ -1,8 +1,8 @@
 "use client";
 import './index.css';
-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";
+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 = {
   isPlaying: !1,
   volume: 1,
@@ -10,7 +10,7 @@ const F = {
   repeatType: "ALL",
   currentTime: 0,
   duration: 0
-}, pr = 10, k = {
+}, pr = 10, N = {
   templateArea: {
     artwork: "row1-1",
     trackInfo: "row1-2",
@@ -22,17 +22,18 @@ const F = {
     playButton: "row1-8",
     playList: "row1-9"
   }
-}, w = H(null);
-w.displayName = "AudioPlayerDispatchContext";
-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) => {
+}, 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;
-}, mt = (e, t) => {
+}, pt = (e, t) => {
   switch (t.type) {
     case "NEXT_AUDIO": {
+      if (e.playList.length === 0) return e;
       if (e.curAudioState.repeatType === "NONE" && e.curIdx + 1 === e.playList.length)
         return {
           ...e,
@@ -50,7 +51,7 @@ const be = (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 = Ne(
+        const r = ke(
           e.curIdx,
           0,
           e.playList.length - 1
@@ -77,7 +78,7 @@ const be = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) =>
       };
     }
     case "PREV_AUDIO": {
-      const o = e.playList.length <= 1, r = t.currentTime > dt, a = e.curAudioState.repeatType === "NONE" && e.curIdx === 0;
+      const o = e.playList.length <= 1, r = t.currentTime > mt, a = e.curAudioState.repeatType === "NONE" && e.curIdx === 0;
       if (o || r || a)
         return {
           ...e,
@@ -85,7 +86,7 @@ const be = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) =>
           curAudioState: { ...e.curAudioState, currentTime: 0 }
         };
       if (e.curAudioState.repeatType === "SHUFFLE") {
-        const n = Ne(
+        const n = ke(
           e.curIdx,
           0,
           e.playList.length - 1
@@ -110,12 +111,35 @@ const be = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) =>
       };
     }
     case "UPDATE_PLAY_LIST": {
+      if (t.playList.length === 0)
+        return {
+          ...e,
+          playList: t.playList,
+          curPlayId: 0,
+          curIdx: -1,
+          curAudioState: {
+            ...e.curAudioState,
+            isPlaying: !1,
+            currentTime: 0,
+            duration: 0,
+            isLoadedMetaData: !1
+          }
+        };
       if (!t.playList.find(
         (a) => a.id === e.curPlayId
       ))
-        return console.error(
-          "UPDATE_PLAY_LIST ERROR - curPlayId is not found on playList"
-        ), e;
+        return {
+          ...e,
+          playList: t.playList,
+          curPlayId: t.playList[0].id,
+          curIdx: 0,
+          audioResetKey: e.audioResetKey + 1,
+          curAudioState: {
+            ...e.curAudioState,
+            currentTime: 0,
+            isLoadedMetaData: !1
+          }
+        };
       const r = t.playList.findIndex(
         (a) => a.id === e.curPlayId
       );
@@ -130,7 +154,7 @@ const be = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) =>
         ...e,
         curAudioState: {
           ...e.curAudioState,
-          volume: be(t.volume)
+          volume: Ce(t.volume)
         }
       };
     case "SET_AUDIO_STATE":
@@ -223,19 +247,19 @@ const be = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) =>
     default:
       throw new Error("Unhandled action");
   }
-}, he = H(null);
-he.displayName = "PlaybackContext";
-const Te = H(null);
-Te.displayName = "AudioAttrsContext";
-const ge = H(null);
-ge.displayName = "TrackContext";
+}, Te = H(null);
+Te.displayName = "PlaybackContext";
+const he = H(null);
+he.displayName = "AudioAttrsContext";
 const fe = H(null);
-fe.displayName = "UIContext";
+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 pt(e) {
+function yt(e) {
   const {
     playList: t,
     audioInitialState: o,
@@ -246,43 +270,41 @@ function pt(e) {
   } = 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" ? be(o.volume) : F.volume,
+    volume: typeof (o == null ? void 0 : o.volume) == "number" ? Ce(o.volume) : F.volume,
     muted: (o == null ? void 0 : o.muted) ?? F.muted
-  }, l = r || { playButton: !0 }, u = {
+  }, 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) || {
       templateArea: {
-        playButton: k.templateArea.playButton
+        playButton: N.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);
   return {
     playList: t,
-    curPlayId: (o == null ? void 0 : o.curPlayId) || 1,
-    curIdx: o != null && o.curPlayId ? t.findIndex(
-      (m) => m.id === (o == null ? void 0 : o.curPlayId)
-    ) : 0,
+    curPlayId: l ? 0 : u >= 0 ? y : t[0].id,
+    curIdx: l ? -1 : u >= 0 ? u : 0,
     curAudioState: c,
-    activeUI: l,
+    activeUI: d,
     audioResetKey: 0,
     seekRequestKey: 0,
-    ...u,
+    ...m,
     customIcons: s,
     coverImgsCss: n
   };
 }
-const yt = ({
+const vt = ({
   children: e,
   colorScheme: t,
   ...o
 }) => {
-  var d, p;
-  const [r, a] = nt(
-    mt,
+  var u, p;
+  const [r, a] = it(
+    pt,
     o,
-    pt
+    yt
   ), s = D(
     () => ({
       currentTime: r.curAudioState.currentTime ?? F.currentTime,
@@ -318,7 +340,7 @@ const yt = ({
       curIdx: r.curIdx
     }),
     [r.playList, r.curPlayId, r.curIdx]
-  ), l = D(
+  ), d = D(
     () => ({
       activeUI: r.activeUI,
       playListPlacement: r.playListPlacement,
@@ -335,56 +357,56 @@ const yt = ({
       r.volumeSliderPlacement,
       t
     ]
-  ), { audioInitialState: u } = o, m = D(() => {
-    if (!u) return {};
+  ), { audioInitialState: m } = o, l = D(() => {
+    if (!m) return {};
     const {
-      isPlaying: h,
+      isPlaying: T,
       repeatType: v,
-      isLoadedMetaData: T,
-      currentTime: L,
-      duration: N,
+      isLoadedMetaData: h,
+      currentTime: S,
+      duration: k,
       volume: B,
       muted: R,
       curPlayId: G,
       ...ae
-    } = u;
+    } = m;
     return ae;
-  }, [u]), y = D(
+  }, [m]), y = D(
     () => ({
       elementRefs: r.elementRefs,
       customIcons: r.customIcons,
       coverImgsCss: r.coverImgsCss
     }),
     [
-      (d = r.elementRefs) == null ? void 0 : d.audioEl,
+      (u = r.elementRefs) == null ? void 0 : u.audioEl,
       (p = r.elementRefs) == null ? void 0 : p.waveformInst,
       r.customIcons,
       r.coverImgsCss
     ]
   );
-  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);
+  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 = () => f(fe), J = {
+}, O = () => g(ge), J = {
   top: "auto",
   right: "auto",
   bottom: "auto",
   left: "auto"
-}, vt = {
+}, Tt = {
   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 }
-}, Ce = te.memo(({ children: e, rootContainerProps: t }) => {
+}, Me = te.memo(({ children: e, rootContainerProps: t }) => {
   const { playerPlacement: o, colorScheme: r } = O(), a = D(
-    () => o ? vt[o] : void 0,
+    () => o ? Tt[o] : void 0,
     [o]
   ), n = {
     width: "100%",
@@ -403,7 +425,7 @@ const yt = ({
     }
   );
 });
-Ce.displayName = "AudioPlayerContainer";
+Me.displayName = "AudioPlayerContainer";
 const ht = ({
   areas: e,
   columns: t,
@@ -415,14 +437,14 @@ const ht = ({
 }) => {
   const c = {
     display: "grid",
-    gridTemplateAreas: e == null ? void 0 : e.map((l) => `"${l}"`).join(" "),
+    gridTemplateAreas: e == null ? void 0 : e.map((d) => `"${d}"`).join(" "),
     gridTemplateColumns: t == null ? void 0 : t.join(" "),
     alignItems: o,
     justifyContent: r,
     minHeight: a
   };
   return /* @__PURE__ */ i("div", { className: s, style: c, children: n });
-}, Tt = ht, Me = ve(
+}, ft = ht, xe = ve(
   ({
     children: e,
     visible: t = !0,
@@ -432,29 +454,29 @@ const ht = ({
     padding: s,
     UNSAFE_className: n,
     style: c,
-    ...l
-  }, u) => {
+    ...d
+  }, m) => {
     if (!t) return null;
-    const m = {
+    const l = {
       gridArea: o,
       width: r,
       justifySelf: a,
       padding: s ?? "0 5px",
       ...c
     };
-    return /* @__PURE__ */ i("div", { ref: u, className: n, style: m, ...l, children: e });
+    return /* @__PURE__ */ i("div", { ref: m, className: n, style: l, ...d, children: e });
   }
 );
-Me.displayName = "GridItem";
-const M = Tt;
-M.Item = Me;
-const C = () => f(he), re = () => f(Ee), V = () => f(ge), P = () => f(Ae), xe = ({
+xe.displayName = "GridItem";
+const M = ft;
+M.Item = xe;
+const b = () => g(Te), re = () => g(Ee), V = () => g(fe), L = () => g(Ae), _e = ({
   children: e,
   id: t,
   ...o
 }) => {
-  var m, y;
-  const r = C(), a = re(), s = V(), n = O(), c = P(), l = {
+  var l, y;
+  const r = b(), a = re(), s = V(), n = O(), c = L(), d = {
     curAudioState: {
       isPlaying: r.isPlaying,
       volume: r.volume,
@@ -469,48 +491,48 @@ const C = () => f(he), re = () => f(Ee), V = () => f(ge), P = () => f(Ae), xe =
     ...s,
     ...n,
     ...c
-  }, u = (y = (m = n.interfacePlacement) == null ? void 0 : m.customComponentsArea) == null ? void 0 : y[t];
+  }, m = (y = (l = n.interfacePlacement) == null ? void 0 : l.customComponentsArea) == null ? void 0 : y[t];
   return /* @__PURE__ */ i(
     M.Item,
     {
       UNSAFE_className: "rmap-custom-component",
-      gridArea: u,
+      gridArea: m,
       ...o,
-      children: te.cloneElement(e, { audioPlayerState: l })
+      children: te.cloneElement(e, { audioPlayerState: d })
     }
   );
-}, gt = () => f(Te), ft = () => {
+}, gt = () => g(he), At = () => {
   const {
     isPlaying: e,
     volume: t,
     repeatType: o,
     audioResetKey: r
-  } = C(), { currentTime: a, seekRequestKey: s } = re(), { elementRefs: n } = P(), c = f(w), l = g(
+  } = b(), { currentTime: a, seekRequestKey: s } = re(), { elementRefs: n } = L(), c = g(P), d = f(
     (p) => {
       if (p.currentTarget.readyState === 0) return;
-      const h = p.currentTarget.currentTime;
+      const T = p.currentTarget.currentTime;
       c({
         type: "SET_AUDIO_STATE",
-        audioState: { currentTime: h }
+        audioState: { currentTime: T }
       });
     },
     [c]
-  ), u = g(() => {
+  ), m = f(() => {
     if (n != null && n.audioEl) {
       if (o === "ONE") {
-        ut(() => {
+        be(() => {
           c({ type: "SEEK", time: 0 });
         }), n.audioEl.play();
         return;
       }
       c({ type: "NEXT_AUDIO" });
     }
-  }, [c, o, n == null ? void 0 : n.audioEl]), m = g(
+  }, [c, o, n == null ? void 0 : n.audioEl]), l = f(
     (p) => {
-      const { duration: h } = p.currentTarget;
+      const { duration: T } = p.currentTarget;
       t != null && (p.currentTarget.volume = t), c({
         type: "SET_AUDIO_STATE",
-        audioState: { isLoadedMetaData: !0, duration: h }
+        audioState: { isLoadedMetaData: !0, duration: T }
       });
     },
     [c, t]
@@ -533,31 +555,31 @@ const C = () => f(he), re = () => f(Ee), V = () => f(ge), P = () => f(Ae), xe =
   }, [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 = A(0);
+  const u = A(0);
   return E(() => {
-    if (s === d.current) return;
-    d.current = s;
+    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 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);
+    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);
   }, [
     s,
     a,
     n == null ? void 0 : n.audioEl,
     n == null ? void 0 : n.waveformInst
   ]), {
-    onTimeUpdate: l,
-    onEnded: u,
-    onLoadedMetadata: m
+    onTimeUpdate: d,
+    onEnded: m,
+    onLoadedMetadata: l
   };
-}, _e = te.memo(({ audioRef: e }) => {
-  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();
+}, 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({
       type: "SET_ELEMENT_REFS",
@@ -571,12 +593,12 @@ const C = () => f(he), re = () => f(Ee), V = () => f(ge), P = () => f(Ae), xe =
       muted: o,
       ref: t,
       src: c == null ? void 0 : c.src,
-      ...l
+      ...d
     }
   );
 });
-_e.displayName = "Audio";
-const Y = ve(({ className: e, type: t = "button", ...o }, r) => /* @__PURE__ */ i(
+De.displayName = "Audio";
+const q = ve(({ className: e, type: t = "button", ...o }, r) => /* @__PURE__ */ i(
   "button",
   {
     ref: r,
@@ -585,7 +607,7 @@ const Y = ve(({ className: e, type: t = "button", ...o }, r) => /* @__PURE__ */
     ...o
   }
 ));
-Y.displayName = "StyledBtn";
+q.displayName = "StyledBtn";
 const Ie = (e) => (
   // eslint-disable-next-line react/display-name
   ({ size: t = "1em", color: o, style: r, ...a }) => /* @__PURE__ */ i(
@@ -606,7 +628,7 @@ const Ie = (e) => (
       dangerouslySetInnerHTML: { __html: e }
     }
   )
-), q = (e) => (
+), Y = (e) => (
   // eslint-disable-next-line react/display-name
   ({ size: t = "1em", color: o, style: r, ...a }) => /* @__PURE__ */ i(
     "svg",
@@ -628,7 +650,7 @@ const Ie = (e) => (
       dangerouslySetInnerHTML: { __html: e }
     }
   )
-), De = (e, t = "0 0 16 16") => (
+), Oe = (e, t = "0 0 16 16") => (
   // eslint-disable-next-line react/display-name
   ({ size: o = "1em", color: r, style: a, ...s }) => /* @__PURE__ */ i(
     "svg",
@@ -648,58 +670,58 @@ const Ie = (e) => (
       dangerouslySetInnerHTML: { __html: e }
     }
   )
-), Oe = Ie(
+), Ue = Ie(
   '<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"/>'
 );
-Oe.displayName = "MdPlayCircleFilled";
-const Ue = Ie(
+Ue.displayName = "MdPlayCircleFilled";
+const Ve = Ie(
   '<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"/>'
 );
-Ue.displayName = "MdPauseCircleFilled";
-const Ve = Ie(
+Ve.displayName = "MdPauseCircleFilled";
+const Be = Ie(
   '<path fill="none" d="M0 0h24v24H0z"/><path d="M3 10h11v2H3zM3 6h11v2H3zM3 14h7v2H3zM16 13v8l6-4z"/>'
 );
-Ve.displayName = "MdPlaylistPlay";
-const Be = q(
+Be.displayName = "MdPlaylistPlay";
+const Ke = Y(
   '<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 = q(
+Ke.displayName = "TbRepeat";
+const $e = Y(
   '<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 $e = q(
+$e.displayName = "TbRepeatOnce";
+const Fe = Y(
   '<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"/>'
 );
-$e.displayName = "TbRepeatOff";
-const Fe = q(
+Fe.displayName = "TbRepeatOff";
+const He = Y(
   '<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"/>'
 );
-Fe.displayName = "TbArrowsShuffle";
-const He = q(
+He.displayName = "TbArrowsShuffle";
+const Re = Y(
   '<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 = q(
+Re.displayName = "TbVolume";
+const ze = Y(
   '<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 = q(
+ze.displayName = "TbVolume2";
+const We = Y(
   '<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";
-const We = De(
+We.displayName = "TbVolume3";
+const Ge = Oe(
   '<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"/>'
 );
-We.displayName = "ImPrevious";
-const Ge = De(
+Ge.displayName = "ImPrevious";
+const je = Oe(
   '<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(z, { children: t ?? e }), At = W(function() {
-  const { isPlaying: t } = C(), { customIcons: o } = P(), r = f(w);
+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(
-    Y,
+    q,
     {
       type: "button",
       "aria-label": t ? "Pause" : "Play",
@@ -709,16 +731,16 @@ const x = ({ render: e, customIcon: t }) => /* @__PURE__ */ i(z, { children: t ?
       children: t ? /* @__PURE__ */ i(
         x,
         {
-          render: /* @__PURE__ */ i(Ue, {}),
+          render: /* @__PURE__ */ i(Ve, {}),
           customIcon: o == null ? void 0 : o.pause
         }
-      ) : /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(Oe, {}), customIcon: o == null ? void 0 : o.play })
+      ) : /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(Ue, {}), customIcon: o == null ? void 0 : o.play })
     }
   );
-}), Et = W(function({ isVisible: t }) {
-  const { customIcons: o, elementRefs: r } = P(), a = f(w);
+}), It = W(function({ isVisible: t }) {
+  const { customIcons: o, elementRefs: r } = L(), a = g(P);
   return t ? /* @__PURE__ */ i(
-    Y,
+    q,
     {
       type: "button",
       "aria-label": "Previous track",
@@ -729,13 +751,13 @@ const x = ({ render: e, customIcon: t }) => /* @__PURE__ */ i(z, { children: t ?
       },
       className: "rmap-prev-btn",
       "data-testid": "prev-btn",
-      children: /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(We, {}), customIcon: o == null ? void 0 : o.prev })
+      children: /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(Ge, {}), customIcon: o == null ? void 0 : o.prev })
     }
   ) : null;
-}), It = W(function({ isVisible: t }) {
-  const { customIcons: o } = P(), r = f(w);
+}), St = W(function({ isVisible: t }) {
+  const { customIcons: o } = L(), r = g(P);
   return t ? /* @__PURE__ */ i(
-    Y,
+    q,
     {
       type: "button",
       "aria-label": "Next track",
@@ -744,93 +766,73 @@ const x = ({ render: e, customIcon: t }) => /* @__PURE__ */ i(z, { children: t ?
       },
       className: "rmap-next-btn",
       "data-testid": "next-btn",
-      children: /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(Ge, {}), customIcon: o == null ? void 0 : o.next })
+      children: /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(je, {}), customIcon: o == null ? void 0 : o.next })
     }
   ) : null;
-}), St = {
+}), wt = {
   ALL: "Repeat: All tracks",
   ONE: "Repeat: One track",
   NONE: "Repeat: Off",
   SHUFFLE: "Shuffle"
-}, wt = {
+}, Pt = {
   ALL: "ONE",
   ONE: "NONE",
   NONE: "SHUFFLE",
   SHUFFLE: "ALL"
-}, Pt = W(function() {
-  const { repeatType: t } = C(), { customIcons: o } = P(), r = f(w), a = () => {
+}, Lt = W(function() {
+  const { repeatType: t } = b(), { customIcons: o } = L(), r = g(P), a = () => {
     r({
       type: "SET_REPEAT_TYPE",
-      repeatType: wt[t]
+      repeatType: Pt[t]
     });
   };
-  return /* @__PURE__ */ S(
-    Y,
+  return /* @__PURE__ */ w(
+    q,
     {
       type: "button",
-      "aria-label": St[t],
+      "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(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($e, {}), customIcon: o == null ? void 0 : o.repeatNone }),
+        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,
           {
-            render: /* @__PURE__ */ i(Fe, {}),
+            render: /* @__PURE__ */ i(He, {}),
             customIcon: o == null ? void 0 : o.repeatShuffle
           }
         )
       ]
     }
   );
-}), me = { size: "100%" }, je = W(
-  ve((e, t) => {
-    var y;
-    const { volume: o, muted: r } = C(), { customIcons: a, elementRefs: s } = P(), n = f(
-      w
-    ), c = g(
-      () => n({ type: "SET_MUTED", muted: !r }),
-      [n, r]
-    ), 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(
-      Y,
-      {
-        type: "button",
-        "aria-label": r ? "Unmute" : "Mute",
-        "aria-pressed": r,
-        onClick: c,
-        className: "rmap-volume-trigger",
-        "data-testid": "volume-trigger-btn",
-        "data-muted": String(r),
-        ref: t,
-        children: r || l === 0 ? /* @__PURE__ */ i(
-          x,
-          {
-            render: /* @__PURE__ */ i(ze, { ...me }),
-            customIcon: a == null ? void 0 : a.volumeMuted
-          }
-        ) : u ? /* @__PURE__ */ i(
-          x,
-          {
-            render: /* @__PURE__ */ i(Re, { ...me }),
-            customIcon: a == null ? void 0 : a.volumeHalf
-          }
-        ) : m ? /* @__PURE__ */ i(
-          x,
-          {
-            render: /* @__PURE__ */ i(He, { ...me }),
-            customIcon: a == null ? void 0 : a.volumeFull
-          }
-        ) : null
-      }
-    );
-  })
-);
-je.displayName = "VolumeTriggerBtn";
+}), 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,
+    {
+      render: /* @__PURE__ */ i(We, { ...me }),
+      customIcon: o == null ? void 0 : o.volumeMuted
+    }
+  ) : s ? /* @__PURE__ */ i(
+    x,
+    {
+      render: /* @__PURE__ */ i(ze, { ...me }),
+      customIcon: o == null ? void 0 : o.volumeHalf
+    }
+  ) : /* @__PURE__ */ i(
+    x,
+    {
+      render: /* @__PURE__ */ i(Re, { ...me }),
+      customIcon: o == null ? void 0 : o.volumeFull
+    }
+  );
+});
+qe.displayName = "VolumeIcon";
 const le = H(null);
 le.displayName = "DrawerContext";
 const Ye = (e, t) => {
@@ -848,22 +850,22 @@ const Ye = (e, t) => {
   isOpen: r,
   onOpenChange: a
 }) => {
-  const s = A(null), [n, c] = te.Children.toArray(o), [l, u] = b(!1), m = ke();
+  const s = A(null), [n, c] = te.Children.toArray(o), [d, m] = C(!1), l = Ne();
   Ye(s, () => {
-    e && (u(!1), a && a(!1));
+    e && (m(!1), a && a(!1));
   }), E(() => {
-    r !== void 0 && u(r);
+    r !== void 0 && m(r);
   }, [r]);
   const y = D(
-    () => ({ isOpen: l, setIsOpen: u, onOpenChange: a, drawerId: m }),
-    [l, u, a, m]
+    () => ({ isOpen: d, setIsOpen: m, onOpenChange: a, drawerId: l }),
+    [d, m, a, l]
   );
-  return /* @__PURE__ */ i("div", { className: "rmap-drawer-container", ref: s, children: /* @__PURE__ */ i(le.Provider, { value: y, children: /* @__PURE__ */ S(z, { children: [
+  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
   ] }) }) });
-}, qe = typeof window < "u", pe = qe ? it : E, Se = ({
+}, Xe = typeof window < "u", pe = Xe ? ct : E, Se = ({
   visible: e,
   name: t,
   leaveTime: o,
@@ -873,65 +875,65 @@ const Ye = (e, t) => {
   onEntered: n,
   children: c
 }) => {
-  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);
+  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(() => {
-    d.current = n, p.current = s, h.current = t, v.current = r, T.current = o, L.current = a;
+    u.current = n, p.current = s, T.current = t, v.current = r, h.current = o, S.current = a;
   }), pe(() => {
-    const N = e ? "enter" : "leave", B = h.current, R = e ? v.current : T.current;
-    e && !m && y(!0), u(`${B}-${N}`);
+    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;
-      u(
-        `${B}-${N} ${B}-${N}-active`
-      ), N === "leave" ? (X = p.current) == null || X.call(p) : (oe = d.current) == null || oe.call(d);
+      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 || (u(B), y(!1));
-    }, R + L.current);
+      e || (m(B), y(!1));
+    }, R + S.current);
     return () => {
       clearTimeout(G), clearTimeout(ae);
     };
-  }, [e, m]), m ? lt(c, {
-    className: `${c.props.className} ${l}`
+  }, [e, l]), l ? ut(c, {
+    className: `${c.props.className} ${d}`
   }) : null;
-}, 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 = ({
+}, 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 = ({
   children: e,
   isWithAnimation: t = !0,
   "aria-label": o = "Dialog"
 }) => {
-  const { isOpen: r, setIsOpen: a, onOpenChange: s, drawerId: n } = f(le), c = A(null), l = A(null), u = g(
+  const { isOpen: r, setIsOpen: a, onOpenChange: s, drawerId: n } = g(le), c = A(null), d = A(null), m = f(
     () => {
       var v;
-      return (v = c.current) == null ? void 0 : v.querySelectorAll(Lt);
+      return (v = c.current) == null ? void 0 : v.querySelectorAll(kt);
     },
     []
-  ), 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(() => {
+  ), 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 = l.current) == null || v.focus();
+    (v = d.current) == null || v.focus();
   }, []);
   E(() => {
     var v;
-    r && !t ? (l.current = document.activeElement, m()) : !r && !t && ((v = l.current) == null || v.focus());
-  }, [r, t, m]);
-  const p = g(
+    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);
         return;
       }
       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());
+        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());
       }
     },
-    [a, s, u]
-  ), h = /* @__PURE__ */ i(
+    [a, s, m]
+  ), T = /* @__PURE__ */ i(
     "div",
     {
       ref: c,
@@ -953,21 +955,21 @@ const Ye = (e, t) => {
       leaveTime: 60,
       clearTime: 300,
       onEntered: y,
-      onExited: d,
-      children: h
+      onExited: u,
+      children: T
     }
-  ) : r ? h : null;
-}, kt = ({
+  ) : r ? T : null;
+}, bt = ({
   children: e,
   "aria-label": t,
   "data-testid": o
 }) => {
-  const { isOpen: r, setIsOpen: a, onOpenChange: s, drawerId: n } = f(le), c = g(() => {
-    const l = !r;
-    a(l), s == null || s(l);
+  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(
-    Y,
+    q,
     {
       className: "rmap-drawer-trigger",
       type: "button",
@@ -981,8 +983,8 @@ const Ye = (e, t) => {
   );
 };
 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 = ({
+se.Trigger = bt;
+const ye = ({ children: e }) => /* @__PURE__ */ i("ul", { className: "rmap-sortable-list-container", "aria-label": "Sortable list", children: e }), Ct = ({
   index: e,
   dragStartIdx: t,
   listData: o,
@@ -990,58 +992,97 @@ const ye = ({ children: e }) => /* @__PURE__ */ i("ul", { className: "rmap-sorta
   onDragStart: a,
   onDragOver: s,
   onDrop: n,
-  onClick: c
-}) => ({
-  draggable: r,
-  onDragStart: (l) => {
-    l.stopPropagation(), l.currentTarget.classList.add("rmap-drag-start"), a == null || a(l);
-  },
-  onDragEnd: (l) => {
-    l.stopPropagation(), l.currentTarget.classList.remove("rmap-drag-start");
-  },
-  onDragEnter: (l) => {
-    l.stopPropagation(), l.currentTarget.classList.add("rmap-drag-over");
-  },
-  onDragLeave: (l) => {
-    l.stopPropagation(), l.currentTarget.classList.remove("rmap-drag-over");
-  },
-  onDragOver: (l) => {
-    l.preventDefault(), l.stopPropagation(), s == null || s(l);
-  },
-  onDrop: (l) => {
-    l.stopPropagation(), l.currentTarget.classList.remove("rmap-drag-over");
-    const u = [...o], m = o[t];
-    u.splice(t, 1);
-    const y = (t < e ? [
-      ...u.slice(0, e),
-      m,
-      ...u.slice(e, u.length)
-    ] : [
-      ...u.slice(0, e),
-      m,
-      ...u.slice(e, u.length)
-    ]).map((d, p) => ({ ...d, index: p }));
-    n == null || n(l, y);
-  },
-  onClick: (l) => {
-    l.stopPropagation(), c == null || c(l);
-  }
-}), Ct = (e) => {
-  const { children: t, ...o } = e, r = bt(o);
+  onReorder: c,
+  onClick: d
+}) => {
+  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();
+    }
+  };
+  return {
+    tabIndex: 0,
+    draggable: r,
+    onKeyDown: (l) => {
+      switch (l.key) {
+        case "Enter":
+        case " ":
+          l.preventDefault(), l.currentTarget.click();
+          break;
+        case "ArrowUp":
+          if (l.preventDefault(), r && l.altKey)
+            m(e - 1, l.currentTarget);
+          else {
+            const y = l.currentTarget.previousElementSibling;
+            y == null || y.focus();
+          }
+          break;
+        case "ArrowDown":
+          if (l.preventDefault(), r && l.altKey)
+            m(e + 1, l.currentTarget);
+          else {
+            const y = l.currentTarget.nextElementSibling;
+            y == null || y.focus();
+          }
+          break;
+      }
+    },
+    onDragStart: (l) => {
+      l.stopPropagation(), l.currentTarget.classList.add("rmap-drag-start"), a == null || a(l);
+    },
+    onDragEnd: (l) => {
+      l.stopPropagation(), l.currentTarget.classList.remove("rmap-drag-start");
+    },
+    onDragEnter: (l) => {
+      l.stopPropagation(), l.currentTarget.classList.add("rmap-drag-over");
+    },
+    onDragLeave: (l) => {
+      l.stopPropagation(), l.currentTarget.classList.remove("rmap-drag-over");
+    },
+    onDragOver: (l) => {
+      l.preventDefault(), l.stopPropagation(), s == null || s(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);
+    },
+    onClick: (l) => {
+      l.stopPropagation(), d == null || d(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 }) });
 };
-ye.Item = Ct;
-const Mt = W(function({
+ye.Item = Mt;
+const xt = W(function({
   data: t
 }) {
-  const { curPlayId: o } = V(), { coverImgsCss: r } = P(), a = o === t.id;
+  const { curPlayId: o } = V(), { coverImgsCss: r } = L(), a = o === t.id;
   return /* @__PURE__ */ i(
     "div",
     {
       className: `rmap-playlist-item${a ? " rmap-cur-played" : ""}`,
       "data-testid": "playlist-item",
       "aria-current": a ? "true" : void 0,
-      children: /* @__PURE__ */ S("div", { className: "rmap-playlist-item-contents", children: [
+      children: /* @__PURE__ */ w("div", { className: "rmap-playlist-item-contents", children: [
         /* @__PURE__ */ i("div", { className: "rmap-playlist-album-cover", children: t.img && /* @__PURE__ */ i(
           "img",
           {
@@ -1050,7 +1091,7 @@ const Mt = W(function({
             style: r == null ? void 0 : r.listThumbnail
           }
         ) }),
-        /* @__PURE__ */ S("div", { className: "rmap-playlist-album-info", children: [
+        /* @__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 })
@@ -1058,10 +1099,10 @@ const Mt = W(function({
       ] })
     }
   );
-}), xt = ({
+}), _t = ({
   setIsOpen: e
 }) => {
-  const { playList: t } = V(), { activeUI: o } = O(), r = f(w), [a, s] = b(0), n = g(
+  const { playList: t } = V(), { activeUI: o } = O(), r = g(P), [a, s] = C(0), n = f(
     (c) => {
       r({
         type: "SET_CURRENT_AUDIO",
@@ -1080,22 +1121,26 @@ const Mt = W(function({
       draggable: o.playList !== "unSortable",
       dragStartIdx: a,
       onDragStart: (c) => s(c),
-      onDrop: (c, l) => r({
+      onDrop: (c, d) => r({
+        type: "UPDATE_PLAY_LIST",
+        playList: d
+      }),
+      onReorder: (c) => r({
         type: "UPDATE_PLAY_LIST",
-        playList: l
+        playList: c
       }),
       onClick: (c) => n(c)
     }
   };
-}, _t = () => {
-  const { playList: e } = V(), { isOpen: t, setIsOpen: o } = f(le), { cssTransitionEventProps: r, sortableItemEventProps: a } = xt({
+}, Dt = () => {
+  const { playList: e } = V(), { isOpen: t, setIsOpen: o } = g(le), { cssTransitionEventProps: r, sortableItemEventProps: a } = _t({
     setIsOpen: o
   }), {
     onClick: s,
     onDragStart: n,
     ...c
   } = a;
-  return e.length !== 0 ? ct.createPortal(
+  return e.length !== 0 ? dt.createPortal(
     /* @__PURE__ */ i(
       Se,
       {
@@ -1105,34 +1150,34 @@ const Mt = W(function({
         leaveTime: 20,
         clearTime: 300,
         ...r,
-        children: /* @__PURE__ */ i("div", { className: "rmap-playlist-container", children: /* @__PURE__ */ i(ye, { children: e.map((l, u) => /* @__PURE__ */ i(
+        children: /* @__PURE__ */ i("div", { className: "rmap-playlist-container", children: /* @__PURE__ */ i(ye, { children: e.map((d, m) => /* @__PURE__ */ i(
           ye.Item,
           {
-            index: u,
+            index: m,
             listData: e,
-            onClick: () => s(u),
-            onDragStart: () => n(u),
+            onClick: () => s(m),
+            onDragStart: () => n(m),
             ...c,
-            children: /* @__PURE__ */ i(Mt, { data: l })
+            children: /* @__PURE__ */ i(xt, { data: d })
           },
-          `sortable-item-${u}`
+          `sortable-item-${m}`
         )) }) })
       }
     ),
     document.querySelector(".rmap-sortable-playlist") ?? document.body
   ) : /* @__PURE__ */ i(z, {});
-}, Dt = () => {
-  const { customIcons: e } = P();
+}, Ot = () => {
+  const { customIcons: e } = L();
   return /* @__PURE__ */ i(
     x,
     {
-      render: /* @__PURE__ */ i(Ve, { size: "100%" }),
+      render: /* @__PURE__ */ i(Be, { size: "100%" }),
       customIcon: e == null ? void 0 : e.playList
     }
   );
-}, Ot = () => /* @__PURE__ */ S(se, { children: [
-  /* @__PURE__ */ i(se.Trigger, { "aria-label": "Playlist", "data-testid": "playlist-trigger-btn", children: /* @__PURE__ */ i(Dt, {}) }),
-  /* @__PURE__ */ i(se.Content, { "aria-label": "Playlist", children: /* @__PURE__ */ i(_t, {}) })
+}, 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}`;
@@ -1140,12 +1185,12 @@ const Mt = W(function({
   if (!t) return o;
   const r = e / t;
   return isFinite(r) ? r : o;
-}, Xe = () => {
-  const { isLoadedMetaData: e } = C(), { elementRefs: t } = P(), [o, r] = b(!1), a = g(
+}, Qe = () => {
+  const { isLoadedMetaData: e } = b(), { elementRefs: t } = L(), [o, r] = C(!1), a = f(
     (s) => {
       if (!(t != null && t.audioEl) || !e) return;
-      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;
+      const { clientX: n } = s, { clientWidth: c } = s.currentTarget, d = s.currentTarget.getBoundingClientRect(), m = n - d.x, l = ce(m, c) * t.audioEl.duration;
+      t.audioEl.currentTime = l;
     },
     [e, t == null ? void 0 : t.audioEl]
   );
@@ -1162,9 +1207,9 @@ const Mt = W(function({
     onMouseMove: o ? a : void 0,
     onClick: a
   };
-}, Qe = (e) => {
-  const { isLoadedMetaData: t } = C(), { elementRefs: o } = P();
-  return g(
+}, Je = (e) => {
+  const { isLoadedMetaData: t } = b(), { elementRefs: o } = L();
+  return f(
     (r) => {
       if (!(o != null && o.audioEl) || !t) return;
       const a = o.audioEl;
@@ -1189,19 +1234,19 @@ const Mt = W(function({
     },
     [o == null ? void 0 : o.audioEl, t, e]
   );
-}, Ut = () => {
-  const { currentTime: e, duration: t } = re(), o = A(null), [r, a] = b(0);
+}, Vt = () => {
+  const { currentTime: e, duration: t } = re(), o = A(null), [r, a] = C(0);
   E(() => {
-    const u = o.current;
-    if (!u) return;
-    a(u.offsetWidth);
-    const m = new ResizeObserver(([y]) => {
+    const m = o.current;
+    if (!m) return;
+    a(m.offsetWidth);
+    const l = new ResizeObserver(([y]) => {
       a(y.contentBoxSize[0].inlineSize);
     });
-    return m.observe(u), () => m.disconnect();
+    return l.observe(m), () => l.disconnect();
   }, []);
-  const s = ce(e, t), n = Xe(), c = Qe(), l = s * r;
-  return /* @__PURE__ */ S(
+  const s = ce(e, t), n = Qe(), c = Je(), d = s * r;
+  return /* @__PURE__ */ w(
     "div",
     {
       ref: o,
@@ -1231,23 +1276,23 @@ const Mt = W(function({
           {
             className: "rmap-progress-handle",
             style: {
-              transform: `translateX(${l}px)`
+              transform: `translateX(${d}px)`
             }
           }
         )
       ]
     }
   );
-}, Vt = (e, t) => {
-  const o = A(), r = g(() => {
+}, Bt = (e, t) => {
+  const o = A(), r = f(() => {
     const a = document.getElementsByClassName("rmap-player-provider")[0];
     if (!a) return;
     const s = Object.entries(
       e
     ).reduce(
-      (n, [c, l]) => ({
+      (n, [c, d]) => ({
         ...n,
-        [c]: window.getComputedStyle(a).getPropertyValue(`${l}`)
+        [c]: window.getComputedStyle(a).getPropertyValue(`${d}`)
       }),
       {}
     );
@@ -1258,30 +1303,30 @@ const Mt = W(function({
     const a = window.matchMedia("(prefers-color-scheme: dark)");
     return a.addEventListener("change", r), () => a.removeEventListener("change", r);
   }, [r, t]), o;
-}, Bt = {
+}, Kt = {
   progressColor: "--rm-audio-player-waveform-bar",
   waveColor: "--rm-audio-player-waveform-background"
-}, Kt = (e) => {
+}, $t = (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);
-}, $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);
+}, 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, h;
-    if (a != null && a.waveformInst || !((p = n.current) != null && p.progressColor) || !((h = n.current) != null && h.waveColor))
+    var p, T;
+    if (a != null && a.waveformInst || !((p = n.current) != null && p.progressColor) || !((T = n.current) != null && T.waveColor))
       return;
-    let d = !1;
+    let u = !1;
     return import("./wavesurfer-_j5aw4gZ.mjs").then((v) => v.w).then(({ default: v }) => {
-      var L, N;
-      if (d || !e.current || !((L = n.current) != null && L.progressColor) || !((N = n.current) != null && N.waveColor)) {
+      var S, k;
+      if (u || !e.current || !((S = n.current) != null && S.progressColor) || !((k = n.current) != null && k.waveColor)) {
         console.error("[useWaveSurfer] missing required dependencies");
         return;
       }
-      let T;
+      let h;
       try {
-        T = v.create({
+        h = v.create({
           barWidth: 1,
           cursorWidth: 2,
           container: e.current,
@@ -1302,41 +1347,43 @@ const Mt = W(function({
       }
       t({
         type: "SET_ELEMENT_REFS",
-        elementRefs: { waveformInst: T }
+        elementRefs: { waveformInst: h }
       });
     }).catch((v) => {
       console.error("[useWaveSurfer] failed to load wavesurfer.js", v);
     }), () => {
-      d = !0;
+      u = !0;
     };
   }, [a == null ? void 0 : a.waveformInst, t, n]);
-  const l = A(r);
+  const d = A(r);
   E(() => {
     if (!(a != null && a.audioEl) || !(a != null && a.waveformInst)) return;
-    const d = a.audioEl, p = a.waveformInst, h = l.current !== r;
-    l.current = r;
-    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();
+    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();
     };
-    return p.on("ready", L), () => {
-      p.un("ready", L);
+    return p.on("ready", S), () => {
+      p.un("ready", S);
     };
   }, [r, a == null ? void 0 : a.audioEl, a == null ? void 0 : a.waveformInst]), E(() => {
     if (!e.current || !(a != null && a.waveformInst)) return;
-    const d = () => {
-      var h, v;
-      (v = (h = a.waveformInst) == null ? void 0 : h.drawer) == null || v.fireEvent("redraw");
-    }, p = new ResizeObserver(d);
+    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 == null ? void 0 : a.waveformInst, e]), E(
     () => () => {
-      var p, h;
-      const d = (p = e.current) == null ? void 0 : p.querySelector("wave");
-      d && d.remove(), (h = c.current) == null || h.destroy(), t({
+      var p, T;
+      const u = (p = e.current) == null ? void 0 : p.querySelector("wave");
+      u && u.remove(), (T = c.current) == null || T.destroy(), t({
         type: "SET_ELEMENT_REFS",
         elementRefs: { waveformInst: void 0 }
       });
@@ -1344,32 +1391,32 @@ const Mt = W(function({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [t]
   );
-  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 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, m.current());
+    y.current !== s && (y.current = s, l.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 u = () => l.current(), p = window.matchMedia("(prefers-color-scheme: dark)");
+    return p.addEventListener("change", u), () => p.removeEventListener("change", u);
   }, []);
-}, Ft = ({ isActive: e }) => {
-  var l, u, m, y;
-  const t = A(null), { isLoadedMetaData: o, isPlaying: r } = C(), { elementRefs: a } = P();
-  $t(t), E(() => {
+}, 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)
       return;
-    const d = ce(
+    const u = ce(
       a.audioEl.currentTime,
       a.audioEl.duration
     );
-    a.waveformInst.seekTo(d);
+    a.waveformInst.seekTo(u);
   }, [
     e,
     o,
@@ -1377,13 +1424,13 @@ const Mt = W(function({
     a == null ? void 0 : a.audioEl,
     r
   ]);
-  const s = Xe(), n = g(
-    (d, p) => {
-      var h;
-      p && ((h = a == null ? void 0 : a.waveformInst) == null || h.seekTo(ce(d, p)));
+  const s = Qe(), n = f(
+    (u, p) => {
+      var T;
+      p && ((T = a == null ? void 0 : a.waveformInst) == null || T.seekTo(ce(u, p)));
     },
     [a == null ? void 0 : a.waveformInst]
-  ), c = Qe(n);
+  ), c = Je(n);
   return /* @__PURE__ */ i("div", { className: "rmap-waveform-wrapper", "data-active": e, children: /* @__PURE__ */ i(
     "div",
     {
@@ -1395,42 +1442,42 @@ const Mt = W(function({
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": Math.round(
-        (((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
+        (((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
       ),
       "aria-valuetext": `${ee(
-        ((m = a == null ? void 0 : a.audioEl) == null ? void 0 : m.currentTime) ?? 0
+        ((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
     }
   ) });
-}, Ht = () => {
-  const { activeUI: e } = O(), t = e.progress ?? (e.all ? "bar" : !1), o = t === "waveform", r = t === "bar", [a, s] = b(o);
+}, 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__ */ S("div", { className: "rmap-progress-container", children: [
-    a && /* @__PURE__ */ i(Ft, { isActive: o }),
-    r && /* @__PURE__ */ i(Ut, {})
+  }, [o, a]), /* @__PURE__ */ w("div", { className: "rmap-progress-container", children: [
+    a && /* @__PURE__ */ i(Ht, { isActive: o }),
+    r && /* @__PURE__ */ i(Vt, {})
   ] });
-}, Rt = ({
+}, zt = ({
   placement: e
 }) => {
   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: p } = d.target, h = parseFloat(p);
+  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: h
+        volume: T
       });
     },
     [r, s]
-  ), c = o ?? ((y = a == null ? void 0 : a.audioEl) == null ? void 0 : y.volume) ?? 0, l = c * 100, u = Math.round(l), m = D(
+  ), 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": `${l}%`
+      "--rm-audio-player-volume-value": `${d}%`
     }),
-    [l]
+    [d]
   );
   return /* @__PURE__ */ i(
     "div",
@@ -1439,7 +1486,7 @@ const Mt = W(function({
       className: "rmap-volume-container",
       "data-placement": e,
       "data-testid": "volume-slider",
-      style: m,
+      style: l,
       children: /* @__PURE__ */ i("div", { className: "rmap-volume-panel", children: /* @__PURE__ */ i(
         "input",
         {
@@ -1452,37 +1499,37 @@ const Mt = W(function({
           max: "1",
           step: "0.01",
           "aria-label": r ? "Volume (muted)" : "Volume",
-          "aria-valuetext": `${u} percent`
+          "aria-valuetext": `${m} percent`
         }
       ) })
     }
   );
 }, ue = H(null);
 ue.displayName = "DropdownContext";
-const Je = ({
+const Ze = ({
   clickArea: e,
   triggerType: t,
   isOpen: o,
   setIsOpen: r,
   onOpenChange: a
 }) => {
-  const s = A(), n = (m) => {
+  const s = A(), n = (l) => {
     const y = () => {
       clearTimeout(s.current), s.current = void 0;
-    }, d = (p) => {
+    }, u = (p) => {
       r(p), a && a(p), y();
     };
-    if (y(), m) {
-      s.current = window.setTimeout(() => d(!0), 100);
+    if (y(), l) {
+      s.current = window.setTimeout(() => u(!0), 100);
       return;
     }
-    s.current = window.setTimeout(() => d(!1), 100);
-  }, c = (m) => {
-    t === "hover" && n(m);
+    s.current = window.setTimeout(() => u(!1), 100);
+  }, c = (l) => {
+    t === "hover" && n(l);
   };
   return {
-    onClick: e === "content" ? (m) => {
-      m.stopPropagation(), m.nativeEvent.stopImmediatePropagation();
+    onClick: e === "content" ? (l) => {
+      l.stopPropagation(), l.nativeEvent.stopImmediatePropagation();
     } : () => {
       t === "click" && (r(!o), a && a(!o));
     },
@@ -1502,40 +1549,40 @@ const Je = ({
   onOpenChange: n,
   "data-testid": c
 }) => {
-  const l = A(null), [u, m] = te.Children.toArray(o), [y, d] = b(!1), p = Je({
-    setIsOpen: d,
+  const d = A(null), [m, l] = te.Children.toArray(o), [y, u] = C(!1), p = Ze({
+    setIsOpen: u,
     isOpen: y,
     triggerType: e,
     clickArea: "root"
-  }), h = ke();
-  Ye(l, () => t && d(!1)), E(() => {
-    r !== void 0 && d(r);
+  }), T = Ne();
+  Ye(d, () => t && u(!1)), E(() => {
+    r !== void 0 && u(r);
   }, [r]);
   const v = D(
     () => ({
-      dropdownRef: l,
+      dropdownRef: d,
       placement: a,
       isOpen: y,
-      setIsOpen: d,
+      setIsOpen: u,
       onOpenChange: n,
-      dropdownId: h
+      dropdownId: T
     }),
-    [a, y, n, h]
+    [a, y, n, T]
   );
   return /* @__PURE__ */ i(ue.Provider, { value: v, children: /* @__PURE__ */ i(
     "div",
     {
       className: "rmap-dropdown-container",
-      ref: l,
+      ref: d,
       "data-testid": c,
       ...p,
-      children: /* @__PURE__ */ S(z, { children: [
-        u,
-        !s && m
+      children: /* @__PURE__ */ w(z, { children: [
+        m,
+        !s && l
       ] })
     }
   ) });
-}, zt = (e, t) => D(() => {
+}, Wt = (e, t) => D(() => {
   if (t)
     return {
       position: "absolute",
@@ -1546,29 +1593,29 @@ const Je = ({
       left: e === "right" ? `${t.width}px` : void 0,
       right: e === "left" ? `${t.width}px` : void 0
     };
-}, [t, e]), Wt = ({
+}, [t, e]), Gt = ({
   children: e,
   isWithAnimation: t = !0,
   ...o
 }) => {
-  const { dropdownRef: r, placement: a, isOpen: s, setIsOpen: n, dropdownId: c } = f(ue), [l, u] = b(), { onClick: m } = Je({
+  const { dropdownRef: r, placement: a, isOpen: s, setIsOpen: n, dropdownId: c } = g(ue), [d, m] = C(), { onClick: l } = Ze({
     setIsOpen: n,
     isOpen: s,
     clickArea: "content"
-  }), y = () => n(!1), d = () => n(!0);
+  }), y = () => n(!1), u = () => n(!0);
   E(() => {
-    r.current && u({
+    r.current && m({
       width: r.current.offsetWidth,
       height: r.current.offsetHeight
     });
   }, [r]);
-  const p = zt(a, l), h = l ? /* @__PURE__ */ i(
+  const p = Wt(a, d), T = d ? /* @__PURE__ */ i(
     "div",
     {
       ...o,
       id: c,
       style: { ...p, ...o.style },
-      onClick: m,
+      onClick: l,
       children: e
     }
   ) : null;
@@ -1581,34 +1628,34 @@ const Je = ({
       leaveTime: 60,
       clearTime: 300,
       onExited: y,
-      onEntered: d,
-      children: h
+      onEntered: u,
+      children: T
     }
-  ) : s ? h : null;
-}, Gt = ({ children: e }) => {
-  const { isOpen: t, setIsOpen: o, dropdownId: r } = f(ue);
+  ) : 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(
-    "div",
+    q,
     {
-      className: "rmap-dropdown-trigger",
-      role: "button",
-      tabIndex: 0,
-      "aria-expanded": t,
-      "aria-controls": r,
-      onKeyDown: (s) => {
-        (s.key === "Enter" || s.key === " ") && (s.preventDefault(), o((n) => !n));
-      },
+      className: n,
+      type: "button",
+      ...o,
+      "aria-haspopup": "true",
+      "aria-expanded": a,
+      "aria-controls": s,
+      ref: r,
       children: e
     }
   );
-};
-ie.Content = Wt;
-ie.Trigger = Gt;
+});
+et.displayName = "DropdownTrigger";
+ie.Content = Gt;
+ie.Trigger = et;
 const jt = ({
   triggerRef: e,
   initialState: t
 }) => {
-  const { playerPlacement: o } = O(), [r, a] = b(t);
+  const { playerPlacement: o } = O(), [r, a] = C(t);
   return E(() => {
     if (e.current) {
       const s = () => e.current.getBoundingClientRect().top < window.innerHeight / 2 ? "bottom" : "top", n = setTimeout(() => {
@@ -1619,84 +1666,99 @@ const jt = ({
       };
     }
   }, [o, e]), r;
-}, Yt = () => {
-  const e = A(null), {
-    activeUI: { volumeSlider: t },
-    volumeSliderPlacement: o
-  } = O(), r = jt({
+}, qt = () => {
+  const e = A(null), { muted: t } = b(), o = g(P), r = f(
+    () => o({ type: "SET_MUTED", muted: !t }),
+    [o, t]
+  ), {
+    activeUI: { volumeSlider: a },
+    volumeSliderPlacement: s
+  } = O(), n = jt({
     triggerRef: e,
     initialState: "bottom"
   });
-  return /* @__PURE__ */ S(
+  return /* @__PURE__ */ w(
     ie,
     {
-      placement: o || r,
+      placement: s || n,
       triggerType: "hover",
-      disabled: t === !1,
+      disabled: a === !1,
       "data-testid": "volume-dropdown",
       children: [
-        /* @__PURE__ */ i(ie.Trigger, { children: /* @__PURE__ */ i(je, { ref: e }) }),
+        /* @__PURE__ */ i(
+          ie.Trigger,
+          {
+            ref: e,
+            "aria-label": t ? "Unmute" : "Mute",
+            "aria-pressed": t,
+            onClick: r,
+            className: "rmap-volume-trigger",
+            "data-testid": "volume-trigger-btn",
+            "data-muted": String(t),
+            children: /* @__PURE__ */ i(qe, {})
+          }
+        ),
         /* @__PURE__ */ i(ie.Content, { role: "tooltip", children: /* @__PURE__ */ i(
-          Rt,
+          zt,
           {
-            placement: o || r
+            placement: s || n
           }
         ) })
       ]
     }
   );
-}, qt = () => {
-  var r, a, s, n, c, l, u, m, y, d;
+}, 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__ */ S(z, { children: [
+  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) || k.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) || N.templateArea.progress,
         width: "100%",
         visible: !!(t.progress !== void 0 ? t.progress : t.all),
-        children: /* @__PURE__ */ i(Ht, {})
+        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) || k.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) || N.templateArea.repeatType,
         visible: !!(t.repeatType ?? t.all),
-        children: /* @__PURE__ */ i(Pt, {})
+        children: /* @__PURE__ */ i(Lt, {})
       }
     ),
     /* @__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) || k.templateArea.playButton,
+        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__ */ S("div", { className: "rmap-ctrl-btn-wrapper", children: [
-          /* @__PURE__ */ i(Et, { isVisible: o }),
-          /* @__PURE__ */ i(At, {}),
-          /* @__PURE__ */ i(It, { isVisible: o })
+        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: ((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,
+        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(Yt, {})
+        children: /* @__PURE__ */ i(qt, {})
       }
     ),
     /* @__PURE__ */ i(
       M.Item,
       {
-        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,
+        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(Ot, {})
+        children: /* @__PURE__ */ i(Ut, {})
       }
     )
   ] });
 }, 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";
+  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(
     "div",
     {
@@ -1709,11 +1771,11 @@ const jt = ({
   ) });
 }), 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(z, { children: [
+  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 })
   ] }) });
-}), Ze = ({ position: e, className: t, children: o, ...r }) => /* @__PURE__ */ i(
+}), tt = ({ position: e, className: t, children: o, ...r }) => /* @__PURE__ */ i(
   "div",
   {
     className: `rmap-track-time-container${t ? ` ${t}` : ""}`,
@@ -1723,7 +1785,7 @@ const jt = ({
   }
 ), Jt = ({ position: e }) => {
   const { currentTime: t } = re();
-  return /* @__PURE__ */ i(Ze, { position: e, className: "rmap-track-time-current", children: /* @__PURE__ */ i(
+  return /* @__PURE__ */ i(tt, { position: e, className: "rmap-track-time-current", children: /* @__PURE__ */ i(
     "span",
     {
       className: "rmap-track-current-time",
@@ -1734,7 +1796,7 @@ const jt = ({
 }, Zt = ({ position: e }) => {
   const { duration: t } = re();
   return /* @__PURE__ */ i(
-    Ze,
+    tt,
     {
       position: e,
       className: "rmap-track-time-duration",
@@ -1742,15 +1804,15 @@ const jt = ({
     }
   );
 }, er = () => {
-  var c, l, u, m, y, d, p, h;
-  const { interfacePlacement: e, activeUI: t } = O(), o = g(
+  var c, d, m, l, y, u, p, T;
+  const { interfacePlacement: e, activeUI: t } = O(), o = f(
     (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) || k.templateArea.trackTimeCurrent
+    ((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(
-    ((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(
+    ((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) {
         case 1:
@@ -1766,11 +1828,11 @@ const jt = ({
     current: s(r - a),
     duration: s(a - r)
   };
-  return /* @__PURE__ */ S(z, { children: [
+  return /* @__PURE__ */ w(z, { children: [
     /* @__PURE__ */ i(
       M.Item,
       {
-        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,
+        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 })
       }
@@ -1778,28 +1840,28 @@ const jt = ({
     /* @__PURE__ */ i(
       M.Item,
       {
-        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,
+        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 })
       }
     )
   ] });
 }, tr = () => {
-  var s, n, c, l, u, m, y, d;
+  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__ */ S(z, { children: [
+  return /* @__PURE__ */ w(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) || k.templateArea.artwork,
-        visible: !!((m = e[t]) != null && m.img && (r.artwork ?? r.all)),
+        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,
       {
-        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,
+        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, {})
       }
@@ -1807,24 +1869,24 @@ const jt = ({
     /* @__PURE__ */ i(er, {})
   ] });
 }, rr = (e, t, o) => {
-  const r = g(
-    (d, p, h) => {
+  const r = f(
+    (u, p, T) => {
       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);
+        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);
       (() => {
-        T.find((I) => I === "trackTime") && (T.splice(T.indexOf("trackTime"), 1), T.push("trackTimeCurrent"), T.push("trackTimeDuration"));
+        h.find((I) => I === "trackTime") && (h.splice(h.indexOf("trackTime"), 1), h.push("trackTimeCurrent"), h.push("trackTimeDuration"));
       })();
-      const N = {
-        ...k.templateArea,
+      const k = {
+        ...N.templateArea,
         ...p
       }, B = Object.entries(
-        N
-      ).filter(([I]) => T.includes(I));
+        k
+      ).filter(([I]) => h.includes(I));
       let R = 1;
       const G = {}, ae = [
         ...B,
-        ...Object.entries(h || {})
+        ...Object.entries(T || {})
       ].flatMap(([I, _]) => {
         if (_ == null) return [];
         const [K, $] = _.split("-"), j = +K.split("row")[1];
@@ -1837,7 +1899,7 @@ const jt = ({
         ];
       }).sort((I, _) => I.col - _.col), X = Math.max(...Object.values(G));
       let oe;
-      const et = new Array(R).fill("").map((I, _) => {
+      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 ($) {
@@ -1848,56 +1910,56 @@ const jt = ({
             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), K = " " + ne.join(" ");
+          const nt = ne.indexOf(de), st = ne.lastIndexOf(de);
+          oe = Math.floor((nt + st) / 2), K = " " + ne.join(" ");
         } else
           for (let U = 0; U < X; U++)
             K += ` row${_ + 1}-${U + 1}`;
         return K.trimStart();
-      }), tt = qe ? window.innerWidth - 100 : 1500, rt = new Array(R).fill("").map((I, _) => {
+      }), at = Xe ? window.innerWidth - 100 : 1500, ot = new Array(R).fill("").map((I, _) => {
         let K = "";
         for (let $ = 0; $ < X; $++) {
           if (oe === $ && _ === 0) {
             K += " 1fr";
             continue;
           }
-          K += ` fit-content(${tt}px)`;
+          K += ` fit-content(${at}px)`;
         }
         return K.trimStart();
       });
-      return { gridAreas: et, gridColumns: rt };
+      return { gridAreas: rt, gridColumns: ot };
     },
     []
-  ), [a, s] = b(e), [n, c] = b({
+  ), [a, s] = C(e), [n, c] = C({
     templateArea: t,
     customComponentsArea: o
-  }), [l, u] = b();
-  if (!l) {
-    const { gridAreas: d, gridColumns: p } = r(
+  }), [d, m] = C();
+  if (!d) {
+    const { gridAreas: u, gridColumns: p } = r(
       a,
       n.templateArea,
       n.customComponentsArea
     );
-    return u({ gridAreas: d, gridColumns: p }), [d, p];
+    return m({ gridAreas: u, gridColumns: p }), [u, p];
   }
   if (a !== e || n.templateArea !== t || n.customComponentsArea !== o) {
     s(e), c({ templateArea: t, customComponentsArea: o });
-    const { gridAreas: d, gridColumns: p } = r(
+    const { gridAreas: u, gridColumns: p } = r(
       e,
       t,
       o
     );
-    u({ gridAreas: d, gridColumns: p });
+    m({ gridAreas: u, gridColumns: p });
   }
-  const { gridAreas: m, gridColumns: y } = l;
-  return [m, y];
+  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,
     t == null ? void 0 : t.templateArea,
     t == null ? void 0 : t.customComponentsArea
   );
-  return /* @__PURE__ */ S(
+  return /* @__PURE__ */ w(
     "div",
     {
       className: "rmap-interface-container",
@@ -1906,7 +1968,7 @@ const jt = ({
       "aria-label": "Audio player",
       children: [
         r === "top" && /* @__PURE__ */ i("div", { className: "rmap-sortable-playlist" }),
-        /* @__PURE__ */ S(
+        /* @__PURE__ */ w(
           M,
           {
             alignItems: "center",
@@ -1917,7 +1979,7 @@ const jt = ({
             UNSAFE_className: "rmap-interface-grid",
             children: [
               /* @__PURE__ */ i(tr, {}),
-              /* @__PURE__ */ i(qt, {}),
+              /* @__PURE__ */ i(Yt, {}),
               a
             ]
           }
@@ -1942,20 +2004,20 @@ const jt = ({
   playList: a,
   customIcons: s
 }) => {
-  const n = f(w);
+  const n = g(P);
   Z(() => {
     const {
       player: c,
-      playList: l,
-      interface: u,
-      volumeSlider: m
+      playList: d,
+      interface: m,
+      volumeSlider: l
     } = e;
     n({
       type: "SET_PLACEMENTS",
       playerPlacement: c,
-      playListPlacement: l,
-      interfacePlacement: u,
-      volumeSliderPlacement: m
+      playListPlacement: d,
+      interfacePlacement: m,
+      volumeSliderPlacement: l
     });
   }, [n, e]), Z(() => {
     t && n({ type: "SET_ACTIVE_UI", activeUI: t });
@@ -1976,45 +2038,45 @@ const jt = ({
   audioRef: e,
   children: t,
   ...o
-}) => (or(o), /* @__PURE__ */ S("div", { id: "rm-audio-player", className: "rmap-player-container", children: [
-  /* @__PURE__ */ i(_e, { audioRef: e }),
+}) => (or(o), /* @__PURE__ */ w("div", { id: "rm-audio-player", className: "rmap-player-container", children: [
+  /* @__PURE__ */ i(De, { audioRef: e }),
   /* @__PURE__ */ i(ar, { children: t })
 ] }));
 function we({
   rootContainerProps: e,
   ...t
 }) {
-  return /* @__PURE__ */ i(yt, { ...t, children: /* @__PURE__ */ i(Ce, { rootContainerProps: e, children: /* @__PURE__ */ i(nr, { ...t }) }) });
+  return /* @__PURE__ */ i(vt, { ...t, children: /* @__PURE__ */ i(Me, { rootContainerProps: e, children: /* @__PURE__ */ i(nr, { ...t }) }) });
 }
 we.displayName = "AudioPlayerWithProviders";
-we.CustomComponent = xe;
+we.CustomComponent = _e;
 const sr = () => {
-  const e = f(w), { isPlaying: t, repeatType: o } = C(), r = g(() => {
+  const e = g(P), { isPlaying: t, repeatType: o } = b(), r = f(() => {
     e({ type: "CHANGE_PLAYING_STATE", state: !0 });
-  }, [e]), a = g(() => {
+  }, [e]), a = f(() => {
     e({ type: "CHANGE_PLAYING_STATE", state: !1 });
-  }, [e]), s = g(() => {
+  }, [e]), s = f(() => {
     e({ type: "CHANGE_PLAYING_STATE" });
   }, [e]);
   return { isPlaying: t, repeatType: o, play: r, pause: a, togglePlay: s };
 }, ir = () => {
-  const e = f(w), { playList: t, curIdx: o, curPlayId: r } = V(), { elementRefs: a } = P(), s = g(
-    (l) => {
-      const u = t[l];
-      u && e({
+  const e = g(P), { playList: t, curIdx: o, curPlayId: r } = V(), { elementRefs: a } = L(), s = f(
+    (d) => {
+      const m = t[d];
+      m && e({
         type: "SET_CURRENT_AUDIO",
-        currentIndex: l,
-        currentAudioId: u.id
+        currentIndex: d,
+        currentAudioId: m.id
       });
     },
     [e, t]
-  ), n = g(() => {
+  ), n = f(() => {
     t.length !== 0 && e({ type: "NEXT_AUDIO" });
-  }, [e, t.length]), c = g(() => {
-    var u;
+  }, [e, t.length]), c = f(() => {
+    var m;
     if (t.length === 0) return;
-    const l = ((u = a == null ? void 0 : a.audioEl) == null ? void 0 : u.currentTime) ?? 0;
-    e({ type: "PREV_AUDIO", currentTime: l });
+    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]);
   return {
     currentPlayId: r,
@@ -2026,17 +2088,17 @@ const sr = () => {
     prev: c
   };
 }, lr = () => {
-  const e = f(w), { volume: t, muted: o } = C(), r = g(
+  const e = g(P), { volume: t, muted: o } = b(), r = f(
     (s) => {
       e({ type: "SET_VOLUME", volume: s });
     },
     [e]
-  ), a = g(() => {
+  ), a = f(() => {
     e({ type: "SET_MUTED", muted: !o });
   }, [e, o]);
   return { volume: t, muted: o, setVolume: r, toggleMute: a };
 }, cr = () => {
-  const e = f(w), { currentTime: t, duration: o } = re(), r = g(
+  const e = g(P), { currentTime: t, duration: o } = re(), r = f(
     (a) => {
       e({ type: "SEEK", time: a });
     },
@@ -2066,29 +2128,29 @@ const sr = () => {
     setTrack: t.setTrack
   };
 }, vr = () => {
-  const { elementRefs: e } = P();
+  const { elementRefs: e } = L();
   return {
     audioEl: e == null ? void 0 : e.audioEl,
     waveformInst: e == null ? void 0 : e.waveformInst
   };
 };
-we.CustomComponent = xe;
+we.CustomComponent = _e;
 export {
   nr as AudioPlayer,
-  Ce as AudioPlayerContainer,
-  yt as AudioPlayerStateProvider,
+  Me as AudioPlayerContainer,
+  vt as AudioPlayerStateProvider,
   F as DEFAULT_AUDIO_STATE,
-  Te as audioAttrsContext,
-  w as audioPlayerDispatchContext,
-  mt as audioPlayerReducer,
+  he as audioAttrsContext,
+  P as audioPlayerDispatchContext,
+  pt as audioPlayerReducer,
   we as default,
-  k as defaultInterfacePlacement,
+  N as defaultInterfacePlacement,
   pr as defaultInterfacePlacementMaxLength,
-  he as playbackContext,
+  Te as playbackContext,
   Ae as resourceContext,
   Ee as timeContext,
-  ge as trackContext,
-  fe as uiContext,
+  fe as trackContext,
+  ge as uiContext,
   yr as useAudioPlayer,
   vr as useAudioPlayerElement,
   sr as useAudioPlayerPlayback,