react-modern-audio-player 0.0.3 → 1.0.0

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
@@ -8524,7 +8523,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 +8536,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 +12829,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 +12838,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 +12980,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 +12999,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 +13012,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 +13046,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,7 +13074,6 @@ 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,
@@ -13137,11 +13132,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 +13148,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
     })
@@ -13816,7 +13811,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 +13940,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 +13953,7 @@ const SortablePlayList = () => {
         setIsOpen
       })
     })]
-  }) : null;
+  });
 };
 const useBarProgress = () => {
   const { elementRefs } = useNonNullableContext(audioPlayerStateContext);
@@ -14011,14 +14002,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 +14022,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 +14057,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 +14068,7 @@ const WaveformProgress = () => {
   return /* @__PURE__ */ jsx(WaveformWrapper, {
     className: "waveform-wrapper",
     children: /* @__PURE__ */ jsx("div", {
-      id: "rs-waveform"
+      id: "rm-waveform"
     })
   });
 };
@@ -14089,25 +14080,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 +14159,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 +14172,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 +14188,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 +14209,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 +14236,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 +14252,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 +14260,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 +14278,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 +14299,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)
         );
       }
     }
@@ -14501,10 +14495,6 @@ const DropdownTrigger = ({
 Dropdown.Content = DropdownContent;
 Dropdown.Trigger = DropdownTrigger;
 const Volume = () => {
-  var _a2;
-  const {
-    activeUI
-  } = useNonNullableContext(audioPlayerStateContext);
   const triggerRef = useRef(null);
   const [volumeSliderPlacement, setVolumeSliderPlacement] = useState("bottom");
   useEffect(() => {
@@ -14518,7 +14508,7 @@ 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",
     children: [/* @__PURE__ */ jsx(Dropdown.Trigger, {
@@ -14530,38 +14520,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 +14577,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;
@@ -14611,28 +14608,25 @@ const TrackInfoContainer = styled.div`
   }
 `;
 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 +14643,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 +14651,9 @@ const TrackTimeCurrent = () => {
       className: "track-current-time",
       children: "00:00"
     })
-  }) : null;
+  });
 };
 const TrackTimeDuration = () => {
-  var _a2;
   const trackDurationRef = useRef(null);
   const {
     activeUI
@@ -14677,7 +14670,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,7 +14678,7 @@ const TrackTimeDuration = () => {
       className: "track-duration",
       children: "00:00"
     })
-  }) : null;
+  });
 };
 const TrackTimeContainer = styled.div`
   display: flex;
@@ -14702,7 +14695,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 +14706,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 +14718,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");
+    }
+  };
+  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);
     }
-    maxColLength = Object.values(activeUi).filter((boolean) => Boolean(boolean)).length;
-    return;
   };
-  getMaxLength();
-  const gridAreas = new Array(maxRowLength).fill("").map((_, rowIdx) => {
+  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;
       }
@@ -14890,8 +14903,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, {})]
   });
 };