react-modern-audio-player 1.0.1 → 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 = {
@@ -8222,7 +8222,8 @@ const AudioPlayerProvider = ({
       volume: 1
     },
     activeUI: {
-      playButton: true
+      playButton: true,
+      volumeSlider: true
     },
     playListPlacement: "bottom",
     interfacePlacement: {
@@ -8242,141 +8243,43 @@ const AudioPlayerProvider = ({
 var vars = "";
 const GlobalStyle = createGlobalStyle`
 
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-button,
-video {
-  margin: 0;
-  padding: 0;
-  font: inherit;
-  font-size: 100%;
-  vertical-align: baseline;
-  border: 0;
-}
-/* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
-}
-body {
-  line-height: 1;
-}
-ol,
-ul {
-  list-style: none;
-}
-blockquote,
-q {
-  quotes: none;
-}
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: '';
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
+.rm-audio-player-provider {
+  * {
+    box-sizing: border-box;
+    font: inherit;
+    font-size: 100%;
+  }
 
-button{
+  ol,
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  blockquote,
+  q {
+    quotes: none;
+  }
+  blockquote:before,
+  blockquote:after,
+  q:before,
+  q:after {
+    content: '';
+    content: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  button {
+    margin: 0;
+    padding: 0;
     background: transparent;
     cursor: pointer;
-}
-
-* {
-  box-sizing: border-box;
-}
-`;
+    vertical-align: baseline;
+    border: 0;
+  }
+}`;
 function $parcel$export$1(e, n2, v, s) {
   Object.defineProperty(e, n2, { get: v, set: s, enumerable: true, configurable: true });
 }
@@ -12742,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])
@@ -12877,6 +12786,8 @@ const StyledBtn = styled.button`
     height: 100%;
     pointer-events: none;
   }
+
+  /** //TODO : animation on off  */
   &:hover {
     transform: scale(1.1);
   }
@@ -12985,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(() => {
@@ -13000,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
   });
@@ -13019,7 +12930,7 @@ const PrevNnextBtn = ({
     customIcons
   } = useNonNullableContext(audioPlayerStateContext);
   const audioPlayerDispatch = useNonNullableContext(audioPlayerDispatchContext);
-  const onClickBtn = () => {
+  const changeAudio = () => {
     if (type === "next") {
       audioPlayerDispatch({
         type: "NEXT_AUDIO"
@@ -13047,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;
@@ -13076,11 +12987,10 @@ function TbVolume(props) {
 const RepeatTypeBtn = () => {
   const {
     curAudioState,
-    customIcons,
-    activeUI
+    customIcons
   } = useNonNullableContext(audioPlayerStateContext);
   const audioPlayerDispatch = useNonNullableContext(audioPlayerDispatchContext);
-  const onClick = useCallback(() => {
+  const changeRepeatType = useCallback(() => {
     switch (curAudioState.repeatType) {
       case "ALL":
         audioPlayerDispatch({
@@ -13133,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
   });
@@ -13160,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]);
@@ -13210,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
@@ -13702,7 +13612,8 @@ const SortableListItem = (props) => {
   });
 };
 const SortableListItemContainer = styled.li`
-  border: 2px solid transparent;
+  border-top: 2px solid transparent;
+  border-bottom: 2px solid transparent;
   transition: all 0.3s ease-in-out;
 
   & * {
@@ -14361,6 +14272,7 @@ const Dropdown = ({
   children,
   isOpen: isOpenProp,
   placement = "bottom",
+  disabled = false,
   onOpenChange
 }) => {
   const dropdownRef = useRef(null);
@@ -14391,7 +14303,7 @@ const Dropdown = ({
         onOpenChange
       },
       children: /* @__PURE__ */ jsxs(Fragment, {
-        children: [trigger, content]
+        children: [trigger, !disabled && content]
       })
     })
   });
@@ -14468,7 +14380,7 @@ const DropdownContent = ({
     onExited,
     onEntered,
     children: Content
-  }) : Content;
+  }) : isOpen ? Content : null;
 };
 const DropdownContentContainer = styled.div`
   ${({
@@ -14494,23 +14406,39 @@ const DropdownTrigger = ({
 };
 Dropdown.Content = DropdownContent;
 Dropdown.Trigger = DropdownTrigger;
-const Volume = () => {
-  const triggerRef = useRef(null);
-  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: !volumeSliderEl,
     children: [/* @__PURE__ */ jsx(Dropdown.Trigger, {
       children: /* @__PURE__ */ jsx(VolumeTriggerBtn, {
         ref: triggerRef
@@ -14601,10 +14529,10 @@ const TrackInfoContainer = styled.div`
     overflow: hidden;
   }
   .title {
-    font-size: 1rem;
+    font-size: 16px;
   }
   .writer {
-    font-size: 0.875rem;
+    font-size: 12px;
   }
 `;
 const TrackInfo = () => {
@@ -14631,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",
@@ -14658,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",
@@ -14680,13 +14592,30 @@ 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;
   justify-content: center;
   min-height: 16px;
-  font-family: monospace;
-  font-size: 1.2rem;
+  font-family: monospace !important;
+  font-size: 16px !important;
 `;
 const TrackTimeCurrentContainer = styled(TrackTimeContainer)`
   ${({
@@ -14725,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,
@@ -14733,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,
@@ -14811,9 +14740,16 @@ const generateGridTemplateValues = (activeUi, placement) => {
   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 {
@@ -14842,13 +14778,13 @@ const Interface = () => {
     })]
   });
 };
-const AudioPlayer = ({
-  playList,
-  audioInitialState,
+const usePropsStateEffect = ({
   placement = {},
   activeUI,
-  customIcons,
-  coverImgsCss
+  coverImgsCss,
+  audioInitialState,
+  playList,
+  customIcons
 }) => {
   const audioPlayerDispatch = useNonNullableContext(audioPlayerDispatchContext);
   useLayoutEffect(() => {
@@ -14866,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(() => {
@@ -14889,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",
@@ -14915,9 +14842,9 @@ const AudioPlayerWithProvider = ({
   return /* @__PURE__ */ jsx(AudioPlayerProvider, {
     children: /* @__PURE__ */ jsxs(SpectrumProvider, {
       rootContainerProps,
-      children: [/* @__PURE__ */ jsx(GlobalStyle, {}), /* @__PURE__ */ jsx(AudioPlayer, {
+      children: [/* @__PURE__ */ jsx(AudioPlayer, {
         ...audioPlayProps
-      })]
+      }), /* @__PURE__ */ jsx(GlobalStyle, {})]
     })
   });
 };

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

@@ -10,6 +10,7 @@ export declare type ActiveUI = Partial<{
     playList: PlayListUI;
     prevNnext: boolean;
     volume: boolean;
+    volumeSlider: boolean;
     repeatType: boolean;
     trackTime: TrackTimeUI;
     trackInfo: boolean;

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

@@ -3,7 +3,7 @@ import { ActiveUI } from "./element";
 export declare type PlayListPlacement = "bottom" | "top";
 export declare type PlayerPlacement = "bottom" | "top" | "bottom-left" | "bottom-right" | "top-left" | "top-right";
 export declare const interfacePlacementMaxLength = 10;
-export declare type InterfacePlacementKey = Exclude<keyof ActiveUI, "all" | "prevNnext" | "trackTime"> | "trackTimeCurrent" | "trackTimeDuration";
+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 InterfaceGridItemArea = Partial<Record<InterfacePlacementKey, string>>;
 export declare type InterfacePlacement = {

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/dist/types/components/Dropdown/Dropdown.d.ts

@@ -7,6 +7,7 @@ export interface DropdownProps extends Omit<Partial<DropdownContext>, "setIsOpen
     triggerType?: "click" | "hover";
     outboundClickActive?: boolean;
     placement?: DropdownContext["placement"];
+    disabled?: boolean;
 }
 declare const Dropdown: FC<PropsWithChildren<DropdownProps>>;
 declare type DropdownComponent = typeof Dropdown & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-modern-audio-player",
-  "version": "1.0.1",
+  "version": "1.1.3",
   "homepage": "https://github.com/slash9494/react-modern-audio-player/",
   "module": "dist/index.es.js",
   "main": "dist/index.cjs",
@@ -16,8 +16,7 @@
   "scripts": {
     "dev": "vite --host",
     "build": "rm -rf dist && tsc && vite build",
-    "preview": "vite preview",
-    "publish": "npm publish --access public"
+    "preview": "vite preview"
   },
   "peerDependencies": {
     "react": ">=16.8.0",