aplayer-react - npm Package Compare versions

Comparing version 1.5.0 to 1.6.0-beta.1

dist/index.d.ts

@@ -31,2 +31,6 @@ declare type AudioInfo = {
     /**
+     * @default "normal"
+     */
+    appearance?: "normal" | "fixed";
+    /**
      * @default "all"
@@ -45,4 +49,4 @@ */
 };
-declare function APlayer({ theme, audio, volume, initialLoop, initialOrder, autoPlay, listMaxHeight, }: APlayerProps): JSX.Element;
+declare function APlayer({ theme, audio, appearance, volume, initialLoop, initialOrder, autoPlay, listMaxHeight, }: APlayerProps): JSX.Element;
 
 export { APlayer, ArtistInfo, AudioInfo };

dist/index.js

@@ -35,3 +35,3 @@ "use strict";
 var import_react11 = require("react");
-var import_clsx4 = require("clsx");
+var import_clsx5 = require("clsx");
 
@@ -48,3 +48,9 @@ // src/assets/play.svg
 
+// src/assets/right.svg
+var React3 = __toESM(require("react"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SvgRight = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M22 16l-10.105-10.6-1.895 1.987 8.211 8.613-8.211 8.612 1.895 1.988 8.211-8.613z" }) });
+
 // src/components/list.tsx
+var import_react = require("react");
 var import_clsx = require("clsx");
@@ -56,4 +62,3 @@
 // src/components/list.tsx
-var import_react = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function Playlist({
@@ -75,9 +80,23 @@ open,
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const listRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (listRef.current) {
+      const listElement = listRef.current;
+      listElement.style.maxHeight = `${Math.min(
+        listElement.scrollHeight,
+        listMaxHeight ?? Infinity
+      )}px`;
+      return () => {
+        listElement.removeAttribute("style");
+      };
+    }
+  }, [listMaxHeight]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
+      ref: listRef,
       className: (0, import_clsx.clsx)("aplayer-list", {
         "aplayer-list-hide": !open
       }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ol", { style: olStyle, children: audio.map((audioInfo, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ol", { style: olStyle, children: audio.map((audioInfo, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "li",
@@ -94,3 +113,3 @@ {
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "span",
@@ -104,5 +123,5 @@ {
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "aplayer-list-index", children: index + 1 }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "aplayer-list-title", children: audioInfo.name ?? "Audio name" }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "aplayer-list-author", children: renderArtist(audioInfo.artist) })
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "aplayer-list-index", children: index + 1 }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "aplayer-list-title", children: audioInfo.name ?? "Audio name" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "aplayer-list-author", children: renderArtist(audioInfo.artist) })
           ]
@@ -116,32 +135,46 @@ },
 
+// src/components/controller.tsx
+var import_react4 = require("react");
+var import_clsx3 = require("clsx");
+
 // src/assets/menu.svg
-var React3 = __toESM(require("react"));
-var import_jsx_runtime4 = require("react/jsx-runtime");
-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/order-list.svg
 var React4 = __toESM(require("react"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
-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" }) });
+var SvgMenu = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 22 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.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/order-random.svg
+// src/assets/skip.svg
 var React5 = __toESM(require("react"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
-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" }) });
+var SvgSkip = (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: "M25.468 6.947c-0.326-0.172-0.724-0.151-1.030 0.057l-6.438 4.38v-3.553c0-0.371-0.205-0.71-0.532-0.884-0.326-0.172-0.724-0.151-1.030 0.057l-12 8.164c-0.274 0.186-0.438 0.496-0.438 0.827s0.164 0.641 0.438 0.827l12 8.168c0.169 0.115 0.365 0.174 0.562 0.174 0.16 0 0.321-0.038 0.468-0.116 0.327-0.173 0.532-0.514 0.532-0.884v-3.556l6.438 4.382c0.169 0.115 0.365 0.174 0.562 0.174 0.16 0 0.321-0.038 0.468-0.116 0.327-0.173 0.532-0.514 0.532-0.884v-16.333c0-0.371-0.205-0.71-0.532-0.884z" }) });
 
-// src/assets/loop-all.svg
+// src/assets/lrc.svg
 var React6 = __toESM(require("react"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
-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" }) });
+var SvgLrc = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M26.667 5.333h-21.333c-0 0-0.001 0-0.001 0-1.472 0-2.666 1.194-2.666 2.666 0 0 0 0.001 0 0.001v-0 16c0 0 0 0.001 0 0.001 0 1.472 1.194 2.666 2.666 2.666 0 0 0.001 0 0.001 0h21.333c0 0 0.001 0 0.001 0 1.472 0 2.666-1.194 2.666-2.666 0-0 0-0.001 0-0.001v0-16c0-0 0-0.001 0-0.001 0-1.472-1.194-2.666-2.666-2.666-0 0-0.001 0-0.001 0h0zM5.333 16h5.333v2.667h-5.333v-2.667zM18.667 24h-13.333v-2.667h13.333v2.667zM26.667 24h-5.333v-2.667h5.333v2.667zM26.667 18.667h-13.333v-2.667h13.333v2.667z" }) });
 
-// src/assets/loop-one.svg
+// src/assets/order-list.svg
 var React7 = __toESM(require("react"));
 var import_jsx_runtime8 = require("react/jsx-runtime");
-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" }) });
+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" }) });
 
-// src/assets/loop-none.svg
+// src/assets/order-random.svg
 var React8 = __toESM(require("react"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
-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" }) });
+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" }) });
 
+// 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
@@ -171,5 +204,5 @@ function formatAudioDuration(seconds) {
 // 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" }) });
+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" }) });
 
@@ -197,3 +230,3 @@ // src/utils/computePercentage.ts
 // src/components/progress.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function ProgressBar({
@@ -235,3 +268,3 @@ themeColor,
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
@@ -242,4 +275,4 @@ {
       onMouseDown: handleMouseDown,
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "aplayer-bar", children: [
-        typeof bufferedPercentage !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "aplayer-bar", children: [
+        typeof bufferedPercentage !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "div",
@@ -251,3 +284,3 @@ {
         ) : null,
-        typeof progress !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        typeof progress !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "div",
@@ -260,3 +293,3 @@ {
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "span",
@@ -266,3 +299,3 @@ {
                 style: { backgroundColor: themeColor },
-                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "aplayer-loading-icon", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SvgLoading, {}) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "aplayer-loading-icon", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SvgLoading, {}) })
               }
@@ -277,5 +310,2 @@ )
 
-// src/components/controller.tsx
-var import_react4 = require("react");
-
 // src/components/volume.tsx
@@ -285,19 +315,19 @@ var import_react3 = 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" }) });
+var React14 = __toESM(require("react"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var SvgVolumeUp = (props) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 28 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime15.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 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" }) });
+var React15 = __toESM(require("react"));
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var SvgVolumeDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 28 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime16.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/assets/volume-off.svg
-var React13 = __toESM(require("react"));
-var import_jsx_runtime14 = require("react/jsx-runtime");
-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" }) });
+var React16 = __toESM(require("react"));
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var SvgVolumeOff = (props) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 28 32", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.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");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Volume({
@@ -330,4 +360,4 @@ themeColor,
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "aplayer-volume-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "aplayer-volume-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "button",
@@ -337,6 +367,6 @@ {
         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, {})
+        children: muted || !volume ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SvgVolumeOff, {}) : volume >= 1 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SvgVolumeUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SvgVolumeDown, {})
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
@@ -349,3 +379,3 @@ {
         onMouseDown: handleMouseDown,
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "aplayer-volume-bar", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "aplayer-volume-bar", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "div",
@@ -366,3 +396,3 @@ {
 // src/components/controller.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function PlaybackControls({
@@ -382,3 +412,9 @@ themeColor,
   onLoopChange,
-  onSeek
+  onSeek,
+  isPlaying,
+  onTogglePlay,
+  onSkipForward,
+  onSkipBack,
+  showLyrics = true,
+  onToggleLyrics
 }) {
@@ -400,4 +436,4 @@ const handleOrderButtonClick = (0, import_react4.useCallback)(() => {
   }, [loop, onLoopChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "aplayer-controller", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "aplayer-controller", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       ProgressBar,
@@ -411,12 +447,19 @@ {
     ),
-    /* @__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_runtime19.jsxs)("div", { className: "aplayer-time", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "aplayer-time-inner", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "aplayer-ptime", children: formatAudioDuration(currentTime) }),
         " / ",
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "aplayer-dtime", children: formatAudioDuration(audioDurationSeconds) })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "aplayer-dtime", children: formatAudioDuration(audioDurationSeconds) })
       ] }),
-      /* @__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)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "aplayer-icon aplayer-icon-back", onClick: onSkipBack, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SvgSkip, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "aplayer-icon aplayer-icon-play", onClick: onTogglePlay, children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SvgPause, {}) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SvgPlay, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "span",
+        {
+          className: "aplayer-icon aplayer-icon-forward",
+          onClick: onSkipForward,
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SvgSkip, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Volume,
@@ -431,3 +474,3 @@ {
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "button",
@@ -437,6 +480,6 @@ {
           onClick: handleOrderButtonClick,
-          children: { list: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SvgOrderList, {}), random: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SvgOrderRandom, {}) }[order]
+          children: { list: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SvgOrderList, {}), random: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SvgOrderRandom, {}) }[order]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "button",
@@ -447,9 +490,9 @@ {
           children: {
-            all: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SvgLoopAll, {}),
-            one: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SvgLoopOne, {}),
-            none: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SvgLoopNone, {})
+            all: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SvgLoopAll, {}),
+            one: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SvgLoopOne, {}),
+            none: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SvgLoopNone, {})
           }[loop]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "button",
@@ -459,6 +502,16 @@ {
           onClick: () => onToggleMenu?.(),
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SvgMenu, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SvgMenu, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { className: "aplayer-icon aplayer-icon-lrc" })
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "button",
+        {
+          type: "button",
+          className: (0, import_clsx3.clsx)("aplayer-icon aplayer-icon-lrc", {
+            "aplayer-icon-lrc-inactivity": !showLyrics
+          }),
+          onClick: onToggleLyrics,
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SvgLrc, {})
+        }
+      )
     ] })
@@ -788,2 +841,11 @@ ] });
   }, [nextSong]);
+  const previous = (0, import_react6.useCallback)(() => {
+    setCurrentSong((prev) => {
+      const currentSongIndex = list.indexOf(prev);
+      if (currentSongIndex > 0) {
+        return list[currentSongIndex - 1];
+      }
+      return prev;
+    });
+  }, [list]);
   const prioritize = (0, import_react6.useCallback)((song) => {
@@ -796,2 +858,3 @@ setCurrentSong(song);
     next,
+    previous,
     prioritize,
@@ -808,5 +871,5 @@ order,
 var import_react7 = require("react");
-var import_clsx3 = require("clsx");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-function Lyrics({ lrcText, currentTime }) {
+var import_clsx4 = require("clsx");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function Lyrics({ show, lrcText, currentTime }) {
   const lines = (0, import_react7.useMemo)(() => parseLrc(lrcText), [lrcText]);
@@ -829,12 +892,20 @@ const currentLineIndex = (0, import_react7.useMemo)(() => {
   }, [currentLineIndex]);
-  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",
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
     {
-      className: (0, import_clsx3.clsx)({
-        "aplayer-lrc-current": index === currentLineIndex
+      className: (0, import_clsx4.clsx)("aplayer-lrc", {
+        "aplayer-lrc-hide": !show
       }),
-      children: text
-    },
-    index
-  )) }) : null });
+      children: lrcText ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "aplayer-lrc-contents", style: transformStyle, children: lines.map(([, text], index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "p",
+        {
+          className: (0, import_clsx4.clsx)({
+            "aplayer-lrc-current": index === currentLineIndex
+          }),
+          children: text
+        },
+        index
+      )) }) : null
+    }
+  );
 }
@@ -958,6 +1029,7 @@ function parseLrc(lrc_s) {
 // src/components/player.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function APlayer({
   theme = defaultThemeColor,
   audio,
+  appearance = "normal",
   volume = 0.7,
@@ -1048,30 +1120,46 @@ initialLoop,
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { href: artist.url, target: "_blank", rel: "noreferrer", children: artist.name ?? "Audio artist" });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("a", { href: artist.url, target: "_blank", rel: "noreferrer", children: artist.name ?? "Audio artist" });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  const [mini, setMini] = (0, import_react11.useState)(false);
+  const [displayLyrics, setDisplayLyrics] = (0, import_react11.useState)(true);
+  const bodyRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
+    if (appearance === "fixed") {
+      if (bodyRef.current) {
+        const bodyElement = bodyRef.current;
+        bodyElement.style.width = bodyElement.offsetWidth - 18 + "px";
+        return () => {
+          bodyElement.removeAttribute("style");
+        };
+      }
+    }
+  }, [appearance]);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
-      className: (0, import_clsx4.clsx)("aplayer", {
+      className: (0, import_clsx5.clsx)("aplayer", {
+        "aplayer-fixed": appearance === "fixed",
         "aplayer-loading": audioControl.isLoading,
         "aplayer-withlist": hasPlaylist,
-        "aplayer-withlrc": Boolean(playlist.currentSong.lrc)
+        "aplayer-withlrc": Boolean(playlist.currentSong.lrc) && appearance !== "fixed",
+        "aplayer-narrow": mini
       }),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "aplayer-body", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref: bodyRef, className: "aplayer-body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "div",
             {
               className: "aplayer-pic",
+              onClick: handlePlayButtonClick,
               style: {
                 backgroundImage: `url("${playlist.currentSong?.cover}")`
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "div",
                 {
-                  className: (0, import_clsx4.clsx)(
+                  className: (0, import_clsx5.clsx)(
                     "aplayer-button",
                     audioControl.isPlaying ? "aplayer-pause" : "aplayer-play"
                   ),
-                  onClick: handlePlayButtonClick,
-                  children: audioControl.isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SvgPause, {}) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SvgPlay, {})
+                  children: audioControl.isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SvgPause, {}) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SvgPlay, {})
                 }
@@ -1081,6 +1169,6 @@ )
           ),
-          /* @__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: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "aplayer-info", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "aplayer-music", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "aplayer-title", children: playlist.currentSong?.name ?? "Audio name" }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "aplayer-author", children: [
                 " ",
@@ -1091,5 +1179,6 @@ "- ",
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            appearance === "fixed" ? null : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               Lyrics,
               {
+                show: displayLyrics,
                 lrcText: playlist.currentSong.lrc,
@@ -1099,3 +1188,3 @@ currentTime: audioControl.currentTime ?? 0
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               PlaybackControls,
@@ -1116,10 +1205,31 @@ {
                 loop: playlist.loop,
-                onLoopChange: playlist.setLoop
+                onLoopChange: playlist.setLoop,
+                isPlaying: audioControl.isPlaying ?? false,
+                onTogglePlay: handlePlayButtonClick,
+                onSkipForward: () => {
+                  if (playlist.hasNextSong) {
+                    playlist.next();
+                  }
+                },
+                onSkipBack: () => {
+                  playlist.previous();
+                },
+                showLyrics: displayLyrics,
+                onToggleLyrics: () => {
+                  setDisplayLyrics((prev) => !prev);
+                }
               }
             )
           ] }),
-          /* @__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" })
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "aplayer-notice", style: notice.style, children: notice.text }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "div",
+            {
+              className: "aplayer-miniswitcher",
+              onClick: () => setMini((prev) => !prev),
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { className: "aplayer-icon", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SvgRight, {}) })
+            }
+          )
         ] }),
-        hasPlaylist ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        hasPlaylist ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Playlist,
@@ -1134,3 +1244,11 @@ {
           }
-        ) : null
+        ) : null,
+        appearance === "fixed" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          Lyrics,
+          {
+            show: displayLyrics,
+            lrcText: playlist.currentSong.lrc,
+            currentTime: audioControl.currentTime ?? 0
+          }
+        )
       ]
@@ -1137,0 +1255,0 @@ }

package.json

 {
   "name": "aplayer-react",
-  "version": "1.5.0",
+  "version": "1.6.0-beta.1",
   "description": "The missing APlayer for React applications",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

111257

increased by13.69%

Lines of code

3042

increased by13.3%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes