@eternalheart/react-file-preview 1.4.0 → 1.5.1

package/lib/chunks/index-Cn4ZyhGM.mjs

@@ -0,0 +1,587 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useRef as P, useState as l, useEffect as H, useCallback as C, forwardRef as te, useImperativeHandle as ae } from "react";
+import { motion as m, AnimatePresence as ne } from "framer-motion";
+import { Repeat as ie, SkipBack as se, Pause as oe, Play as le, SkipForward as ce, VolumeX as pe, Volume1 as fe, Volume2 as de } from "lucide-react";
+import { u as ue } from "./index-DreA69iU.mjs";
+import { R as me } from "./RendererError-D5i8eSpN.mjs";
+function he({
+  url: f
+}) {
+  const c = P(null), [G, i] = l(!1), [T, s] = l(!0), [I, v] = l(0), [b, p] = l(0), [u, h] = l(1), [y, w] = l(!1), [N, k] = l(!1), [V, L] = l(null);
+  H(() => {
+    const r = c.current;
+    if (!r) return;
+    s(!0), L(null);
+    const a = () => {
+      isNaN(r.currentTime) || v(r.currentTime);
+    }, o = () => {
+      !isNaN(r.duration) && isFinite(r.duration) && p(r.duration);
+    }, O = () => {
+      s(!1), o();
+    }, j = () => s(!0), g = () => {
+      s(!1), i(!0);
+    }, S = () => i(!0), W = () => i(!1), M = () => i(!1), F = () => {
+      L("音频加载失败"), s(!1);
+    };
+    return r.addEventListener("timeupdate", a), r.addEventListener("loadedmetadata", o), r.addEventListener("durationchange", o), r.addEventListener("canplay", O), r.addEventListener("waiting", j), r.addEventListener("playing", g), r.addEventListener("play", S), r.addEventListener("pause", W), r.addEventListener("ended", M), r.addEventListener("error", F), r.readyState >= 3 ? (s(!1), o()) : r.readyState >= 1 && o(), () => {
+      r.removeEventListener("timeupdate", a), r.removeEventListener("loadedmetadata", o), r.removeEventListener("durationchange", o), r.removeEventListener("canplay", O), r.removeEventListener("waiting", j), r.removeEventListener("playing", g), r.removeEventListener("play", S), r.removeEventListener("pause", W), r.removeEventListener("ended", M), r.removeEventListener("error", F);
+    };
+  }, [f]);
+  const B = C(() => {
+    const r = c.current;
+    r && (r.paused ? r.play().catch(() => {
+    }) : r.pause());
+  }, []), D = C((r) => {
+    const a = c.current;
+    a && (a.currentTime = r, v(r));
+  }, []), $ = C(
+    (r) => {
+      const a = c.current;
+      a && (a.currentTime = Math.max(
+        0,
+        Math.min(a.currentTime + r, a.duration || 1 / 0)
+      ));
+    },
+    []
+  ), R = C((r) => {
+    const a = c.current;
+    if (!a) return;
+    const o = Math.max(0, Math.min(1, r));
+    a.volume = o, h(o), o > 0 && (a.muted = !1, w(!1));
+  }, []), t = C(() => {
+    const r = c.current;
+    r && (r.muted = !r.muted, w(r.muted));
+  }, []), z = C(() => {
+    const r = c.current;
+    if (!r) return;
+    const a = !r.loop;
+    r.loop = a, k(a);
+  }, []), E = C((r) => {
+    if (!isFinite(r) || isNaN(r) || r < 0) return "0:00";
+    const a = Math.floor(r / 60), o = Math.floor(r % 60);
+    return `${a}:${o.toString().padStart(2, "0")}`;
+  }, []);
+  return {
+    audioRef: c,
+    isPlaying: G,
+    isLoading: T,
+    isLoop: N,
+    currentTime: I,
+    duration: b,
+    volume: u,
+    isMuted: y,
+    error: V,
+    togglePlay: B,
+    seek: D,
+    skip: $,
+    setVolume: R,
+    toggleMute: t,
+    toggleLoop: z,
+    formatTime: E
+  };
+}
+const ge = ({ text: f, className: c = "", style: G }) => {
+  const i = P(null), T = P(null), [s, I] = l(!1), [v, b] = l(0);
+  H(() => {
+    const y = () => {
+      const N = i.current, k = T.current;
+      if (!N || !k) return;
+      const V = N.clientWidth, L = k.scrollWidth;
+      I(L > V), b(L);
+    };
+    y();
+    const w = new ResizeObserver(y);
+    return i.current && w.observe(i.current), () => w.disconnect();
+  }, [f]);
+  const p = 60, u = v + p, h = u / 40;
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: i,
+      className: `rfp-overflow-hidden rfp-whitespace-nowrap ${c}`,
+      style: G,
+      children: [
+        s ? /* @__PURE__ */ n(
+          m.div,
+          {
+            className: "rfp-inline-flex rfp-whitespace-nowrap",
+            animate: { x: [0, -u] },
+            transition: { duration: h, repeat: 1 / 0, ease: "linear", repeatDelay: 1.5 },
+            children: [
+              /* @__PURE__ */ e("span", { children: f }),
+              /* @__PURE__ */ e("span", { style: { width: p }, className: "rfp-inline-block" }),
+              /* @__PURE__ */ e("span", { children: f })
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ e(
+          "div",
+          {
+            ref: T,
+            className: "rfp-whitespace-nowrap",
+            style: s ? { position: "absolute", visibility: "hidden", pointerEvents: "none" } : void 0,
+            children: f
+          }
+        )
+      ]
+    }
+  );
+}, xe = ({ isPlaying: f }) => /* @__PURE__ */ e(
+  m.div,
+  {
+    className: "rfp-absolute",
+    style: {
+      top: "-6px",
+      right: "2px",
+      width: "100px",
+      height: "120px",
+      transformOrigin: "76px 16px",
+      zIndex: 5
+    },
+    animate: { rotate: f ? 16 : 0 },
+    transition: { duration: 0.8, ease: [0.4, 0, 0.2, 1] },
+    children: /* @__PURE__ */ n(
+      "svg",
+      {
+        width: "100",
+        height: "120",
+        viewBox: "0 0 100 120",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+          /* @__PURE__ */ e("circle", { cx: "76", cy: "16", r: "13", fill: "rgba(0,0,0,0.3)" }),
+          /* @__PURE__ */ e("circle", { cx: "76", cy: "16", r: "11", fill: "url(#baseGrad)" }),
+          /* @__PURE__ */ e("circle", { cx: "76", cy: "16", r: "6", fill: "url(#baseInnerGrad)" }),
+          /* @__PURE__ */ e("circle", { cx: "76", cy: "16", r: "2.5", fill: "#222", stroke: "#555", strokeWidth: "0.5" }),
+          /* @__PURE__ */ e(
+            "path",
+            {
+              d: "M74 22 L56 88",
+              stroke: "url(#armGrad)",
+              strokeWidth: "3.5",
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "path",
+            {
+              d: "M74.8 22 L56.8 88",
+              stroke: "rgba(255,255,255,0.06)",
+              strokeWidth: "1",
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ e("rect", { x: "50", y: "86", width: "12", height: "7", rx: "1.5", fill: "url(#headGrad)" }),
+          /* @__PURE__ */ e("rect", { x: "52.5", y: "92", width: "7", height: "9", rx: "1", fill: "url(#cartridgeGrad)" }),
+          /* @__PURE__ */ e("line", { x1: "56", y1: "101", x2: "56", y2: "105", stroke: "#bbb", strokeWidth: "1.2", strokeLinecap: "round" }),
+          /* @__PURE__ */ e("circle", { cx: "56", cy: "105.5", r: "0.8", fill: "#ddd" }),
+          /* @__PURE__ */ n("defs", { children: [
+            /* @__PURE__ */ n("radialGradient", { id: "baseGrad", cx: "40%", cy: "35%", children: [
+              /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#555" }),
+              /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#1a1a1a" })
+            ] }),
+            /* @__PURE__ */ n("radialGradient", { id: "baseInnerGrad", cx: "40%", cy: "35%", children: [
+              /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#666" }),
+              /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#333" })
+            ] }),
+            /* @__PURE__ */ n("linearGradient", { id: "armGrad", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#555" }),
+              /* @__PURE__ */ e("stop", { offset: "50%", stopColor: "#444" }),
+              /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#333" })
+            ] }),
+            /* @__PURE__ */ n("linearGradient", { id: "headGrad", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#555" }),
+              /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#333" })
+            ] }),
+            /* @__PURE__ */ n("linearGradient", { id: "cartridgeGrad", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#444" }),
+              /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#222" })
+            ] })
+          ] })
+        ]
+      }
+    )
+  }
+), Ee = te(({ url: f, fileName: c }, G) => {
+  const i = ue(), {
+    audioRef: T,
+    isPlaying: s,
+    isLoading: I,
+    isLoop: v,
+    currentTime: b,
+    duration: p,
+    volume: u,
+    isMuted: h,
+    error: y,
+    togglePlay: w,
+    seek: N,
+    skip: k,
+    setVolume: V,
+    toggleMute: L,
+    toggleLoop: B,
+    formatTime: D
+  } = he({ url: f }), [$, R] = l(!1), [t, z] = l(!1), [E, r] = l(1), [a, o] = l(!1), [O, j] = l(0), g = P(null), S = P(null), W = P(), M = a ? O : b, F = p > 0 ? M / p : 0;
+  H(() => {
+    const d = () => {
+      if (g.current) {
+        const Z = g.current.clientHeight, J = g.current.clientWidth;
+        z(Z < 580);
+        const U = 464, ee = 320 / U, re = J >= U ? 1 : Math.max(ee, J / U);
+        r(re);
+      }
+    };
+    d();
+    const x = new ResizeObserver(d);
+    return g.current && x.observe(g.current), () => x.disconnect();
+  }, []), H(() => {
+    const d = (x) => {
+      S.current && !S.current.contains(x.target) && R(!1);
+    };
+    return $ && document.addEventListener("mousedown", d), () => document.removeEventListener("mousedown", d);
+  }, [$]);
+  const q = () => {
+    clearTimeout(W.current), R(!0);
+  }, X = () => {
+    W.current = setTimeout(() => R(!1), 300);
+  }, K = h || u === 0 ? pe : u < 0.5 ? fe : de;
+  if (ae(G, () => ({
+    getToolbarGroups: () => []
+  }), []), y)
+    return /* @__PURE__ */ e(me, { message: y });
+  const Q = t ? 0.72 : 1, Y = 260, _ = 240, A = Q * E;
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ref: g,
+      className: `rfp-flex rfp-flex-col rfp-items-center rfp-justify-center rfp-w-full rfp-h-full rfp-select-none rfp-overflow-auto ${t ? "rfp-p-3 rfp-gap-3" : "rfp-p-6 rfp-gap-6"}`,
+      children: [
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: "rfp-relative rfp-flex-shrink-0",
+            style: {
+              width: `${Y}px`,
+              height: `${_}px`,
+              transform: `scale(${A})`,
+              transformOrigin: "center center",
+              marginTop: t ? `${-(_ * (1 - A)) / 2}px` : 0,
+              marginBottom: t ? `${-(_ * (1 - A)) / 2}px` : 0
+            },
+            children: [
+              /* @__PURE__ */ e(
+                m.div,
+                {
+                  className: "rfp-absolute rfp-rounded-full",
+                  style: {
+                    width: "220px",
+                    height: "220px",
+                    top: "18px",
+                    left: "8px",
+                    background: "radial-gradient(circle, rgba(129,140,248,0.12) 0%, transparent 70%)"
+                  },
+                  animate: s ? { scale: [1, 1.08, 1], opacity: [0.5, 1, 0.5] } : { scale: 1, opacity: 0.2 },
+                  transition: s ? { duration: 3, repeat: 1 / 0, ease: "easeInOut" } : { duration: 0.5 }
+                }
+              ),
+              /* @__PURE__ */ n(
+                "div",
+                {
+                  className: "rfp-absolute rfp-rounded-full rfp-overflow-hidden",
+                  style: {
+                    width: "200px",
+                    height: "200px",
+                    top: "28px",
+                    left: "18px",
+                    background: `
+              radial-gradient(circle at center, transparent 95%, rgba(30,30,30,0.8) 95.5%, #111 97%),
+              radial-gradient(circle at center, transparent 38%, rgba(50,50,50,0.5) 38.15%, transparent 38.4%),
+              radial-gradient(circle at center, transparent 45%, rgba(50,50,50,0.3) 45.15%, transparent 45.4%),
+              radial-gradient(circle at center, transparent 52%, rgba(50,50,50,0.5) 52.15%, transparent 52.4%),
+              radial-gradient(circle at center, transparent 59%, rgba(50,50,50,0.3) 59.15%, transparent 59.4%),
+              radial-gradient(circle at center, transparent 66%, rgba(50,50,50,0.5) 66.15%, transparent 66.4%),
+              radial-gradient(circle at center, transparent 73%, rgba(50,50,50,0.3) 73.15%, transparent 73.4%),
+              radial-gradient(circle at center, transparent 80%, rgba(50,50,50,0.4) 80.15%, transparent 80.4%),
+              radial-gradient(circle at center, transparent 87%, rgba(50,50,50,0.3) 87.15%, transparent 87.4%),
+              conic-gradient(from 0deg, #1c1c1c, #232323, #1a1a1a, #262626, #1c1c1c, #212121, #1a1a1a, #252525, #1c1c1c, #232323, #1a1a1a, #262626, #1c1c1c)
+            `,
+                    boxShadow: s ? "0 0 36px rgba(129,140,248,0.1), 0 8px 32px rgba(0,0,0,0.4), inset 0 0 20px rgba(0,0,0,0.4)" : "0 8px 32px rgba(0,0,0,0.4), inset 0 0 20px rgba(0,0,0,0.4)",
+                    animation: "rfp-vinyl-spin 8s linear infinite",
+                    animationPlayState: s ? "running" : "paused"
+                  },
+                  children: [
+                    /* @__PURE__ */ n(
+                      "div",
+                      {
+                        className: "rfp-absolute rfp-rounded-full",
+                        style: {
+                          width: "34%",
+                          height: "34%",
+                          top: "33%",
+                          left: "33%",
+                          background: "radial-gradient(circle at 40% 38%, #818cf8, #6366f1, #4f46e5, #4338ca)",
+                          boxShadow: "inset 0 1px 3px rgba(255,255,255,0.25), inset 0 -1px 3px rgba(0,0,0,0.3), 0 0 8px rgba(0,0,0,0.3)"
+                        },
+                        children: [
+                          /* @__PURE__ */ e(
+                            "div",
+                            {
+                              className: "rfp-absolute rfp-inset-0 rfp-rounded-full rfp-opacity-20",
+                              style: {
+                                background: `
+                  radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.3) 31%, transparent 32%),
+                  radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.2) 51%, transparent 52%),
+                  radial-gradient(circle at center, transparent 70%, rgba(0,0,0,0.3) 71%, transparent 72%),
+                  radial-gradient(circle at center, transparent 88%, rgba(0,0,0,0.2) 89%, transparent 90%)
+                `
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ e(
+                            "div",
+                            {
+                              className: "rfp-absolute rfp-rounded-full",
+                              style: {
+                                width: "14%",
+                                height: "14%",
+                                top: "43%",
+                                left: "43%",
+                                background: "radial-gradient(circle at 40% 40%, #333, #0d0d0d)",
+                                boxShadow: "inset 0 1px 3px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.5)"
+                              }
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    I && /* @__PURE__ */ e(
+                      m.div,
+                      {
+                        className: "rfp-absolute rfp-inset-0 rfp-rounded-full",
+                        style: { border: "2px solid rgba(129,140,248,0.3)" },
+                        animate: { scale: [1, 1.02, 1], opacity: [0.3, 0.6, 0.3] },
+                        transition: { duration: 1.5, repeat: 1 / 0 }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(xe, { isPlaying: s })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: `rfp-text-center rfp-max-w-md rfp-flex-shrink-0 ${t ? "rfp-px-2" : "rfp-px-4"}`, children: /* @__PURE__ */ e(
+          ge,
+          {
+            text: c,
+            className: `rfp-font-medium rfp-text-fg-primary ${t ? "rfp-text-sm" : "rfp-text-lg"}`
+          }
+        ) }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: "rfp-w-full rfp-flex rfp-justify-center rfp-flex-shrink-0",
+            children: /* @__PURE__ */ n(
+              "div",
+              {
+                className: `rfp-rounded-2xl rfp-border rfp-bg-surface-1 rfp-border-line-weak ${t ? "rfp-p-3" : "rfp-p-5"}`,
+                style: {
+                  width: "448px",
+                  backdropFilter: "blur(16px)",
+                  transform: E < 1 ? `scale(${E})` : void 0,
+                  transformOrigin: "top center",
+                  marginBottom: E < 1 ? `${-(1 - E) * 100}px` : void 0
+                },
+                children: [
+                  /* @__PURE__ */ n("div", { className: t ? "rfp-mb-3" : "rfp-mb-5", children: [
+                    /* @__PURE__ */ n("div", { className: "rfp-relative rfp-h-4 rfp-flex rfp-items-center", children: [
+                      /* @__PURE__ */ e("div", { className: "rfp-absolute rfp-w-full rfp-h-[5px] rfp-rounded-full rfp-bg-surface-2" }),
+                      /* @__PURE__ */ e(
+                        "div",
+                        {
+                          className: "rfp-absolute rfp-h-[5px] rfp-rounded-full rfp-pointer-events-none",
+                          style: {
+                            width: `${F * 100}%`,
+                            background: "linear-gradient(90deg, var(--fp-accent), var(--fp-accent-hover))",
+                            boxShadow: s ? "0 0 8px rgba(129,140,248,0.4)" : "none",
+                            transition: a ? "none" : "width 0.1s linear"
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        "input",
+                        {
+                          type: "range",
+                          min: "0",
+                          max: p > 0 ? p : b || 100,
+                          step: "any",
+                          value: M,
+                          onPointerDown: () => {
+                            j(b), o(!0);
+                          },
+                          onChange: (d) => {
+                            const x = parseFloat(d.target.value);
+                            a ? j(x) : N(x);
+                          },
+                          onPointerUp: (d) => {
+                            const x = parseFloat(d.target.value);
+                            N(x), o(!1);
+                          },
+                          onPointerCancel: () => o(!1),
+                          disabled: p <= 0,
+                          "aria-label": i("audio.aria.progress"),
+                          className: "audio-slider rfp-absolute rfp-w-full"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ n("div", { className: `rfp-flex rfp-justify-between rfp-text-fg-tertiary ${t ? "rfp-text-[10px] rfp-mt-1.5" : "rfp-text-xs rfp-mt-2.5"}`, children: [
+                      /* @__PURE__ */ e("span", { style: { fontVariantNumeric: "tabular-nums" }, children: D(M) }),
+                      /* @__PURE__ */ e("span", { style: { fontVariantNumeric: "tabular-nums" }, children: p > 0 ? D(p) : "--:--" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ n("div", { className: `rfp-flex rfp-items-center rfp-justify-center ${t ? "rfp-gap-2" : "rfp-gap-3"}`, children: [
+                    /* @__PURE__ */ e(
+                      m.button,
+                      {
+                        onClick: B,
+                        whileHover: { scale: 1.1 },
+                        whileTap: { scale: 0.92 },
+                        "aria-label": i(v ? "audio.aria.loop_off" : "audio.aria.loop_on"),
+                        className: `rfp-rounded-full rfp-flex rfp-items-center rfp-justify-center rfp-transition-colors rfp-flex-shrink-0 ${t ? "rfp-w-8 rfp-h-8" : "rfp-w-9 rfp-h-9"} ${v ? "rfp-bg-accent-soft rfp-text-accent" : "rfp-bg-surface-2 rfp-text-fg-tertiary"}`,
+                        children: /* @__PURE__ */ e(ie, { className: t ? "rfp-w-3.5 rfp-h-3.5" : "rfp-w-4 rfp-h-4" })
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      m.button,
+                      {
+                        onClick: () => k(-10),
+                        whileHover: { scale: 1.1 },
+                        whileTap: { scale: 0.92 },
+                        "aria-label": i("audio.aria.backward_10"),
+                        className: `rfp-rounded-full rfp-flex rfp-items-center rfp-justify-center rfp-transition-colors rfp-bg-surface-2 rfp-text-fg-secondary rfp-flex-shrink-0 ${t ? "rfp-w-9 rfp-h-9" : "rfp-w-10 rfp-h-10"}`,
+                        children: /* @__PURE__ */ e(se, { className: t ? "rfp-w-4 rfp-h-4" : "rfp-w-[18px] rfp-h-[18px]" })
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      m.button,
+                      {
+                        onClick: w,
+                        whileHover: { scale: 1.06 },
+                        whileTap: { scale: 0.94 },
+                        "aria-label": i(s ? "audio.aria.pause" : "audio.aria.play"),
+                        className: `rfp-rounded-full rfp-flex rfp-items-center rfp-justify-center rfp-flex-shrink-0 ${t ? "rfp-w-12 rfp-h-12" : "rfp-w-14 rfp-h-14"}`,
+                        style: {
+                          background: "linear-gradient(135deg, var(--fp-accent-hover), var(--fp-accent))",
+                          color: "#fff",
+                          boxShadow: "0 4px 20px rgba(99,102,241,0.35)"
+                        },
+                        children: s ? /* @__PURE__ */ e(oe, { className: t ? "rfp-w-5 rfp-h-5" : "rfp-w-6 rfp-h-6" }) : /* @__PURE__ */ e(le, { className: t ? "rfp-w-5 rfp-h-5 rfp-ml-0.5" : "rfp-w-6 rfp-h-6 rfp-ml-0.5" })
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      m.button,
+                      {
+                        onClick: () => k(10),
+                        whileHover: { scale: 1.1 },
+                        whileTap: { scale: 0.92 },
+                        "aria-label": i("audio.aria.forward_10"),
+                        className: `rfp-rounded-full rfp-flex rfp-items-center rfp-justify-center rfp-transition-colors rfp-bg-surface-2 rfp-text-fg-secondary rfp-flex-shrink-0 ${t ? "rfp-w-9 rfp-h-9" : "rfp-w-10 rfp-h-10"}`,
+                        children: /* @__PURE__ */ e(ce, { className: t ? "rfp-w-4 rfp-h-4" : "rfp-w-[18px] rfp-h-[18px]" })
+                      }
+                    ),
+                    /* @__PURE__ */ n(
+                      "div",
+                      {
+                        ref: S,
+                        className: "rfp-relative",
+                        onMouseEnter: q,
+                        onMouseLeave: X,
+                        children: [
+                          /* @__PURE__ */ e(
+                            m.button,
+                            {
+                              onClick: L,
+                              whileHover: { scale: 1.1 },
+                              whileTap: { scale: 0.92 },
+                              "aria-label": i(h ? "audio.aria.unmute" : "audio.aria.mute"),
+                              className: `rfp-rounded-full rfp-flex rfp-items-center rfp-justify-center rfp-transition-colors rfp-flex-shrink-0 ${t ? "rfp-w-8 rfp-h-8" : "rfp-w-9 rfp-h-9"} ${$ ? "rfp-bg-accent-soft rfp-text-accent" : "rfp-bg-surface-2 rfp-text-fg-secondary"}`,
+                              children: /* @__PURE__ */ e(K, { className: t ? "rfp-w-3.5 rfp-h-3.5" : "rfp-w-4 rfp-h-4" })
+                            }
+                          ),
+                          /* @__PURE__ */ e(ne, { children: $ && /* @__PURE__ */ e(
+                            m.div,
+                            {
+                              initial: { opacity: 0, scale: 0.95 },
+                              animate: { opacity: 1, scale: 1 },
+                              exit: { opacity: 0, scale: 0.95 },
+                              transition: { duration: 0.12 },
+                              className: "rfp-absolute rfp-bottom-full rfp-mb-2 rfp-rounded-xl rfp-p-3 rfp-border rfp-bg-surface-3 rfp-border-line",
+                              style: {
+                                left: "50%",
+                                marginLeft: "-27px",
+                                backdropFilter: "blur(16px)"
+                              },
+                              onMouseEnter: q,
+                              onMouseLeave: X,
+                              children: /* @__PURE__ */ n("div", { className: "rfp-flex rfp-flex-col rfp-items-center rfp-gap-2", style: { height: "100px" }, children: [
+                                /* @__PURE__ */ n("div", { className: "rfp-relative rfp-flex rfp-items-center rfp-justify-center", style: { width: "24px", height: "80px" }, children: [
+                                  /* @__PURE__ */ e(
+                                    "div",
+                                    {
+                                      className: "rfp-absolute rfp-rounded-full rfp-bg-surface-2",
+                                      style: { width: "3px", height: "100%" }
+                                    }
+                                  ),
+                                  /* @__PURE__ */ e(
+                                    "div",
+                                    {
+                                      className: "rfp-absolute rfp-bottom-0 rfp-rounded-full rfp-pointer-events-none",
+                                      style: {
+                                        width: "3px",
+                                        height: `${(h ? 0 : u) * 100}%`,
+                                        background: "var(--fp-accent-hover)",
+                                        transition: "height 0.1s linear"
+                                      }
+                                    }
+                                  ),
+                                  /* @__PURE__ */ e(
+                                    "input",
+                                    {
+                                      type: "range",
+                                      min: "0",
+                                      max: "1",
+                                      step: "0.01",
+                                      value: h ? 0 : u,
+                                      onChange: (d) => V(parseFloat(d.target.value)),
+                                      "aria-label": i("audio.aria.volume"),
+                                      className: "volume-slider-vertical rfp-absolute",
+                                      style: {
+                                        width: "80px",
+                                        height: "24px",
+                                        transform: "rotate(-90deg)",
+                                        transformOrigin: "center center"
+                                      }
+                                    }
+                                  )
+                                ] }),
+                                /* @__PURE__ */ e("span", { className: "rfp-text-[10px] rfp-tabular-nums rfp-text-fg-tertiary", children: Math.round((h ? 0 : u) * 100) })
+                              ] })
+                            }
+                          ) })
+                        ]
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e("audio", { ref: T, src: f, className: "rfp-hidden" })
+      ]
+    }
+  );
+});
+export {
+  Ee as AudioRenderer
+};
+//# sourceMappingURL=index-Cn4ZyhGM.mjs.map