react-modern-audio-player 1.1.3 → 1.1.4

package/dist/index.cjs

@@ -8,7 +8,7 @@ Try polyfilling it using "@formatjs/intl-pluralrules"
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var Yc=W.default,qc=Symbol.for("react.element"),Jc=Symbol.for("react.fragment"),Qc=Object.prototype.hasOwnProperty,Zc=Yc.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,ef={key:!0,ref:!0,__self:!0,__source:!0};function Po(e,t,r){var n,a={},i=null,s=null;r!==void 0&&(i=""+r),t.key!==void 0&&(i=""+t.key),t.ref!==void 0&&(s=t.ref);for(n in t)Qc.call(t,n)&&!ef.hasOwnProperty(n)&&(a[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps,t)a[n]===void 0&&(a[n]=t[n]);return{$$typeof:qc,type:e,key:i,ref:s,props:a,_owner:Zc.current}}sr.Fragment=Jc;sr.jsx=Po;sr.jsxs=Po;or.exports=sr;const L=or.exports.jsx,le=or.exports.jsxs,ze=or.exports.Fragment,tf=({children:e,rootContainerProps:t})=>{const{playerPlacement:r}=j(Z),[n,a]=x.useState();return x.useLayoutEffect(()=>{r&&a((()=>{switch(r){case"bottom":return{bottom:0};case"top":return{top:0};case"bottom-left":return{bottom:0,left:0};case"bottom-right":return{bottom:0,right:0};case"top-left":return{top:0,left:0};case"top-right":return{top:0,right:0}}})())},[r]),L(yo,{theme:Xc,width:"100%",position:r&&"fixed",UNSAFE_className:"rm-audio-player-provider",...n,...t,children:e})},ce=x.createContext(null),Hn=e=>{const t=`${Math.floor(e/60)}`.padStart(2,"0"),r=`${Math.floor(e%60)}`.padStart(2,"0");return`${t}:${r}`},Fn=(e,t,r)=>{if(!e)return;const{progressHandleEl:n,progressValueEl:a,trackCurTimeEl:i,trackDurationEl:s,audioEl:o,waveformInst:l}=e;r&&(o&&(o.currentTime=0),l==null||l.seekTo(0)),n&&a&&(a.style.transform="scaleX(0)",n.style.transform="translateX(0px)"),i&&s&&(i.innerHTML="00:00",r||(s.innerHTML=t?Hn(t):"00:00"))},rf=(e,t)=>{var r,n,a,i;switch(t.type){case"NEXT_AUDIO":{if(e.curAudioState.repeatType==="NONE"&&e.curIdx+1===e.playList.length)return{...e,curAudioState:{...e.curAudioState,isPlaying:!1}};if(e.curAudioState.repeatType==="SHUFFLE"){let o=0;const l=()=>{o=Math.round(Math.random()*(e.playList.length-1))};for(;o===e.curIdx;)l();return{...e,curPlayId:e.playList[o].id,curIdx:o}}const s=(e.curIdx+1)%e.playList.length;return{...e,curIdx:s,curPlayId:e.playList[s].id}}case"PREV_AUDIO":{if(((r=e.elementRefs)==null?void 0:r.audioEl)&&((n=e.elementRefs)==null?void 0:n.audioEl.currentTime)>1||((a=e.elementRefs)==null?void 0:a.waveformInst)&&((i=e.elementRefs)==null?void 0:i.waveformInst.getCurrentTime())>1||e.curAudioState.repeatType==="NONE"&&e.curIdx===0)return Fn(e.elementRefs,void 0,!0),e;if(e.curAudioState.repeatType==="SHUFFLE"){const o=Math.round(Math.random()*(e.playList.length-1));return{...e,curPlayId:e.playList[o].id,curIdx:o}}const s=(e.curIdx-1+e.playList.length)%e.playList.length;return{...e,curPlayId:e.playList[s].id,curIdx:s}}case"UPDATE_PLAY_LIST":{const s=t.playList.find(o=>o.id===e.curPlayId);return s?{...e,playList:t.playList,curIdx:s.index}:(console.error("UPDATE_PLAY_LIST ERROR - curPlayId is not found on playList"),e)}case"SET_VOLUME":return{...e,curAudioState:{...e.curAudioState,volume:t.volume}};case"SET_INITIAL_AUDIO_STATE":return{...e,curAudioState:{...e.curAudioState,...t.audioInitialState},curPlayId:t.audioInitialState.curPlayId};case"SET_PlAY_STATE":return t.state!==void 0?{...e,curAudioState:{...e.curAudioState,isPlaying:t.state}}:{...e,curAudioState:{...e.curAudioState,isPlaying:!e.curAudioState.isPlaying}};case"SET_CURRENT_INDEX":return{...e,curPlayId:t.currentAudioId,curIdx:t.currentIndex};case"SET_REPEAT_TYPE":return{...e,curAudioState:{...e.curAudioState,repeatType:t.repeatType}};case"SET_PLACEMENTS":return{...e,playerPlacement:t.playerPlacement||e.playerPlacement,playListPlacement:t.playListPlacement||e.playListPlacement,interfacePlacement:t.interfacePlacement};case"SET_MUTED":return{...e,curAudioState:{...e.curAudioState,muted:t.muted}};case"SET_ACTIVE_UI":return{...e,activeUI:{...t.activeUI}};case"SET_ELEMENT_REFS":return{...e,elementRefs:{...e.elementRefs,...t.elementRefs}};case"SET_CUSTOM_ICONS":return{...e,customIcons:{...e.customIcons,...t.customIcons}};case"SET_COVER_IMGS_CSS":return{...e,coverImgsCss:{...e.coverImgsCss,...t.coverImgsCss}};default:throw new Error("Unhandled action")}},nf=({children:e})=>{const[t,r]=x.useReducer(rf,{playList:[],curPlayId:1,curIdx:0,curAudioState:{isPlaying:!1,repeatType:"ALL",volume:1},activeUI:{playButton:!0,volumeSlider:!0},playListPlacement:"bottom",interfacePlacement:{templateArea:{playButton:pe.templateArea.playButton}}});return L(Z.Provider,{value:t,children:L(ce.Provider,{value:r,children:e})})};const af=be.createGlobalStyle`
+ */var Yc=W.default,qc=Symbol.for("react.element"),Jc=Symbol.for("react.fragment"),Qc=Object.prototype.hasOwnProperty,Zc=Yc.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,ef={key:!0,ref:!0,__self:!0,__source:!0};function Po(e,t,r){var n,a={},i=null,s=null;r!==void 0&&(i=""+r),t.key!==void 0&&(i=""+t.key),t.ref!==void 0&&(s=t.ref);for(n in t)Qc.call(t,n)&&!ef.hasOwnProperty(n)&&(a[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps,t)a[n]===void 0&&(a[n]=t[n]);return{$$typeof:qc,type:e,key:i,ref:s,props:a,_owner:Zc.current}}sr.Fragment=Jc;sr.jsx=Po;sr.jsxs=Po;or.exports=sr;const L=or.exports.jsx,le=or.exports.jsxs,ze=or.exports.Fragment,tf=({children:e,rootContainerProps:t})=>{const{playerPlacement:r}=j(Z),[n,a]=x.useState();return x.useLayoutEffect(()=>{r&&a((()=>{switch(r){case"bottom":return{bottom:0};case"top":return{top:0};case"bottom-left":return{bottom:0,left:0};case"bottom-right":return{bottom:0,right:0};case"top-left":return{top:0,left:0};case"top-right":return{top:0,right:0}}})())},[r]),L(yo,{theme:Xc,width:"100%",position:r&&"fixed",UNSAFE_className:"rm-audio-player-provider",...n,...t,children:e})},ce=x.createContext(null),Hn=e=>{const t=`${Math.floor(e/60)}`.padStart(2,"0"),r=`${Math.floor(e%60)}`.padStart(2,"0");return`${t}:${r}`},Fn=(e,t,r)=>{if(!e)return;const{progressHandleEl:n,progressValueEl:a,trackCurTimeEl:i,trackDurationEl:s,audioEl:o,waveformInst:l}=e;r&&(o&&(o.currentTime=0),l==null||l.seekTo(0)),n&&a&&(a.style.transform="scaleX(0)",n.style.transform="translateX(0px)"),i&&s&&(i.innerHTML="00:00",r||(s.innerHTML=t?Hn(t):"00:00"))},rf=(e,t)=>{var r,n,a,i;switch(t.type){case"NEXT_AUDIO":{if(e.curAudioState.repeatType==="NONE"&&e.curIdx+1===e.playList.length)return{...e,curAudioState:{...e.curAudioState,isPlaying:!1}};if(e.curAudioState.repeatType==="SHUFFLE"){let o=0;const l=()=>{o=Math.round(Math.random()*(e.playList.length-1))};for(;o===e.curIdx;)l();return{...e,curPlayId:e.playList[o].id,curIdx:o}}const s=(e.curIdx+1)%e.playList.length;return{...e,curIdx:s,curPlayId:e.playList[s].id}}case"PREV_AUDIO":{if(((r=e.elementRefs)==null?void 0:r.audioEl)&&((n=e.elementRefs)==null?void 0:n.audioEl.currentTime)>1||((a=e.elementRefs)==null?void 0:a.waveformInst)&&((i=e.elementRefs)==null?void 0:i.waveformInst.getCurrentTime())>1||e.curAudioState.repeatType==="NONE"&&e.curIdx===0)return Fn(e.elementRefs,void 0,!0),e;if(e.curAudioState.repeatType==="SHUFFLE"){const o=Math.round(Math.random()*(e.playList.length-1));return{...e,curPlayId:e.playList[o].id,curIdx:o}}const s=(e.curIdx-1+e.playList.length)%e.playList.length;return{...e,curPlayId:e.playList[s].id,curIdx:s}}case"UPDATE_PLAY_LIST":return t.playList.find(o=>o.id===e.curPlayId)?{...e,playList:t.playList,curIdx:e.curIdx}:(console.error("UPDATE_PLAY_LIST ERROR - curPlayId is not found on playList"),e);case"SET_VOLUME":return{...e,curAudioState:{...e.curAudioState,volume:t.volume}};case"SET_INITIAL_AUDIO_STATE":return{...e,curAudioState:{...e.curAudioState,...t.audioInitialState},curPlayId:t.audioInitialState.curPlayId};case"SET_PlAY_STATE":return t.state!==void 0?{...e,curAudioState:{...e.curAudioState,isPlaying:t.state}}:{...e,curAudioState:{...e.curAudioState,isPlaying:!e.curAudioState.isPlaying}};case"SET_CURRENT_AUDIO":return{...e,curPlayId:t.currentAudioId,curIdx:t.currentIndex};case"SET_REPEAT_TYPE":return{...e,curAudioState:{...e.curAudioState,repeatType:t.repeatType}};case"SET_PLACEMENTS":return{...e,playerPlacement:t.playerPlacement||e.playerPlacement,playListPlacement:t.playListPlacement||e.playListPlacement,interfacePlacement:t.interfacePlacement};case"SET_MUTED":return{...e,curAudioState:{...e.curAudioState,muted:t.muted}};case"SET_ACTIVE_UI":return{...e,activeUI:{...t.activeUI}};case"SET_ELEMENT_REFS":return{...e,elementRefs:{...e.elementRefs,...t.elementRefs}};case"SET_CUSTOM_ICONS":return{...e,customIcons:{...e.customIcons,...t.customIcons}};case"SET_COVER_IMGS_CSS":return{...e,coverImgsCss:{...e.coverImgsCss,...t.coverImgsCss}};default:throw new Error("Unhandled action")}},nf=({children:e})=>{const[t,r]=x.useReducer(rf,{playList:[],curPlayId:1,curIdx:0,curAudioState:{isPlaying:!1,repeatType:"ALL",volume:1},activeUI:{playButton:!0,volumeSlider:!0},playListPlacement:"bottom",interfacePlacement:{templateArea:{playButton:pe.templateArea.playButton}}});return L(Z.Provider,{value:t,children:L(ce.Provider,{value:r,children:e})})};const af=be.createGlobalStyle`
 
 .rm-audio-player-provider {
   * {
@@ -160,8 +160,7 @@ Try polyfilling it using "@formatjs/intl-pluralrules"
       overflow: hidden;
     }
   }
-`,ld=({setIsOpen:e})=>{const{playList:t,activeUI:r}=j(Z),n=j(ce),[a,i]=x.useState(0),s=x.useCallback(o=>{n({type:"SET_CURRENT_INDEX",currentIndex:o,currentAudioId:t[o].id})},[n,t]);return{cssTransitionEventProps:{onExited:()=>e(!1),onEntered:()=>e(!0)},sortableItemEventProps:{draggable:r.playList!=="unSortable"||r.all,dragStartIdx:a,onDragStart:o=>i(o),onDrop:(o,l)=>n({type:"UPDATE_PLAY_LIST",playList:l}),onClick:o=>s(o)}}},ud=({isOpen:e,setIsOpen:t})=>{const{playList:r}=j(Z),{cssTransitionEventProps:n,sortableItemEventProps:a}=ld({setIsOpen:t}),{onClick:i,onDragStart:s,...o}=a;return r.length!==0?Pa.default.createPortal(L(Un,{visible:e,name:"playlist-content",enterTime:20,leaveTime:20,clearTime:300,...n,children:L(cd,{className:"play-list-container",children:L(cn,{children:r.map((l,h)=>L(cn.Item,{index:h,listData:r,onClick:()=>i(h),onDragStart:()=>s(h),...o,children:L(od,{data:l})},`sortable-item-${h}`))})})}),document.querySelector(".sortable-play-list")):L(ze,{})},cd=ae.default.div`
-  height: 20vh;
+`,ld=({setIsOpen:e})=>{const{playList:t,activeUI:r}=j(Z),n=j(ce),[a,i]=x.useState(0),s=x.useCallback(o=>{n({type:"SET_CURRENT_AUDIO",currentIndex:o,currentAudioId:t[o].id})},[n,t]);return{cssTransitionEventProps:{onExited:()=>e(!1),onEntered:()=>e(!0)},sortableItemEventProps:{draggable:r.playList!=="unSortable"||r.all,dragStartIdx:a,onDragStart:o=>i(o),onDrop:(o,l)=>n({type:"UPDATE_PLAY_LIST",playList:l}),onClick:o=>s(o)}}},ud=({isOpen:e,setIsOpen:t})=>{const{playList:r}=j(Z),{cssTransitionEventProps:n,sortableItemEventProps:a}=ld({setIsOpen:t}),{onClick:i,onDragStart:s,...o}=a;return r.length!==0?Pa.default.createPortal(L(Un,{visible:e,name:"playlist-content",enterTime:20,leaveTime:20,clearTime:300,...n,children:L(cd,{className:"play-list-container",children:L(cn,{children:r.map((l,h)=>L(cn.Item,{index:h,listData:r,onClick:()=>i(h),onDragStart:()=>s(h),...o,children:L(od,{data:l})},`sortable-item-${h}`))})})}),document.querySelector(".sortable-play-list")):L(ze,{})},cd=ae.default.div`
   transition-property: max-height, opacity;
   overflow-x: hidden;
   overflow-y: auto;

package/dist/index.es.js

@@ -8122,7 +8122,7 @@ const audioPlayerReducer = (state, action) => {
       return {
         ...state,
         playList: action.playList,
-        curIdx: curPlayListItem.index
+        curIdx: state.curIdx
       };
     }
     case "SET_VOLUME":
@@ -8156,7 +8156,7 @@ const audioPlayerReducer = (state, action) => {
           isPlaying: !state.curAudioState.isPlaying
         }
       };
-    case "SET_CURRENT_INDEX":
+    case "SET_CURRENT_AUDIO":
       return {
         ...state,
         curPlayId: action.currentAudioId,
@@ -13759,7 +13759,7 @@ const usePlayList = ({
   const [dragStartIdx, setDragStartIdx] = useState(0);
   const onClickItem = useCallback((index) => {
     audioPlayerDispatch({
-      type: "SET_CURRENT_INDEX",
+      type: "SET_CURRENT_AUDIO",
       currentIndex: index,
       currentAudioId: playList[index].id
     });
@@ -13824,7 +13824,6 @@ const PlayList = ({
   }), document.querySelector(".sortable-play-list")) : /* @__PURE__ */ jsx(Fragment, {});
 };
 const PlayListContainer = styled.div`
-  height: 20vh;
   transition-property: max-height, opacity;
   overflow-x: hidden;
   overflow-y: auto;

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

@@ -11,7 +11,6 @@ export declare type AudioCustomProps = {
 export declare type AudioData = {
     src: string;
     id: number;
-    index: number;
     name?: string | ReactNode;
     writer?: string | ReactNode;
     img?: string;

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

@@ -14,7 +14,7 @@ export declare type AudioContextAction = {
     type: "SET_PlAY_STATE";
     state?: boolean;
 } | {
-    type: "SET_CURRENT_INDEX";
+    type: "SET_CURRENT_AUDIO";
     currentIndex: number;
     currentAudioId: number;
 } | {

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

@@ -1,8 +1,6 @@
 import SortableList from "./SortableList";
 export default SortableList;
 export declare type ListData<T> = Array<T>;
-export declare type ListItem = Record<string, any> & {
-    index: number;
-};
+export declare type ListItem = Record<string, any>;
 export type { UseSortableListItemProps } from "./useSortableListItem";
 export type { SortableListItemProps } from "./SortableListItem";

package/package.json

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