react-modern-audio-player 1.3.0 → 1.4.0-rc.1

package/README.md

@@ -75,6 +75,7 @@ function Player (){
 interface AudioPlayerProps {
   playList: PlayList;
   audioInitialState?: AudioInitialState;
+  audioRef?: React.MutableRefObject<HTMLAudioElement>;
   activeUI?: ActiveUI;
   customIcons?: CustomIcons;
   coverImgsCss?: CoverImgsCss;
@@ -194,15 +195,21 @@ type PlayListPlacement = "bottom" | "top";
 
 type InterfacePlacement = {
   templateArea?: InterfaceGridTemplateArea;
+  customComponentsArea?: InterfaceGridCustomComponentsArea<TMaxLength>;
   itemCustomArea?: InterfaceGridItemArea;
 };
 
-type InterfaceGridTemplateArea = Record<InterfacePlacementKey,InterfacePlacementValue>
 type InterfacePlacementKey =
   | Exclude<keyof ActiveUI, "all" | "prevNnext" | "trackTime">
   | "trackTimeCurrent"
   | "trackTimeDuration";
-type InterfacePlacementValue = "row1-1" | "row1-2" | "row1-3" | "row1-4" | ... more ... | "row9-9";
+  
+type InterfacePlacementValue = "row1-1" | "row1-2" | "row1-3" | "row1-4" | ... more ... | "row9-9"
+/** if you apply custom components, values must be "row1-1" ~ any more */
+
+type InterfaceGridTemplateArea = Record<InterfacePlacementKey,InterfacePlacementValue>;
+
+type InterfaceGridCustomComponentsArea = Record<componentId,InterfacePlacementValue>;
 
 type InterfaceGridItemArea = Partial<Record<InterfacePlacementKey, string>>;
 	/** example
@@ -279,6 +286,61 @@ const defaultInterfacePlacement = {
 
 // ...spectrum theme palette and so on... //
 ```
+# Custom Component
+> you can apply custom component to `AudioPlayer` by `CustomComponent`
+> </br>
+> you can also set `viewProps` to `CustomComponent` 
+> </br>
+> (https://react-spectrum.adobe.com/react-spectrum/View.html#props)
+
+``` tsx
+const activeUI: ActiveUI = {
+  all: true,
+};
+
+const placement = {
+  interface: {
+    customComponentsArea: {
+      playerCustomComponent: "row1-10",
+    },
+  } as InterfacePlacement<11>,
+  /**
+   * you should set generic value of `InterfacePlacement` as interfaces max length for auto-complete aria type such as "row-1-10"
+   * generic value must plus 1 than interfaces length because of 0 index
+  */
+};
+
+/** you can get audioPlayerState by props */
+const CustomComponent = ({
+  audioPlayerState,
+}: {
+  audioPlayerState?: AudioPlayerStateContext;
+}) => {
+  const audioEl = audioPlayerState?.elementRefs?.audioEl;
+  const handOverTime = () => {
+    if (audioEl) {
+      audioEl.currentTime += 30;
+    }
+  };
+  return (
+    <>
+      <button onClick={handOverTime}>+30</button>
+    </>
+  );
+};
+
+<AudioPlayer
+  playList={playList}
+  placement={placement}
+  activeUI={activeUI}
+>
+  <AudioPlayer.CustomComponent id="playerCustomComponent">
+    <CustomComponent />
+  </AudioPlayer.CustomComponent>
+</AudioPlayer>
+```
+
+
 
 # ****Example****
 ```tsx

package/dist/index.es.js

@@ -1083,7 +1083,7 @@ const useNonNullableContext = (context) => {
     throw new Error(`${context} is not provided or null`);
   return state;
 };
-const interfacePlacementMaxLength = 10;
+const defaultInterfacePlacementMaxLength = 10;
 const defaultInterfacePlacement = {
   templateArea: {
     artwork: "row1-1",
@@ -1235,6 +1235,7 @@ const audioPlayerReducer = (state, action) => {
   var _a, _b, _c, _d;
   switch (action.type) {
     case "NEXT_AUDIO": {
+      resetAudioValues(state.elementRefs, void 0, true);
       if (state.curAudioState.repeatType === "NONE" && state.curIdx + 1 === state.playList.length) {
         return {
           ...state,
@@ -7608,44 +7609,43 @@ const Volume = () => {
   });
 };
 const Controller = () => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
   const {
     interfacePlacement,
     activeUI
   } = useNonNullableContext(audioPlayerStateContext);
-  const volumeComponentKey = (_a = document.querySelector(".rm-audio-player-provider")) == null ? void 0 : _a.getBoundingClientRect().top;
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(Grid.Item, {
-      gridArea: ((_b = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _b.progress) || ((_c = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _c.progress) || defaultInterfacePlacement.templateArea.progress,
+      gridArea: ((_a = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _a.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: ((_d = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _d.repeatType) || ((_e = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _e.repeatType) || defaultInterfacePlacement.templateArea.repeatType,
-      visible: Boolean((_f = activeUI.repeatType) != null ? _f : activeUI.all),
+      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: ((_g = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _g.playButton) || ((_h = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _h.playButton) || defaultInterfacePlacement.templateArea.playButton,
-      visible: Boolean((_i = activeUI.playButton) != null ? _i : activeUI.all),
+      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",
-          visible: Boolean((_j = activeUI.prevNnext) != null ? _j : activeUI.all)
+          visible: Boolean((_i = activeUI.prevNnext) != null ? _i : activeUI.all)
         }), /* @__PURE__ */ jsx(PlayBtn, {}), /* @__PURE__ */ jsx(PrevNnextBtn, {
           type: "next",
-          visible: Boolean((_k = activeUI.prevNnext) != null ? _k : activeUI.all)
+          visible: Boolean((_j = activeUI.prevNnext) != null ? _j : activeUI.all)
         })]
       })
     }), /* @__PURE__ */ jsx(Grid.Item, {
-      gridArea: ((_l = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _l.volume) || ((_m = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _m.volume) || defaultInterfacePlacement.templateArea.volume,
-      visible: Boolean((_n = activeUI.volume) != null ? _n : activeUI.all),
-      children: /* @__PURE__ */ jsx(Volume, {}, volumeComponentKey)
+      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: ((_o = interfacePlacement == null ? void 0 : interfacePlacement.itemCustomArea) == null ? void 0 : _o.playList) || ((_p = interfacePlacement == null ? void 0 : interfacePlacement.templateArea) == null ? void 0 : _p.playList) || defaultInterfacePlacement.templateArea.playList,
-      visible: Boolean((_q = activeUI.playList) != null ? _q : activeUI.all),
+      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, {})
     })]
   });
@@ -7855,10 +7855,12 @@ const Information = () => {
     }), /* @__PURE__ */ jsx(TrackTime, {})]
   });
 };
-const useGridTemplate = (activeUI, templateArea) => {
+const useGridTemplate = (activeUI, templateArea, customComponentsArea) => {
   const generateGridTemplateValues = useCallback(
-    (activeUi, placement) => {
-      const activeUIArr = activeUi.all ? Object.keys(defaultInterfacePlacement.templateArea).filter((key) => {
+    (activeUi, templatePlacement, customComponentsPlacement) => {
+      const activeUIAllKeys = Object.keys(
+        defaultInterfacePlacement.templateArea
+      ).filter((key) => {
         if ((key === "trackTimeCurrent" || key === "trackTimeDuration") && activeUi.trackTime === false) {
           return false;
         }
@@ -7866,43 +7868,46 @@ const useGridTemplate = (activeUI, templateArea) => {
           return activeUi[key];
         }
         return true;
-      }) : Object.entries(activeUi).filter(([, value]) => value).map(([key]) => key);
+      });
+      const activeUIKeysArr = activeUi.all ? activeUIAllKeys : 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");
+        if (activeUIKeysArr.find((key) => key === "trackTime")) {
+          activeUIKeysArr.splice(activeUIKeysArr.indexOf("trackTime"), 1);
+          activeUIKeysArr.push("trackTimeCurrent");
+          activeUIKeysArr.push("trackTimeDuration");
         }
       };
       renameTrackTime();
-      const newInterfacePlacement = {
+      const totalTemplatePlacement = {
         ...defaultInterfacePlacement.templateArea,
-        ...placement
+        ...templatePlacement
       };
+      const activeTemplatePlacementArr = Object.entries(
+        totalTemplatePlacement
+      ).filter(([key]) => activeUIKeysArr.includes(key));
       let maxRow = 1;
       const colsCntRecord = {};
-      const placementArr = Object.entries(newInterfacePlacement).map(([key, value]) => {
-        const [row, col] = value.split("-");
+      const totalPlacementArr = [
+        ...activeTemplatePlacementArr,
+        ...Object.entries(customComponentsPlacement || {})
+      ].map(([key, value]) => {
+        const [rowWithText, colStrNum] = value.split("-");
+        const row = +rowWithText.split("row")[1];
+        maxRow = Math.max(maxRow, row);
+        colsCntRecord[row] = colsCntRecord[row] ? colsCntRecord[row] + 1 : 1;
         return {
           key,
-          row: Number(row.split("row")[1]),
-          col: Number(col)
+          row,
+          col: +colStrNum
         };
-      }).filter(({ key, row }) => {
-        if (activeUIArr.includes(key)) {
-          maxRow = Math.max(maxRow, row);
-          colsCntRecord[row] = colsCntRecord[row] ? colsCntRecord[row] + 1 : 1;
-          return true;
-        }
-        return false;
       }).sort((a, b) => a.col - b.col);
       const maxCol = Math.max(...Object.values(colsCntRecord));
       let progressColIdx;
       const gridAreas2 = new Array(maxRow).fill("").map((_, rowIdx) => {
-        var _a, _b, _c;
+        var _a;
         let cols = "";
         let isWithProgress = false;
-        const curRowPlacementArr = placementArr.filter(({ key, row }) => {
+        const curRowPlacementArr = totalPlacementArr.filter(({ key, row }) => {
           if (row === rowIdx + 1) {
             if (key === "progress") {
               isWithProgress = true;
@@ -7924,16 +7929,8 @@ const useGridTemplate = (activeUI, templateArea) => {
             }
           }
         } else {
-          let extraColCnt = maxCol - curRowPlacementArr.length;
-          let curRowIdx = 0;
           for (let i = 0; i < maxCol; i++) {
-            if (!extraColCnt && ((_b = curRowPlacementArr[curRowIdx]) == null ? void 0 : _b.col) > i + 1) {
-              curRowIdx++;
-              cols += ` row${rowIdx + 1}-${((_c = curRowPlacementArr[curRowIdx]) == null ? void 0 : _c.col) ? curRowPlacementArr[curRowIdx].col : i + 1}`;
-            } else {
-              extraColCnt--;
-              cols += ` row${rowIdx + 1}-${i + 1}`;
-            }
+            cols += ` row${rowIdx + 1}-${curRowPlacementArr[i] ? curRowPlacementArr[i].col : i + 1}`;
           }
         }
         return cols.trimStart();
@@ -7955,47 +7952,43 @@ const useGridTemplate = (activeUI, templateArea) => {
     []
   );
   const [curActiveUI, setCurActiveUI] = useState(activeUI);
-  const [curTemplateArea, setCurTemplateArea] = useState(templateArea);
-  const [curTemplateAreaValues, setCurTemplateAreaValues] = useState();
-  if (!curTemplateAreaValues) {
+  const [curPlacementArea, setCurPlacementArea] = useState({
+    templateArea,
+    customComponentsArea
+  });
+  const [curPlacementAreaValues, setCurPlacementAreaValues] = useState();
+  if (!curPlacementAreaValues) {
     const { gridAreas: gridAreas2, gridColumns: gridColumns2 } = generateGridTemplateValues(
       curActiveUI,
-      curTemplateArea
+      curPlacementArea.templateArea,
+      curPlacementArea.customComponentsArea
     );
-    setCurTemplateAreaValues({ gridAreas: gridAreas2, gridColumns: gridColumns2 });
+    setCurPlacementAreaValues({ gridAreas: gridAreas2, gridColumns: gridColumns2 });
     return [gridAreas2, gridColumns2];
   }
-  if (curActiveUI !== activeUI || curTemplateArea !== templateArea) {
+  if (curActiveUI !== activeUI || curPlacementArea.templateArea !== templateArea || curPlacementArea.customComponentsArea !== customComponentsArea) {
     setCurActiveUI(activeUI);
-    setCurTemplateArea(templateArea);
+    setCurPlacementArea({ templateArea, customComponentsArea });
     const { gridAreas: gridAreas2, gridColumns: gridColumns2 } = generateGridTemplateValues(
       activeUI,
-      templateArea
+      templateArea,
+      customComponentsArea
     );
-    setCurTemplateAreaValues({ gridAreas: gridAreas2, gridColumns: gridColumns2 });
+    setCurPlacementAreaValues({ gridAreas: gridAreas2, gridColumns: gridColumns2 });
   }
-  const { gridAreas, gridColumns } = curTemplateAreaValues;
+  const { gridAreas, gridColumns } = curPlacementAreaValues;
   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 Interface = ({
+  children
+}) => {
   const {
     interfacePlacement,
     activeUI,
     playListPlacement
   } = useNonNullableContext(audioPlayerStateContext);
-  const [gridAreas, gridColumns] = useGridTemplate(activeUI, interfacePlacement == null ? void 0 : interfacePlacement.templateArea);
+  const CustomComponents = $k7QOs$react.Children.toArray(children);
+  const [gridAreas, gridColumns] = useGridTemplate(activeUI, interfacePlacement == null ? void 0 : interfacePlacement.templateArea, interfacePlacement == null ? void 0 : interfacePlacement.customComponentsArea);
   return /* @__PURE__ */ jsxs(InterfaceContainer, {
     className: "interface-container",
     children: [playListPlacement === "top" && /* @__PURE__ */ jsx("div", {
@@ -8007,12 +8000,24 @@ const Interface = () => {
       minHeight: "30px",
       columns: gridColumns,
       UNSAFE_className: "interface-grid",
-      children: [/* @__PURE__ */ jsx(Information, {}), /* @__PURE__ */ jsx(Controller, {})]
+      children: [/* @__PURE__ */ jsx(Information, {}), /* @__PURE__ */ jsx(Controller, {}), CustomComponents]
     }), playListPlacement === "bottom" && /* @__PURE__ */ jsx("div", {
       className: "sortable-play-list"
     })]
   });
 };
+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 usePropsStateEffect = ({
   placement = {},
   activeUI,
@@ -8074,6 +8079,7 @@ const usePropsStateEffect = ({
 };
 const AudioPlayer = ({
   audioRef,
+  children,
   ...restProps
 }) => {
   usePropsStateEffect(restProps);
@@ -8082,10 +8088,12 @@ const AudioPlayer = ({
     UNSAFE_className: "rm-audio-player-container",
     children: [/* @__PURE__ */ jsx(Audio, {
       audioRef
-    }), /* @__PURE__ */ jsx(Interface, {})]
+    }), /* @__PURE__ */ jsx(Interface, {
+      children
+    })]
   });
 };
-const AudioPlayerWithProvider = ({
+const AudioPlayerWithProviders = ({
   rootContainerProps,
   ...audioPlayProps
 }) => {
@@ -8099,4 +8107,23 @@ const AudioPlayerWithProvider = ({
     })
   });
 };
-export { AudioPlayer, AudioPlayerWithProvider, SpectrumProvider, audioPlayerDispatchContext, audioPlayerReducer, audioPlayerStateContext, AudioPlayerWithProvider as default, defaultInterfacePlacement, interfacePlacementMaxLength };
+const CustomComponent = ({
+  children,
+  id,
+  ...gridItemProps
+}) => {
+  var _a;
+  const audioPlayerState = useNonNullableContext(audioPlayerStateContext);
+  const placement = audioPlayerState.interfacePlacement;
+  const gridArea = (_a = placement == null ? void 0 : placement.customComponentsArea) == null ? void 0 : _a[id];
+  return /* @__PURE__ */ jsx(Grid.Item, {
+    UNSAFE_className: "custom_component",
+    gridArea,
+    ...gridItemProps,
+    children: $k7QOs$react.cloneElement(children, {
+      audioPlayerState
+    })
+  });
+};
+AudioPlayerWithProviders.CustomComponent = CustomComponent;
+export { AudioPlayer, SpectrumProvider, audioPlayerDispatchContext, audioPlayerReducer, audioPlayerStateContext, AudioPlayerWithProviders as default, defaultInterfacePlacement, defaultInterfacePlacementMaxLength };

package/dist/types/components/AudioPlayer/Context/StateContext/placement.d.ts

@@ -4,20 +4,22 @@ import { ActiveUI } from "./element";
 export declare type VolumeSliderPlacement = DropdownContentPlacement;
 export declare type PlayListPlacement = "bottom" | "top";
 export declare type PlayerPlacement = "bottom" | "top" | "bottom-left" | "bottom-right" | "top-left" | "top-right" | "static";
-export declare const interfacePlacementMaxLength = 10;
+export declare const defaultInterfacePlacementMaxLength = 10;
 export declare type InterfacePlacementKey = Exclude<keyof ActiveUI, "all" | "prevNnext" | "trackTime" | "volumeSlider"> | "trackTimeCurrent" | "trackTimeDuration";
-export declare type InterfaceGridTemplateArea = Partial<Record<InterfacePlacementKey, `row${NumbersToUnionNum<typeof interfacePlacementMaxLength>}-${NumbersToUnionNum<typeof interfacePlacementMaxLength>}`>>;
+export declare type InterfaceGridTemplateArea<TMaxLength extends number> = Partial<Record<InterfacePlacementKey, `row${NumbersToUnionNum<TMaxLength>}-${NumbersToUnionNum<TMaxLength>}`>>;
+export declare type InterfaceGridCustomComponentsArea<TMaxLength extends number> = Partial<Record<string, `row${NumbersToUnionNum<TMaxLength>}-${NumbersToUnionNum<TMaxLength>}`>>;
 export declare type InterfaceGridItemArea = Partial<Record<InterfacePlacementKey, string>>;
-export declare type InterfacePlacement = {
-    templateArea?: InterfaceGridTemplateArea;
+export declare type InterfacePlacement<TMaxLength extends number = typeof defaultInterfacePlacementMaxLength> = {
+    templateArea?: InterfaceGridTemplateArea<TMaxLength>;
+    customComponentsArea?: InterfaceGridCustomComponentsArea<TMaxLength>;
     itemCustomArea?: InterfaceGridItemArea;
 };
 export declare const defaultInterfacePlacement: {
-    templateArea: Required<InterfaceGridTemplateArea>;
+    templateArea: Required<InterfaceGridTemplateArea<typeof defaultInterfacePlacementMaxLength>>;
 };
-export interface Placements {
+export interface Placements<TInterfacePlacementLength extends number = typeof defaultInterfacePlacementMaxLength> {
     playListPlacement: PlayListPlacement;
-    interfacePlacement: InterfacePlacement;
+    interfacePlacement: InterfacePlacement<TInterfacePlacementLength>;
     volumeSliderPlacement: VolumeSliderPlacement | undefined;
     playerPlacement: PlayerPlacement | undefined;
 }

package/dist/types/components/AudioPlayer/Context/dispatchContext.d.ts

@@ -1,6 +1,6 @@
 import { Dispatch } from "react";
-import { RepeatType, PlayList, PlayListPlacement, PlayerPlacement, ActiveUI, ElementRefs, CustomIcons, AudioInitialState, InterfacePlacement, CoverImgsCss, VolumeSliderPlacement } from "./StateContext";
-export declare type AudioContextAction = {
+import { RepeatType, PlayList, PlayListPlacement, PlayerPlacement, ActiveUI, ElementRefs, CustomIcons, AudioInitialState, InterfacePlacement, CoverImgsCss, VolumeSliderPlacement, defaultInterfacePlacementMaxLength } from "./StateContext";
+export declare type AudioContextAction<TInterfacePlacementLength extends number = typeof defaultInterfacePlacementMaxLength> = {
     type: "NEXT_AUDIO";
 } | {
     type: "PREV_AUDIO";
@@ -42,7 +42,7 @@ export declare type AudioContextAction = {
     type: "SET_PLACEMENTS";
     playerPlacement?: PlayerPlacement;
     playListPlacement?: PlayListPlacement;
-    interfacePlacement?: InterfacePlacement;
+    interfacePlacement?: InterfacePlacement<TInterfacePlacementLength>;
     volumeSliderPlacement?: VolumeSliderPlacement;
 };
 export declare type AudioPlayerDispatchContext = Dispatch<AudioContextAction>;

package/dist/types/components/AudioPlayer/Interface/CustomComponent/index.d.ts

@@ -0,0 +1,7 @@
+import { GridItemProps } from '../../../Grid/Item';
+import React, { FC } from "react";
+export declare type CustomComponentProps = {
+    children?: React.ReactNode;
+    id: string;
+} & GridItemProps;
+export declare const CustomComponent: FC<CustomComponentProps>;

package/dist/types/components/AudioPlayer/Interface/index.d.ts

@@ -1,2 +1,6 @@
-import { FC } from "react";
-export declare const Interface: FC;
+import React, { FC } from "react";
+interface InterfaceProps {
+    children: React.ReactNode;
+}
+export declare const Interface: FC<InterfaceProps>;
+export {};

package/dist/types/components/AudioPlayer/Player/index.d.ts

@@ -1,6 +1,6 @@
-import { FC } from "react";
 import { ActiveUI, PlayListPlacement, CustomIcons, PlayerPlacement, PlayList, AudioInitialState, InterfacePlacement, CoverImgsCss, VolumeSliderPlacement } from '../../AudioPlayer/Context';
-export interface AudioPlayerProps {
+export interface AudioPlayerProps<TInterfacePlacementLength extends number> {
+    children?: React.ReactNode;
     playList: PlayList;
     audioInitialState?: AudioInitialState;
     audioRef?: React.MutableRefObject<HTMLAudioElement>;
@@ -10,8 +10,8 @@ export interface AudioPlayerProps {
     placement?: {
         player?: PlayerPlacement;
         playList?: PlayListPlacement;
-        interface?: InterfacePlacement;
+        interface?: InterfacePlacement<TInterfacePlacementLength>;
         volumeSlider?: VolumeSliderPlacement;
     };
 }
-export declare const AudioPlayer: FC<AudioPlayerProps>;
+export declare const AudioPlayer: <TInterfacePlacementLength extends number = 10>({ audioRef, children, ...restProps }: AudioPlayerProps<TInterfacePlacementLength>) => JSX.Element;

package/dist/types/components/AudioPlayer/Player/usePropsStateEffect.d.ts

@@ -1,2 +1,2 @@
 import { AudioPlayerProps } from ".";
-export declare const usePropsStateEffect: ({ placement, activeUI, coverImgsCss, audioInitialState, playList, customIcons, }: AudioPlayerProps) => void;
+export declare const usePropsStateEffect: <TInterfacePlacementLength extends number = 10>({ placement, activeUI, coverImgsCss, audioInitialState, playList, customIcons, }: Omit<AudioPlayerProps<TInterfacePlacementLength>, "children">) => void;

package/dist/types/components/AudioPlayer/index.d.ts

@@ -1,5 +1,11 @@
 import { SpectrumProviderProps } from '../Provider';
-import { FC } from "react";
+import { defaultInterfacePlacementMaxLength } from "./Context";
+import { CustomComponent } from "./Interface/CustomComponent";
 import { AudioPlayerProps } from "./Player";
-export declare type RMAudioPlayerProps = AudioPlayerProps & SpectrumProviderProps;
-export declare const AudioPlayerWithProvider: FC<RMAudioPlayerProps>;
+export declare type RMAudioPlayerProps<TInterfacePlacementLength extends number = typeof defaultInterfacePlacementMaxLength> = AudioPlayerProps<TInterfacePlacementLength> & SpectrumProviderProps;
+declare const AudioPlayerWithProviders: <TInterfacePlacementLength extends number>({ rootContainerProps, ...audioPlayProps }: RMAudioPlayerProps<TInterfacePlacementLength>) => JSX.Element;
+declare type AudioPlayerComponent = typeof AudioPlayerWithProviders & {
+    CustomComponent: typeof CustomComponent;
+};
+declare const _default: AudioPlayerComponent;
+export default _default;

package/dist/types/components/Drawer/Drawer.d.ts

@@ -1,5 +1,4 @@
-import { PropsWithChildren } from "react";
-import { FC } from "react";
+import { PropsWithChildren, FC } from "react";
 import { DrawerContext } from "./DrawerContext";
 import { DrawerTrigger } from "./DrawerTrigger";
 import { DrawerContent } from "./DrawerContent";

package/dist/types/components/Dropdown/Dropdown.d.ts

@@ -1,5 +1,4 @@
-import { PropsWithChildren } from "react";
-import { FC } from "react";
+import { PropsWithChildren, FC } from "react";
 import { DropdownContext } from "./DropdownContext";
 import { DropdownTrigger } from "./DropdownTrigger";
 import { DropdownContent } from "./DropdownContent";

package/dist/types/components/Grid/Item.d.ts

@@ -1,4 +1,4 @@
-import { ViewProps } from "@react-types/view";
+import { ViewProps } from "@react-spectrum/view";
 import { DOMRefValue } from "@react-types/shared";
 export interface GridItemProps extends Omit<ViewProps, "children"> {
     visible?: boolean;

package/dist/types/components/Provider/AudioPlayerProvider.d.ts

@@ -1,3 +1,3 @@
-import { PropsWithChildren, FC } from "react";
+import { PropsWithChildren } from "react";
 import { AudioPlayerProps } from "../AudioPlayer/Player";
-export declare const AudioPlayerProvider: FC<PropsWithChildren<AudioPlayerProps>>;
+export declare const AudioPlayerProvider: <TInterfacePlacementLength extends number = 10>({ children, ...props }: PropsWithChildren<AudioPlayerProps<TInterfacePlacementLength>>) => JSX.Element;

package/dist/types/hooks/useGridTemplate.d.ts

@@ -1,2 +1,2 @@
 import { ActiveUI, InterfacePlacement } from '../components/AudioPlayer/Context';
-export declare const useGridTemplate: (activeUI: ActiveUI, templateArea: InterfacePlacement["templateArea"] | undefined) => readonly [string[], string[]];
+export declare const useGridTemplate: (activeUI: ActiveUI, templateArea: InterfacePlacement["templateArea"] | undefined, customComponentsArea?: InterfacePlacement["customComponentsArea"]) => readonly [string[], string[]];

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
-import { AudioPlayerWithProvider as AudioPlayer } from "./components/AudioPlayer";
-export default AudioPlayer;
+import AudioPlayerWithProviders from "./components/AudioPlayer";
+export default AudioPlayerWithProviders;
 export * from "./components/AudioPlayer";
 export * from "./components/AudioPlayer/Context";
 export * from "./components/AudioPlayer/Player";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-modern-audio-player",
-  "version": "1.3.0",
+  "version": "1.4.0-rc.1",
   "author": {
     "name": "LYH",
     "email": "slash9494@naver.com",