react-modern-audio-player 1.4.0-rc.0 → 1.4.0-rc.2

package/README.md

@@ -74,7 +74,7 @@ function Player (){
 ```tsx
 interface AudioPlayerProps {
   playList: PlayList;
-  audioInitialState?: AudioInitialState;
+  audioInitialState?: InitialStates;
   audioRef?: React.MutableRefObject<HTMLAudioElement>;
   activeUI?: ActiveUI;
   customIcons?: CustomIcons;
@@ -92,7 +92,7 @@ interface AudioPlayerProps {
 Prop | Type | Default 
 --- | --- | --- 
 `playList` | [PlayList](#playlist) | [ ] 
-`audioInitialState` | [AudioInitialState](#audioinitialstate) | isPlaying: false </br>repeatType: "ALL" </br>volume: 1 
+`audioInitialState` | [InitialStates](#InitialStates) | isPlaying: false </br>repeatType: "ALL" </br>volume: 1 
 `activeUI` | [ActiveUI](#activeui) | playButton : true
 `customIcons` | [CustomIcons](#customicons) | undefined 
 `coverImgsCss` | [CoverImgsCss](#coverimgscss) | undefined 
@@ -114,10 +114,10 @@ type AudioData = {
 };
 ```
 
-## AudioInitialState
+## InitialStates
 
 ```tsx
-type AudioInitialState = Omit<
+type InitialStates = Omit<
   React.AudioHTMLAttributes<HTMLAudioElement>,
   "autoPlay"
 > & {

package/dist/index.es.js

@@ -1251,7 +1251,11 @@ const audioPlayerReducer = (state, action) => {
         return {
           ...state,
           curPlayId: state.playList[randomIdx].id,
-          curIdx: randomIdx
+          curIdx: randomIdx,
+          curAudioState: {
+            ...state.curAudioState,
+            isLoadedMetaData: false
+          }
         };
       }
       const infiniteLoopNextIdx = (state.curIdx + 1) % state.playList.length;
@@ -1282,7 +1286,11 @@ const audioPlayerReducer = (state, action) => {
       return {
         ...state,
         curPlayId: state.playList[infiniteLoopPrevIdx].id,
-        curIdx: infiniteLoopPrevIdx
+        curIdx: infiniteLoopPrevIdx,
+        curAudioState: {
+          ...state.curAudioState,
+          isLoadedMetaData: false
+        }
       };
     }
     case "UPDATE_PLAY_LIST": {
@@ -1312,11 +1320,16 @@ const audioPlayerReducer = (state, action) => {
           volume: action.volume
         }
       };
-    case "SET_INITIAL_AUDIO_STATE":
+    case "SET_AUDIO_STATE":
+      return {
+        ...state,
+        curAudioState: { ...state.curAudioState, ...action.audioState }
+      };
+    case "SET_INITIAL_STATES":
       return {
         ...state,
-        curAudioState: { ...state.curAudioState, ...action.audioInitialState },
-        curPlayId: action.audioInitialState.curPlayId
+        curAudioState: { ...state.curAudioState, ...action.audioState },
+        curPlayId: action.curPlayId
       };
     case "CHANGE_PLAYING_STATE":
       if (action.state !== void 0) {
@@ -1339,7 +1352,11 @@ const audioPlayerReducer = (state, action) => {
       return {
         ...state,
         curPlayId: action.currentAudioId,
-        curIdx: action.currentIndex
+        curIdx: action.currentIndex,
+        curAudioState: {
+          ...state.curAudioState,
+          isLoadedMetaData: false
+        }
       };
     case "SET_REPEAT_TYPE":
       return {
@@ -1533,6 +1550,10 @@ const useAudio = () => {
         return;
       const { duration } = e.currentTarget;
       resetAudioValues(elementRefs, duration);
+      audioPlayerDispatch({
+        type: "SET_AUDIO_STATE",
+        audioState: { isLoadedMetaData: true }
+      });
     },
     [elementRefs]
   );
@@ -1546,7 +1567,7 @@ const useAudio = () => {
     }
   }, [elementRefs == null ? void 0 : elementRefs.audioEl, curAudioState.isPlaying, audioPlayerDispatch]);
   useEffect(() => {
-    if (!(elementRefs == null ? void 0 : elementRefs.audioEl))
+    if (!(elementRefs == null ? void 0 : elementRefs.audioEl) || !curAudioState.volume)
       return;
     elementRefs.audioEl.volume = curAudioState.volume;
   }, [elementRefs == null ? void 0 : elementRefs.audioEl, curAudioState.volume]);
@@ -1568,7 +1589,7 @@ const Audio = ({
   const audioPlayerDispatch = useNonNullableContext(audioPlayerDispatchContext);
   const curPlayedAudioData = playList.find((audioData) => audioData.id === curPlayId);
   const audioNativeStates = Object.fromEntries(Object.entries(curAudioState).filter((state) => {
-    if (state[0] === "isPlaying" || state[0] === "repeatType" || state[0] === "curPlayId") {
+    if (state[0] === "isPlaying" || state[0] === "repeatType" || state[0] === "curPlayId" || state[0] === "isLoadedMetaData") {
       return false;
     }
     return true;
@@ -1886,7 +1907,8 @@ const PlayListTriggerBtn = ({
 const VolumeTriggerBtn = forwardRef((_, ref) => {
   const {
     curAudioState,
-    customIcons
+    customIcons,
+    elementRefs
   } = useNonNullableContext(audioPlayerStateContext);
   const audioPlayerDispatch = useNonNullableContext(audioPlayerDispatchContext);
   const changeMuteState = useCallback(() => audioPlayerDispatch({
@@ -1894,6 +1916,7 @@ const VolumeTriggerBtn = forwardRef((_, ref) => {
     muted: !curAudioState.muted
   }), [audioPlayerDispatch, curAudioState.muted]);
   const VolumeIcon = useMemo(() => {
+    var _a;
     const volumeOpt = {
       size: "100%"
     };
@@ -1912,7 +1935,7 @@ const VolumeTriggerBtn = forwardRef((_, ref) => {
       if (value > 0.5)
         return "high";
     };
-    switch (volumeState(curAudioState.volume)) {
+    switch (volumeState(curAudioState.volume || ((_a = elementRefs == null ? void 0 : elementRefs.audioEl) == null ? void 0 : _a.volume) || 0)) {
       case "mute":
         return /* @__PURE__ */ jsx(Icon, {
           render: /* @__PURE__ */ jsx(TbVolume3, {
@@ -2708,11 +2731,13 @@ const useRefsDispatch = ({ refs }, deps) => {
   }, [audioPlayerDispatch, ...Object.values(refs), ...deps]);
 };
 const useProgress = () => {
-  const { elementRefs } = useNonNullableContext(audioPlayerStateContext);
+  const { elementRefs, curAudioState } = useNonNullableContext(
+    audioPlayerStateContext
+  );
   const [isTimeChangeActive, setTimeChangeActive] = useState(false);
   const moveAudioTime = useCallback(
     (e) => {
-      if (!(elementRefs == null ? void 0 : elementRefs.audioEl))
+      if (!(elementRefs == null ? void 0 : elementRefs.audioEl) || !(curAudioState == null ? void 0 : curAudioState.isLoadedMetaData))
         return;
       const { clientX } = e;
       const { clientWidth } = e.currentTarget;
@@ -2722,7 +2747,7 @@ const useProgress = () => {
       const curPositionTime = curPositionPercent * elementRefs.audioEl.duration;
       elementRefs.audioEl.currentTime = curPositionTime;
     },
-    [elementRefs == null ? void 0 : elementRefs.audioEl]
+    [curAudioState == null ? void 0 : curAudioState.isLoadedMetaData, elementRefs == null ? void 0 : elementRefs.audioEl]
   );
   const setSelectStartActive = useCallback(
     (state) => document.onselectstart = () => state,
@@ -2756,13 +2781,13 @@ const BarProgress = ({
     curAudioState
   } = useNonNullableContext(audioPlayerStateContext);
   useEffect(() => {
-    if (!progressBarRef.current || !progressValueRef.current || !progressHandleRef.current || !(elementRefs == null ? void 0 : elementRefs.audioEl) || curAudioState.isPlaying)
+    if (!progressBarRef.current || !progressValueRef.current || !progressHandleRef.current || !(elementRefs == null ? void 0 : elementRefs.audioEl) || !curAudioState.isLoadedMetaData || curAudioState.isPlaying)
       return;
     const progressBarWidth = progressBarRef.current.clientWidth;
     const progressHandlePosition = elementRefs.audioEl.currentTime / elementRefs.audioEl.duration * progressBarWidth;
     progressValueRef.current.style.transform = `scaleX(${elementRefs.audioEl.currentTime / elementRefs.audioEl.duration})`;
     progressHandleRef.current.style.transform = `translateX(${progressHandlePosition}px)`;
-  }, [isActive]);
+  }, [isActive, curAudioState.isLoadedMetaData]);
   const eventProps = useProgress();
   return isActive ? /* @__PURE__ */ jsxs(BarProgressWrapper, {
     className: "bar-progress-wrapper",
@@ -7046,7 +7071,9 @@ const useWaveSurfer = (waveformRef) => {
       return;
     elementRefs.audioEl.pause();
     elementRefs.waveformInst.load(elementRefs == null ? void 0 : elementRefs.audioEl);
-    elementRefs.audioEl.volume = curAudioState.volume;
+    if (curAudioState.volume) {
+      elementRefs.audioEl.volume = curAudioState.volume;
+    }
     if (curAudioState.isPlaying)
       (_a = elementRefs == null ? void 0 : elementRefs.audioEl) == null ? void 0 : _a.play();
   }, [curPlayId, elementRefs == null ? void 0 : elementRefs.audioEl, elementRefs == null ? void 0 : elementRefs.waveformInst]);
@@ -7109,10 +7136,10 @@ const WaveformProgress = ({
   } = useNonNullableContext(audioPlayerStateContext);
   useWaveSurfer(waveformRef);
   useEffect(() => {
-    if (!isActive || !(elementRefs == null ? void 0 : elementRefs.waveformInst) || !(elementRefs == null ? void 0 : elementRefs.audioEl) || curAudioState.isPlaying)
+    if (!isActive || !(elementRefs == null ? void 0 : elementRefs.waveformInst) || !(elementRefs == null ? void 0 : elementRefs.audioEl) || !curAudioState.isLoadedMetaData || curAudioState.isPlaying)
       return;
     elementRefs.waveformInst.seekTo(elementRefs.audioEl.currentTime / elementRefs.audioEl.duration);
-  }, [isActive]);
+  }, [isActive, curAudioState.isLoadedMetaData]);
   const eventProps = useProgress();
   return /* @__PURE__ */ jsx(WaveformWrapper, {
     className: "waveform-wrapper",
@@ -7159,9 +7186,11 @@ Grid.Item = GridItem;
 const VolumeSlider = ({
   placement
 }) => {
+  var _a;
   const contentRef = useRef(null);
   const {
-    curAudioState
+    curAudioState,
+    elementRefs
   } = useNonNullableContext(audioPlayerStateContext);
   const audioPlayerDispatch = useNonNullableContext(audioPlayerDispatchContext);
   const onChangeVolume = useCallback((e) => {
@@ -7184,7 +7213,7 @@ const VolumeSlider = ({
   }, [curAudioState.muted, audioPlayerDispatch]);
   return /* @__PURE__ */ jsx(VolumeSliderContainer, {
     contentPlacement: placement,
-    volumeValue: curAudioState.volume * 100,
+    volumeValue: (curAudioState.volume || ((_a = elementRefs == null ? void 0 : elementRefs.audioEl) == null ? void 0 : _a.volume) || 0) * 100,
     ref: contentRef,
     className: "volume-content-container",
     children: /* @__PURE__ */ jsx("div", {
@@ -7891,20 +7920,20 @@ const useGridTemplate = (activeUI, templateArea, customComponentsArea) => {
         ...activeTemplatePlacementArr,
         ...Object.entries(customComponentsPlacement || {})
       ].map(([key, value]) => {
-        const [rowWithText, col] = value.split("-");
-        const row = rowWithText.split("row")[1];
-        maxRow = Math.max(maxRow, +row);
-        colsCntRecord[+row] = colsCntRecord[+row] ? colsCntRecord[+row] + 1 : 1;
+        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
         };
       }).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 = totalPlacementArr.filter(({ key, row }) => {
@@ -7929,16 +7958,8 @@ const useGridTemplate = (activeUI, templateArea, customComponentsArea) => {
             }
           }
         } 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();
@@ -8067,8 +8088,9 @@ const usePropsStateEffect = ({
     if (!isMounted || !audioInitialState)
       return;
     audioPlayerDispatch({
-      type: "SET_INITIAL_AUDIO_STATE",
-      audioInitialState
+      type: "SET_INITIAL_STATES",
+      audioState: audioInitialState,
+      curPlayId: audioInitialState.curPlayId
     });
   }, [audioInitialState, audioPlayerDispatch]);
   useEffect(() => {

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

@@ -2,9 +2,10 @@ import { ReactNode } from "react";
 export declare type AudioNativeProps = Omit<React.AudioHTMLAttributes<HTMLAudioElement>, "autoPlay">;
 export declare type RepeatType = "ALL" | "SHUFFLE" | "ONE" | "NONE";
 export declare type AudioCustomProps = {
-    isPlaying: boolean;
+    isLoadedMetaData?: boolean;
+    isPlaying?: boolean;
     repeatType?: RepeatType;
-    volume: number;
+    volume?: number;
     currentTime?: number;
     duration?: number;
 };
@@ -17,7 +18,4 @@ export declare type AudioData = {
     description?: string | ReactNode;
     customTrackInfo?: string | ReactNode;
 };
-export declare type CurAudioState = AudioNativeProps & AudioCustomProps;
-export declare type AudioInitialState = Partial<CurAudioState> & {
-    curPlayId: number;
-};
+export declare type AudioState = AudioNativeProps & AudioCustomProps;

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

@@ -1,11 +1,11 @@
-import { CurAudioState } from "./audio";
+import { AudioState } from "./audio";
 import { ActiveUI, CoverImgsCss, ElementRefs, CustomIcons, PlayList } from "./element";
 import { PlayListPlacement, InterfacePlacement, PlayerPlacement, VolumeSliderPlacement } from "./placement";
 export interface AudioPlayerStateContext {
     playList: PlayList;
     curPlayId: number;
     curIdx: number;
-    curAudioState: CurAudioState;
+    curAudioState: AudioState;
     activeUI: ActiveUI;
     playListPlacement: PlayListPlacement;
     playerPlacement?: PlayerPlacement;
@@ -15,6 +15,9 @@ export interface AudioPlayerStateContext {
     customIcons?: CustomIcons;
     coverImgsCss?: CoverImgsCss;
 }
+export declare type InitialStates = AudioState & {
+    curPlayId: number;
+};
 export * from "./audio";
 export * from "./element";
 export * from "./placement";

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

@@ -1,5 +1,5 @@
 import { Dispatch } from "react";
-import { RepeatType, PlayList, PlayListPlacement, PlayerPlacement, ActiveUI, ElementRefs, CustomIcons, AudioInitialState, InterfacePlacement, CoverImgsCss, VolumeSliderPlacement, defaultInterfacePlacementMaxLength } from "./StateContext";
+import { RepeatType, PlayList, PlayListPlacement, PlayerPlacement, ActiveUI, ElementRefs, CustomIcons, InterfacePlacement, CoverImgsCss, VolumeSliderPlacement, defaultInterfacePlacementMaxLength, AudioState } from "./StateContext";
 export declare type AudioContextAction<TInterfacePlacementLength extends number = typeof defaultInterfacePlacementMaxLength> = {
     type: "NEXT_AUDIO";
 } | {
@@ -8,8 +8,12 @@ export declare type AudioContextAction<TInterfacePlacementLength extends number
     type: "UPDATE_PLAY_LIST";
     playList: PlayList;
 } | {
-    type: "SET_INITIAL_AUDIO_STATE";
-    audioInitialState: AudioInitialState;
+    type: "SET_AUDIO_STATE";
+    audioState: AudioState;
+} | {
+    type: "SET_INITIAL_STATES";
+    audioState: AudioState;
+    curPlayId: number;
 } | {
     type: "CHANGE_PLAYING_STATE";
     state?: boolean;

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

@@ -1,8 +1,8 @@
-import { ActiveUI, PlayListPlacement, CustomIcons, PlayerPlacement, PlayList, AudioInitialState, InterfacePlacement, CoverImgsCss, VolumeSliderPlacement } from '../../AudioPlayer/Context';
+import { ActiveUI, PlayListPlacement, CustomIcons, PlayerPlacement, PlayList, InitialStates, InterfacePlacement, CoverImgsCss, VolumeSliderPlacement } from '../../AudioPlayer/Context';
 export interface AudioPlayerProps<TInterfacePlacementLength extends number> {
     children?: React.ReactNode;
     playList: PlayList;
-    audioInitialState?: AudioInitialState;
+    audioInitialState?: InitialStates;
     audioRef?: React.MutableRefObject<HTMLAudioElement>;
     activeUI?: ActiveUI;
     customIcons?: CustomIcons;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-modern-audio-player",
-  "version": "1.4.0-rc.0",
+  "version": "1.4.0-rc.2",
   "author": {
     "name": "LYH",
     "email": "slash9494@naver.com",
@@ -22,7 +22,8 @@
   "scripts": {
     "dev": "vite --host",
     "build": "rm -rf dist && tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "typeCheck": "tsc --project ./tsconfig.json --noEmit"
   },
   "peerDependencies": {
     "react": ">=16.8.0",