react-modern-audio-player 1.1.2 → 1.1.3

package/dist/index.es.js

@@ -7920,7 +7920,7 @@ let $bf24a13e98395dd3$export$bca14c5b3b88a9c9 = {
 const useNonNullableContext = (context) => {
   const state = useContext(context);
   if (!state)
-    throw new Error(`Cannot find ${context}Provider`);
+    throw new Error(`${context} is not provided or null`);
   return state;
 };
 const defaultInterfacePlacement = {
@@ -12645,6 +12645,12 @@ const useWaveSurfer = () => {
     const curTime = elementRefs.waveformInst.getCurrentTime();
     trackCurTimeEl.innerText = getTimeWithPadStart(curTime);
   }, [elementRefs]);
+  const waveEl = document.getElementsByTagName("wave");
+  useEffect(() => {
+    if (waveEl.length > 1) {
+      waveEl[0].setAttribute("style", "display: none");
+    }
+  }, [waveEl]);
   const [curAudioData, setCurAudioData] = useState();
   useEffect(() => {
     if (!(elementRefs == null ? void 0 : elementRefs.waveformInst) || !playList[curIdx])
@@ -12780,6 +12786,8 @@ const StyledBtn = styled.button`
     height: 100%;
     pointer-events: none;
   }
+
+  /** //TODO : animation on off  */
   &:hover {
     transform: scale(1.1);
   }
@@ -12888,7 +12896,7 @@ const PlayBtn = () => {
     customIcons
   } = useNonNullableContext(audioPlayerStateContext);
   const audioPlayerDispatch = useNonNullableContext(audioPlayerDispatchContext);
-  const onClick = () => audioPlayerDispatch({
+  const changePlayState = () => audioPlayerDispatch({
     type: "SET_PlAY_STATE"
   });
   const PlayIcon = useMemo(() => {
@@ -12903,7 +12911,7 @@ const PlayBtn = () => {
     });
   }, [curAudioState.isPlaying, customIcons == null ? void 0 : customIcons.pause, customIcons == null ? void 0 : customIcons.play]);
   return /* @__PURE__ */ jsx(StyledPlayBtn, {
-    onClick,
+    onClick: changePlayState,
     className: "play-button",
     children: PlayIcon
   });
@@ -12922,7 +12930,7 @@ const PrevNnextBtn = ({
     customIcons
   } = useNonNullableContext(audioPlayerStateContext);
   const audioPlayerDispatch = useNonNullableContext(audioPlayerDispatchContext);
-  const onClickBtn = () => {
+  const changeAudio = () => {
     if (type === "next") {
       audioPlayerDispatch({
         type: "NEXT_AUDIO"
@@ -12950,7 +12958,7 @@ const PrevNnextBtn = ({
     return null;
   }, [customIcons == null ? void 0 : customIcons.next, customIcons == null ? void 0 : customIcons.prev, type]);
   return visible ? /* @__PURE__ */ jsx(StyledBtn, {
-    onClick: onClickBtn,
+    onClick: changeAudio,
     className: "prev-n-next-button",
     children: PrevNnextIcon
   }) : null;
@@ -12982,7 +12990,7 @@ const RepeatTypeBtn = () => {
     customIcons
   } = useNonNullableContext(audioPlayerStateContext);
   const audioPlayerDispatch = useNonNullableContext(audioPlayerDispatchContext);
-  const onClick = useCallback(() => {
+  const changeRepeatType = useCallback(() => {
     switch (curAudioState.repeatType) {
       case "ALL":
         audioPlayerDispatch({
@@ -13035,7 +13043,7 @@ 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 /* @__PURE__ */ jsx(StyledBtn, {
-    onClick,
+    onClick: changeRepeatType,
     className: "repeat-button",
     children: RepeatIcon
   });
@@ -13062,7 +13070,7 @@ const VolumeTriggerBtn = forwardRef((_, ref) => {
     customIcons
   } = useNonNullableContext(audioPlayerStateContext);
   const audioPlayerDispatch = useNonNullableContext(audioPlayerDispatchContext);
-  const onClickMuted = useCallback(() => audioPlayerDispatch({
+  const changeMuteState = useCallback(() => audioPlayerDispatch({
     type: "SET_MUTED",
     muted: !curAudioState.muted
   }), [audioPlayerDispatch, curAudioState.muted]);
@@ -13112,7 +13120,7 @@ const VolumeTriggerBtn = forwardRef((_, ref) => {
     }
   }, [curAudioState.muted, curAudioState.volume, customIcons == null ? void 0 : customIcons.volumeMuted, customIcons == null ? void 0 : customIcons.volumeFull, customIcons == null ? void 0 : customIcons.volumeHalf]);
   return /* @__PURE__ */ jsx(StyledBtn, {
-    onClick: onClickMuted,
+    onClick: changeMuteState,
     className: "volume-trigger-container",
     ref,
     children: VolumeIcon
@@ -14398,29 +14406,39 @@ const DropdownTrigger = ({
 };
 Dropdown.Content = DropdownContent;
 Dropdown.Trigger = DropdownTrigger;
-const Volume = () => {
-  const triggerRef = useRef(null);
-  const {
-    activeUI: {
-      volumeSlider
-    }
-  } = useNonNullableContext(audioPlayerStateContext);
-  const [volumeSliderPlacement, setVolumeSliderPlacement] = useState("bottom");
+const useVolumeSliderPlacement = ({
+  ref,
+  initialState
+}) => {
+  const [volumeSliderPlacement, setVolumeSliderPlacement] = useState(initialState);
   useEffect(() => {
-    if (triggerRef.current) {
+    if (ref.current) {
       const placementValidation = () => {
-        if (triggerRef.current.getBoundingClientRect().top < window.innerHeight / 2) {
+        if (ref.current.getBoundingClientRect().top < window.innerHeight / 2) {
           return "bottom";
         }
         return "top";
       };
       setVolumeSliderPlacement(placementValidation());
     }
-  }, [triggerRef.current]);
+  }, [ref.current]);
+  return volumeSliderPlacement;
+};
+const Volume = () => {
+  const triggerRef = useRef(null);
+  const {
+    activeUI: {
+      volumeSlider: volumeSliderEl
+    }
+  } = useNonNullableContext(audioPlayerStateContext);
+  const volumeSliderPlacement = useVolumeSliderPlacement({
+    ref: triggerRef,
+    initialState: "bottom"
+  });
   return /* @__PURE__ */ jsxs(Dropdown, {
     placement: volumeSliderPlacement,
     triggerType: "hover",
-    disabled: !volumeSlider,
+    disabled: !volumeSliderEl,
     children: [/* @__PURE__ */ jsx(Dropdown.Trigger, {
       children: /* @__PURE__ */ jsx(VolumeTriggerBtn, {
         ref: triggerRef
@@ -14541,18 +14559,10 @@ const TrackTimeCurrent = () => {
   const {
     activeUI
   } = useNonNullableContext(audioPlayerStateContext);
-  const audioPlayerDispatch = useNonNullableContext(audioPlayerDispatchContext);
-  useEffect(() => {
-    if (trackCurTimeRef.current) {
-      const trackCurTimeEl = trackCurTimeRef.current;
-      audioPlayerDispatch({
-        type: "SET_ELEMENT_REFS",
-        elementRefs: {
-          trackCurTimeEl
-        }
-      });
-    }
-  }, [trackCurTimeRef.current, audioPlayerDispatch]);
+  useTrackTimeRefDispatchEffect({
+    ref: trackCurTimeRef,
+    refName: "trackCurTimeEl"
+  });
   return /* @__PURE__ */ jsx(TrackTimeCurrentContainer, {
     type: activeUI.trackTime,
     className: "track-time-current-container",
@@ -14568,18 +14578,10 @@ const TrackTimeDuration = () => {
   const {
     activeUI
   } = useNonNullableContext(audioPlayerStateContext);
-  const audioPlayerDispatch = useNonNullableContext(audioPlayerDispatchContext);
-  useEffect(() => {
-    if (trackDurationRef.current) {
-      const trackDurationEl = trackDurationRef.current;
-      audioPlayerDispatch({
-        type: "SET_ELEMENT_REFS",
-        elementRefs: {
-          trackDurationEl
-        }
-      });
-    }
-  }, [trackDurationRef.current, audioPlayerDispatch]);
+  useTrackTimeRefDispatchEffect({
+    ref: trackDurationRef,
+    refName: "trackDurationEl"
+  });
   return /* @__PURE__ */ jsx(TrackTimeDurationContainer, {
     type: activeUI.trackTime,
     className: "track-time-duration-container",
@@ -14590,6 +14592,23 @@ const TrackTimeDuration = () => {
     })
   });
 };
+const useTrackTimeRefDispatchEffect = ({
+  ref,
+  refName
+}) => {
+  const audioPlayerDispatch = useNonNullableContext(audioPlayerDispatchContext);
+  useEffect(() => {
+    const trackTimeRef = ref.current;
+    if (trackTimeRef) {
+      audioPlayerDispatch({
+        type: "SET_ELEMENT_REFS",
+        elementRefs: {
+          [refName]: trackTimeRef
+        }
+      });
+    }
+  }, [ref.current, audioPlayerDispatch, refName]);
+};
 const TrackTimeContainer = styled.div`
   display: flex;
   align-items: center;
@@ -14635,7 +14654,7 @@ const Information = () => {
     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);
+  const isTrackInfoActive = 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: ((_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,
@@ -14643,7 +14662,7 @@ const Information = () => {
       children: /* @__PURE__ */ jsx(Artwork, {})
     }), /* @__PURE__ */ jsx(Grid.Item, {
       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,
+      visible: isTrackInfoActive,
       children: /* @__PURE__ */ jsx(TrackInfo, {})
     }), /* @__PURE__ */ jsx(Grid.Item, {
       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,
@@ -14759,13 +14778,13 @@ const Interface = () => {
     })]
   });
 };
-const AudioPlayer = ({
-  playList,
-  audioInitialState,
+const usePropsStateEffect = ({
   placement = {},
   activeUI,
-  customIcons,
-  coverImgsCss
+  coverImgsCss,
+  audioInitialState,
+  playList,
+  customIcons
 }) => {
   const audioPlayerDispatch = useNonNullableContext(audioPlayerDispatchContext);
   useLayoutEffect(() => {
@@ -14783,18 +14802,12 @@ const AudioPlayer = ({
   }, [audioPlayerDispatch, placement]);
   useLayoutEffect(() => {
     if (activeUI) {
-      audioPlayerDispatch({
-        type: "SET_ACTIVE_UI",
-        activeUI
-      });
+      audioPlayerDispatch({ type: "SET_ACTIVE_UI", activeUI });
     }
   }, [activeUI, audioPlayerDispatch]);
   useLayoutEffect(() => {
     if (coverImgsCss) {
-      audioPlayerDispatch({
-        type: "SET_COVER_IMGS_CSS",
-        coverImgsCss
-      });
+      audioPlayerDispatch({ type: "SET_COVER_IMGS_CSS", coverImgsCss });
     }
   }, [audioPlayerDispatch, coverImgsCss]);
   useEffect(() => {
@@ -14806,19 +14819,16 @@ const AudioPlayer = ({
     }
   }, [audioInitialState, audioPlayerDispatch]);
   useEffect(() => {
-    audioPlayerDispatch({
-      type: "UPDATE_PLAY_LIST",
-      playList
-    });
+    audioPlayerDispatch({ type: "UPDATE_PLAY_LIST", playList });
   }, [audioPlayerDispatch, playList]);
   useEffect(() => {
     if (customIcons) {
-      audioPlayerDispatch({
-        type: "SET_CUSTOM_ICONS",
-        customIcons
-      });
+      audioPlayerDispatch({ type: "SET_CUSTOM_ICONS", customIcons });
     }
   }, [customIcons, audioPlayerDispatch]);
+};
+const AudioPlayer = (props) => {
+  usePropsStateEffect(props);
   return /* @__PURE__ */ jsxs($b9606c0c41d55371$export$27a5bd065ad55220, {
     id: "rm-audio-player",
     UNSAFE_className: "rm-audio-player-container",

package/dist/types/components/AudioPlayer/Interface/Controller/Tooltip/Volume/useVolume.d.ts

@@ -0,0 +1,5 @@
+import { VolumeSliderPlacement } from "./Content";
+export declare const useVolumeSliderPlacement: ({ ref, initialState, }: {
+    ref: React.RefObject<HTMLElement>;
+    initialState: VolumeSliderPlacement;
+}) => VolumeSliderPlacement;

package/dist/types/components/AudioPlayer/{Player.d.ts → Player/index.d.ts}

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { ActiveUI, PlayListPlacement, CustomIcons, PlayerPlacement, PlayList, AudioInitialState, InterfacePlacement, CoverImgsCss } from '../AudioPlayer/Context';
+import { ActiveUI, PlayListPlacement, CustomIcons, PlayerPlacement, PlayList, AudioInitialState, InterfacePlacement, CoverImgsCss } from '../../AudioPlayer/Context';
 export interface AudioPlayerProps {
     playList: PlayList;
     audioInitialState?: AudioInitialState;

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

@@ -0,0 +1,2 @@
+import { AudioPlayerProps } from ".";
+export declare const usePropsStateEffect: ({ placement, activeUI, coverImgsCss, audioInitialState, playList, customIcons, }: AudioPlayerProps) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-modern-audio-player",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "homepage": "https://github.com/slash9494/react-modern-audio-player/",
   "module": "dist/index.es.js",
   "main": "dist/index.cjs",