@lucaismyname/ginger 0.0.1 → 0.0.3

package/dist/index.js

@@ -1,204 +1,214 @@
-import { jsx as s, jsxs as De } from "react/jsx-runtime";
-import { useContext as Ne, createContext as we, useEffect as S, useRef as J, useReducer as Ue, useCallback as M, useMemo as D } from "react";
-const re = we(null);
+import { jsx as l, jsxs as se } from "react/jsx-runtime";
+import { useContext as ce, createContext as de, useEffect as R, useMemo as U, useRef as ue, useReducer as Ke, useCallback as b } from "react";
+const fe = de(null);
 function g() {
-  const e = Ne(re);
+  const e = ce(fe);
   if (!e) throw new Error("Ginger components must be used within <Ginger.Provider>");
   return e;
 }
-function Z(e) {
-  const { buffered: r, duration: n } = e;
-  return !(n > 0) || r.length === 0 ? 0 : Math.min(1, r.end(r.length - 1) / n);
+function le(e) {
+  const { buffered: r, duration: t } = e;
+  return !(t > 0) || r.length === 0 ? 0 : Math.min(1, r.end(r.length - 1) / t);
 }
-function Fe({ className: e, style: r, preload: n = "metadata", crossOrigin: t }) {
-  var d;
-  const { audioRef: i, dispatch: u, state: a, notifyEnded: l } = g(), c = ((d = a.tracks[a.currentIndex]) == null ? void 0 : d.fileUrl) ?? "";
-  return S(() => {
-    const o = i.current;
-    if (o) {
+function ze({ className: e, style: r, preload: t = "metadata", crossOrigin: n }) {
+  var f;
+  const { audioRef: i, dispatch: a, state: u, notifyEnded: o } = g(), c = ((f = u.tracks[u.currentIndex]) == null ? void 0 : f.fileUrl) ?? "";
+  return R(() => {
+    const s = i.current;
+    s && (s.volume = u.volume, s.muted = u.muted, s.playbackRate = u.playbackRate);
+  }, [i, u.volume, u.muted, u.playbackRate]), R(() => {
+    const s = i.current;
+    if (s) {
       if (!c) {
-        o.removeAttribute("src");
+        s.removeAttribute("src");
         return;
       }
-      o.getAttribute("src") !== c && (o.src = c, o.load());
+      s.getAttribute("src") !== c && (s.src = c, s.load());
     }
-  }, [i, a.currentIndex, a.tracks, c]), /* @__PURE__ */ s(
+  }, [i, u.currentIndex, u.tracks, c]), /* @__PURE__ */ l(
     "audio",
     {
       ref: i,
       className: e,
       style: r,
-      preload: n,
-      crossOrigin: t,
+      preload: t,
+      crossOrigin: n,
       controls: !1,
-      onTimeUpdate: (o) => {
-        const p = o.currentTarget;
-        u({
+      onTimeUpdate: (s) => {
+        const d = s.currentTarget;
+        a({
           type: "MEDIA_TIME_UPDATE",
           payload: {
-            currentTime: p.currentTime,
-            duration: p.duration,
-            bufferedFraction: Z(p)
+            currentTime: d.currentTime,
+            duration: d.duration,
+            bufferedFraction: le(d)
           }
         });
       },
-      onLoadedMetadata: (o) => {
-        const p = o.currentTarget;
-        u({
+      onLoadedMetadata: (s) => {
+        const d = s.currentTarget;
+        a({
           type: "MEDIA_LOADED_METADATA",
           payload: {
-            duration: p.duration,
-            bufferedFraction: Z(p)
+            duration: d.duration,
+            bufferedFraction: le(d)
           }
         });
       },
-      onEnded: () => l(),
-      onPlay: () => u({ type: "MEDIA_PLAY" }),
-      onPause: () => u({ type: "MEDIA_PAUSE" }),
-      onWaiting: () => u({ type: "MEDIA_WAITING" }),
-      onCanPlay: () => u({ type: "MEDIA_CANPLAY" }),
+      onEnded: () => o(),
+      onPlay: () => a({ type: "MEDIA_PLAY" }),
+      onPause: () => a({ type: "MEDIA_PAUSE" }),
+      onWaiting: () => a({ type: "MEDIA_WAITING" }),
+      onCanPlay: () => a({ type: "MEDIA_CANPLAY" }),
+      onVolumeChange: (s) => {
+        const d = s.currentTarget;
+        a({
+          type: "MEDIA_VOLUME_SYNC",
+          payload: { volume: d.volume, muted: d.muted }
+        });
+      },
       onError: () => {
-        var m;
-        const o = i.current, p = (m = o == null ? void 0 : o.error) == null ? void 0 : m.code;
-        u({ type: "MEDIA_ERROR", payload: { message: p === 1 ? "MEDIA_ERR_ABORTED" : p === 2 ? "MEDIA_ERR_NETWORK" : p === 3 ? "MEDIA_ERR_DECODE" : p === 4 ? "MEDIA_ERR_SRC_NOT_SUPPORTED" : "MEDIA_ERR_UNKNOWN" } });
+        var P;
+        const s = i.current, d = (P = s == null ? void 0 : s.error) == null ? void 0 : P.code;
+        a({ type: "MEDIA_ERROR", payload: { message: d === 1 ? "MEDIA_ERR_ABORTED" : d === 2 ? "MEDIA_ERR_NETWORK" : d === 3 ? "MEDIA_ERR_DECODE" : d === 4 ? "MEDIA_ERR_SRC_NOT_SUPPORTED" : "MEDIA_ERR_UNKNOWN" } });
       }
     }
   );
 }
-function E(e, r) {
+function S(e, r) {
   return r <= 0 ? 0 : Math.max(0, Math.min(r - 1, e));
 }
-function ne(e, r) {
+function pe(e, r) {
   if (e.length <= 1) return [...e];
-  const n = e[r];
-  if (!n) return [...e];
-  const t = e.filter((i, u) => u !== r);
-  for (let i = t.length - 1; i > 0; i--) {
-    const u = Math.floor(Math.random() * (i + 1));
-    [t[i], t[u]] = [t[u], t[i]];
+  const t = e[r];
+  if (!t) return [...e];
+  const n = e.filter((i, a) => a !== r);
+  for (let i = n.length - 1; i > 0; i--) {
+    const a = Math.floor(Math.random() * (i + 1));
+    [n[i], n[a]] = [n[a], n[i]];
   }
-  return [n, ...t];
+  return [t, ...n];
 }
-function Le(e, r) {
-  const n = e.findIndex((t) => t.fileUrl === r);
-  return n === -1 ? 0 : n;
+function qe(e, r) {
+  const t = e.findIndex((n) => n.fileUrl === r);
+  return t === -1 ? 0 : t;
 }
-function Qe(e) {
-  const { tracks: r, currentIndex: n, repeatMode: t } = e, i = r.length;
-  return i === 0 ? { kind: "stop", nextIndex: 0 } : t === "one" ? { kind: "replay_same" } : n < i - 1 ? { kind: "advance", nextIndex: n + 1 } : t === "all" ? { kind: "wrap", nextIndex: 0 } : { kind: "stop", nextIndex: E(n, i) };
+function He(e) {
+  const { tracks: r, currentIndex: t, repeatMode: n } = e, i = r.length;
+  return i === 0 ? { kind: "stop", nextIndex: 0 } : n === "one" ? { kind: "replay_same" } : t < i - 1 ? { kind: "advance", nextIndex: t + 1 } : n === "all" ? { kind: "wrap", nextIndex: 0 } : { kind: "stop", nextIndex: S(t, i) };
 }
-function Be(e) {
-  const { tracks: r, currentIndex: n, repeatMode: t } = e, i = r.length;
-  return i === 0 ? 0 : n < i - 1 ? n + 1 : t === "all" ? 0 : E(n, i);
+function Je(e) {
+  const { tracks: r, currentIndex: t, repeatMode: n } = e, i = r.length;
+  return i === 0 ? 0 : t < i - 1 ? t + 1 : n === "all" ? 0 : S(t, i);
 }
-function $e(e) {
-  const { tracks: r, currentIndex: n, repeatMode: t } = e, i = r.length;
-  return i === 0 ? 0 : n > 0 ? n - 1 : t === "all" ? i - 1 : 0;
+function Ze(e) {
+  const { tracks: r, currentIndex: t, repeatMode: n } = e, i = r.length;
+  return i === 0 ? 0 : t > 0 ? t - 1 : n === "all" ? i - 1 : 0;
 }
-function Ye(e) {
+function er(e) {
   return e === "off" ? "all" : e === "all" ? "one" : "off";
 }
-function Oe(e, r) {
+function rr(e, r) {
   return (e == null ? void 0 : e.artworkUrl) ?? r ?? void 0;
 }
-function je(e, r) {
+function tr(e, r) {
   return (e == null ? void 0 : e.album) ?? r ?? void 0;
 }
-function A(e) {
+function E(e) {
   return e.tracks[e.currentIndex] ?? null;
 }
-function te(e) {
+function ge(e) {
   return e.errorMessage ? "error" : e.tracks.length === 0 ? "idle" : e.isBuffering ? "loading" : e.isPaused ? Number.isFinite(e.duration) && e.duration > 0 && e.currentTime >= e.duration - 0.05 ? "ended" : "paused" : "playing";
 }
-function R(e) {
-  var t;
+function C(e) {
+  var n;
   const r = e.duration;
   if (Number.isFinite(r) && r > 0) return r;
-  const n = (t = e.tracks[e.currentIndex]) == null ? void 0 : t.durationSeconds;
-  return typeof n == "number" && Number.isFinite(n) && n > 0 ? n : 0;
+  const t = (n = e.tracks[e.currentIndex]) == null ? void 0 : n.durationSeconds;
+  return typeof t == "number" && Number.isFinite(t) && t > 0 ? t : 0;
 }
-function ie(e) {
-  const n = R(e) - e.currentTime;
-  return Number.isFinite(n) ? Math.max(0, n) : 0;
+function ye(e) {
+  const t = C(e) - e.currentTime;
+  return Number.isFinite(t) ? Math.max(0, t) : 0;
 }
-function N(e) {
-  const r = R(e);
+function O(e) {
+  const r = C(e);
   return r > 0 ? Math.min(1, Math.max(0, e.currentTime / r)) : 0;
 }
-function ue(e) {
-  var n;
-  const r = A(e);
-  return Oe(r, (n = e.playlistMeta) == null ? void 0 : n.artworkUrl);
+function me(e) {
+  var t;
+  const r = E(e);
+  return rr(r, (t = e.playlistMeta) == null ? void 0 : t.artworkUrl);
 }
-function ae(e) {
-  var n;
-  const r = A(e);
-  return je(r, (n = e.playlistMeta) == null ? void 0 : n.subtitle);
-}
-function T(e, r) {
-  function n(t) {
-    const { state: i } = g(), a = (r(i) ?? "").trim(), { className: l, style: c, fallback: d, empty: o, children: p } = t;
-    if (!a) {
-      const b = o ?? d ?? null;
-      return b ? /* @__PURE__ */ s("span", { className: l, style: c, children: b }) : null;
+function he(e) {
+  var t;
+  const r = E(e);
+  return tr(r, (t = e.playlistMeta) == null ? void 0 : t.subtitle);
+}
+function v(e, r) {
+  function t(n) {
+    const { state: i } = g(), u = (r(i) ?? "").trim(), { className: o, style: c, fallback: f, empty: s, children: d } = n;
+    if (!u) {
+      const y = s ?? f ?? null;
+      return y ? /* @__PURE__ */ l("span", { className: o, style: c, children: y }) : null;
     }
-    return p ? /* @__PURE__ */ s("span", { className: l, style: c, children: p(a, i) }) : /* @__PURE__ */ s("span", { className: l, style: c, children: a });
+    return d ? /* @__PURE__ */ l("span", { className: o, style: c, children: d(u, i) }) : /* @__PURE__ */ l("span", { className: o, style: c, children: u });
   }
-  return n.displayName = e, n;
+  return t.displayName = e, t;
 }
 function I(e, r) {
-  return T(e, (n) => r(A(n)));
+  return v(e, (t) => r(E(t)));
 }
-const Ve = I("Ginger.Current.Title", (e) => e == null ? void 0 : e.title), Xe = I("Ginger.Current.Artist", (e) => e == null ? void 0 : e.artist), We = T("Ginger.Current.Album", (e) => ae(e)), ze = I("Ginger.Current.Description", (e) => e == null ? void 0 : e.description), qe = T("Ginger.Current.Copyright", (e) => {
-  var n;
-  const r = A(e);
-  return (r == null ? void 0 : r.copyright) ?? ((n = e.playlistMeta) == null ? void 0 : n.copyright);
-}), He = I("Ginger.Current.Genre", (e) => e == null ? void 0 : e.genre), Ke = I("Ginger.Current.Label", (e) => e == null ? void 0 : e.label), Je = I("Ginger.Current.Isrc", (e) => e == null ? void 0 : e.isrc), Ze = I(
+const nr = I("Ginger.Current.Title", (e) => e == null ? void 0 : e.title), ir = I("Ginger.Current.Artist", (e) => e == null ? void 0 : e.artist), ar = v("Ginger.Current.Album", (e) => he(e)), ur = I("Ginger.Current.Description", (e) => e == null ? void 0 : e.description), lr = v("Ginger.Current.Copyright", (e) => {
+  var t;
+  const r = E(e);
+  return (r == null ? void 0 : r.copyright) ?? ((t = e.playlistMeta) == null ? void 0 : t.copyright);
+}), or = I("Ginger.Current.Genre", (e) => e == null ? void 0 : e.genre), sr = I("Ginger.Current.Label", (e) => e == null ? void 0 : e.label), cr = I("Ginger.Current.Isrc", (e) => e == null ? void 0 : e.isrc), dr = I(
   "Ginger.Current.TrackNumber",
   (e) => (e == null ? void 0 : e.trackNumber) != null ? String(e.trackNumber) : void 0
 );
-function se({ className: e, style: r, fallback: n, empty: t, children: i, format: u }) {
-  var d;
-  const { state: a } = g(), l = (d = A(a)) == null ? void 0 : d.year;
-  if (typeof l != "number" || !Number.isFinite(l)) {
-    const o = t ?? n ?? null;
-    return o ? /* @__PURE__ */ s("span", { className: e, style: r, children: o }) : null;
+function be({ className: e, style: r, fallback: t, empty: n, children: i, format: a }) {
+  var f;
+  const { state: u } = g(), o = (f = E(u)) == null ? void 0 : f.year;
+  if (typeof o != "number" || !Number.isFinite(o)) {
+    const s = n ?? t ?? null;
+    return s ? /* @__PURE__ */ l("span", { className: e, style: r, children: s }) : null;
   }
-  const c = u ? u(l) : String(l);
-  return i ? /* @__PURE__ */ s("span", { className: e, style: r, children: i(c, a) }) : /* @__PURE__ */ s("span", { className: e, style: r, children: c });
+  const c = a ? a(o) : String(o);
+  return i ? /* @__PURE__ */ l("span", { className: e, style: r, children: i(c, u) }) : /* @__PURE__ */ l("span", { className: e, style: r, children: c });
 }
-se.displayName = "Ginger.Current.Year";
-function le({ className: e, style: r, fallback: n, empty: t, children: i, preserveWhitespace: u = !0 }) {
-  var o;
-  const { state: a } = g(), l = ((o = A(a)) == null ? void 0 : o.lyrics) ?? "", c = u ? l.replace(/^\s+|\s+$/g, "") : l.trim();
+be.displayName = "Ginger.Current.Year";
+function Pe({ className: e, style: r, fallback: t, empty: n, children: i, preserveWhitespace: a = !0 }) {
+  var s;
+  const { state: u } = g(), o = ((s = E(u)) == null ? void 0 : s.lyrics) ?? "", c = a ? o.replace(/^\s+|\s+$/g, "") : o.trim();
   if (!c) {
-    const p = t ?? n ?? null;
-    return p ? /* @__PURE__ */ s("span", { className: e, style: r, children: p }) : null;
+    const d = n ?? t ?? null;
+    return d ? /* @__PURE__ */ l("span", { className: e, style: r, children: d }) : null;
   }
-  const d = u ? { whiteSpace: "pre-wrap" } : void 0;
-  return i ? /* @__PURE__ */ s("span", { className: e, style: { ...d, ...r }, children: i(c, a) }) : /* @__PURE__ */ s("span", { className: e, style: { ...d, ...r }, children: c });
+  const f = a ? { whiteSpace: "pre-wrap" } : void 0;
+  return i ? /* @__PURE__ */ l("span", { className: e, style: { ...f, ...r }, children: i(c, u) }) : /* @__PURE__ */ l("span", { className: e, style: { ...f, ...r }, children: c });
 }
-le.displayName = "Ginger.Current.Lyrics";
-function oe({ visible: e = !1, className: r, style: n, fallback: t, empty: i, children: u }) {
+Pe.displayName = "Ginger.Current.Lyrics";
+function ke({ visible: e = !1, className: r, style: t, fallback: n, empty: i, children: a }) {
   var c;
-  const { state: a } = g();
+  const { state: u } = g();
   if (!e) return null;
-  const l = ((c = A(a)) == null ? void 0 : c.fileUrl) ?? "";
-  if (!l) {
-    const d = i ?? t ?? null;
-    return d ? /* @__PURE__ */ s("span", { className: r, style: n, children: d }) : null;
+  const o = ((c = E(u)) == null ? void 0 : c.fileUrl) ?? "";
+  if (!o) {
+    const f = i ?? n ?? null;
+    return f ? /* @__PURE__ */ l("span", { className: r, style: t, children: f }) : null;
   }
-  return u ? /* @__PURE__ */ s("span", { className: r, style: n, children: u(l, a) }) : /* @__PURE__ */ s("span", { className: r, style: n, children: l });
-}
-oe.displayName = "Ginger.Current.FileUrl";
-function ce({ className: e, style: r, fallback: n, empty: t, sizes: i, loading: u, onError: a, decoding: l, imgStyle: c }) {
-  const { state: d } = g(), o = A(d), p = ue(d);
-  if (!p) {
-    const m = t ?? n ?? null;
-    return m ? /* @__PURE__ */ s("span", { className: e, style: r, children: m }) : null;
+  return a ? /* @__PURE__ */ l("span", { className: r, style: t, children: a(o, u) }) : /* @__PURE__ */ l("span", { className: r, style: t, children: o });
+}
+ke.displayName = "Ginger.Current.FileUrl";
+function Me({ className: e, style: r, fallback: t, empty: n, sizes: i, loading: a, onError: u, decoding: o, imgStyle: c }) {
+  const { state: f } = g(), s = E(f), d = me(f);
+  if (!d) {
+    const P = n ?? t ?? null;
+    return P ? /* @__PURE__ */ l("span", { className: e, style: r, children: P }) : null;
   }
-  const b = [o == null ? void 0 : o.title, o == null ? void 0 : o.artist].filter(Boolean).join(" — ") || "Artwork";
-  return /* @__PURE__ */ s(
+  const y = [s == null ? void 0 : s.title, s == null ? void 0 : s.artist].filter(Boolean).join(" — ") || "Artwork";
+  return /* @__PURE__ */ l(
     "span",
     {
       className: e,
@@ -209,15 +219,15 @@ function ce({ className: e, style: r, fallback: n, empty: t, sizes: i, loading:
         overflow: "hidden",
         ...r
       },
-      children: /* @__PURE__ */ s(
+      children: /* @__PURE__ */ l(
         "img",
         {
-          src: p,
-          alt: b,
+          src: d,
+          alt: y,
           sizes: i,
-          loading: u,
-          decoding: l,
-          onError: a,
+          loading: a,
+          decoding: o,
+          onError: u,
           style: {
             display: "block",
             width: "100%",
@@ -230,238 +240,338 @@ function ce({ className: e, style: r, fallback: n, empty: t, sizes: i, loading:
     }
   );
 }
-ce.displayName = "Ginger.Current.Artwork";
-function de({ base: e = 0, className: r, style: n, fallback: t, empty: i, children: u }) {
-  const { state: a } = g();
-  if (a.tracks.length === 0) {
-    const d = i ?? t ?? null;
-    return d ? /* @__PURE__ */ s("span", { className: r, style: n, children: d }) : null;
+Me.displayName = "Ginger.Current.Artwork";
+function Te({ base: e = 0, className: r, style: t, fallback: n, empty: i, children: a }) {
+  const { state: u } = g();
+  if (u.tracks.length === 0) {
+    const f = i ?? n ?? null;
+    return f ? /* @__PURE__ */ l("span", { className: r, style: t, children: f }) : null;
   }
-  const c = String(a.currentIndex + e);
-  return u ? /* @__PURE__ */ s("span", { className: r, style: n, children: u(c, a) }) : /* @__PURE__ */ s("span", { className: r, style: n, children: c });
+  const c = String(u.currentIndex + e);
+  return a ? /* @__PURE__ */ l("span", { className: r, style: t, children: a(c, u) }) : /* @__PURE__ */ l("span", { className: r, style: t, children: c });
 }
-de.displayName = "Ginger.Current.QueueIndex";
-function fe({ className: e, style: r, fallback: n, empty: t, children: i }) {
-  const { state: u } = g(), a = String(u.tracks.length);
-  if (u.tracks.length === 0) {
-    const l = t ?? n ?? null;
-    return l ? /* @__PURE__ */ s("span", { className: e, style: r, children: l }) : null;
+Te.displayName = "Ginger.Current.QueueIndex";
+function Ee({ className: e, style: r, fallback: t, empty: n, children: i }) {
+  const { state: a } = g(), u = String(a.tracks.length);
+  if (a.tracks.length === 0) {
+    const o = n ?? t ?? null;
+    return o ? /* @__PURE__ */ l("span", { className: e, style: r, children: o }) : null;
   }
-  return i ? /* @__PURE__ */ s("span", { className: e, style: r, children: i(a, u) }) : /* @__PURE__ */ s("span", { className: e, style: r, children: a });
+  return i ? /* @__PURE__ */ l("span", { className: e, style: r, children: i(u, a) }) : /* @__PURE__ */ l("span", { className: e, style: r, children: u });
 }
-fe.displayName = "Ginger.Current.QueueLength";
-function pe({
+Ee.displayName = "Ginger.Current.QueueLength";
+function Ae({
   base: e = 0,
   separator: r = " / ",
-  className: n,
-  style: t,
+  className: t,
+  style: n,
   fallback: i,
-  empty: u,
-  children: a
+  empty: a,
+  children: u
 }) {
-  const { state: l } = g(), c = l.tracks.length;
+  const { state: o } = g(), c = o.tracks.length;
   if (c === 0) {
-    const b = u ?? i ?? null;
-    return b ? /* @__PURE__ */ s("span", { className: n, style: t, children: b }) : null;
+    const y = a ?? i ?? null;
+    return y ? /* @__PURE__ */ l("span", { className: t, style: n, children: y }) : null;
   }
-  const d = String(l.currentIndex + e), o = String(c), p = `${d}${r}${o}`;
-  return a ? /* @__PURE__ */ s("span", { className: n, style: t, children: a({ index: d, length: o, label: p }, l) }) : /* @__PURE__ */ s("span", { className: n, style: t, children: p });
+  const f = String(o.currentIndex + e), s = String(c), d = `${f}${r}${s}`;
+  return u ? /* @__PURE__ */ l("span", { className: t, style: n, children: u({ index: f, length: s, label: d }, o) }) : /* @__PURE__ */ l("span", { className: t, style: n, children: d });
 }
-pe.displayName = "Ginger.Current.QueuePosition";
-function er(e) {
+Ae.displayName = "Ginger.Current.QueuePosition";
+function fr(e) {
   if (!Number.isFinite(e) || e < 0) return "0:00";
   const r = Math.floor(e % 60);
   return `${Math.floor(e / 60)}:${r.toString().padStart(2, "0")}`;
 }
-function w(e, r, n) {
-  const { className: t, style: i, fallback: u, empty: a, children: l, format: c = er } = n;
+function Y(e, r, t) {
+  const { className: n, style: i, fallback: a, empty: u, children: o, format: c = fr } = t;
   if (!(e >= 0) || !Number.isFinite(e)) {
-    const o = a ?? u ?? null;
-    return o ? /* @__PURE__ */ s("span", { className: t, style: i, children: o }) : null;
+    const s = u ?? a ?? null;
+    return s ? /* @__PURE__ */ l("span", { className: n, style: i, children: s }) : null;
   }
-  const d = c(e);
-  return l ? /* @__PURE__ */ s("span", { className: t, style: i, children: l(d, r) }) : /* @__PURE__ */ s("span", { className: t, style: i, children: d });
+  const f = c(e);
+  return o ? /* @__PURE__ */ l("span", { className: n, style: i, children: o(f, r) }) : /* @__PURE__ */ l("span", { className: n, style: i, children: f });
 }
-function ge(e) {
+function xe(e) {
   const { state: r } = g();
-  return w(r.currentTime, r, e);
+  return Y(r.currentTime, r, e);
 }
-ge.displayName = "Ginger.Current.Elapsed";
-function ye(e) {
+xe.displayName = "Ginger.Current.Elapsed";
+function ve(e) {
   const { state: r } = g();
-  return w(R(r), r, e);
+  return Y(C(r), r, e);
 }
-ye.displayName = "Ginger.Current.Duration";
-function he(e) {
+ve.displayName = "Ginger.Current.Duration";
+function Ie(e) {
   const { state: r } = g();
-  return w(ie(r), r, e);
-}
-he.displayName = "Ginger.Current.Remaining";
-function me({ className: e, style: r, fallback: n, empty: t, children: i }) {
-  const { state: u } = g(), a = R(u), l = N(u);
-  if (!(a > 0)) {
-    const c = t ?? n ?? null;
-    return c ? /* @__PURE__ */ s("span", { className: e, style: r, children: c }) : null;
+  return Y(ye(r), r, e);
+}
+Ie.displayName = "Ginger.Current.Remaining";
+function Re({ className: e, style: r, fallback: t, empty: n, children: i }) {
+  const { state: a } = g(), u = C(a), o = O(a);
+  if (!(u > 0)) {
+    const c = n ?? t ?? null;
+    return c ? /* @__PURE__ */ l("span", { className: e, style: r, children: c }) : null;
   }
-  return i ? /* @__PURE__ */ s("span", { className: e, style: r, children: i({ fraction: l, currentTime: u.currentTime, duration: a }, u) }) : /* @__PURE__ */ s("span", { className: e, style: r, children: `${Math.round(l * 100)}%` });
+  return i ? /* @__PURE__ */ l("span", { className: e, style: r, children: i({ fraction: o, currentTime: a.currentTime, duration: u }, a) }) : /* @__PURE__ */ l("span", { className: e, style: r, children: `${Math.round(o * 100)}%` });
 }
-me.displayName = "Ginger.Current.Progress";
-function Pe({ className: e, style: r, height: n = 4 }) {
-  const { state: t } = g(), i = `${Math.round(N(t) * 100)}%`;
-  return /* @__PURE__ */ s(
+Re.displayName = "Ginger.Current.Progress";
+function Se({ className: e, style: r, height: t = 4 }) {
+  const { state: n } = g(), i = `${Math.round(O(n) * 100)}%`;
+  return /* @__PURE__ */ l(
     "div",
     {
       className: e,
       style: {
         width: "100%",
-        height: n,
+        height: t,
         background: "var(--ginger-muted-color, #e5e7eb)",
         borderRadius: 999,
         overflow: "hidden",
         ...r
       },
       "aria-hidden": !0,
-      children: /* @__PURE__ */ s("div", { style: { width: i, height: "100%", background: "var(--ginger-primary-color, #111827)" } })
+      children: /* @__PURE__ */ l("div", { style: { width: i, height: "100%", background: "var(--ginger-primary-color, #111827)" } })
     }
   );
 }
-Pe.displayName = "Ginger.Current.TimeRail";
-function Me({ className: e, style: r, fallback: n, empty: t, children: i }) {
-  const { state: u } = g(), a = te(u);
-  return i ? /* @__PURE__ */ s("span", { className: e, style: r, children: i(a, u) }) : /* @__PURE__ */ s("span", { className: e, style: r, children: a });
-}
-Me.displayName = "Ginger.Current.PlaybackState";
-function be({ className: e, style: r, fallback: n, empty: t, children: i }) {
-  const { state: u } = g(), a = u.errorMessage ?? "";
-  if (!a) {
-    const l = t ?? n ?? null;
-    return l ? /* @__PURE__ */ s("span", { className: e, style: r, children: l }) : null;
+Se.displayName = "Ginger.Current.TimeRail";
+function Ge({ className: e, style: r, fallback: t, empty: n, children: i }) {
+  const { state: a } = g(), u = ge(a);
+  return i ? /* @__PURE__ */ l("span", { className: e, style: r, children: i(u, a) }) : /* @__PURE__ */ l("span", { className: e, style: r, children: u });
+}
+Ge.displayName = "Ginger.Current.PlaybackState";
+function Ce({ className: e, style: r, fallback: t, empty: n, children: i }) {
+  const { state: a } = g(), u = a.errorMessage ?? "";
+  if (!u) {
+    const o = n ?? t ?? null;
+    return o ? /* @__PURE__ */ l("span", { className: e, style: r, children: o }) : null;
   }
-  return i ? /* @__PURE__ */ s("span", { className: e, style: r, children: i(a, u) }) : /* @__PURE__ */ s("span", { className: e, style: r, children: a });
+  return i ? /* @__PURE__ */ l("span", { className: e, style: r, children: i(u, a) }) : /* @__PURE__ */ l("span", { className: e, style: r, children: u });
 }
-be.displayName = "Ginger.Current.ErrorMessage";
-function ke({ playLabel: e = "Play", pauseLabel: r = "Pause", type: n = "button", ...t }) {
-  const { state: i, togglePlayPause: u } = g();
-  return /* @__PURE__ */ s("button", { type: n, "aria-label": i.isPaused ? "Play" : "Pause", onClick: u, ...t, children: i.isPaused ? e : r });
+Ce.displayName = "Ginger.Current.ErrorMessage";
+function _e({ playLabel: e = "Play", pauseLabel: r = "Pause", type: t = "button", ...n }) {
+  const { state: i, togglePlayPause: a } = g();
+  return /* @__PURE__ */ l("button", { type: t, "aria-label": i.isPaused ? "Play" : "Pause", onClick: a, ...n, children: i.isPaused ? e : r });
 }
-ke.displayName = "Ginger.Control.PlayPause";
-const ee = {
+_e.displayName = "Ginger.Control.PlayPause";
+const oe = {
   off: "Repeat off",
   all: "Repeat all",
   one: "Repeat one"
 };
-function xe({ type: e = "button", ...r }) {
-  const { state: n, cycleRepeat: t } = g();
-  return /* @__PURE__ */ s("button", { type: e, "aria-label": ee[n.repeatMode], onClick: t, ...r, children: ee[n.repeatMode] });
-}
-xe.displayName = "Ginger.Control.Repeat";
-function Ae({ type: e = "button", children: r = "Next", ...n }) {
-  const { next: t } = g();
-  return /* @__PURE__ */ s("button", { type: e, "aria-label": "Next track", onClick: t, ...n, children: r });
-}
-Ae.displayName = "Ginger.Control.Next";
-function Te({ type: e = "button", children: r = "Previous", ...n }) {
-  const { prev: t } = g();
-  return /* @__PURE__ */ s("button", { type: e, "aria-label": "Previous track", onClick: t, ...n, children: r });
-}
-Te.displayName = "Ginger.Control.Previous";
-function Ie({ type: e = "button", children: r = "Shuffle", ...n }) {
-  const { state: t, toggleShuffle: i } = g();
-  return /* @__PURE__ */ s("button", { type: e, "aria-pressed": t.isShuffled, "aria-label": "Shuffle", onClick: i, ...n, children: r });
-}
-Ie.displayName = "Ginger.Control.Shuffle";
-function Ee({ inputStyle: e, style: r, ...n }) {
-  const { state: t, seek: i } = g(), u = Number.isFinite(t.duration) && t.duration > 0 ? t.duration : 0, a = u > 0 ? t.currentTime : 0;
-  return /* @__PURE__ */ s(
+function Ne({ type: e = "button", ...r }) {
+  const { state: t, cycleRepeat: n } = g();
+  return /* @__PURE__ */ l("button", { type: e, "aria-label": oe[t.repeatMode], onClick: n, ...r, children: oe[t.repeatMode] });
+}
+Ne.displayName = "Ginger.Control.Repeat";
+function De({ type: e = "button", children: r = "Next", ...t }) {
+  const { next: n } = g();
+  return /* @__PURE__ */ l("button", { type: e, "aria-label": "Next track", onClick: n, ...t, children: r });
+}
+De.displayName = "Ginger.Control.Next";
+function we({ type: e = "button", children: r = "Previous", ...t }) {
+  const { prev: n } = g();
+  return /* @__PURE__ */ l("button", { type: e, "aria-label": "Previous track", onClick: n, ...t, children: r });
+}
+we.displayName = "Ginger.Control.Previous";
+function Ue({ type: e = "button", children: r = "Shuffle", ...t }) {
+  const { state: n, toggleShuffle: i } = g();
+  return /* @__PURE__ */ l("button", { type: e, "aria-pressed": n.isShuffled, "aria-label": "Shuffle", onClick: i, ...t, children: r });
+}
+Ue.displayName = "Ginger.Control.Shuffle";
+function Le({ inputStyle: e, style: r, ...t }) {
+  const { state: n, seek: i } = g(), a = Number.isFinite(n.duration) && n.duration > 0 ? n.duration : 0, u = a > 0 ? n.currentTime : 0;
+  return /* @__PURE__ */ l(
     "input",
     {
       type: "range",
       min: 0,
-      max: u > 0 ? u : 1,
+      max: a > 0 ? a : 1,
       step: "any",
-      value: Number.isFinite(a) ? a : 0,
+      value: Number.isFinite(u) ? u : 0,
       "aria-label": "Seek",
-      onChange: (l) => i(Number(l.currentTarget.value)),
+      onChange: (o) => i(Number(o.currentTarget.value)),
       style: { width: "100%", ...r, ...e },
-      ...n
+      ...t
+    }
+  );
+}
+Le.displayName = "Ginger.Control.SeekBar";
+function Fe({ inputStyle: e, style: r, ...t }) {
+  const { state: n, setVolume: i } = g();
+  return /* @__PURE__ */ l(
+    "input",
+    {
+      type: "range",
+      min: 0,
+      max: 1,
+      step: "any",
+      value: n.volume,
+      "aria-label": "Volume",
+      onChange: (a) => i(Number(a.currentTarget.value)),
+      style: { width: "100%", ...r, ...e },
+      ...t
+    }
+  );
+}
+Fe.displayName = "Ginger.Control.Volume";
+function Oe({
+  muteLabel: e = "Mute",
+  unmuteLabel: r = "Unmute",
+  type: t = "button",
+  ...n
+}) {
+  const { state: i, toggleMute: a } = g();
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      type: t,
+      "aria-pressed": i.muted,
+      "aria-label": i.muted ? "Unmute" : "Mute",
+      onClick: a,
+      ...n,
+      children: i.muted ? r : e
     }
   );
 }
-Ee.displayName = "Ginger.Control.SeekBar";
-function Se({
-  rowStyle: e,
-  renderTrack: r,
+Oe.displayName = "Ginger.Control.Mute";
+const pr = [0.5, 0.75, 1, 1.25, 1.5, 2];
+function Ye({ rates: e = pr, style: r, ...t }) {
+  const { state: n, setPlaybackRate: i } = g(), a = U(
+    () => Array.from(/* @__PURE__ */ new Set([...e, n.playbackRate])).sort((u, o) => u - o),
+    [e, n.playbackRate]
+  );
+  return /* @__PURE__ */ l(
+    "select",
+    {
+      "aria-label": "Playback speed",
+      value: String(n.playbackRate),
+      style: r,
+      onChange: (u) => i(Number(u.currentTarget.value)),
+      ...t,
+      children: a.map((u) => /* @__PURE__ */ l("option", { value: String(u), children: u === 1 ? "1× normal" : `${u}×` }, u))
+    }
+  );
+}
+Ye.displayName = "Ginger.Control.PlaybackRate";
+const F = de(null);
+function gr() {
+  const e = ce(F);
+  if (!e)
+    throw new Error("Ginger.Playlist.Track must be used inside <Ginger.Playlist>");
+  return e;
+}
+function Be({
+  children: e,
+  rowStyle: r,
+  renderTrack: t,
   playOnSelect: n = !0,
+  style: i,
+  ...a
+}) {
+  const { state: u, playTrackAt: o, selectTrackAt: c } = g(), f = {
+    listStyle: "none",
+    margin: 0,
+    padding: 0,
+    fontFamily: "var(--ginger-font-family, system-ui, sans-serif)",
+    fontSize: "var(--ginger-font-size, 14px)",
+    color: "var(--ginger-primary-color, #111827)",
+    ...i
+  };
+  return e !== void 0 ? /* @__PURE__ */ l(F.Provider, { value: { playOnSelect: n }, children: /* @__PURE__ */ l("ul", { style: f, ...a, children: e }) }) : /* @__PURE__ */ l(F.Provider, { value: { playOnSelect: n }, children: /* @__PURE__ */ l("ul", { style: f, ...a, children: u.tracks.map((d, y) => {
+    const P = y === u.currentIndex;
+    return /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          n ? o(y) : c(y);
+        },
+        style: {
+          width: "100%",
+          textAlign: "left",
+          border: "none",
+          background: P ? "rgba(17, 24, 39, 0.06)" : "transparent",
+          color: "inherit",
+          font: "inherit",
+          cursor: "pointer",
+          padding: "var(--ginger-playlist-row-padding, 6px 8px)",
+          ...r
+        },
+        children: t ? t(d, y, P) : /* @__PURE__ */ se("span", { children: [
+          d.title,
+          d.artist ? ` — ${d.artist}` : ""
+        ] })
+      }
+    ) }, `${d.fileUrl}-${y}`);
+  }) }) });
+}
+Be.displayName = "Ginger.Playlist";
+function Ve({
+  index: e,
+  className: r,
   style: t,
-  ...i
+  children: n,
+  liProps: i,
+  onClick: a,
+  ...u
 }) {
-  const { state: u, playTrackAt: a, selectTrackAt: l } = g();
-  return /* @__PURE__ */ s(
-    "ul",
+  const { playOnSelect: o } = gr(), { state: c, playTrackAt: f, selectTrackAt: s } = g(), d = e === c.currentIndex, y = c.tracks[e], P = y != null ? /* @__PURE__ */ se("span", { children: [
+    y.title,
+    y.artist ? ` — ${y.artist}` : ""
+  ] }) : null;
+  return /* @__PURE__ */ l("li", { ...i, children: /* @__PURE__ */ l(
+    "button",
     {
+      type: "button",
+      "aria-current": d ? "true" : void 0,
+      "data-ginger-active": d || void 0,
+      className: r,
       style: {
-        listStyle: "none",
-        margin: 0,
-        padding: 0,
-        fontFamily: "var(--ginger-font-family, system-ui, sans-serif)",
-        fontSize: "var(--ginger-font-size, 14px)",
-        color: "var(--ginger-primary-color, #111827)",
+        width: "100%",
+        textAlign: "left",
+        border: "none",
+        background: d ? "rgba(17, 24, 39, 0.06)" : "transparent",
+        color: "inherit",
+        font: "inherit",
+        cursor: "pointer",
+        padding: "var(--ginger-playlist-row-padding, 6px 8px)",
         ...t
       },
-      ...i,
-      children: u.tracks.map((c, d) => {
-        const o = d === u.currentIndex;
-        return /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              n ? a(d) : l(d);
-            },
-            style: {
-              width: "100%",
-              textAlign: "left",
-              border: "none",
-              background: o ? "rgba(17, 24, 39, 0.06)" : "transparent",
-              color: "inherit",
-              font: "inherit",
-              cursor: "pointer",
-              padding: "var(--ginger-playlist-row-padding, 6px 8px)",
-              ...e
-            },
-            children: r ? r(c, d, o) : /* @__PURE__ */ De("span", { children: [
-              c.title,
-              c.artist ? ` — ${c.artist}` : ""
-            ] })
-          }
-        ) }, `${c.fileUrl}-${d}`);
-      })
+      ...u,
+      onClick: (x) => {
+        a == null || a(x), !x.defaultPrevented && (o ? f(e) : s(e));
+      },
+      children: n ?? P
     }
-  );
+  ) });
 }
-Se.displayName = "Ginger.Playlist";
-const rr = T("Ginger.Queue.Title", (e) => {
+Ve.displayName = "Ginger.Playlist.Track";
+const yr = Object.assign(Be, {
+  Track: Ve
+}), mr = v("Ginger.Queue.Title", (e) => {
   var r;
   return (r = e.playlistMeta) == null ? void 0 : r.title;
-}), nr = T("Ginger.Queue.Subtitle", (e) => {
+}), hr = v("Ginger.Queue.Subtitle", (e) => {
   var r;
   return (r = e.playlistMeta) == null ? void 0 : r.subtitle;
-}), tr = T("Ginger.Queue.Description", (e) => {
+}), br = v("Ginger.Queue.Description", (e) => {
   var r;
   return (r = e.playlistMeta) == null ? void 0 : r.description;
-}), ir = T("Ginger.Queue.Copyright", (e) => {
+}), Pr = v("Ginger.Queue.Copyright", (e) => {
   var r;
   return (r = e.playlistMeta) == null ? void 0 : r.copyright;
 });
-function ve({ className: e, style: r, fallback: n, empty: t, imgStyle: i }) {
-  var c, d;
-  const { state: u } = g(), a = (c = u.playlistMeta) == null ? void 0 : c.artworkUrl;
-  if (!a) {
-    const o = t ?? n ?? null;
-    return o ? /* @__PURE__ */ s("span", { className: e, style: r, children: o }) : null;
+function $e({ className: e, style: r, fallback: t, empty: n, imgStyle: i }) {
+  var c, f;
+  const { state: a } = g(), u = (c = a.playlistMeta) == null ? void 0 : c.artworkUrl;
+  if (!u) {
+    const s = n ?? t ?? null;
+    return s ? /* @__PURE__ */ l("span", { className: e, style: r, children: s }) : null;
   }
-  const l = ((d = u.playlistMeta) == null ? void 0 : d.title) ?? "Playlist artwork";
-  return /* @__PURE__ */ s(
+  const o = ((f = a.playlistMeta) == null ? void 0 : f.title) ?? "Playlist artwork";
+  return /* @__PURE__ */ l(
     "span",
     {
       className: e,
@@ -472,11 +582,11 @@ function ve({ className: e, style: r, fallback: n, empty: t, imgStyle: i }) {
         overflow: "hidden",
         ...r
       },
-      children: /* @__PURE__ */ s(
+      children: /* @__PURE__ */ l(
         "img",
         {
-          src: a,
-          alt: l,
+          src: u,
+          alt: o,
           style: {
             display: "block",
             width: "100%",
@@ -489,56 +599,83 @@ function ve({ className: e, style: r, fallback: n, empty: t, imgStyle: i }) {
     }
   );
 }
-ve.displayName = "Ginger.Queue.Artwork";
-const v = {
+$e.displayName = "Ginger.Queue.Artwork";
+function L(e) {
+  return Number.isFinite(e) ? Math.min(1, Math.max(0, e)) : 1;
+}
+function B(e) {
+  return Number.isFinite(e) ? Math.min(4, Math.max(0.25, e)) : 1;
+}
+const G = {
   currentTime: 0,
   duration: 0,
   bufferedFraction: 0,
   isBuffering: !1,
   errorMessage: null
+}, kr = {
+  ...G,
+  volume: 1,
+  muted: !1,
+  playbackRate: 1
 };
-function Re(e) {
+function Qe(e) {
   const r = [...e.tracks];
-  let n = E(e.currentIndex ?? 0, r.length), t = null, i = r;
-  return e.isShuffled && r.length > 1 && (t = [...r], i = ne(r, n), n = 0), {
+  let t = S(e.currentIndex ?? 0, r.length), n = null, i = r;
+  return e.isShuffled && r.length > 1 && (n = [...r], i = pe(r, t), t = 0), {
     tracks: i,
-    currentIndex: n,
+    currentIndex: t,
     isPaused: e.isPaused ?? !0,
     isShuffled: !!(e.isShuffled && i.length > 1),
     repeatMode: e.repeatMode ?? "off",
-    originalTracks: t,
+    originalTracks: n,
     playlistMeta: e.playlistMeta ?? null,
-    ...v
+    ...kr,
+    volume: L(e.volume ?? 1),
+    muted: e.muted ?? !1,
+    playbackRate: B(e.playbackRate ?? 1)
   };
 }
-function ur(e, r) {
+function Mr(e, r) {
   switch (r.type) {
     case "INIT": {
-      const { tracks: n, currentIndex: t, playlistMeta: i, isPaused: u, isShuffled: a, repeatMode: l } = r.payload;
-      return Re({
-        tracks: n,
-        currentIndex: t,
+      const {
+        tracks: t,
+        currentIndex: n,
+        playlistMeta: i,
+        isPaused: a,
+        isShuffled: u,
+        repeatMode: o,
+        volume: c,
+        muted: f,
+        playbackRate: s
+      } = r.payload;
+      return Qe({
+        tracks: t,
+        currentIndex: n,
         playlistMeta: i ?? null,
-        isPaused: u ?? !0,
-        isShuffled: a ?? !1,
-        repeatMode: l ?? "off"
+        isPaused: a ?? !0,
+        isShuffled: u ?? !1,
+        repeatMode: o ?? "off",
+        volume: c,
+        muted: f,
+        playbackRate: s
       });
     }
     case "SET_QUEUE": {
-      const { tracks: n, currentIndex: t } = r.payload, i = [...n], u = E(t ?? e.currentIndex, i.length);
+      const { tracks: t, currentIndex: n } = r.payload, i = [...t], a = S(n ?? e.currentIndex, i.length);
       return {
         ...e,
         tracks: i,
-        currentIndex: u,
-        ...v
+        currentIndex: a,
+        ...G
       };
     }
     case "SET_INDEX": {
-      const n = E(r.payload.index, e.tracks.length), t = r.payload.autoPlay, i = t === !0 ? !1 : t === !1 ? !0 : e.isPaused;
+      const t = S(r.payload.index, e.tracks.length), n = r.payload.autoPlay, i = n === !0 ? !1 : n === !1 ? !0 : e.isPaused;
       return {
         ...e,
-        currentIndex: n,
-        ...v,
+        currentIndex: t,
+        ...G,
         isPaused: i
       };
     }
@@ -551,44 +688,44 @@ function ur(e, r) {
     case "SET_REPEAT":
       return { ...e, repeatMode: r.payload };
     case "CYCLE_REPEAT":
-      return { ...e, repeatMode: Ye(e.repeatMode) };
+      return { ...e, repeatMode: er(e.repeatMode) };
     case "TOGGLE_SHUFFLE": {
       if (e.tracks.length <= 1) return { ...e, isShuffled: !1, originalTracks: null };
       if (!e.isShuffled) {
-        const a = [...e.tracks], l = ne(a, e.currentIndex);
+        const u = [...e.tracks], o = pe(u, e.currentIndex);
         return {
           ...e,
           isShuffled: !0,
-          originalTracks: a,
-          tracks: l,
+          originalTracks: u,
+          tracks: o,
           currentIndex: 0
         };
       }
-      const n = e.originalTracks ? [...e.originalTracks] : [...e.tracks], t = e.tracks[e.currentIndex], i = (t == null ? void 0 : t.fileUrl) ?? "", u = Le(n, i);
+      const t = e.originalTracks ? [...e.originalTracks] : [...e.tracks], n = e.tracks[e.currentIndex], i = (n == null ? void 0 : n.fileUrl) ?? "", a = qe(t, i);
       return {
         ...e,
         isShuffled: !1,
         originalTracks: null,
-        tracks: n,
-        currentIndex: E(u, n.length)
+        tracks: t,
+        currentIndex: S(a, t.length)
       };
     }
     case "NEXT": {
-      const n = Be(e), t = n === e.currentIndex;
+      const t = Je(e), n = t === e.currentIndex;
       return {
         ...e,
-        currentIndex: n,
-        ...t ? {} : v,
-        isPaused: t ? e.isPaused : !1
+        currentIndex: t,
+        ...n ? {} : G,
+        isPaused: n ? e.isPaused : !1
       };
     }
     case "PREV": {
-      const n = $e(e), t = n === e.currentIndex;
+      const t = Ze(e), n = t === e.currentIndex;
       return {
         ...e,
-        currentIndex: n,
-        ...t ? {} : v,
-        isPaused: t ? e.isPaused : !1
+        currentIndex: t,
+        ...n ? {} : G,
+        isPaused: n ? e.isPaused : !1
       };
     }
     case "MEDIA_TIME_UPDATE":
@@ -625,11 +762,23 @@ function ur(e, r) {
       return { ...e, isPaused: !0 };
     case "RESET_MEDIA_TIMES":
       return { ...e, currentTime: 0, duration: 0, bufferedFraction: 0 };
+    case "SET_VOLUME":
+      return { ...e, volume: L(r.payload) };
+    case "SET_MUTED":
+      return { ...e, muted: r.payload };
+    case "TOGGLE_MUTE":
+      return { ...e, muted: !e.muted };
+    case "SET_PLAYBACK_RATE":
+      return { ...e, playbackRate: B(r.payload) };
+    case "MEDIA_VOLUME_SYNC": {
+      const { volume: t, muted: n } = r.payload, i = L(t);
+      return i === e.volume && n === e.muted ? e : { ...e, volume: i, muted: n };
+    }
     default:
       return e;
   }
 }
-const ar = {
+const Tr = {
   "--ginger-primary-color": "#111827",
   "--ginger-muted-color": "#6b7280",
   "--ginger-font-size": "14px",
@@ -638,226 +787,243 @@ const ar = {
   "--ginger-artwork-radius": "6px",
   "--ginger-artwork-bg": "#f3f4f6"
 };
-function sr({
+function Er({
   children: e,
   initialTracks: r = [],
-  initialIndex: n = 0,
-  initialPlaylistMeta: t = null,
+  initialIndex: t = 0,
+  initialPlaylistMeta: n = null,
   initialShuffle: i = !1,
-  initialRepeatMode: u = "off",
-  initialPaused: a = !0,
-  className: l,
-  style: c,
-  onTrackChange: d,
-  onPlay: o,
-  onPause: p,
-  onQueueEnd: b,
-  onError: m
+  initialRepeatMode: a = "off",
+  initialPaused: u = !0,
+  initialVolume: o = 1,
+  initialMuted: c = !1,
+  initialPlaybackRate: f = 1,
+  className: s,
+  style: d,
+  onTrackChange: y,
+  onPlay: P,
+  onPause: x,
+  onQueueEnd: _,
+  onError: M
 }) {
-  var K;
-  const k = J(null), [y, P] = Ue(
-    ur,
+  var ae;
+  const A = ue(null), [m, h] = Ke(
+    Mr,
     void 0,
-    () => Re({
+    () => Qe({
       tracks: r,
-      currentIndex: n,
-      playlistMeta: t,
-      isPaused: a,
+      currentIndex: t,
+      playlistMeta: n,
+      isPaused: u,
       isShuffled: i,
-      repeatMode: u
+      repeatMode: a,
+      volume: o,
+      muted: c,
+      playbackRate: f
     })
-  ), U = y.tracks[y.currentIndex] ?? null;
-  S(() => {
-    d == null || d(U, y.currentIndex);
-  }, [U, y.currentIndex, d]), S(() => {
-    y.errorMessage && (m == null || m(y.errorMessage));
-  }, [y.errorMessage, m]);
-  const C = J(void 0);
-  S(() => {
-    if (C.current === void 0) {
-      C.current = y.isPaused;
+  ), V = m.tracks[m.currentIndex] ?? null;
+  R(() => {
+    y == null || y(V, m.currentIndex);
+  }, [V, m.currentIndex, y]), R(() => {
+    m.errorMessage && (M == null || M(m.errorMessage));
+  }, [m.errorMessage, M]);
+  const N = ue(void 0);
+  R(() => {
+    if (N.current === void 0) {
+      N.current = m.isPaused;
       return;
     }
-    C.current !== y.isPaused && (y.isPaused ? p == null || p() : o == null || o()), C.current = y.isPaused;
-  }, [y.isPaused, p, o]);
-  const G = M(() => {
-    var f;
-    P({ type: "PLAY" }), (f = k.current) == null || f.play().catch((h) => {
-      P({ type: "PAUSE" });
-      const x = h instanceof Error ? h.message : "Playback failed";
-      m == null || m(x);
+    N.current !== m.isPaused && (m.isPaused ? x == null || x() : P == null || P()), N.current = m.isPaused;
+  }, [m.isPaused, x, P]);
+  const D = b(() => {
+    var p;
+    h({ type: "PLAY" }), (p = A.current) == null || p.play().catch((k) => {
+      h({ type: "PAUSE" });
+      const T = k instanceof Error ? k.message : "Playback failed";
+      M == null || M(T);
     });
-  }, [m]), _ = M(() => {
-    var f;
-    P({ type: "PAUSE" }), (f = k.current) == null || f.pause();
-  }, []), F = M(() => {
-    y.isPaused ? G() : _();
-  }, [_, G, y.isPaused]), L = M((f) => {
-    const h = k.current;
-    h && Number.isFinite(f) && (h.currentTime = Math.max(0, f));
-  }, []), Q = M((f) => {
-    const h = k.current;
-    h && (h.volume = Math.min(1, Math.max(0, f)));
-  }, []), B = M((f) => {
-    const h = k.current;
-    h && (h.muted = f);
-  }, []), $ = M(() => {
-    P({ type: "NEXT" });
-  }, []), Y = M(() => {
-    P({ type: "PREV" });
-  }, []), O = M((f) => {
-    P({ type: "SET_REPEAT", payload: f });
-  }, []), j = M(() => {
-    P({ type: "CYCLE_REPEAT" });
-  }, []), V = M(() => {
-    P({ type: "TOGGLE_SHUFFLE" });
-  }, []), X = M((f, h) => {
-    P({ type: "SET_QUEUE", payload: { tracks: f, currentIndex: h } });
-  }, []), W = M((f) => {
-    P({ type: "SET_INDEX", payload: { index: f, autoPlay: !0 } }), queueMicrotask(() => {
-      var h;
-      (h = k.current) == null || h.play().catch(() => {
+  }, [M]), w = b(() => {
+    var p;
+    h({ type: "PAUSE" }), (p = A.current) == null || p.pause();
+  }, []), $ = b(() => {
+    m.isPaused ? D() : w();
+  }, [w, D, m.isPaused]), Q = b((p) => {
+    const k = A.current;
+    k && Number.isFinite(p) && (k.currentTime = Math.max(0, p));
+  }, []), j = b((p) => {
+    h({ type: "SET_VOLUME", payload: L(p) });
+  }, []), X = b((p) => {
+    h({ type: "SET_MUTED", payload: p });
+  }, []), W = b(() => {
+    h({ type: "TOGGLE_MUTE" });
+  }, []), K = b((p) => {
+    h({ type: "SET_PLAYBACK_RATE", payload: B(p) });
+  }, []), z = b(() => {
+    h({ type: "NEXT" });
+  }, []), q = b(() => {
+    h({ type: "PREV" });
+  }, []), H = b((p) => {
+    h({ type: "SET_REPEAT", payload: p });
+  }, []), J = b(() => {
+    h({ type: "CYCLE_REPEAT" });
+  }, []), Z = b(() => {
+    h({ type: "TOGGLE_SHUFFLE" });
+  }, []), ee = b((p, k) => {
+    h({ type: "SET_QUEUE", payload: { tracks: p, currentIndex: k } });
+  }, []), re = b((p) => {
+    h({ type: "SET_INDEX", payload: { index: p, autoPlay: !0 } }), queueMicrotask(() => {
+      var k;
+      (k = A.current) == null || k.play().catch(() => {
       });
     });
-  }, []), z = M((f) => {
-    P({ type: "SET_INDEX", payload: { index: f, autoPlay: !1 } });
-  }, []), q = M((f) => {
-    P({ type: "SET_PLAYLIST_META", payload: f });
-  }, []), Ce = (K = y.tracks[y.currentIndex]) == null ? void 0 : K.fileUrl;
-  S(() => {
-    const f = k.current;
-    f && (y.isPaused ? f.pause() : f.play().catch((h) => {
-      P({ type: "PAUSE" });
-      const x = h instanceof Error ? h.message : "Playback failed";
-      m == null || m(x);
+  }, []), te = b((p) => {
+    h({ type: "SET_INDEX", payload: { index: p, autoPlay: !1 } });
+  }, []), ne = b((p) => {
+    h({ type: "SET_PLAYLIST_META", payload: p });
+  }, []), je = (ae = m.tracks[m.currentIndex]) == null ? void 0 : ae.fileUrl;
+  R(() => {
+    const p = A.current;
+    p && (m.isPaused ? p.pause() : p.play().catch((k) => {
+      h({ type: "PAUSE" });
+      const T = k instanceof Error ? k.message : "Playback failed";
+      M == null || M(T);
     }));
-  }, [y.isPaused, Ce, m]);
-  const H = M(() => {
-    const f = Qe(y);
-    if (f.kind === "replay_same") {
-      const x = k.current;
-      x && (x.currentTime = 0, x.play().catch(() => {
-      })), P({ type: "PLAY" });
+  }, [m.isPaused, je, M]);
+  const ie = b(() => {
+    const p = He(m);
+    if (p.kind === "replay_same") {
+      const T = A.current;
+      T && (T.currentTime = 0, T.play().catch(() => {
+      })), h({ type: "PLAY" });
       return;
     }
-    if (f.kind === "stop") {
-      P({ type: "PAUSE" }), b == null || b();
+    if (p.kind === "stop") {
+      h({ type: "PAUSE" }), _ == null || _();
       return;
     }
-    const h = f.nextIndex;
-    P({ type: "SET_INDEX", payload: { index: h, autoPlay: !0 } }), queueMicrotask(() => {
-      var x;
-      (x = k.current) == null || x.play().catch(() => {
+    const k = p.nextIndex;
+    h({ type: "SET_INDEX", payload: { index: k, autoPlay: !0 } }), queueMicrotask(() => {
+      var T;
+      (T = A.current) == null || T.play().catch(() => {
       });
     });
-  }, [b, y]), Ge = D(
+  }, [_, m]), Xe = U(
     () => ({
-      state: y,
-      dispatch: P,
-      audioRef: k,
-      notifyEnded: H,
-      play: G,
-      pause: _,
-      togglePlayPause: F,
-      seek: L,
-      setVolume: Q,
-      setMuted: B,
-      next: $,
-      prev: Y,
-      setRepeatMode: O,
-      cycleRepeat: j,
-      toggleShuffle: V,
-      setQueue: X,
-      playTrackAt: W,
-      selectTrackAt: z,
-      setPlaylistMeta: q
+      state: m,
+      dispatch: h,
+      audioRef: A,
+      notifyEnded: ie,
+      play: D,
+      pause: w,
+      togglePlayPause: $,
+      seek: Q,
+      setVolume: j,
+      setMuted: X,
+      toggleMute: W,
+      setPlaybackRate: K,
+      next: z,
+      prev: q,
+      setRepeatMode: H,
+      cycleRepeat: J,
+      toggleShuffle: Z,
+      setQueue: ee,
+      playTrackAt: re,
+      selectTrackAt: te,
+      setPlaylistMeta: ne
     }),
     [
-      j,
-      P,
-      $,
-      H,
-      _,
-      G,
-      W,
+      J,
+      h,
       z,
-      Y,
-      L,
-      B,
-      X,
-      O,
+      ie,
+      w,
+      D,
+      re,
+      te,
       q,
       Q,
-      y,
-      F,
-      V
+      X,
+      K,
+      ee,
+      H,
+      ne,
+      j,
+      m,
+      W,
+      $,
+      Z
     ]
-  ), _e = D(() => ({ ...ar, ...c }), [c]);
-  return /* @__PURE__ */ s(re.Provider, { value: Ge, children: /* @__PURE__ */ s("div", { className: l, style: _e, children: e }) });
+  ), We = U(() => ({ ...Tr, ...d }), [d]);
+  return /* @__PURE__ */ l(fe.Provider, { value: Xe, children: /* @__PURE__ */ l("div", { className: s, style: We, children: e }) });
 }
-const cr = {
-  Provider: sr,
-  Player: Fe,
+const vr = {
+  Provider: Er,
+  Player: ze,
   Current: {
-    Title: Ve,
-    Artist: Xe,
-    Album: We,
-    Description: ze,
-    Copyright: qe,
-    Genre: He,
-    Label: Ke,
-    Isrc: Je,
-    TrackNumber: Ze,
-    Year: se,
-    Lyrics: le,
-    FileUrl: oe,
-    Artwork: ce,
-    QueueIndex: de,
-    QueueLength: fe,
-    QueuePosition: pe,
-    Elapsed: ge,
-    Duration: ye,
-    Remaining: he,
-    Progress: me,
-    TimeRail: Pe,
-    PlaybackState: Me,
-    ErrorMessage: be
+    Title: nr,
+    Artist: ir,
+    Album: ar,
+    Description: ur,
+    Copyright: lr,
+    Genre: or,
+    Label: sr,
+    Isrc: cr,
+    TrackNumber: dr,
+    Year: be,
+    Lyrics: Pe,
+    FileUrl: ke,
+    Artwork: Me,
+    QueueIndex: Te,
+    QueueLength: Ee,
+    QueuePosition: Ae,
+    Elapsed: xe,
+    Duration: ve,
+    Remaining: Ie,
+    Progress: Re,
+    TimeRail: Se,
+    PlaybackState: Ge,
+    ErrorMessage: Ce
   },
   Queue: {
-    Title: rr,
-    Subtitle: nr,
-    Description: tr,
-    Copyright: ir,
-    Artwork: ve
+    Title: mr,
+    Subtitle: hr,
+    Description: br,
+    Copyright: Pr,
+    Artwork: $e
   },
   Control: {
-    PlayPause: ke,
-    Repeat: xe,
-    Next: Ae,
-    Previous: Te,
-    Shuffle: Ie,
-    SeekBar: Ee
+    PlayPause: _e,
+    Repeat: Ne,
+    Next: De,
+    Previous: we,
+    Shuffle: Ue,
+    SeekBar: Le,
+    Volume: Fe,
+    Mute: Oe,
+    PlaybackRate: Ye
   },
-  Playlist: Se
+  Playlist: yr
 };
-function dr() {
+function Ir() {
   const e = g(), { state: r } = e;
-  return D(
+  return U(
     () => ({
       state: r,
-      currentTrack: A(r),
-      playbackUi: te(r),
-      duration: R(r),
-      remaining: ie(r),
-      progress: N(r),
-      artworkUrl: ue(r),
-      albumLine: ae(r),
+      currentTrack: E(r),
+      playbackUi: ge(r),
+      duration: C(r),
+      remaining: ye(r),
+      progress: O(r),
+      artworkUrl: me(r),
+      albumLine: he(r),
       play: e.play,
       pause: e.pause,
       togglePlayPause: e.togglePlayPause,
       seek: e.seek,
       setVolume: e.setVolume,
       setMuted: e.setMuted,
+      toggleMute: e.toggleMute,
+      setPlaybackRate: e.setPlaybackRate,
       next: e.next,
       prev: e.prev,
       setRepeatMode: e.setRepeatMode,
@@ -880,10 +1046,12 @@ function dr() {
       e.prev,
       e.seek,
       e.setMuted,
+      e.setPlaybackRate,
       e.setPlaylistMeta,
       e.setQueue,
       e.setRepeatMode,
       e.setVolume,
+      e.toggleMute,
       e.togglePlayPause,
       e.toggleShuffle,
       r
@@ -891,7 +1059,7 @@ function dr() {
   );
 }
 export {
-  cr as Ginger,
-  dr as useGinger
+  vr as Ginger,
+  Ir as useGinger
 };
 //# sourceMappingURL=index.js.map