aplayer-react - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/index.js

@@ -166,3 +166,3 @@ "use strict";
 // src/components/progress.tsx
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 
@@ -176,18 +176,4 @@ // src/assets/loading.svg
 var import_jsx_runtime14 = require("react/jsx-runtime");
-function ProgressBar({
-  themeColor,
-  bufferedPercentage,
-  playedPercentage,
-  onSeek
-}) {
-  const handleMouseDown = (0, import_react.useCallback)(
-    (e) => {
-      const barDimensions = e.currentTarget.getBoundingClientRect();
-      const deltaX = e.clientX - barDimensions.x;
-      const percentage = deltaX / barDimensions.width;
-      onSeek?.(percentage);
-    },
-    [onSeek]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "aplayer-bar-wrap", onMouseDown: handleMouseDown, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "aplayer-bar", children: [
+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)(
@@ -219,3 +205,3 @@ "div",
   ] }) });
-}
+});
 
@@ -233,3 +219,2 @@ // src/components/controller.tsx
   bufferedSeconds,
-  onSeek,
   onToggleMenu,
@@ -240,3 +225,5 @@ onToggleMuted,
   loop,
-  onLoopChange
+  onLoopChange,
+  progressBarRef,
+  playedPercentage
 }) {
@@ -275,6 +262,6 @@ const handleVolumeBarMouseDown = (0, import_react2.useCallback)(
       {
+        ref: progressBarRef,
         themeColor,
-        playedPercentage: currentTime / audioDurationSeconds,
-        bufferedPercentage: bufferedSeconds / audioDurationSeconds,
-        onSeek: (percentage) => onSeek?.(percentage * audioDurationSeconds)
+        playedPercentage,
+        bufferedPercentage: bufferedSeconds / audioDurationSeconds
       }
@@ -354,2 +341,15 @@ ),
 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) {
@@ -399,4 +399,72 @@ const audioElementRef = (0, import_react3.useRef)();
 }
+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)(
@@ -598,2 +666,9 @@ async (src) => {
   );
+  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 {
@@ -611,3 +686,5 @@ volume,
     seek,
-    isLoading
+    isLoading,
+    progressBarRef,
+    playedPercentage
   };
@@ -978,3 +1055,2 @@ }
                 bufferedSeconds: audioControl.bufferedSeconds,
-                onSeek: (second) => audioControl.seek(second),
                 onToggleMenu: () => setPlaylistOpen((open) => !open),
@@ -984,3 +1060,5 @@ order: playlist.order,
                 loop: playlist.loop,
-                onLoopChange: playlist.setLoop
+                onLoopChange: playlist.setLoop,
+                progressBarRef: audioControl.progressBarRef,
+                playedPercentage: audioControl.playedPercentage
               }
@@ -987,0 +1065,0 @@ )

package.json

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

95015

increased by6.16%

Lines of code

2617

increased by6.43%

No dependency changes