react-modern-audio-player 1.2.4 → 1.2.5

package/README.md

@@ -84,6 +84,7 @@ interface AudioPlayerProps {
     interface?: InterfacePlacement;
     volumeSlider?: VolumeSliderPlacement;
   };
+  rootContainerProps?: RootContainerProps
 }
 ```
 
@@ -95,6 +96,7 @@ Prop | Type | Default
 `customIcons` | [CustomIcons](#customicons) | undefined 
 `coverImgsCss` | [CoverImgsCss](#coverimgscss) | undefined 
 `placement` | [Placement](#placement) | playListPlacement : "bottom" </br>interfacePlacement :[DefaultInterfacePlacement](#default-interface-placement)
+`rootContainerProps` | [RootContainerProps](#rootcontainerprops) | theme: spectrum-theme-default<br/>width: 100% <br/>position: 'static'<br/>UNSAFE_className: rm-audio-player-provider
 
 ## PlayList
 
@@ -111,7 +113,7 @@ type AudioData = {
 };
 ```
 
-## audioInitialState
+## AudioInitialState
 
 ```tsx
 type AudioInitialState = Omit<
@@ -127,7 +129,7 @@ type AudioInitialState = Omit<
 };
 ```
 
-## activeUI
+## ActiveUI
 
 ```tsx
 type ActiveUI = {
@@ -147,7 +149,7 @@ type ProgressUI = "waveform" | "bar" | false;
 type PlayListUI = "sortable" | "unSortable" | false;
 ```
 
-## customIcons
+## CustomIcons
 
 ```tsx
 type CustomIcons = {
@@ -166,7 +168,7 @@ type CustomIcons = {
 };
 ```
 
-## coverImgsCss
+## CoverImgsCss
 
 ```tsx
 interface CoverImgsCss {
@@ -175,7 +177,7 @@ interface CoverImgsCss {
 }
 ```
 
-## placement
+## Placement
 
 ```tsx
 type PlayerPlacement =
@@ -229,6 +231,12 @@ const defaultInterfacePlacement = {
 };
 ```
 
+## RootContainerProps
+> it is same with spectrum provider props
+> </br>
+> https://react-spectrum.adobe.com/react-spectrum/Provider.html#themes
+
+
 # Override Style
 
 ### Theme mode ( dark-mode )

package/dist/index.es.js

@@ -1083,6 +1083,7 @@ const useNonNullableContext = (context) => {
     throw new Error(`${context} is not provided or null`);
   return state;
 };
+const interfacePlacementMaxLength = 10;
 const defaultInterfacePlacement = {
   templateArea: {
     artwork: "row1-1",
@@ -1189,6 +1190,9 @@ const SpectrumProvider = ({
   });
 };
 const audioPlayerDispatchContext = createContext(null);
+const getRandomNumber = (min, max) => {
+  return Math.round(Math.random() * (max - min) + min);
+};
 const getTimeWithPadStart = (time) => {
   const minutes = `${Math.floor(time / 60)}`.padStart(2, "0");
   const seconds = `${Math.floor(time % 60)}`.padStart(2, "0");
@@ -1222,6 +1226,13 @@ const resetAudioValues = (elementRefs, duration, restart) => {
     }
   }
 };
+const getRandomIdx = (curIdx, minNumber, maxNumber) => {
+  let nextIdx = getRandomNumber(minNumber, maxNumber);
+  while (nextIdx === curIdx) {
+    nextIdx = getRandomNumber(minNumber, maxNumber);
+  }
+  return nextIdx;
+};
 const audioPlayerReducer = (state, action) => {
   var _a, _b, _c, _d;
   switch (action.type) {
@@ -1233,17 +1244,15 @@ const audioPlayerReducer = (state, action) => {
         };
       }
       if (state.curAudioState.repeatType === "SHUFFLE") {
-        let nextIdx = 0;
-        const getShuffledPlayIdx = () => {
-          nextIdx = Math.round(Math.random() * (state.playList.length - 1));
-        };
-        while (nextIdx === state.curIdx) {
-          getShuffledPlayIdx();
-        }
+        const randomIdx = getRandomIdx(
+          state.curIdx,
+          0,
+          state.playList.length - 1
+        );
         return {
           ...state,
-          curPlayId: state.playList[nextIdx].id,
-          curIdx: nextIdx
+          curPlayId: state.playList[randomIdx].id,
+          curIdx: randomIdx
         };
       }
       const infiniteLoopNextIdx = (state.curIdx + 1) % state.playList.length;
@@ -1259,13 +1268,15 @@ const audioPlayerReducer = (state, action) => {
         return state;
       }
       if (state.curAudioState.repeatType === "SHUFFLE") {
-        const shuffledPlayIdx = Math.round(
-          Math.random() * (state.playList.length - 1)
+        const randomIdx = getRandomIdx(
+          state.curIdx,
+          0,
+          state.playList.length - 1
         );
         return {
           ...state,
-          curPlayId: state.playList[shuffledPlayIdx].id,
-          curIdx: shuffledPlayIdx
+          curPlayId: state.playList[randomIdx].id,
+          curIdx: randomIdx
         };
       }
       const infiniteLoopPrevIdx = (state.curIdx - 1 + state.playList.length) % state.playList.length;
@@ -7057,12 +7068,18 @@ const useBarProgress = () => {
     },
     [elementRefs == null ? void 0 : elementRefs.audioEl]
   );
+  const setSelectStartActive = useCallback(
+    (state) => document.onselectstart = () => state,
+    []
+  );
   return {
     onMouseDown: () => setTimeChangeActive(true),
     onMouseUp: () => setTimeChangeActive(false),
     onMouseLeave: () => setTimeChangeActive(false),
     onMouseMove: isTimeChangeActive ? onMoveAudioTime : void 0,
-    onClick: onMoveAudioTime
+    onClick: onMoveAudioTime,
+    onMouseOver: () => setSelectStartActive(false),
+    onMouseOut: () => isTimeChangeActive && setSelectStartActive(true)
   };
 };
 const BarProgress = ({
@@ -7119,11 +7136,6 @@ const BarProgressWrapper = styled.div`
     transform-origin: 0 0;
     transform: scaleX(0);
   }
-  &:hover {
-    .rm-player-progress-handle {
-      opacity: 1;
-    }
-  }
   .rm-player-progress-handle {
     position: absolute;
     left: -4px;
@@ -7134,6 +7146,11 @@ const BarProgressWrapper = styled.div`
     opacity: 0;
     transition: opacity 0.2s ease-in-out;
   }
+  &:hover {
+    .rm-player-progress-handle {
+      opacity: 1;
+    }
+  }
 `;
 const WaveformWrapper = styled.div`
   display: flex;
@@ -7170,15 +7187,11 @@ const WaveformProgress = ({
     })
   }) : null;
 };
-const ProgressContainer = styled.div`
-  min-width: 200px;
-  padding: 0 10px;
-`;
 const Progress = () => {
   const {
     activeUI
   } = useNonNullableContext(audioPlayerStateContext);
-  return /* @__PURE__ */ jsxs(ProgressContainer, {
+  return /* @__PURE__ */ jsxs("div", {
     className: "progress-container",
     children: [/* @__PURE__ */ jsx(WaveformProgress, {
       isActive: activeUI.progress === "waveform"
@@ -7488,18 +7501,18 @@ const Dropdown = ({
       setIsOpen(isOpenProp);
     }
   }, [isOpenProp]);
-  return /* @__PURE__ */ jsx(DropdownContainer, {
-    className: "dropdown-container",
-    ref: dropdownRef,
-    ...dropdownEventProps,
-    children: /* @__PURE__ */ jsx(dropdownContext.Provider, {
-      value: {
-        dropdownRef,
-        placement,
-        isOpen,
-        setIsOpen,
-        onOpenChange
-      },
+  return /* @__PURE__ */ jsx(dropdownContext.Provider, {
+    value: {
+      dropdownRef,
+      placement,
+      isOpen,
+      setIsOpen,
+      onOpenChange
+    },
+    children: /* @__PURE__ */ jsx(DropdownContainer, {
+      className: "dropdown-container",
+      ref: dropdownRef,
+      ...dropdownEventProps,
       children: /* @__PURE__ */ jsxs(Fragment, {
         children: [trigger, !disabled && content]
       })
@@ -7561,7 +7574,7 @@ const DropdownContent = ({
         height: dropdownRef.current.offsetHeight
       });
     }
-  }, [dropdownRef.current]);
+  }, [dropdownRef]);
   const Content = useMemo(() => dropdownSize ? /* @__PURE__ */ jsx(DropdownContentContainer, {
     ...dropdownContentProps,
     dropdownSize,
@@ -7632,8 +7645,7 @@ const Volume = () => {
   const triggerRef = useRef(null);
   const {
     activeUI: {
-      volumeSlider: volumeSliderEl,
-      all: allEl
+      volumeSlider: volumeSliderEl
     },
     volumeSliderPlacement: contextVolumePlacement
   } = useNonNullableContext(audioPlayerStateContext);
@@ -7644,7 +7656,7 @@ const Volume = () => {
   return /* @__PURE__ */ jsxs(Dropdown, {
     placement: contextVolumePlacement || volumeSliderPlacement,
     triggerType: "hover",
-    disabled: !(volumeSliderEl != null ? volumeSliderEl : allEl),
+    disabled: !(volumeSliderEl != null ? volumeSliderEl : true),
     children: [/* @__PURE__ */ jsx(Dropdown.Trigger, {
       children: /* @__PURE__ */ jsx(VolumeTriggerBtn, {
         ref: triggerRef
@@ -7896,69 +7908,127 @@ const Information = () => {
     }), /* @__PURE__ */ jsx(TrackTime, {})]
   });
 };
-const generateGridTemplateValues = (activeUi, placement) => {
-  const activeUIArr = activeUi.all ? Object.keys(defaultInterfacePlacement.templateArea).filter((key) => {
-    if ((key === "trackTimeCurrent" || key === "trackTimeDuration") && activeUi.trackTime === false) {
-      return false;
-    }
-    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);
-    }
-  };
-  getMaxRow();
-  const gridAreas = new Array(maxRow).fill("").map((_, rowIdx) => {
-    let cols = "";
-    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(maxRow).fill("").map((_, rowIdx) => {
-    const maxWidth = window ? window.innerWidth - 100 : 1500;
-    let cols = "";
-    for (let i = 0; i < placementArr.length; i++) {
-      if (i === 0) {
-        cols = cols.trim();
-      }
-      if (rowIdx === 0 && placementArr[i].key === "progress") {
-        cols += ` 1fr`;
-        continue;
-      }
-      cols += ` fit-content(${maxWidth}px)`;
-    }
-    return cols;
-  });
-  return { gridAreas, gridColumns };
+const useGridTemplate = (activeUI, templateArea) => {
+  const generateGridTemplateValues = useCallback(
+    (activeUi, placement) => {
+      const activeUIArr = activeUi.all ? Object.keys(defaultInterfacePlacement.templateArea).filter((key) => {
+        if ((key === "trackTimeCurrent" || key === "trackTimeDuration") && activeUi.trackTime === false) {
+          return false;
+        }
+        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
+      };
+      let maxRow = 1;
+      const colsCntRecord = {};
+      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, 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;
+        let cols = "";
+        let isWithProgress = false;
+        const curRowPlacementArr = placementArr.filter(({ key, row }) => {
+          if (row === rowIdx + 1) {
+            if (key === "progress") {
+              isWithProgress = true;
+            }
+            return true;
+          }
+          return false;
+        });
+        if (isWithProgress) {
+          const progressCnt = maxCol - (curRowPlacementArr.length - 1);
+          for (let i = 0; i < maxCol - (progressCnt - 1); i++) {
+            if (((_a = curRowPlacementArr[i]) == null ? void 0 : _a.key) === "progress") {
+              cols += ` row${rowIdx + 1}-${curRowPlacementArr[i].col} `.repeat(
+                progressCnt
+              );
+              progressColIdx = Math.ceil(progressCnt / 2) + i - 1;
+            } else {
+              cols += ` row${rowIdx + 1}-${curRowPlacementArr[i] ? curRowPlacementArr[i].col : i + 1}`;
+            }
+          }
+        } 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}`;
+            }
+          }
+        }
+        return cols.trimStart();
+      });
+      const maxWidth = window ? window.innerWidth - 100 : 1500;
+      const gridColumns2 = new Array(maxRow).fill("").map((_, rowIdx) => {
+        let cols = "";
+        for (let i = 0; i < maxCol; i++) {
+          if (progressColIdx === i && rowIdx === 0) {
+            cols += ` 1fr`;
+            continue;
+          }
+          cols += ` fit-content(${maxWidth}px)`;
+        }
+        return cols.trimStart();
+      });
+      return { gridAreas: gridAreas2, gridColumns: gridColumns2 };
+    },
+    []
+  );
+  const [curActiveUI, setCurActiveUI] = useState(activeUI);
+  const [curTemplateArea, setCurTemplateArea] = useState(templateArea);
+  const [curTemplateAreaValues, setCurTemplateAreaValues] = useState();
+  if (!curTemplateAreaValues) {
+    const { gridAreas: gridAreas2, gridColumns: gridColumns2 } = generateGridTemplateValues(
+      curActiveUI,
+      curTemplateArea
+    );
+    setCurTemplateAreaValues({ gridAreas: gridAreas2, gridColumns: gridColumns2 });
+    return [gridAreas2, gridColumns2];
+  }
+  if (curActiveUI !== activeUI || curTemplateArea !== templateArea) {
+    setCurActiveUI(activeUI);
+    setCurTemplateArea(templateArea);
+    const { gridAreas: gridAreas2, gridColumns: gridColumns2 } = generateGridTemplateValues(
+      activeUI,
+      templateArea
+    );
+    setCurTemplateAreaValues({ gridAreas: gridAreas2, gridColumns: gridColumns2 });
+  }
+  const { gridAreas, gridColumns } = curTemplateAreaValues;
+  return [gridAreas, gridColumns];
 };
 const InterfaceContainer = styled.div`
   .interface-grid {
@@ -7978,10 +8048,7 @@ const Interface = () => {
     activeUI,
     playListPlacement
   } = useNonNullableContext(audioPlayerStateContext);
-  const {
-    gridAreas,
-    gridColumns
-  } = generateGridTemplateValues(activeUI, interfacePlacement == null ? void 0 : interfacePlacement.templateArea);
+  const [gridAreas, gridColumns] = useGridTemplate(activeUI, interfacePlacement == null ? void 0 : interfacePlacement.templateArea);
   return /* @__PURE__ */ jsxs(InterfaceContainer, {
     className: "interface-container",
     children: [playListPlacement === "top" && /* @__PURE__ */ jsx("div", {
@@ -8080,4 +8147,4 @@ const AudioPlayerWithProvider = ({
     })
   });
 };
-export { AudioPlayerWithProvider, AudioPlayerWithProvider as default };
+export { AudioPlayer, AudioPlayerWithProvider, SpectrumProvider, audioPlayerDispatchContext, audioPlayerReducer, audioPlayerStateContext, AudioPlayerWithProvider as default, defaultInterfacePlacement, interfacePlacementMaxLength };

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

@@ -1,4 +1,5 @@
 import { SpectrumProviderProps } from '../Provider';
 import { FC } from "react";
 import { AudioPlayerProps } from "./Player";
-export declare const AudioPlayerWithProvider: FC<AudioPlayerProps & SpectrumProviderProps>;
+export declare type RMAudioPlayerProps = AudioPlayerProps & SpectrumProviderProps;
+export declare const AudioPlayerWithProvider: FC<RMAudioPlayerProps>;

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

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

package/dist/types/index.d.ts

@@ -1,3 +1,6 @@
-export * from "./components/AudioPlayer";
 import { AudioPlayerWithProvider as AudioPlayer } from "./components/AudioPlayer";
 export default AudioPlayer;
+export * from "./components/AudioPlayer";
+export * from "./components/AudioPlayer/Context";
+export * from "./components/AudioPlayer/Player";
+export * from "./components/Provider/SpectrumProvider";

package/dist/types/utils/getRandomNumber.d.ts

@@ -0,0 +1 @@
+export declare const getRandomNumber: (min: number, max: number) => number;

package/package.json

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

package/dist/types/utils/generateGridTemplateValues.d.ts

@@ -1,5 +0,0 @@
-import { ActiveUI, InterfacePlacement } from '../components/AudioPlayer/Context/StateContext';
-export declare const generateGridTemplateValues: (activeUi: ActiveUI, placement?: InterfacePlacement["templateArea"]) => {
-    gridAreas: string[];
-    gridColumns: string[];
-};