aplayer-react - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

dist/index.js

@@ -34,4 +34,4 @@ "use strict";
 // src/components/player.tsx
-var import_react9 = require("react");
-var import_clsx3 = require("clsx");
+var import_react10 = require("react");
+var import_clsx4 = require("clsx");
 
@@ -103,47 +103,32 @@ // src/assets/play.svg
 
-// src/assets/volume-up.svg
+// src/assets/menu.svg
 var React3 = __toESM(require("react"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var SvgVolumeUp = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 28 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528zM25.152 16q0 2.72-1.536 5.056t-4 3.36q-0.256 0.096-0.448 0.096-0.48 0-0.832-0.352t-0.32-0.8q0-0.704 0.672-1.056 1.024-0.512 1.376-0.8 1.312-0.96 2.048-2.4t0.736-3.104-0.736-3.104-2.048-2.4q-0.352-0.288-1.376-0.8-0.672-0.352-0.672-1.056 0-0.448 0.32-0.8t0.8-0.352q0.224 0 0.48 0.096 2.496 1.056 4 3.36t1.536 5.056zM29.728 16q0 4.096-2.272 7.552t-6.048 5.056q-0.224 0.096-0.448 0.096-0.48 0-0.832-0.352t-0.32-0.8q0-0.64 0.704-1.056 0.128-0.064 0.384-0.192t0.416-0.192q0.8-0.448 1.44-0.896 2.208-1.632 3.456-4.064t1.216-5.152-1.216-5.152-3.456-4.064q-0.64-0.448-1.44-0.896-0.128-0.096-0.416-0.192t-0.384-0.192q-0.704-0.416-0.704-1.056 0-0.448 0.32-0.8t0.832-0.352q0.224 0 0.448 0.096 3.776 1.632 6.048 5.056t2.272 7.552z" }) });
+var SvgMenu = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 22 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M20.8 14.4q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2zM1.6 11.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2zM20.8 20.8q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2z" }) });
 
-// src/assets/volume-down.svg
+// src/assets/order-list.svg
 var React4 = __toESM(require("react"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var SvgVolumeDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 28 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528z" }) });
+var SvgOrderList = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M0.622 18.334h19.54v7.55l11.052-9.412-11.052-9.413v7.549h-19.54v3.725z" }) });
 
-// src/assets/volume-off.svg
+// src/assets/order-random.svg
 var React5 = __toESM(require("react"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var SvgVolumeOff = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 28 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8z" }) });
+var SvgOrderRandom = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M22.667 4l7 6-7 6 7 6-7 6v-4h-3.653l-3.76-3.76 2.827-2.827 2.587 2.587h2v-8h-2l-12 12h-6v-4h4.347l12-12h3.653v-4zM2.667 8h6l3.76 3.76-2.827 2.827-2.587-2.587h-4.347v-4z" }) });
 
-// src/assets/menu.svg
+// src/assets/loop-all.svg
 var React6 = __toESM(require("react"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var SvgMenu = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 22 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M20.8 14.4q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2zM1.6 11.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2zM20.8 20.8q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2z" }) });
+var SvgLoopAll = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 29 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M9.333 9.333h13.333v4l5.333-5.333-5.333-5.333v4h-16v8h2.667v-5.333zM22.667 22.667h-13.333v-4l-5.333 5.333 5.333 5.333v-4h16v-8h-2.667v5.333z" }) });
 
-// src/assets/order-list.svg
+// src/assets/loop-one.svg
 var React7 = __toESM(require("react"));
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var SvgOrderList = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M0.622 18.334h19.54v7.55l11.052-9.412-11.052-9.413v7.549h-19.54v3.725z" }) });
+var SvgLoopOne = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 33 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M9.333 9.333h13.333v4l5.333-5.333-5.333-5.333v4h-16v8h2.667v-5.333zM22.667 22.667h-13.333v-4l-5.333 5.333 5.333 5.333v-4h16v-8h-2.667v5.333zM17.333 20v-8h-1.333l-2.667 1.333v1.333h2v5.333h2z" }) });
 
-// src/assets/order-random.svg
+// src/assets/loop-none.svg
 var React8 = __toESM(require("react"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var SvgOrderRandom = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M22.667 4l7 6-7 6 7 6-7 6v-4h-3.653l-3.76-3.76 2.827-2.827 2.587 2.587h2v-8h-2l-12 12h-6v-4h4.347l12-12h3.653v-4zM2.667 8h6l3.76 3.76-2.827 2.827-2.587-2.587h-4.347v-4z" }) });
+var SvgLoopNone = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 29 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M2.667 7.027l1.707-1.693 22.293 22.293-1.693 1.707-4-4h-11.64v4l-5.333-5.333 5.333-5.333v4h8.973l-8.973-8.973v0.973h-2.667v-3.64l-4-4zM22.667 17.333h2.667v5.573l-2.667-2.667v-2.907zM22.667 6.667v-4l5.333 5.333-5.333 5.333v-4h-10.907l-2.667-2.667h13.573z" }) });
 
-// src/assets/loop-all.svg
-var React9 = __toESM(require("react"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var SvgLoopAll = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 29 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M9.333 9.333h13.333v4l5.333-5.333-5.333-5.333v4h-16v8h2.667v-5.333zM22.667 22.667h-13.333v-4l-5.333 5.333 5.333 5.333v-4h16v-8h-2.667v5.333z" }) });
-
-// src/assets/loop-one.svg
-var React10 = __toESM(require("react"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var SvgLoopOne = (props) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 33 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M9.333 9.333h13.333v4l5.333-5.333-5.333-5.333v4h-16v8h2.667v-5.333zM22.667 22.667h-13.333v-4l-5.333 5.333 5.333 5.333v-4h16v-8h-2.667v5.333zM17.333 20v-8h-1.333l-2.667 1.333v1.333h2v5.333h2z" }) });
-
-// src/assets/loop-none.svg
-var React11 = __toESM(require("react"));
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var SvgLoopNone = (props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 29 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M2.667 7.027l1.707-1.693 22.293 22.293-1.693 1.707-4-4h-11.64v4l-5.333-5.333 5.333-5.333v4h8.973l-8.973-8.973v0.973h-2.667v-3.64l-4-4zM22.667 17.333h2.667v5.573l-2.667-2.667v-2.907zM22.667 6.667v-4l5.333 5.333-5.333 5.333v-4h-10.907l-2.667-2.667h13.573z" }) });
-
 // src/utils/formatAudioDuration.ts
@@ -170,44 +155,189 @@ function formatAudioDuration(seconds) {
 // src/components/progress.tsx
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 
 // src/assets/loading.svg
+var React9 = __toESM(require("react"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var SvgLoading = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M4 16c0-6.6 5.4-12 12-12s12 5.4 12 12c0 1.2-0.8 2-2 2s-2-0.8-2-2c0-4.4-3.6-8-8-8s-8 3.6-8 8 3.6 8 8 8c1.2 0 2 0.8 2 2s-0.8 2-2 2c-6.6 0-12-5.4-12-12z" }) });
+
+// src/utils/computePercentage.ts
+function computePercentage(eventTarget, progressBarRef) {
+  if (!progressBarRef.current)
+    return 0;
+  let percentage = (eventTarget.clientX - progressBarRef.current.getBoundingClientRect().left) / progressBarRef.current.clientWidth;
+  percentage = Math.max(percentage, 0);
+  percentage = Math.min(percentage, 1);
+  percentage = Math.floor(percentage * 100) / 100;
+  return percentage;
+}
+function computePercentageOfY(eventTarget, volumeBarRef) {
+  if (!volumeBarRef.current)
+    return 0;
+  let percentage = 1 - (eventTarget.clientY - volumeBarRef.current.getBoundingClientRect().top) / volumeBarRef.current.clientHeight;
+  percentage = Math.max(percentage, 0);
+  percentage = Math.min(percentage, 1);
+  percentage = Math.floor(percentage * 100) / 100;
+  return percentage;
+}
+
+// src/components/progress.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function ProgressBar({
+  themeColor,
+  bufferedPercentage,
+  playedPercentage,
+  onSeek
+}) {
+  const progressBarRef = (0, import_react.useRef)(null);
+  const [progress, setProgress] = (0, import_react.useState)(playedPercentage);
+  const isDraggingRef = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    if (!isDraggingRef.current) {
+      setProgress(playedPercentage);
+    }
+  }, [playedPercentage]);
+  const handleMouseDown = (0, import_react.useCallback)(
+    (e) => {
+      isDraggingRef.current = true;
+      const percentage = computePercentage(e, progressBarRef);
+      setProgress(percentage);
+      const handleMouseMove = (e2) => {
+        const percentage2 = computePercentage(e2, progressBarRef);
+        setProgress(percentage2);
+      };
+      const handleMouseUp = (e2) => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        const percentage2 = computePercentage(e2, progressBarRef);
+        setProgress(percentage2);
+        onSeek?.(percentage2);
+        isDraggingRef.current = false;
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [onSeek]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      ref: progressBarRef,
+      className: "aplayer-bar-wrap",
+      onMouseDown: handleMouseDown,
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "aplayer-bar", children: [
+        typeof bufferedPercentage !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "div",
+          {
+            className: "aplayer-loaded",
+            style: { width: `${bufferedPercentage * 100}%` }
+          }
+        ) : null,
+        typeof progress !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "div",
+          {
+            className: "aplayer-played",
+            style: {
+              width: `${progress * 100}%`,
+              backgroundColor: themeColor
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "span",
+              {
+                className: "aplayer-thumb",
+                style: { backgroundColor: themeColor },
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "aplayer-loading-icon", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SvgLoading, {}) })
+              }
+            )
+          }
+        ) : null
+      ] })
+    }
+  );
+}
+
+// src/components/controller.tsx
+var import_react3 = require("react");
+
+// src/components/volume.tsx
+var import_react2 = require("react");
+
+// src/assets/volume-up.svg
+var React11 = __toESM(require("react"));
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var SvgVolumeUp = (props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 28 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528zM25.152 16q0 2.72-1.536 5.056t-4 3.36q-0.256 0.096-0.448 0.096-0.48 0-0.832-0.352t-0.32-0.8q0-0.704 0.672-1.056 1.024-0.512 1.376-0.8 1.312-0.96 2.048-2.4t0.736-3.104-0.736-3.104-2.048-2.4q-0.352-0.288-1.376-0.8-0.672-0.352-0.672-1.056 0-0.448 0.32-0.8t0.8-0.352q0.224 0 0.48 0.096 2.496 1.056 4 3.36t1.536 5.056zM29.728 16q0 4.096-2.272 7.552t-6.048 5.056q-0.224 0.096-0.448 0.096-0.48 0-0.832-0.352t-0.32-0.8q0-0.64 0.704-1.056 0.128-0.064 0.384-0.192t0.416-0.192q0.8-0.448 1.44-0.896 2.208-1.632 3.456-4.064t1.216-5.152-1.216-5.152-3.456-4.064q-0.64-0.448-1.44-0.896-0.128-0.096-0.416-0.192t-0.384-0.192q-0.704-0.416-0.704-1.056 0-0.448 0.32-0.8t0.832-0.352q0.224 0 0.448 0.096 3.776 1.632 6.048 5.056t2.272 7.552z" }) });
+
+// src/assets/volume-down.svg
 var React12 = __toESM(require("react"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var SvgLoading = (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M4 16c0-6.6 5.4-12 12-12s12 5.4 12 12c0 1.2-0.8 2-2 2s-2-0.8-2-2c0-4.4-3.6-8-8-8s-8 3.6-8 8 3.6 8 8 8c1.2 0 2 0.8 2 2s-0.8 2-2 2c-6.6 0-12-5.4-12-12z" }) });
+var SvgVolumeDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 28 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528z" }) });
 
-// src/components/progress.tsx
+// src/assets/volume-off.svg
+var React13 = __toESM(require("react"));
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var ProgressBar = import_react.default.forwardRef(function ProgressBar2({ themeColor, bufferedPercentage, playedPercentage }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, className: "aplayer-bar-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "aplayer-bar", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      "div",
+var SvgVolumeOff = (props) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 28 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8z" }) });
+
+// src/components/volume.tsx
+var import_clsx2 = __toESM(require("clsx"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function Volume({
+  themeColor,
+  volume,
+  muted,
+  onToggleMuted,
+  onChangeVolume
+}) {
+  const volumeBarRef = (0, import_react2.useRef)(null);
+  const [isDragging, setDragging] = (0, import_react2.useState)(false);
+  const handleMouseDown = (0, import_react2.useCallback)(
+    (e) => {
+      onChangeVolume(computePercentageOfY(e, volumeBarRef));
+      setDragging(true);
+      const handleMouseMove = (e2) => {
+        onChangeVolume(computePercentageOfY(e2, volumeBarRef));
+      };
+      const handleMouseUp = (e2) => {
+        document.removeEventListener("mouseup", handleMouseUp);
+        document.removeEventListener("mousemove", handleMouseMove);
+        setDragging(false);
+        onChangeVolume(computePercentageOfY(e2, volumeBarRef));
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [onChangeVolume]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "aplayer-volume-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "button",
       {
-        className: "aplayer-loaded",
-        style: { width: `${bufferedPercentage * 100}%` }
+        className: "aplayer-icon aplayer-icon-volume-down",
+        onClick: () => onToggleMuted(),
+        children: muted || !volume ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SvgVolumeOff, {}) : volume >= 1 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SvgVolumeUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SvgVolumeDown, {})
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
-        className: "aplayer-played",
-        style: {
-          width: `${playedPercentage * 100}%`,
-          backgroundColor: themeColor
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          "span",
+        className: (0, import_clsx2.default)("aplayer-volume-bar-wrap", {
+          "aplayer-volume-bar-wrap-active": isDragging
+        }),
+        ref: volumeBarRef,
+        onMouseDown: handleMouseDown,
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "aplayer-volume-bar", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "div",
           {
-            className: "aplayer-thumb",
-            style: { backgroundColor: themeColor },
-            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "aplayer-loading-icon", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SvgLoading, {}) })
+            className: "aplayer-volume",
+            style: {
+              backgroundColor: themeColor,
+              height: muted ? 0 : `${volume * 100}%`
+            }
           }
-        )
+        ) })
       }
     )
-  ] }) });
-});
+  ] });
+}
 
 // src/components/controller.tsx
-var import_react2 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function PlaybackControls({
@@ -227,19 +357,5 @@ themeColor,
   onLoopChange,
-  progressBarRef,
-  playedPercentage
+  onSeek
 }) {
-  const handleVolumeBarMouseDown = (0, import_react2.useCallback)(
-    (e) => {
-      const volumeBarElement = e.currentTarget;
-      const volumeBarRect = volumeBarElement.getBoundingClientRect();
-      onChangeVolume(
-        Math.min(
-          1,
-          Math.max(0, (volumeBarRect.bottom - e.clientY) / volumeBarRect.height)
-        )
-      );
-    },
-    [onChangeVolume]
-  );
-  const handleOrderButtonClick = (0, import_react2.useCallback)(() => {
+  const handleOrderButtonClick = (0, import_react3.useCallback)(() => {
     const nextOrder = {
@@ -251,3 +367,3 @@ list: "random",
   }, [order, onOrderChange]);
-  const handleLoopButtonClick = (0, import_react2.useCallback)(() => {
+  const handleLoopButtonClick = (0, import_react3.useCallback)(() => {
     const nextLoop = {
@@ -260,49 +376,32 @@ all: "one",
   }, [loop, onLoopChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "aplayer-controller", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "aplayer-controller", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       ProgressBar,
       {
-        ref: progressBarRef,
         themeColor,
-        playedPercentage,
-        bufferedPercentage: bufferedSeconds / audioDurationSeconds
+        playedPercentage: typeof currentTime === "undefined" || typeof audioDurationSeconds === "undefined" ? void 0 : currentTime / audioDurationSeconds,
+        bufferedPercentage: typeof bufferedSeconds === "undefined" || typeof audioDurationSeconds === "undefined" ? void 0 : bufferedSeconds / audioDurationSeconds,
+        onSeek: (progress) => onSeek?.(progress * audioDurationSeconds)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "aplayer-time", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "aplayer-time-inner", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "aplayer-ptime", children: formatAudioDuration(currentTime) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "aplayer-time", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "aplayer-time-inner", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "aplayer-ptime", children: formatAudioDuration(currentTime) }),
         " / ",
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "aplayer-dtime", children: formatAudioDuration(audioDurationSeconds) })
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "aplayer-dtime", children: formatAudioDuration(audioDurationSeconds) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "aplayer-icon aplayer-icon-back" }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "aplayer-icon aplayer-icon-play" }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "aplayer-icon aplayer-icon-forward" }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "aplayer-volume-wrap", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "button",
-          {
-            className: "aplayer-icon aplayer-icon-volume-down",
-            onClick: () => onToggleMuted(),
-            children: muted ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SvgVolumeOff, {}) : volume >= 1 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SvgVolumeUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SvgVolumeDown, {})
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          "div",
-          {
-            className: "aplayer-volume-bar-wrap",
-            onMouseDown: handleVolumeBarMouseDown,
-            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "aplayer-volume-bar", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              "div",
-              {
-                className: "aplayer-volume",
-                style: {
-                  backgroundColor: themeColor,
-                  height: muted ? 0 : `${volume * 100}%`
-                }
-              }
-            ) })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "aplayer-icon aplayer-icon-back" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "aplayer-icon aplayer-icon-play" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "aplayer-icon aplayer-icon-forward" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        Volume,
+        {
+          themeColor,
+          volume,
+          muted,
+          onToggleMuted,
+          onChangeVolume
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "button",
@@ -312,6 +411,6 @@ {
           onClick: handleOrderButtonClick,
-          children: { list: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SvgOrderList, {}), random: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SvgOrderRandom, {}) }[order]
+          children: { list: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SvgOrderList, {}), random: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SvgOrderRandom, {}) }[order]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "button",
@@ -322,9 +421,9 @@ {
           children: {
-            all: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SvgLoopAll, {}),
-            one: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SvgLoopOne, {}),
-            none: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SvgLoopNone, {})
+            all: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SvgLoopAll, {}),
+            one: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SvgLoopOne, {}),
+            none: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SvgLoopNone, {})
           }[loop]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "button",
@@ -334,6 +433,6 @@ {
           onClick: () => onToggleMenu?.(),
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SvgMenu, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SvgMenu, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "aplayer-icon aplayer-icon-lrc" })
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { className: "aplayer-icon aplayer-icon-lrc" })
     ] })
@@ -344,19 +443,6 @@ ] });
 // src/hooks/useAudioControl.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_shim = require("use-sync-external-store/shim/index.js");
-
-// src/utils/computePercentage.ts
-function computePercentage(eventTarget, progressBarRef) {
-  if (!progressBarRef.current)
-    return 0;
-  let percentage = (eventTarget.clientX - progressBarRef.current.getBoundingClientRect().left) / progressBarRef.current.clientWidth;
-  percentage = Math.max(percentage, 0);
-  percentage = Math.min(percentage, 1);
-  percentage = Math.floor(percentage * 100) / 100;
-  return percentage;
-}
-
-// src/hooks/useAudioControl.ts
 function useCreateAudioElement(options) {
-  const audioElementRef = (0, import_react3.useRef)();
+  const audioElementRef = (0, import_react4.useRef)();
   if (typeof document !== "undefined" && !audioElementRef.current) {
@@ -374,3 +460,3 @@ const audio = audioElementRef.current = document.createElement("audio");
   }
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const audio = audioElementRef.current;
@@ -384,3 +470,3 @@ if (audio && options?.onError) {
   }, [options?.onError]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const audio = audioElementRef.current;
@@ -394,3 +480,3 @@ if (audio && options?.onEnded) {
   }, [options?.onEnded]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     return () => {
@@ -407,73 +493,5 @@ const audio = audioElementRef.current;
 }
-function useProgressBar(audio) {
-  const progressBarRef = (0, import_react3.useRef)(null);
-  const [barState, setBarState] = (0, import_react3.useState)({
-    percentage: 0,
-    isThumbDown: false
-  });
-  const seek = (0, import_react3.useCallback)(
-    (second) => {
-      if (audio.current && !Number.isNaN(second)) {
-        audio.current.currentTime = second;
-      }
-    },
-    [audio]
-  );
-  const handlePercentage = (0, import_react3.useCallback)((percentage) => {
-    if (!Number.isNaN(percentage)) {
-      setBarState((prev) => ({ ...prev, percentage }));
-    }
-  }, []);
-  const handleIsThumbDown = (0, import_react3.useCallback)((is) => {
-    setBarState((prev) => ({ ...prev, isThumbDown: is }));
-  }, []);
-  const thumbMove = (0, import_react3.useCallback)(
-    (e) => {
-      if (!progressBarRef.current || !audio.current)
-        return;
-      const percentage = computePercentage(e, progressBarRef);
-      handlePercentage(percentage);
-    },
-    [audio, handlePercentage]
-  );
-  const thumbUp = (0, import_react3.useCallback)(
-    (e) => {
-      if (!progressBarRef.current || !audio.current)
-        return;
-      document.removeEventListener("mouseup", thumbUp);
-      document.removeEventListener("mousemove", thumbMove);
-      const percentage = computePercentage(e, progressBarRef);
-      const currentTime = audio.current.duration * percentage;
-      handlePercentage(percentage);
-      handleIsThumbDown(false);
-      seek(currentTime);
-    },
-    [audio, handleIsThumbDown, handlePercentage, seek, thumbMove]
-  );
-  (0, import_react3.useEffect)(() => {
-    const ref = progressBarRef.current;
-    if (ref) {
-      ref.addEventListener("mousedown", (e) => {
-        handleIsThumbDown(true);
-        const percentage = computePercentage(e, progressBarRef);
-        handlePercentage(percentage);
-        document.addEventListener("mousemove", thumbMove);
-        document.addEventListener("mouseup", thumbUp);
-      });
-    }
-    return () => {
-      if (ref) {
-        ref.removeEventListener("mousedown", () => {
-          document.addEventListener("mousemove", thumbMove);
-          document.addEventListener("mouseup", thumbUp);
-        });
-      }
-    };
-  }, []);
-  return { progressBarRef, barState };
-}
 function useAudioControl(options) {
   const audioElementRef = useCreateAudioElement(options);
-  const { progressBarRef, barState } = useProgressBar(audioElementRef);
-  const playAudio = (0, import_react3.useCallback)(
+  const playAudio = (0, import_react4.useCallback)(
     async (src) => {
@@ -495,3 +513,3 @@ const audio = audioElementRef.current;
   );
-  const togglePlay = (0, import_react3.useCallback)(
+  const togglePlay = (0, import_react4.useCallback)(
     (src) => {
@@ -510,3 +528,3 @@ const audio = audioElementRef.current;
   );
-  const seek = (0, import_react3.useCallback)(
+  const seek = (0, import_react4.useCallback)(
     (second) => {
@@ -517,3 +535,3 @@ audioElementRef.current.currentTime = second;
   );
-  const toggleMuted = (0, import_react3.useCallback)(() => {
+  const toggleMuted = (0, import_react4.useCallback)(() => {
     if (audioElementRef.current) {
@@ -523,3 +541,3 @@ audioElementRef.current.muted = !audioElementRef.current.muted;
   }, [audioElementRef]);
-  const setVolume = (0, import_react3.useCallback)(
+  const setVolume = (0, import_react4.useCallback)(
     (value) => {
@@ -533,3 +551,3 @@ if (audioElementRef.current) {
   const volume = (0, import_shim.useSyncExternalStore)(
-    (0, import_react3.useCallback)(
+    (0, import_react4.useCallback)(
       (onStoreChange) => {
@@ -553,3 +571,3 @@ audioElementRef.current?.addEventListener(
   const muted = (0, import_shim.useSyncExternalStore)(
-    (0, import_react3.useCallback)(
+    (0, import_react4.useCallback)(
       (onStoreChange) => {
@@ -573,3 +591,3 @@ audioElementRef.current?.addEventListener(
   const currentTime = (0, import_shim.useSyncExternalStore)(
-    (0, import_react3.useCallback)(
+    (0, import_react4.useCallback)(
       (onStoreChange) => {
@@ -595,3 +613,3 @@ audioElementRef.current?.addEventListener("timeupdate", onStoreChange);
   const duration = (0, import_shim.useSyncExternalStore)(
-    (0, import_react3.useCallback)(
+    (0, import_react4.useCallback)(
       (onStoreChange) => {
@@ -615,3 +633,3 @@ audioElementRef.current?.addEventListener(
   const bufferedSeconds = (0, import_shim.useSyncExternalStore)(
-    (0, import_react3.useCallback)(
+    (0, import_react4.useCallback)(
       (onStoreChange) => {
@@ -640,3 +658,3 @@ audioElementRef.current?.addEventListener("progress", onStoreChange);
   const isPlaying = (0, import_shim.useSyncExternalStore)(
-    (0, import_react3.useCallback)(
+    (0, import_react4.useCallback)(
       (onStoreChange) => {
@@ -659,3 +677,3 @@ audioElementRef.current?.addEventListener("play", onStoreChange);
   const isLoading = (0, import_shim.useSyncExternalStore)(
-    (0, import_react3.useCallback)(
+    (0, import_react4.useCallback)(
       (onStoreChange) => {
@@ -685,9 +703,2 @@ audioElementRef.current?.addEventListener("playing", onStoreChange);
   );
-  const playedPercentage = (0, import_react3.useMemo)(() => {
-    if (barState.isThumbDown)
-      return barState.percentage;
-    if (!currentTime || !duration)
-      return 0;
-    return currentTime / duration;
-  }, [barState.isThumbDown, barState.percentage, currentTime, duration]);
   return {
@@ -705,5 +716,3 @@ volume,
     seek,
-    isLoading,
-    progressBarRef,
-    playedPercentage
+    isLoading
   };
@@ -713,3 +722,3 @@ }
 // src/hooks/usePlaylist.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 
@@ -739,5 +748,5 @@ // src/utils/shuffle.ts
 }) {
-  const [loop, setLoop] = (0, import_react4.useState)(initialLoop);
-  const [order, setOrder] = (0, import_react4.useState)(initialOrder);
-  const list = (0, import_react4.useMemo)(() => {
+  const [loop, setLoop] = (0, import_react5.useState)(initialLoop);
+  const [order, setOrder] = (0, import_react5.useState)(initialOrder);
+  const list = (0, import_react5.useMemo)(() => {
     if (order === "list") {
@@ -748,4 +757,4 @@ return songs;
   }, [songs, order]);
-  const [currentSong, setCurrentSong] = (0, import_react4.useState)(list[0]);
-  (0, import_react4.useEffect)(() => {
+  const [currentSong, setCurrentSong] = (0, import_react5.useState)(list[0]);
+  (0, import_react5.useEffect)(() => {
     const sameSong = list.find(
@@ -760,3 +769,3 @@ (song) => getSongId(song) === getSongId(currentSong)
   }, [list, getSongId, currentSong]);
-  const nextSong = (0, import_react4.useMemo)(() => {
+  const nextSong = (0, import_react5.useMemo)(() => {
     const currentSongIndex = list.indexOf(currentSong);
@@ -770,3 +779,3 @@ if (currentSongIndex < list.length - 1) {
   }, [list, currentSong, loop]);
-  const next = (0, import_react4.useCallback)(() => {
+  const next = (0, import_react5.useCallback)(() => {
     if (nextSong) {
@@ -776,3 +785,3 @@ setCurrentSong(nextSong);
   }, [nextSong]);
-  const prioritize = (0, import_react4.useCallback)((song) => {
+  const prioritize = (0, import_react5.useCallback)((song) => {
     setCurrentSong(song);
@@ -794,8 +803,8 @@ }, []);
 // src/components/lyrics.tsx
-var import_react5 = require("react");
-var import_clsx2 = require("clsx");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_clsx3 = require("clsx");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function Lyrics({ lrcText, currentTime }) {
-  const lines = (0, import_react5.useMemo)(() => parseLrc(lrcText), [lrcText]);
-  const currentLineIndex = (0, import_react5.useMemo)(() => {
+  const lines = (0, import_react6.useMemo)(() => parseLrc(lrcText), [lrcText]);
+  const currentLineIndex = (0, import_react6.useMemo)(() => {
     for (let i = 0; i < lines.length; i++) {
@@ -810,3 +819,3 @@ const line = lines[i];
   }, [currentTime, lines]);
-  const transformStyle = (0, import_react5.useMemo)(() => {
+  const transformStyle = (0, import_react6.useMemo)(() => {
     return {
@@ -817,6 +826,6 @@ transform: `translateY(${-currentLineIndex * 16}px)`,
   }, [currentLineIndex]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "aplayer-lrc", children: lrcText ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "aplayer-lrc-contents", style: transformStyle, children: lines.map(([, text], index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "aplayer-lrc", children: lrcText ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "aplayer-lrc-contents", style: transformStyle, children: lines.map(([, text], index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "p",
     {
-      className: (0, import_clsx2.clsx)({
+      className: (0, import_clsx3.clsx)({
         "aplayer-lrc-current": index === currentLineIndex
@@ -858,3 +867,3 @@ }),
 // src/hooks/useThemeColor.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 
@@ -880,6 +889,6 @@ // src/utils/getImageColor.ts
 function useThemeColor(song, fallback = defaultThemeColor) {
-  const [coverColorMap, setCoverColorMap] = (0, import_react6.useState)(
+  const [coverColorMap, setCoverColorMap] = (0, import_react7.useState)(
     {}
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (shouldUseColorThief(song, fallback)) {
@@ -905,9 +914,9 @@ const coverUrl = song.cover;
 // src/hooks/useNotice.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/hooks/useSetTimeout.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 function useSetTimeout() {
-  const timeoutsRef = (0, import_react7.useRef)([]);
-  (0, import_react7.useEffect)(() => {
+  const timeoutsRef = (0, import_react8.useRef)([]);
+  (0, import_react8.useEffect)(() => {
     const timeouts = timeoutsRef.current;
@@ -920,3 +929,3 @@ return () => {
   }, []);
-  const safeSetTimeout = (0, import_react7.useCallback)((callback, ms) => {
+  const safeSetTimeout = (0, import_react8.useCallback)((callback, ms) => {
     const timeout = setTimeout(callback, ms);
@@ -931,6 +940,6 @@ timeoutsRef.current.push(timeout);
 function useNotice() {
-  const timerRef = (0, import_react8.useRef)();
-  const [notice, setNotice] = (0, import_react8.useState)({ text: "", style: { opacity: 0 } });
+  const timerRef = (0, import_react9.useRef)();
+  const [notice, setNotice] = (0, import_react9.useState)({ text: "", style: { opacity: 0 } });
   const setTimeout2 = useSetTimeout();
-  const showNotice = (0, import_react8.useCallback)(
+  const showNotice = (0, import_react9.useCallback)(
     (text, duration = 2e3) => {
@@ -951,3 +960,3 @@ if (timerRef.current) {
 // src/components/player.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function APlayer({
@@ -968,5 +977,5 @@ theme = defaultThemeColor,
   const [notice, showNotice] = useNotice();
-  const autoSkipTimeoutRef = (0, import_react9.useRef)();
+  const autoSkipTimeoutRef = (0, import_react10.useRef)();
   const setTimeout2 = useSetTimeout();
-  const cancelAutoSkip = (0, import_react9.useCallback)(() => {
+  const cancelAutoSkip = (0, import_react10.useCallback)(() => {
     if (autoSkipTimeoutRef.current) {
@@ -1000,3 +1009,3 @@ clearTimeout(autoSkipTimeoutRef.current);
   });
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (autoPlay) {
@@ -1006,4 +1015,4 @@ audioControl.playAudio(playlist.currentSong.url);
   }, []);
-  const isInitialEffectRef = (0, import_react9.useRef)(true);
-  (0, import_react9.useEffect)(() => {
+  const isInitialEffectRef = (0, import_react10.useRef)(true);
+  (0, import_react10.useEffect)(() => {
     if (isInitialEffectRef.current) {
@@ -1017,3 +1026,3 @@ isInitialEffectRef.current = false;
   }, [playlist.currentSong, audioControl.playAudio]);
-  const handlePlayButtonClick = (0, import_react9.useCallback)(() => {
+  const handlePlayButtonClick = (0, import_react10.useCallback)(() => {
     cancelAutoSkip();
@@ -1023,5 +1032,5 @@ audioControl.togglePlay(playlist.currentSong.url);
   const hasPlaylist = playlist.length > 1;
-  const [isPlaylistOpen, setPlaylistOpen] = (0, import_react9.useState)(() => hasPlaylist);
+  const [isPlaylistOpen, setPlaylistOpen] = (0, import_react10.useState)(() => hasPlaylist);
   const themeColor = useThemeColor(playlist.currentSong, theme);
-  const playlistAudioProp = (0, import_react9.useMemo)(
+  const playlistAudioProp = (0, import_react10.useMemo)(
     () => Array.isArray(audio) ? audio : [audio],
@@ -1031,3 +1040,3 @@ [audio]
   const { prioritize } = playlist;
-  const handlePlayAudioFromList = (0, import_react9.useCallback)(
+  const handlePlayAudioFromList = (0, import_react10.useCallback)(
     (audioInfo) => {
@@ -1039,6 +1048,6 @@ cancelAutoSkip();
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
-      className: (0, import_clsx3.clsx)("aplayer", {
+      className: (0, import_clsx4.clsx)("aplayer", {
         "aplayer-loading": audioControl.isLoading,
@@ -1049,4 +1058,4 @@ "aplayer-withlist": hasPlaylist,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "aplayer-body", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "aplayer-body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "div",
@@ -1058,6 +1067,6 @@ {
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 "div",
                 {
-                  className: (0, import_clsx3.clsx)(
+                  className: (0, import_clsx4.clsx)(
                     "aplayer-button",
@@ -1067,3 +1076,3 @@ audioControl.isPlaying ? "aplayer-pause" : "aplayer-play"
                   onClick: handlePlayButtonClick,
-                  children: audioControl.isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SvgPause, {}) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SvgPlay, {})
+                  children: audioControl.isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SvgPause, {}) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SvgPlay, {})
                 }
@@ -1073,6 +1082,6 @@ )
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "aplayer-info", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "aplayer-music", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "aplayer-title", children: playlist.currentSong?.name ?? "Audio name" }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "aplayer-author", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "aplayer-info", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "aplayer-music", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "aplayer-title", children: playlist.currentSong?.name ?? "Audio name" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "aplayer-author", children: [
                 " ",
@@ -1083,3 +1092,3 @@ "- ",
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               Lyrics,
@@ -1091,3 +1100,3 @@ {
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               PlaybackControls,
@@ -1103,2 +1112,3 @@ {
                 bufferedSeconds: audioControl.bufferedSeconds,
+                onSeek: (second) => audioControl.seek(second),
                 onToggleMenu: () => setPlaylistOpen((open) => !open),
@@ -1108,12 +1118,10 @@ order: playlist.order,
                 loop: playlist.loop,
-                onLoopChange: playlist.setLoop,
-                progressBarRef: audioControl.progressBarRef,
-                playedPercentage: audioControl.playedPercentage
+                onLoopChange: playlist.setLoop
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "aplayer-notice", style: notice.style, children: notice.text }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "aplayer-miniswitcher" })
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "aplayer-notice", style: notice.style, children: notice.text }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "aplayer-miniswitcher" })
         ] }),
-        hasPlaylist ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        hasPlaylist ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           Playlist,
@@ -1120,0 +1128,0 @@ {

package.json

 {
   "name": "aplayer-react",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "The missing APlayer for React applications",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

96264

increased by0.9%

Lines of code

2638

increased by0.34%

No dependency changes