react-modern-audio-player 0.0.3 → 1.1.1

package/dist/index.es.js

@@ -7923,7 +7923,6 @@ const useNonNullableContext = (context) => {
     throw new Error(`Cannot find ${context}Provider`);
   return state;
 };
-const interfacePlacementMaxLength = 10;
 const defaultInterfacePlacement = {
   templateArea: {
     artwork: "row1-1",
@@ -8023,7 +8022,7 @@ const SpectrumProvider = ({
     theme: $bf24a13e98395dd3$export$bca14c5b3b88a9c9,
     width: "100%",
     position: contextPlayerPlacement && "fixed",
-    UNSAFE_className: "rs-audio-player-provider",
+    UNSAFE_className: "rm-audio-player-provider",
     ...placementState,
     ...rootContainerProps,
     children
@@ -8223,7 +8222,8 @@ const AudioPlayerProvider = ({
       volume: 1
     },
     activeUI: {
-      playButton: true
+      playButton: true,
+      volumeSlider: true
     },
     playListPlacement: "bottom",
     interfacePlacement: {
@@ -8243,141 +8243,43 @@ const AudioPlayerProvider = ({
 var vars = "";
 const GlobalStyle = createGlobalStyle`
 
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-button,
-video {
-  margin: 0;
-  padding: 0;
-  font: inherit;
-  font-size: 100%;
-  vertical-align: baseline;
-  border: 0;
-}
-/* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
-}
-body {
-  line-height: 1;
-}
-ol,
-ul {
-  list-style: none;
-}
-blockquote,
-q {
-  quotes: none;
-}
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: '';
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
+.rm-audio-player-provider {
+  * {
+    box-sizing: border-box;
+    font: inherit;
+    font-size: 100%;
+  }
 
-button{
+  ol,
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  blockquote,
+  q {
+    quotes: none;
+  }
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: '';
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  button {
+    margin: 0;
+    padding: 0;
     background: transparent;
     cursor: pointer;
-}
-
-* {
-  box-sizing: border-box;
-}
-`;
+    vertical-align: baseline;
+    border: 0;
+  }
+}`;
 function $parcel$export$1(e, n2, v, s) {
   Object.defineProperty(e, n2, { get: v, set: s, enumerable: true, configurable: true });
 }
@@ -8524,7 +8426,7 @@ const Basic = () => {
     });
   }, [audioRef.current, audioPlayerDispatch]);
   return /* @__PURE__ */ jsx("audio", {
-    id: "rs-audio-player-audio",
+    id: "rm-audio-player-audio",
     autoPlay: curAudioState.isPlaying,
     ref: audioRef,
     src: curPlayedAudioData.src,
@@ -8537,7 +8439,7 @@ const useVariableColor = (variableColors) => {
   useLayoutEffect(() => {
     const parsedColors = Object.entries(variableColors).reduce((acc, [key, varName]) => ({
       ...acc,
-      [key]: window.getComputedStyle(document.getElementsByClassName("rs-audio-player-provider")[0]).getPropertyValue(`${varName}`)
+      [key]: window.getComputedStyle(document.getElementsByClassName("rm-audio-player-provider")[0]).getPropertyValue(`${varName}`)
     }), {});
     colorsRef.current = parsedColors;
   }, [variableColors]);
@@ -12830,8 +12732,8 @@ const WaveSurferAudio = () => {
     elementRefs
   } = useNonNullableContext(audioPlayerStateContext);
   const colorsRef = useVariableColor({
-    progressColor: "--rs-audio-player-waveform-bar",
-    waveColor: "--rs-audio-player-waveform-background"
+    progressColor: "--rm-audio-player-waveform-bar",
+    waveColor: "--rm-audio-player-waveform-background"
   });
   useEffect(() => {
     if ((elementRefs == null ? void 0 : elementRefs.waveformInst) || !colorsRef.current)
@@ -12839,13 +12741,13 @@ const WaveSurferAudio = () => {
     const waveSurfer = WaveSurfer.create({
       barWidth: 1,
       cursorWidth: 2,
-      container: "#rs-waveform",
+      container: "#rm-waveform",
       backend: "WebAudio",
       height: 80,
       progressColor: `${colorsRef.current.progressColor}`,
       responsive: true,
       waveColor: `${colorsRef.current.waveColor}`,
-      cursorColor: "var(--rs-audio-player-waveform-cursor)"
+      cursorColor: "var(--rm-audio-player-waveform-cursor)"
     });
     audioPlayerDispatch({
       type: "SET_ELEMENT_REFS",
@@ -12981,11 +12883,9 @@ const StyledPlayBtn = styled(StyledBtn)`
   width: 35px;
 `;
 const PlayBtn = () => {
-  var _a2;
   const {
     curAudioState,
-    customIcons,
-    activeUI
+    customIcons
   } = useNonNullableContext(audioPlayerStateContext);
   const audioPlayerDispatch = useNonNullableContext(audioPlayerDispatchContext);
   const onClick = () => audioPlayerDispatch({
@@ -13002,11 +12902,11 @@ const PlayBtn = () => {
       customIcon: customIcons == null ? void 0 : customIcons.play
     });
   }, [curAudioState.isPlaying, customIcons == null ? void 0 : customIcons.pause, customIcons == null ? void 0 : customIcons.play]);
-  return ((_a2 = activeUI.playButton) != null ? _a2 : activeUI.all) ? /* @__PURE__ */ jsx(StyledPlayBtn, {
+  return /* @__PURE__ */ jsx(StyledPlayBtn, {
     onClick,
     className: "play-button",
     children: PlayIcon
-  }) : null;
+  });
 };
 function ImPrevious(props) {
   return GenIcon({ "tag": "svg", "attr": { "version": "1.1", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5z" } }, { "tag": "path", "attr": { "d": "M7 8l4-3v6z" } }, { "tag": "path", "attr": { "d": "M5 5h2v6h-2v-6z" } }] })(props);
@@ -13015,12 +12915,11 @@ function ImNext(props) {
   return GenIcon({ "tag": "svg", "attr": { "version": "1.1", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M8 0c4.418 0 8 3.582 8 8s-3.582 8-8 8-8-3.582-8-8 3.582-8 8-8zM8 14.5c3.59 0 6.5-2.91 6.5-6.5s-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5 2.91 6.5 6.5 6.5z" } }, { "tag": "path", "attr": { "d": "M9 8l-4-3v6z" } }, { "tag": "path", "attr": { "d": "M11 5h-2v6h2v-6z" } }] })(props);
 }
 const PrevNnextBtn = ({
-  type
+  type,
+  visible
 }) => {
-  var _a2;
   const {
-    customIcons,
-    activeUI
+    customIcons
   } = useNonNullableContext(audioPlayerStateContext);
   const audioPlayerDispatch = useNonNullableContext(audioPlayerDispatchContext);
   const onClickBtn = () => {
@@ -13050,7 +12949,7 @@ const PrevNnextBtn = ({
     }
     return null;
   }, [customIcons == null ? void 0 : customIcons.next, customIcons == null ? void 0 : customIcons.prev, type]);
-  return ((_a2 = activeUI.prevNnext) != null ? _a2 : activeUI.all) ? /* @__PURE__ */ jsx(StyledBtn, {
+  return visible ? /* @__PURE__ */ jsx(StyledBtn, {
     onClick: onClickBtn,
     className: "prev-n-next-button",
     children: PrevNnextIcon
@@ -13078,11 +12977,9 @@ function TbVolume(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "desc", "attr": {}, "child": [] }, { "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M15 8a5 5 0 0 1 0 8" } }, { "tag": "path", "attr": { "d": "M17.7 5a9 9 0 0 1 0 14" } }, { "tag": "path", "attr": { "d": "M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a0.8 .8 0 0 1 1.5 .5v14a0.8 .8 0 0 1 -1.5 .5l-3.5 -4.5" } }] })(props);
 }
 const RepeatTypeBtn = () => {
-  var _a2;
   const {
     curAudioState,
-    customIcons,
-    activeUI
+    customIcons
   } = useNonNullableContext(audioPlayerStateContext);
   const audioPlayerDispatch = useNonNullableContext(audioPlayerDispatchContext);
   const onClick = useCallback(() => {
@@ -13137,11 +13034,11 @@ const RepeatTypeBtn = () => {
         });
     }
   }, [curAudioState.repeatType, customIcons == null ? void 0 : customIcons.repeatAll, customIcons == null ? void 0 : customIcons.repeatNone, customIcons == null ? void 0 : customIcons.repeatOne, customIcons == null ? void 0 : customIcons.repeatShuffle]);
-  return ((_a2 = activeUI.repeatType) != null ? _a2 : activeUI.all) ? /* @__PURE__ */ jsx(StyledBtn, {
+  return /* @__PURE__ */ jsx(StyledBtn, {
     onClick,
     className: "repeat-button",
     children: RepeatIcon
-  }) : null;
+  });
 };
 const PlayListTriggerBtn = ({
   isOpen
@@ -13153,7 +13050,7 @@ const PlayListTriggerBtn = ({
     children: /* @__PURE__ */ jsx(Icon, {
       render: /* @__PURE__ */ jsx(MdPlaylistPlay, {
         size: "100%",
-        color: isOpen ? "var(--rs-audio-player-sortable-list-button-active)" : void 0
+        color: isOpen ? "var(--rm-audio-player-sortable-list-button-active)" : void 0
       }),
       customIcon: customIcons == null ? void 0 : customIcons.playList
     })
@@ -13707,7 +13604,8 @@ const SortableListItem = (props) => {
   });
 };
 const SortableListItemContainer = styled.li`
-  border: 2px solid transparent;
+  border-top: 2px solid transparent;
+  border-bottom: 2px solid transparent;
   transition: all 0.3s ease-in-out;
 
   & * {
@@ -13816,7 +13714,7 @@ const ListItemContainer = styled.div`
   align-items: center;
   padding: 10px 20px;
   &.curPlayed {
-    background: var(--rs-audio-player-selected-list-item-background);
+    background: var(--rm-audio-player-selected-list-item-background);
   }
   .list-item-contents-wrapper {
     width: 100%;
@@ -13945,12 +13843,8 @@ const PlayListContainer = styled.div`
   }
 `;
 const SortablePlayList = () => {
-  var _a2;
-  const {
-    activeUI
-  } = useNonNullableContext(audioPlayerStateContext);
   const [isOpen, setIsOpen] = useState(false);
-  return ((_a2 = activeUI.playList) != null ? _a2 : activeUI.all) ? /* @__PURE__ */ jsxs(Drawer, {
+  return /* @__PURE__ */ jsxs(Drawer, {
     onOpenChange: setIsOpen,
     children: [/* @__PURE__ */ jsx(Drawer.Trigger, {
       children: /* @__PURE__ */ jsx(PlayListTriggerBtn, {
@@ -13962,7 +13856,7 @@ const SortablePlayList = () => {
         setIsOpen
       })
     })]
-  }) : null;
+  });
 };
 const useBarProgress = () => {
   const { elementRefs } = useNonNullableContext(audioPlayerStateContext);
@@ -14011,14 +13905,14 @@ const BarProgress = () => {
     className: "bar-progress-wrapper",
     ...eventProps,
     children: [/* @__PURE__ */ jsx("div", {
-      className: "rs-player-progress-bar",
+      className: "rm-player-progress-bar",
       ref: progressBarRef,
       children: /* @__PURE__ */ jsx("div", {
-        className: "rs-player-progress",
+        className: "rm-player-progress",
         ref: progressValueRef
       })
     }), /* @__PURE__ */ jsx("div", {
-      className: "rs-player-progress-handle",
+      className: "rm-player-progress-handle",
       ref: progressHandleRef
     })]
   });
@@ -14031,31 +13925,31 @@ const BarProgressWrapper = styled.div`
   cursor: pointer;
   position: relative;
   align-items: center;
-  .rs-player-progress-bar {
+  .rm-player-progress-bar {
     position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
-    background-color: var(--rs-audio-player-progress-bar-background);
+    background-color: var(--rm-audio-player-progress-bar-background);
   }
-  .rs-player-progress {
+  .rm-player-progress {
     position: absolute;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--rs-audio-player-progress-bar);
+    background-color: var(--rm-audio-player-progress-bar);
     transform-origin: 0 0;
     transform: scaleX(0);
   }
   &:hover {
-    .rs-player-progress-handle {
+    .rm-player-progress-handle {
       opacity: 1;
     }
   }
-  .rs-player-progress-handle {
+  .rm-player-progress-handle {
     position: absolute;
     left: -4px;
-    background-color: var(--rs-audio-player-progress-bar);
+    background-color: var(--rm-audio-player-progress-bar);
     border-radius: 100%;
     height: 8px;
     width: 8px;
@@ -14066,7 +13960,7 @@ const BarProgressWrapper = styled.div`
 const WaveformWrapper = styled.div`
   display: flex;
   width: 100%;
-  #rs-waveform {
+  #rm-waveform {
     width: 100%;
     wave {
       cursor: pointer !important;
@@ -14077,7 +13971,7 @@ const WaveformProgress = () => {
   return /* @__PURE__ */ jsx(WaveformWrapper, {
     className: "waveform-wrapper",
     children: /* @__PURE__ */ jsx("div", {
-      id: "rs-waveform"
+      id: "rm-waveform"
     })
   });
 };
@@ -14089,25 +13983,28 @@ const Progress = () => {
   const {
     activeUI
   } = useNonNullableContext(audioPlayerStateContext);
-  const active = activeUI.progress !== void 0 ? !!activeUI.progress : activeUI.all;
   const CurProgress = useMemo(() => {
     if (activeUI.progress === "waveform")
       return /* @__PURE__ */ jsx(WaveformProgress, {});
     return /* @__PURE__ */ jsx(BarProgress, {});
   }, [activeUI.progress]);
-  return active ? /* @__PURE__ */ jsx(ProgressContainer, {
+  return /* @__PURE__ */ jsx(ProgressContainer, {
     className: "progress-container",
     children: CurProgress
-  }) : null;
+  });
 };
 const Grid = $994c48bfb00b620b$export$ef2184bd89960b14;
-const GridItem = forwardRef((viewProps, ref) => {
+const GridItem = forwardRef(({
+  children,
+  visible = true,
+  ...viewProps
+}, ref) => {
   return /* @__PURE__ */ jsx($b9606c0c41d55371$export$27a5bd065ad55220, {
     justifySelf: "center",
-    padding: "0 5px",
+    padding: visible ? "0 5px" : void 0,
     ref,
     ...viewProps,
-    children: viewProps.children
+    children: visible && children
   });
 });
 GridItem.displayName = "GridItem";
@@ -14165,7 +14062,7 @@ const VolumeSliderContainer = styled.div`
   contentPlacement,
   volumeValue
 }) => css`
-    --rs-audio-player-volume-value: ${volumeValue}%;
+    --rm-audio-player-volume-value: ${volumeValue}%;
     position: relative;
     height: 119px;
     width: 32px;
@@ -14178,8 +14075,8 @@ const VolumeSliderContainer = styled.div`
 
     .volume-panel-wrapper {
       width: 30px;
-      background-color: var(--rs-audio-player-volume-panel-background);
-      border: 1px solid var(--rs-audio-player-volume-panel-border);
+      background-color: var(--rm-audio-player-volume-panel-background);
+      border: 1px solid var(--rm-audio-player-volume-panel-border);
       border-radius: 5px;
       height: 118px;
       box-shadow: 0 2px 4px rgb(0 0 0 /10%);
@@ -14194,8 +14091,8 @@ const VolumeSliderContainer = styled.div`
         bottom: -10px;
         left: 7.9px;
         border-color: transparent transparent
-          var(--rs-audio-player-volume-panel-border)
-          var(--rs-audio-player-volume-panel-border);
+          var(--rm-audio-player-volume-panel-border)
+          var(--rm-audio-player-volume-panel-border);
         border-style: solid;
         border-width: 5px;
         box-shadow: -3px 3px 4px rgb(0 0 0 / 10%);
@@ -14215,8 +14112,8 @@ const VolumeSliderContainer = styled.div`
         bottom: -8px;
         left: 9px;
         border-color: transparent transparent
-          var(--rs-audio-player-volume-panel-background)
-          var(--rs-audio-player-volume-panel-background);
+          var(--rm-audio-player-volume-panel-background)
+          var(--rm-audio-player-volume-panel-background);
         border-style: solid;
         border-width: 4px;
         z-index: 1;
@@ -14242,7 +14139,7 @@ const VolumeSliderContainer = styled.div`
         height: 2px;
         width: 92px;
         -webkit-appearance: none;
-        background-color: var(--rs-audio-player-volume-background);
+        background-color: var(--rm-audio-player-volume-background);
         outline-color: transparent;
         transform-origin: 75px 75px;
         transform: rotate(-90deg);
@@ -14258,7 +14155,7 @@ const VolumeSliderContainer = styled.div`
         height: 16px;
         border-radius: 12px;
         overflow: visible;
-        background: var(--rs-audio-player-volume-thumb);
+        background: var(--rm-audio-player-volume-thumb);
       }
 
       &::-moz-range-thumb {
@@ -14266,7 +14163,7 @@ const VolumeSliderContainer = styled.div`
         height: 16px;
         border-radius: 12px;
         overflow: visible;
-        background: var(--rs-audio-player-volume-thumb);
+        background: var(--rm-audio-player-volume-thumb);
         border: none;
       }
       &::-moz-range-track {
@@ -14284,9 +14181,9 @@ const VolumeSliderContainer = styled.div`
         background-size: 100% 3px;
         background-image: linear-gradient(
           90deg,
-          var(--rs-audio-player-volume-fill) var(--rs-audio-player-volume-value),
-          var(--rs-audio-player-volume-track)
-            var(--rs-audio-player-volume-value)
+          var(--rm-audio-player-volume-fill) var(--rm-audio-player-volume-value),
+          var(--rm-audio-player-volume-track)
+            var(--rm-audio-player-volume-value)
         );
       }
 
@@ -14305,9 +14202,9 @@ const VolumeSliderContainer = styled.div`
         background-size: 100% 3px;
         background-image: linear-gradient(
           90deg,
-          var(--rs-audio-player-volume-fill) var(--rs-audio-player-volume-value),
-          var(--rs-audio-player-volume-track)
-            var(--rs-audio-player-volume-value)
+          var(--rm-audio-player-volume-fill) var(--rm-audio-player-volume-value),
+          var(--rm-audio-player-volume-track)
+            var(--rm-audio-player-volume-value)
         );
       }
     }
@@ -14367,6 +14264,7 @@ const Dropdown = ({
   children,
   isOpen: isOpenProp,
   placement = "bottom",
+  disabled = false,
   onOpenChange
 }) => {
   const dropdownRef = useRef(null);
@@ -14397,7 +14295,7 @@ const Dropdown = ({
         onOpenChange
       },
       children: /* @__PURE__ */ jsxs(Fragment, {
-        children: [trigger, content]
+        children: [trigger, !disabled && content]
       })
     })
   });
@@ -14474,7 +14372,7 @@ const DropdownContent = ({
     onExited,
     onEntered,
     children: Content
-  }) : Content;
+  }) : isOpen ? Content : null;
 };
 const DropdownContentContainer = styled.div`
   ${({
@@ -14501,11 +14399,12 @@ const DropdownTrigger = ({
 Dropdown.Content = DropdownContent;
 Dropdown.Trigger = DropdownTrigger;
 const Volume = () => {
-  var _a2;
+  const triggerRef = useRef(null);
   const {
-    activeUI
+    activeUI: {
+      volumeSlider
+    }
   } = useNonNullableContext(audioPlayerStateContext);
-  const triggerRef = useRef(null);
   const [volumeSliderPlacement, setVolumeSliderPlacement] = useState("bottom");
   useEffect(() => {
     if (triggerRef.current) {
@@ -14518,9 +14417,10 @@ const Volume = () => {
       setVolumeSliderPlacement(placementValidation());
     }
   }, [triggerRef.current]);
-  return ((_a2 = activeUI.volume) != null ? _a2 : activeUI.all) ? /* @__PURE__ */ jsxs(Dropdown, {
+  return /* @__PURE__ */ jsxs(Dropdown, {
     placement: volumeSliderPlacement,
     triggerType: "hover",
+    disabled: volumeSlider,
     children: [/* @__PURE__ */ jsx(Dropdown.Trigger, {
       children: /* @__PURE__ */ jsx(VolumeTriggerBtn, {
         ref: triggerRef
@@ -14530,38 +14430,46 @@ const Volume = () => {
         placement: volumeSliderPlacement
       })
     })]
-  }) : null;
+  });
 };
 const Controller = () => {
-  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
   const {
-    interfacePlacement
+    interfacePlacement,
+    activeUI
   } = useNonNullableContext(audioPlayerStateContext);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(Grid.Item, {
       gridArea: ((_a2 = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _a2.progress) || ((_b = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _b.progress) || defaultInterfacePlacement.templateArea.progress,
       width: "100%",
+      visible: Boolean(activeUI.progress !== void 0 ? activeUI.progress : activeUI.all),
       children: /* @__PURE__ */ jsx(Progress, {})
     }), /* @__PURE__ */ jsx(Grid.Item, {
       gridArea: ((_c = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _c.repeatType) || ((_d = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _d.repeatType) || defaultInterfacePlacement.templateArea.repeatType,
+      visible: Boolean((_e = activeUI.repeatType) != null ? _e : activeUI.all),
       children: /* @__PURE__ */ jsx(RepeatTypeBtn, {})
     }), /* @__PURE__ */ jsx(Grid.Item, {
-      gridArea: ((_e = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _e.playButton) || ((_f = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _f.playButton) || defaultInterfacePlacement.templateArea.playButton,
+      gridArea: ((_f = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _f.playButton) || ((_g = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _g.playButton) || defaultInterfacePlacement.templateArea.playButton,
+      visible: Boolean((_h = activeUI.playButton) != null ? _h : activeUI.all),
       children: /* @__PURE__ */ jsxs($884c64d19340d345$export$f51f4c4ede09e011, {
         UNSAFE_className: "btn-wrapper",
         alignItems: "center",
         gap: "10px",
         children: [/* @__PURE__ */ jsx(PrevNnextBtn, {
-          type: "prev"
+          type: "prev",
+          visible: Boolean((_i = activeUI.prevNnext) != null ? _i : activeUI.all)
         }), /* @__PURE__ */ jsx(PlayBtn, {}), /* @__PURE__ */ jsx(PrevNnextBtn, {
-          type: "next"
+          type: "next",
+          visible: Boolean((_j = activeUI.prevNnext) != null ? _j : activeUI.all)
         })]
       })
     }), /* @__PURE__ */ jsx(Grid.Item, {
-      gridArea: ((_g = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _g.volume) || ((_h = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _h.volume) || defaultInterfacePlacement.templateArea.volume,
+      gridArea: ((_k = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _k.volume) || ((_l = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _l.volume) || defaultInterfacePlacement.templateArea.volume,
+      visible: Boolean((_m = activeUI.volume) != null ? _m : activeUI.all),
       children: /* @__PURE__ */ jsx(Volume, {})
     }), /* @__PURE__ */ jsx(Grid.Item, {
-      gridArea: ((_i = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _i.playList) || ((_j = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _j.playList) || defaultInterfacePlacement.templateArea.playList,
+      gridArea: ((_n = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _n.playList) || ((_o = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _o.playList) || defaultInterfacePlacement.templateArea.playList,
+      visible: Boolean((_p = activeUI.playList) != null ? _p : activeUI.all),
       children: /* @__PURE__ */ jsx(SortablePlayList, {})
     })]
   });
@@ -14579,19 +14487,18 @@ const ArtworkContainer = styled.div`
 const Artwork = () => {
   var _a2;
   const {
-    activeUI,
     playList,
     curIdx,
     coverImgsCss
   } = useNonNullableContext(audioPlayerStateContext);
-  return playList[curIdx] && ((_a2 = activeUI.artwork) != null ? _a2 : activeUI.all) ? /* @__PURE__ */ jsx(ArtworkContainer, {
+  return /* @__PURE__ */ jsx(ArtworkContainer, {
     className: "artwork-container",
     children: /* @__PURE__ */ jsx("img", {
-      src: playList[curIdx].img,
+      src: (_a2 = playList[curIdx]) == null ? void 0 : _a2.img,
       alt: "",
       style: coverImgsCss == null ? void 0 : coverImgsCss.artwork
     })
-  }) : null;
+  });
 };
 const TrackInfoContainer = styled.div`
   display: grid;
@@ -14604,35 +14511,32 @@ const TrackInfoContainer = styled.div`
     overflow: hidden;
   }
   .title {
-    font-size: 1rem;
+    font-size: 16px;
   }
   .writer {
-    font-size: 0.875rem;
+    font-size: 12px;
   }
 `;
 const TrackInfo = () => {
-  var _a2;
   const {
-    activeUI,
     playList,
     curIdx
   } = useNonNullableContext(audioPlayerStateContext);
   const curPlayData = playList[curIdx];
-  return curPlayData && ((_a2 = activeUI.trackInfo) != null ? _a2 : activeUI.all) ? /* @__PURE__ */ jsx(TrackInfoContainer, {
+  return /* @__PURE__ */ jsx(TrackInfoContainer, {
     className: "track-info-container",
-    children: curPlayData.customTrackInfo ? curPlayData.customTrackInfo : /* @__PURE__ */ jsxs(Fragment, {
-      children: [curPlayData.name && /* @__PURE__ */ jsx("span", {
+    children: (curPlayData == null ? void 0 : curPlayData.customTrackInfo) ? curPlayData.customTrackInfo : /* @__PURE__ */ jsxs(Fragment, {
+      children: [(curPlayData == null ? void 0 : curPlayData.name) && /* @__PURE__ */ jsx("span", {
         className: "title",
         children: curPlayData.name
-      }), curPlayData.writer && /* @__PURE__ */ jsx("span", {
+      }), (curPlayData == null ? void 0 : curPlayData.writer) && /* @__PURE__ */ jsx("span", {
         className: "writer",
         children: curPlayData.writer
       })]
     })
-  }) : null;
+  });
 };
 const TrackTimeCurrent = () => {
-  var _a2;
   const trackCurTimeRef = useRef(null);
   const {
     activeUI
@@ -14649,7 +14553,7 @@ const TrackTimeCurrent = () => {
       });
     }
   }, [trackCurTimeRef.current, audioPlayerDispatch]);
-  return ((_a2 = activeUI.trackTime) != null ? _a2 : activeUI.all) ? /* @__PURE__ */ jsx(TrackTimeCurrentContainer, {
+  return /* @__PURE__ */ jsx(TrackTimeCurrentContainer, {
     type: activeUI.trackTime,
     className: "track-time-current-container",
     children: /* @__PURE__ */ jsx("span", {
@@ -14657,10 +14561,9 @@ const TrackTimeCurrent = () => {
       className: "track-current-time",
       children: "00:00"
     })
-  }) : null;
+  });
 };
 const TrackTimeDuration = () => {
-  var _a2;
   const trackDurationRef = useRef(null);
   const {
     activeUI
@@ -14677,7 +14580,7 @@ const TrackTimeDuration = () => {
       });
     }
   }, [trackDurationRef.current, audioPlayerDispatch]);
-  return ((_a2 = activeUI.trackTime) != null ? _a2 : activeUI.all) ? /* @__PURE__ */ jsx(TrackTimeDurationContainer, {
+  return /* @__PURE__ */ jsx(TrackTimeDurationContainer, {
     type: activeUI.trackTime,
     className: "track-time-duration-container",
     children: /* @__PURE__ */ jsx("span", {
@@ -14685,15 +14588,15 @@ const TrackTimeDuration = () => {
       className: "track-duration",
       children: "00:00"
     })
-  }) : null;
+  });
 };
 const TrackTimeContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 16px;
-  font-family: monospace;
-  font-size: 1.2rem;
+  font-family: monospace !important;
+  font-size: 16px !important;
 `;
 const TrackTimeCurrentContainer = styled(TrackTimeContainer)`
   ${({
@@ -14702,7 +14605,7 @@ const TrackTimeCurrentContainer = styled(TrackTimeContainer)`
     .track-current-time {
       font-weight: 700;
       letter-spacing: -0.1rem;
-      color: var(--rs-audio-player-track-current-time);
+      color: var(--rm-audio-player-track-current-time);
       margin-right: ${type !== "separation-mode" && "-10px"};
     }
   `}
@@ -14713,7 +14616,7 @@ const TrackTimeDurationContainer = styled(TrackTimeContainer)`
 }) => css`
     .track-duration {
       display: flex;
-      color: var(--rs-audio-player-track-duration);
+      color: var(--rm-audio-player-track-duration);
       letter-spacing: -0.1rem;
     }
     ${type !== "separation-mode" && css`
@@ -14725,69 +14628,89 @@ const TrackTimeDurationContainer = styled(TrackTimeContainer)`
   `}
 `;
 const Information = () => {
-  var _a2, _b, _c, _d, _e, _f, _g, _h;
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
   const {
-    interfacePlacement
+    interfacePlacement,
+    playList,
+    curIdx,
+    activeUI
   } = useNonNullableContext(audioPlayerStateContext);
+  const trackInfoActive = Boolean((_e = (_c = (_a2 = playList[curIdx]) == null ? void 0 : _a2.customTrackInfo) != null ? _c : (_b = playList[curIdx]) == null ? void 0 : _b.writer) != null ? _e : (_d = playList[curIdx]) == null ? void 0 : _d.name) && Boolean((_f = activeUI.trackInfo) != null ? _f : activeUI.all);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(Grid.Item, {
-      gridArea: ((_a2 = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _a2.artwork) || ((_b = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _b.artwork) || defaultInterfacePlacement.templateArea.artwork,
+      gridArea: ((_g = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _g.artwork) || ((_h = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _h.artwork) || defaultInterfacePlacement.templateArea.artwork,
+      visible: Boolean(((_i = playList[curIdx]) == null ? void 0 : _i.img) && ((_j = activeUI.artwork) != null ? _j : activeUI.all)),
       children: /* @__PURE__ */ jsx(Artwork, {})
     }), /* @__PURE__ */ jsx(Grid.Item, {
-      gridArea: ((_c = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _c.trackInfo) || ((_d = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _d.trackInfo) || defaultInterfacePlacement.templateArea.trackInfo,
-      justifySelf: "center",
+      gridArea: ((_k = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _k.trackInfo) || ((_l = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _l.trackInfo) || defaultInterfacePlacement.templateArea.trackInfo,
+      visible: trackInfoActive,
       children: /* @__PURE__ */ jsx(TrackInfo, {})
     }), /* @__PURE__ */ jsx(Grid.Item, {
-      gridArea: ((_e = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _e.trackTimeCurrent) || ((_f = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _f.trackTimeCurrent) || defaultInterfacePlacement.templateArea.trackTimeCurrent,
-      justifySelf: "center",
+      gridArea: ((_m = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _m.trackTimeCurrent) || ((_n = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _n.trackTimeCurrent) || defaultInterfacePlacement.templateArea.trackTimeCurrent,
+      visible: Boolean((_o = activeUI.trackTime) != null ? _o : activeUI.all),
       children: /* @__PURE__ */ jsx(TrackTimeCurrent, {})
     }), /* @__PURE__ */ jsx(Grid.Item, {
-      gridArea: ((_g = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _g.trackTimeDuration) || ((_h = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _h.trackTimeDuration) || defaultInterfacePlacement.templateArea.trackTimeDuration,
-      justifySelf: "center",
+      gridArea: ((_p = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _p.trackTimeDuration) || ((_q = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _q.trackTimeDuration) || defaultInterfacePlacement.templateArea.trackTimeDuration,
+      visible: Boolean((_r = activeUI.trackTime) != null ? _r : activeUI.all),
       children: /* @__PURE__ */ jsx(TrackTimeDuration, {})
     })]
   });
 };
 const generateGridTemplateValues = (activeUi, placement) => {
-  let maxRowLength = 1;
-  let maxColLength = 1;
-  const placementValueArr = Object.values(placement || {}).map((value) => value.split("row")[1]);
-  const getMaxLength = () => {
-    if (placementValueArr.length !== 0) {
-      for (let i = 0; i < placementValueArr.length; i++) {
-        const row = placementValueArr[i].split("-")[0];
-        const col = placementValueArr[i].split("-")[1];
-        maxRowLength = Math.max(maxRowLength, +row);
-        maxColLength = Math.max(maxColLength, +col);
-      }
+  const activeUIArr = activeUi.all ? Object.keys(defaultInterfacePlacement.templateArea).filter((key) => {
+    if ((key === "trackTimeCurrent" || key === "trackTimeDuration") && activeUi.trackTime === false) {
+      return false;
     }
-    if (activeUi.all) {
-      maxColLength = interfacePlacementMaxLength - 1;
-      return;
+    if (activeUi[key] !== void 0) {
+      return activeUi[key];
+    }
+    return true;
+  }) : Object.entries(activeUi).filter(([, value]) => value).map(([key]) => key);
+  const renameTrackTime = () => {
+    if (activeUIArr.find((key) => key === "trackTime")) {
+      activeUIArr.splice(activeUIArr.indexOf("trackTime"), 1);
+      activeUIArr.push("trackTimeCurrent");
+      activeUIArr.push("trackTimeDuration");
     }
-    maxColLength = Object.values(activeUi).filter((boolean) => Boolean(boolean)).length;
-    return;
   };
-  getMaxLength();
-  const gridAreas = new Array(maxRowLength).fill("").map((_, rowIdx) => {
+  renameTrackTime();
+  const newInterfacePlacement = {
+    ...defaultInterfacePlacement.templateArea,
+    ...placement
+  };
+  const placementArr = Object.entries(newInterfacePlacement).map(([key, value]) => {
+    const [row, col] = value.split("-");
+    return {
+      key,
+      row: Number(row.split("row")[1]),
+      col: Number(col)
+    };
+  }).filter(({ key }) => activeUIArr.includes(key)).sort((a, b) => a.col - b.col);
+  let maxRow = 1;
+  const getMaxRow = () => {
+    for (let i = 0; i < placementArr.length; i++) {
+      maxRow = Math.max(maxRow, placementArr[i].row);
+    }
+  };
+  getMaxRow();
+  const gridAreas = new Array(maxRow).fill("").map((_, rowIdx) => {
     let cols = "";
-    for (let i = 0; i < maxColLength; i++) {
-      cols += ` row${rowIdx + 1}-${i + 1}`;
+    for (let i = 0; i < placementArr.length; i++) {
+      cols += ` row${rowIdx + 1}-${placementArr[i].col}`;
       if (i === 0) {
         cols = cols.trim();
       }
     }
     return cols;
   });
-  const gridColumns = new Array(maxRowLength).fill("").map((_, rowIdx) => {
+  const gridColumns = new Array(maxRow).fill("").map((_, rowIdx) => {
     const maxWidth = window ? window.innerWidth - 100 : 1500;
-    const [, progressCol] = ((placement == null ? void 0 : placement.progress) || defaultInterfacePlacement.templateArea.progress).replace("row", "").split("-");
     let cols = "";
-    for (let i = 0; i < maxColLength; i++) {
+    for (let i = 0; i < placementArr.length; i++) {
       if (i === 0) {
         cols = cols.trim();
       }
-      if (rowIdx === 0 && i + 1 === +progressCol) {
+      if (rowIdx === 0 && placementArr[i].key === "progress") {
         cols += ` 1fr`;
         continue;
       }
@@ -14798,9 +14721,16 @@ const generateGridTemplateValues = (activeUi, placement) => {
   return { gridAreas, gridColumns };
 };
 const InterfaceContainer = styled.div`
+  .interface-grid {
+    background: var(--rm-audio-player-interface-container);
+  }
   .interface-grid {
     padding: 0.5rem 10px;
   }
+  .sortable-play-list {
+    background: var(--rm-audio-player-sortable-list);
+    box-shadow: -5px 2px 4px 0px rgb(0 0 0 / 4%) inset;
+  }
 `;
 const Interface = () => {
   const {
@@ -14890,8 +14820,8 @@ const AudioPlayer = ({
     }
   }, [customIcons, audioPlayerDispatch]);
   return /* @__PURE__ */ jsxs($b9606c0c41d55371$export$27a5bd065ad55220, {
-    id: "rs-audio-player",
-    UNSAFE_className: "rs-audio-player-container",
+    id: "rm-audio-player",
+    UNSAFE_className: "rm-audio-player-container",
     children: [/* @__PURE__ */ jsx(Audio, {}), /* @__PURE__ */ jsx(Interface, {})]
   });
 };
@@ -14902,9 +14832,9 @@ const AudioPlayerWithProvider = ({
   return /* @__PURE__ */ jsx(AudioPlayerProvider, {
     children: /* @__PURE__ */ jsxs(SpectrumProvider, {
       rootContainerProps,
-      children: [/* @__PURE__ */ jsx(GlobalStyle, {}), /* @__PURE__ */ jsx(AudioPlayer, {
+      children: [/* @__PURE__ */ jsx(AudioPlayer, {
         ...audioPlayProps
-      })]
+      }), /* @__PURE__ */ jsx(GlobalStyle, {})]
     })
   });
 };