react-use-audio-player-guru
Version:
React hook for building custom audio playback controls
3 lines (2 loc) • 4.42 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e,r,n=require("react"),t=(e=n)&&"object"==typeof e&&"default"in e?e.default:e,o=require("howler");function u(){return(u=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}function a(e,r){if(null==e)return{};var n,t,o={},u=Object.keys(e);for(t=0;t<u.length;t++)r.indexOf(n=u[t])>=0||(o[n]=e[n]);return o}!function(e){e[e.START_LOAD=0]="START_LOAD",e[e.ON_LOAD=1]="ON_LOAD",e[e.ON_PLAY=2]="ON_PLAY",e[e.ON_END=3]="ON_END",e[e.ON_PAUSE=4]="ON_PAUSE",e[e.ON_STOP=5]="ON_STOP",e[e.ON_PLAY_ERROR=6]="ON_PLAY_ERROR",e[e.ON_LOAD_ERROR=7]="ON_LOAD_ERROR"}(r||(r={}));var i={loading:!0,playing:!1,stopped:!0,ended:!1,error:null,duration:0,ready:!1};function d(e,n){switch(n.type){case r.START_LOAD:return u({},e,{loading:!0,stopped:!0,ready:!1,error:null,duration:0});case r.ON_LOAD:return u({},e,{loading:!1,duration:n.duration,ended:!1,ready:!0});case r.ON_PLAY:return u({},e,{playing:!0,ended:!1,stopped:!1});case r.ON_STOP:return u({},e,{stopped:!0,playing:!1});case r.ON_END:return u({},e,{stopped:!0,playing:!1,ended:!0});case r.ON_PAUSE:return u({},e,{playing:!1});case r.ON_PLAY_ERROR:return u({},e,{playing:!1,stopped:!0,error:n.error});case r.ON_LOAD_ERROR:return u({},e,{playing:!1,stopped:!0,loading:!1,error:n.error});default:return e}}var l=t.createContext(null),c=function(){},s=function(e){var r=n.useContext(l),t=r.player,o=r.load,i=a(r,["player","load"]),d=e||{},s=d.src,p=a(d,["src"]);n.useEffect((function(){s&&o(u({src:s},p))}),[s,p,o]);var f=n.useCallback((function(){t&&(t.playing()?t.pause():t.play())}),[t]),O=n.useCallback((function(e){if(t){var r=t.seek(e);if(!r._src)return r}}),[t]);return u({},i,{play:t?t.play.bind(t):c,pause:t?t.pause.bind(t):c,stop:t?t.stop.bind(t):c,mute:t?t.mute.bind(t):c,volume:t?t.volume.bind(t):c,rate:t?t.rate.bind(t):c,player:t,seek:O,load:o,togglePlayPause:f})};exports.AudioPlayerProvider=function(e){var u=e.children,a=e.value,c=n.useState(null),s=c[0],p=c[1],f=n.useReducer(d,i),O=f[0],y=O.loading,_=O.error,v=O.playing,A=O.stopped,R=O.duration,N=O.ready,P=O.ended,E=f[1],g=n.useRef(),L=n.useRef(),m=n.useCallback((function(e){return new o.Howl(e)}),[]),h=n.useCallback((function(e){var n=e.src,t=e.format,o=void 0===t?void 0:t,u=e.autoplay,a=void 0!==u&&u,i=e.html5,d=void 0!==i&&i,l=e.xhr,c=void 0===l?{method:"GET",headers:void 0,withCredentials:void 0}:l,s=!1;if(g.current){if(g.current._src===n)return;y&&(L.current=g.current,L.current.once("load",(function(){var e;null===(e=L.current)||void 0===e||e.unload()}))),(s=g.current.playing())&&(g.current.stop(),g.current.off(),g.current=void 0)}E({type:r.START_LOAD});var f=m({src:n,format:o,autoplay:s||a,html5:d,xhr:c});"loaded"===f._state&&E({type:r.ON_LOAD,duration:f.duration()}),f.on("load",(function(){E({type:r.ON_LOAD,duration:f.duration()})})),f.on("play",(function(){E({type:r.ON_PLAY})})),f.on("end",(function(){E({type:r.ON_END})})),f.on("pause",(function(){E({type:r.ON_PAUSE})})),f.on("stop",(function(){E({type:r.ON_STOP})})),f.on("playerror",(function(e,n){E({type:r.ON_PLAY_ERROR,error:new Error("[Play error] "+n)})})),f.on("loaderror",(function(e,n){E({type:r.ON_LOAD_ERROR,error:new Error("[Load error] "+n)})})),p(f),g.current=f}),[m,y]);n.useEffect((function(){return function(){g.current&&g.current.unload()}}),[]);var D=n.useMemo((function(){return a||{player:s,load:h,error:_,loading:y,playing:v,stopped:A,ready:N,duration:R,ended:P}}),[y,_,v,A,h,a,s,N,R,P]);return t.createElement(l.Provider,{value:D},u)},exports.useAudioPlayer=s,exports.useAudioPosition=function(e){void 0===e&&(e={});var r=e.highRefreshRate,t=void 0!==r&&r,o=n.useContext(l),u=o.player,a=o.playing,i=o.stopped,d=o.duration,c=s().seek,p=n.useState(0),f=p[0],O=p[1],y=n.useRef();return n.useEffect((function(){u&&O(u.seek())}),[u,i]),n.useEffect((function(){var e;return!t&&u&&a&&(e=window.setInterval((function(){return O(u.seek())}),1e3)),function(){return clearTimeout(e)}}),[t,u,a]),n.useLayoutEffect((function(){return t&&u&&a&&(y.current=requestAnimationFrame((function e(){O(null==u?void 0:u.seek()),y.current=requestAnimationFrame(e)}))),function(){y.current&&cancelAnimationFrame(y.current)}}),[t,u,a]),{position:f,duration:d,seek:c}};
//# sourceMappingURL=react-use-audio-player-guru.cjs.production.min.js.map