UNPKG

@splicemood/react-music-player

Version:

The music player that sync all settings between multiple tabs on a single client-side browser session

2 lines (1 loc) 15.7 kB
var{defineProperty:TA,getOwnPropertyNames:lA,getOwnPropertyDescriptor:sA}=Object,aA=Object.prototype.hasOwnProperty;var IA=new WeakMap,tA=(_)=>{var w=IA.get(_),F;if(w)return w;if(w=TA({},"__esModule",{value:!0}),_&&typeof _==="object"||typeof _==="function")lA(_).map((W)=>!aA.call(w,W)&&TA(w,W,{get:()=>_[W],enumerable:!(F=sA(_,W))||F.enumerable}));return IA.set(_,w),w};var eA=(_,w)=>{for(var F in w)TA(_,F,{get:w[F],enumerable:!0,configurable:!0,set:(W)=>w[F]=()=>W})};var J0={};eA(J0,{useAudio:()=>z0,truncateBackStackQueue:()=>wA,step:()=>E,percentToValue:()=>jA,offsetTimeBumpToStart:()=>OA,metadataBytesLength:()=>vA,maxPercentage:()=>mA,firstElement:()=>H,fetchDuration:()=>R,defaultVolumePercent:()=>_A,defaultVolume:()=>ZA,debounceLoadingState:()=>NA,PlayerPlayPauseSyncProvider:()=>W0,PlayerNoSyncProvider:()=>$0,PlayerFullSyncProvider:()=>H0,LoopState:()=>cA});module.exports=tA(J0);var Y=require("react"),c=require("@mantine/hooks");var yA=require("react"),e=yA.createContext(void 0);var H=0,E=1,ZA=0.5,mA=100,_A=50,NA=200,wA=65536,OA=5,vA=3072;var cA;((W)=>{W[W.PlayAll=0]="PlayAll";W[W.LoopAll=1]="LoopAll";W[W.LoopCue=2]="LoopCue"})(cA||={});var pA=require("music-metadata");function A0(_){return new Promise((w,F)=>{let W=new Audio,U=()=>{W.removeEventListener("loadedmetadata",N),W.removeEventListener("error",b)},N=()=>{w(W.duration),U()},b=(I)=>{F(I),U()};W.addEventListener("loadedmetadata",N),W.addEventListener("error",b),W.src=_})}var G0=({src:_,duration:w})=>{if(w)return w;return new Promise(async(F,W)=>{try{let U=await fetch(_,{headers:{Range:"bytes=0-"+vA}});if(!U.ok)W(`HTTP error! status: ${U.status}`);if(U.headers.get("Accept-Ranges")!=="bytes")W("Server does not support range requests.");let b=U.body;if(b===null){W("webStream is null");return}let I=await pA.parseWebStream(b,"audio/mpeg");if(I.format.duration)F(I.format.duration);else{let y=await A0(_);F(y)}}catch(U){W(U)}})},R=(_)=>Promise.all(_.map(G0)).catch((w)=>{console.error("Errors occurred while fetching durations:",w)}),jA=(_)=>{return Math.round(_)/mA};var oA=require("react/jsx-runtime"),qA=window.localStorage,H0=({children:_})=>{let[w,F]=Y.useState(!1),[W,U]=c.useDebouncedState(void 0,NA),[N,b]=Y.useState([]),[I,y]=Y.useState([]),O=qA.getItem("player-playlist-id"),[h,Q]=c.useLocalStorage({key:"player-playlist-id",defaultValue:O||void 0}),j=qA.getItem("player-current-track-index"),p=j?Number(j):H,[q,L]=Y.useState(p),[C,D]=Y.useState(!1),[HA,V]=Y.useState(H),[i,WA]=c.useLocalStorage({key:"player-updated-time",defaultValue:0,getInitialValueInEffect:!0}),[o,FA]=c.useLocalStorage({key:"player-volume",defaultValue:ZA,getInitialValueInEffect:!0}),[T,bA]=Y.useState(_A),[DA,r]=Y.useState(H),[g,f]=Y.useState(H),[$A,B]=c.useLocalStorage({key:"player-muted",defaultValue:!1}),[k,zA]=c.useLocalStorage({key:"player-shuffle",defaultValue:!1}),[m,MA]=c.useLocalStorage({key:"player-repeat",defaultValue:0}),[u,M]=c.useLocalStorage({key:"player-shuffle-queue",defaultValue:[]}),A=Y.useRef(new Audio),x=Y.useRef(null),JA=Y.useCallback((G,J)=>{if(x.current)x.current.postMessage({type:G,value:J})},[x.current]);Y.useEffect(()=>{JA("UPDATE_TRACK",q)},[q]),Y.useEffect(()=>{if(C)if(!k)M([]);else M((G)=>{return[q,...G]})},[k]),Y.useEffect(()=>{let G=Math.round(o*100);bA(G)},[o]),Y.useEffect(()=>{if(A.current!==null&&w){let G=A.current.currentTime;if(Math.abs(G-i)>1)A.current.currentTime=i,V(i)}},[i]),Y.useEffect(()=>{if(A.current&&N.length>H){let G=N[q];A.current.src=G?.src,A.current.currentTime=H}},[N,q]),Y.useEffect(()=>{if(A.current&&N.length>H){let G=qA.getItem("player-current-track-index"),J=G&&Number(G)===q;if(!J)qA.setItem("player-current-track-index",String(q));if(C)JA("PAUSE_PLAYING"),U(!0),A.current.play().then(()=>{if(A.current&&J){let S=qA.getItem("player-sync-time");A.current.currentTime=Number(S)}U(void 0)}).catch(()=>{U(void 0)});else A.current.pause()}},[q,N,C]),Y.useEffect(()=>{if(A.current)A.current.volume=o,A.current.muted=$A},[o,$A]);let UA=(G)=>{let J=Array(G.length).fill(0);if(y(J),G.length>0)R(G).then((S)=>{if(Array.isArray(S))y(S)})},BA=(G)=>{R([G]).then((J)=>{if(J)y((S)=>{return[...S,J[0]]})})},KA=(G)=>{if(String(G)!==h)L(H),Q(G)};Y.useEffect(()=>{if(N.length>0)R(N).then((G)=>{if(Array.isArray(G))y(G)})},[N]);let l=()=>{if(A.current!==null){let G=A.current.currentTime;V(G),JA("UPDATE_TIME",G),qA.setItem("player-sync-time",String(G))}},XA=Y.useCallback(()=>{if(A.current!==null)f(A.current.duration)},[A.current?.duration]),d=Y.useCallback(()=>{if(N.length===H)return;D(!0)},[N]),v=Y.useCallback(()=>D(!1),[D]),YA=Y.useCallback(()=>D((G)=>!G),[D]),s=Y.useCallback((G=!1)=>{if(N.length===H)return;let J;if(k){let n=N.map((t,uA)=>uA).filter((t)=>t!==q);J=n[Math.floor(Math.random()*n.length)],M((t)=>{return t=t.slice(H,wA),[J,...t]})}else J=q+E;if(J>=N.length){if(D(G),J=H,!G)return}if(r(H),!C)D(!0);L(J)},[N,q,k,C,L]),a=Y.useCallback(()=>{switch(m){case 0:s();break;case 1:s(!0);break;case 2:A.current?.play();break}},[m,s]),QA=Y.useCallback(()=>{if(N.length===H||!A.current)return;if(HA>OA){A.current.currentTime=H;return}let G=H;if(k){if(u.length===E)return;M((J)=>{let[,...S]=J;return G=S[H],S})}else G=q-E;if(G<H)G=N.length-E;L(G),r(H),D(!0)},[N,u,q,HA,WA]),LA=(G)=>L(G),CA=(G)=>FA(G),EA=(G)=>{let J=jA(G);FA(J)},hA=()=>B(!0),gA=()=>B(!1),xA=()=>B((G)=>!G),PA=()=>zA(!0),SA=()=>zA(!1),kA=()=>zA((G)=>!G),VA=()=>{MA((G)=>{if(G===0)return 1;if(G===1)return 2;if(G===2)return 0;return 0})},RA=(G)=>{b((J)=>[...J,G]),BA(G)},z=(G,J)=>{let S=J!==void 0||C;if(v(),M([H]),r(H),b(G),UA(G),S)L(J||H),d()},Z=Y.useCallback((G)=>{let{data:J}=G;switch(J?.type){case"PAUSE_PLAYING":D(!1);break;case"UPDATE_TIME":if(!C&&J.value!==H)V(J.value);break;case"UPDATE_TRACK":if(!C)L(J.value);break}},[C,L,D,q]),P=()=>{if(A.current&&A.current.buffered.length>0){let G=A.current.buffered.end(A.current.buffered.length-1);r(G/A.current.duration*100)}};Y.useEffect(()=>{if(A.current)A.current.addEventListener("ended",a);return()=>{A.current?.removeEventListener("ended",a)}},[a]),Y.useEffect(()=>{if(A.current){let G=qA.getItem("player-sync-time"),J=Number(G);WA(J),A.current.currentTime=J,V(J),D(!1),A.current.preload="metadata",A.current.addEventListener("progress",P),A.current.addEventListener("timeupdate",l),A.current.addEventListener("durationchange",XA),F(!0)}if("BroadcastChannel"in window&&!x.current)x.current=new BroadcastChannel("global-audio-player"),x.current.onmessage=Z;return()=>{if(A.current)A.current.pause(),A.current.removeEventListener("progress",P),A.current.removeEventListener("timeupdate",l),A.current.removeEventListener("durationchange",XA),A.current=null}},[]);let $={play:d,pause:v,togglePlayPause:YA,next:s,previous:QA,setVolume:CA,setVolumePercent:EA,mute:hA,unmute:gA,toggleMute:xA,shuffleOn:PA,shuffleOff:SA,toggleShuffle:kA,toggleLoop:VA,addToPlaylist:RA,replacePlaylist:z,setCurrentTrack:LA,setUpdateTime:WA,setPlaylistId:KA,volume:o,volumePercent:T,bufferedPercentage:DA,currentPlaylistId:h,maxTime:g,playlist:N,durations:I,isPlaying:C,currentTime:HA,currentTrackIndex:q,repeatMode:m,isShuffled:k,isLoading:W,isMuted:$A};return oA.jsx(e.Provider,{value:$,children:_})};var K=require("react"),fA=require("@mantine/hooks");var dA=require("react/jsx-runtime"),AA=window.localStorage,W0=({children:_})=>{let[w,F]=fA.useDebouncedState(void 0,NA),[W,U]=K.useState([]),[N,b]=K.useState([]),[I,y]=K.useState(""),[O,h]=K.useState(H),[Q,j]=K.useState(!1),[p,q]=K.useState(H),[L,C]=K.useState(0),D=AA.getItem("player-volume"),HA=D?Number(D):ZA,[V,i]=K.useState(HA),[WA,o]=K.useState(_A),[FA,T]=K.useState(H),[bA,DA]=K.useState(H),r=AA.getItem("player-muted")==="true",[g,f]=K.useState(r),$A=AA.getItem("player-shuffle")==="true",[B,k]=K.useState($A),zA=AA.getItem("player-repeat"),[m,MA]=K.useState(Number(zA)||0),[u,M]=K.useState([]),A=K.useRef(new Audio),x=K.useRef(null),JA=K.useCallback(($,G)=>{if(x.current)x.current.postMessage({type:$,value:G})},[x.current]);K.useEffect(()=>{if(Q)if(!B)M([]);else M(($)=>{return[O,...$]});AA.setItem("player-shuffle",String(B))},[B]),K.useEffect(()=>{let $=Math.round(V*100);o($)},[V]),K.useEffect(()=>{if(A.current!==null)A.current.currentTime=L,q(L)},[L]),K.useEffect(()=>{if(A.current&&W.length>H){let $=W[O];A.current.src=$?.src,A.current.currentTime=H}},[W,O]),K.useEffect(()=>{if(A.current&&W.length>H)if(Q)JA("PAUSE_PLAYING"),F(!0),A.current.play().then(()=>{F(void 0)}).catch(()=>{F(void 0)});else A.current.pause()},[O,W,Q]),K.useEffect(()=>{if(A.current)A.current.volume=V,A.current.muted=g},[V,g]);let UA=($)=>{let G=Array($.length).fill(0);if(b(G),$.length>0)R($).then((J)=>{if(Array.isArray(J))b(J)})},BA=($)=>{R([$]).then((G)=>{if(G)b((J)=>{return[...J,G[0]]})})},KA=K.useCallback(()=>{if(A.current!==null)DA(A.current.duration)},[A.current?.duration]),l=K.useCallback(()=>{if(W.length===H)return;j(!0)},[W]),XA=K.useCallback(()=>j(!1),[j]),d=K.useCallback(()=>j(($)=>!$),[j]),v=K.useCallback(($=!1)=>{if(W.length===H)return;let G;if(B){let S=W.map((n,t)=>t).filter((n)=>n!==O);G=S[Math.floor(Math.random()*S.length)],M((n)=>{return n=n.slice(H,wA),[G,...n]})}else G=O+E;if(G>=W.length){if(j($),G=H,!$)return}if(T(H),!Q)j(!0);h(G)},[W,O,B,Q,h]),YA=K.useCallback(()=>{switch(m){case 0:v();break;case 1:v(!0);break;case 2:A.current?.play();break}},[m,v]),s=K.useCallback(()=>{if(W.length===H||!A.current)return;if(p>OA){A.current.currentTime=H;return}let $=H;if(B){if(u.length===E)return;M((G)=>{let[,...J]=G;return $=J[H],J})}else $=O-E;if($<H)$=W.length-E;h($),T(H),j(!0)},[W,u,O,p,C]),a=($)=>h($),QA=($)=>{i($),AA.setItem("player-volume",String($))},LA=($)=>{let G=jA($);QA(G)},CA=()=>f(!0),EA=()=>f(!1),hA=()=>f(($)=>!$),gA=()=>k(!0),xA=()=>k(!1),PA=()=>k(($)=>!$),SA=()=>{MA(($)=>{let G=0;if($===0)G=1;if($===1)G=2;if($===2)G=0;return AA.setItem("player-repeat",String(G)),G})},kA=($)=>{U((G)=>[...G,$]),BA($)},VA=($,G)=>{let J=G!==void 0||Q;if(XA(),M([H]),T(H),U($),UA($),J)h(G||H),l()};K.useEffect(()=>{AA.setItem("player-muted",String(g))},[g]);let RA=K.useCallback(($)=>{let{data:G}=$;switch(G?.type){case"PAUSE_PLAYING":j(!1);break}},[Q,h,j,O]),z=()=>{if(A.current&&A.current.buffered.length>0){let $=A.current.buffered.end(A.current.buffered.length-1);T($/A.current.duration*100)}},Z=()=>{if(A.current!==null){let $=A.current.currentTime;q($)}};K.useEffect(()=>{if(A.current)A.current.addEventListener("ended",YA);return()=>{A.current?.removeEventListener("ended",YA)}},[YA]),K.useEffect(()=>{if(A.current){if(A.current.muted=g,A.current.volume=V,j(!1),A.current.preload="metadata","BroadcastChannel"in window&&!x.current)x.current=new BroadcastChannel("playpause-audio-player"),x.current.onmessage=RA;A.current.addEventListener("progress",z),A.current.addEventListener("timeupdate",Z),A.current.addEventListener("durationchange",KA)}return()=>{if(A.current)A.current.pause(),A.current.removeEventListener("progress",z),A.current.removeEventListener("timeupdate",Z),A.current.removeEventListener("durationchange",KA),A.current=null}},[]);let P={play:l,pause:XA,togglePlayPause:d,next:v,previous:s,setVolume:QA,setVolumePercent:LA,mute:CA,unmute:EA,toggleMute:hA,shuffleOn:gA,shuffleOff:xA,toggleShuffle:PA,toggleLoop:SA,addToPlaylist:kA,replacePlaylist:VA,setCurrentTrack:a,setUpdateTime:C,setPlaylistId:y,volume:V,volumePercent:WA,bufferedPercentage:FA,currentPlaylistId:I,maxTime:bA,playlist:W,durations:N,isPlaying:Q,currentTime:p,currentTrackIndex:O,repeatMode:m,isShuffled:B,isLoading:w,isMuted:g};return dA.jsx(e.Provider,{value:P,children:_})};var X=require("react"),nA=require("@mantine/hooks");var iA=require("react/jsx-runtime"),GA=window.localStorage,$0=({children:_})=>{let[w,F]=nA.useDebouncedState(void 0,NA),[W,U]=X.useState([]),[N,b]=X.useState([]),[I,y]=X.useState(""),[O,h]=X.useState(H),[Q,j]=X.useState(!1),[p,q]=X.useState(H),[L,C]=X.useState(0),D=GA.getItem("player-volume"),HA=D?Number(D):ZA,[V,i]=X.useState(HA),[WA,o]=X.useState(_A),[FA,T]=X.useState(H),[bA,DA]=X.useState(H),r=GA.getItem("player-muted")==="true",[g,f]=X.useState(r),$A=GA.getItem("player-shuffle")==="true",[B,k]=X.useState($A),zA=GA.getItem("player-repeat"),[m,MA]=X.useState(Number(zA)||0),[u,M]=X.useState([]),A=X.useRef(new Audio);X.useEffect(()=>{if(Q)if(!B)M([]);else M((z)=>{return[O,...z]});GA.setItem("player-shuffle",String(B))},[B]),X.useEffect(()=>{let z=Math.round(V*100);o(z)},[V]),X.useEffect(()=>{if(A.current!==null)A.current.currentTime=L,q(L)},[L]),X.useEffect(()=>{if(A.current&&W.length>H){let z=W[O];A.current.src=z?.src,A.current.currentTime=H}},[W,O]),X.useEffect(()=>{if(A.current&&W.length>H)if(Q)F(!0),A.current.play().then(()=>{F(void 0)}).catch(()=>{F(void 0)});else A.current.pause()},[O,W,Q]),X.useEffect(()=>{if(A.current)A.current.volume=V,A.current.muted=g},[V,g]);let x=(z)=>{let Z=Array(z.length).fill(0);if(b(Z),z.length>0)R(z).then((P)=>{if(Array.isArray(P))b(P)})},JA=(z)=>{R([z]).then((Z)=>{if(Z)b((P)=>{return[...P,Z[0]]})})};X.useEffect(()=>{if(W.length>0)R(W).then((z)=>{if(Array.isArray(z))b(z)})},[W]);let UA=X.useCallback(()=>{if(A.current!==null){let z=A.current.currentTime;q(z)}},[q]),BA=X.useCallback(()=>{if(A.current!==null)DA(A.current.duration)},[A.current?.duration]),KA=X.useCallback(()=>{if(W.length===H)return;j(!0)},[W]),l=X.useCallback(()=>j(!1),[j]),XA=X.useCallback(()=>j((z)=>!z),[j]),d=X.useCallback((z=!1)=>{if(W.length===H)return;let Z;if(B){let $=W.map((G,J)=>J).filter((G)=>G!==O);Z=$[Math.floor(Math.random()*$.length)],M((G)=>{return G=G.slice(H,wA),[Z,...G]})}else Z=O+E;if(Z>=W.length){if(j(z),Z=H,!z)return}if(T(H),!Q)j(!0);h(Z)},[W,O,B,Q,h]),v=X.useCallback(()=>{switch(m){case 0:d();break;case 1:d(!0);break;case 2:A.current?.play();break}},[m,d]),YA=X.useCallback(()=>{if(W.length===H||!A.current)return;if(p>OA){A.current.currentTime=H;return}let z=H;if(B){if(u.length===E)return;M((Z)=>{let[,...P]=Z;return z=P[H],P})}else z=O-E;if(z<H)z=W.length-E;h(z),T(H),j(!0)},[W,u,O,p,C]),s=(z)=>h(z),a=(z)=>{i(z),GA.setItem("player-volume",String(z))},QA=(z)=>{let Z=jA(z);a(Z)},LA=()=>f(!0),CA=()=>f(!1),EA=()=>f((z)=>!z),hA=()=>k(!0),gA=()=>k(!1),xA=()=>k((z)=>!z),PA=()=>{MA((z)=>{let Z=0;if(z===0)Z=1;if(z===1)Z=2;if(z===2)Z=0;return GA.setItem("player-repeat",String(Z)),Z})},SA=(z)=>{U((Z)=>[...Z,z]),JA(z)},kA=(z,Z)=>{let P=Z!==void 0||Q;if(l(),M([H]),T(H),U(z),x(z),P)h(Z||H),KA()};X.useEffect(()=>{GA.setItem("player-muted",String(g))},[g]);let VA=()=>{if(A.current&&A.current.buffered.length>0){let z=A.current.buffered.end(A.current.buffered.length-1);T(z/A.current.duration*100)}};X.useEffect(()=>{if(A.current)A.current.addEventListener("ended",v);return()=>{A.current?.removeEventListener("ended",v)}},[v]),X.useEffect(()=>{if(A.current)A.current.muted=g,A.current.volume=V,j(!1),A.current.preload="metadata",A.current.addEventListener("progress",VA),A.current.addEventListener("timeupdate",UA),A.current.addEventListener("durationchange",BA);return()=>{if(A.current)A.current.pause(),A.current.removeEventListener("progress",VA),A.current.removeEventListener("timeupdate",UA),A.current.removeEventListener("durationchange",BA),A.current=null}},[]);let RA={play:KA,pause:l,togglePlayPause:XA,next:d,previous:YA,setVolume:a,setVolumePercent:QA,mute:LA,unmute:CA,toggleMute:EA,shuffleOn:hA,shuffleOff:gA,toggleShuffle:xA,toggleLoop:PA,addToPlaylist:SA,replacePlaylist:kA,setCurrentTrack:s,setUpdateTime:C,setPlaylistId:y,volume:V,volumePercent:WA,bufferedPercentage:FA,currentPlaylistId:I,maxTime:bA,playlist:W,durations:N,isPlaying:Q,currentTime:p,currentTrackIndex:O,repeatMode:m,isShuffled:B,isLoading:w,isMuted:g};return iA.jsx(e.Provider,{value:RA,children:_})};var rA=require("react");var z0=()=>{let _=rA.useContext(e);if(_===void 0)throw new Error("useAudio must be used within an PlayerContext");return _};