react-use-audio-player - npm Package Compare versions

Comparing version 1.2.3 to 1.2.4

dist/react-use-audio-player.cjs.development.js

@@ -184,4 +184,8 @@ 'use strict';
       // @ts-ignore the _src argument actually exists
-      if (playerRef.current._src === src) return; // if the previous sound is still loading then destroy it as soon as it finishes
+      var _src = playerRef.current._src; // internal Howl _src property is sometimes an array and other times a single string
+      // still need to to do more research on why this is
 
+      var prevSrc = Array.isArray(_src) ? _src[0] : _src;
+      if (prevSrc === src) return; // if the previous sound is still loading then destroy it as soon as it finishes
+
       if (loading) {
@@ -188,0 +192,0 @@ prevPlayer.current = playerRef.current;

dist/react-use-audio-player.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";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 c(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),s=t.createContext({position:0,setPosition:function(){}}),d=function(){},p="undefined"!=typeof window?n.useLayoutEffect:n.useEffect;exports.AudioPlayerProvider=function(e){var d=e.children,p=e.value,f=n.useState(null),O=f[0],y=f[1],_=n.useReducer(c,i),v=_[0],A=v.loading,R=v.error,N=v.playing,P=v.stopped,E=v.duration,g=v.ready,L=v.ended,m=_[1],D=n.useRef(),b=n.useRef(),S=n.useState(0),h=S[0],T=S[1],k=n.useMemo((function(){return{position:h,setPosition:T}}),[h,T]),w=n.useCallback((function(e){return new o.Howl(e)}),[]),x=n.useCallback((function(e){var n=e.src,t=e.autoplay,o=void 0!==t&&t,i=e.html5,c=void 0!==i&&i,l=a(e,["src","autoplay","html5"]),s=!1;if(D.current){if(D.current._src===n)return;A&&(b.current=D.current,b.current.once("load",(function(){var e;null===(e=b.current)||void 0===e||e.unload()}))),(s=D.current.playing())&&(D.current.stop(),D.current.off(),D.current=void 0)}m({type:r.START_LOAD});var d=w(u({src:n,autoplay:s||o,html5:c},l));"loaded"===d._state&&m({type:r.ON_LOAD,duration:d.duration()}),d.on("load",(function(){m({type:r.ON_LOAD,duration:d.duration()})})),d.on("play",(function(){m({type:r.ON_PLAY})})),d.on("end",(function(){m({type:r.ON_END})})),d.on("pause",(function(){m({type:r.ON_PAUSE})})),d.on("stop",(function(){m({type:r.ON_STOP})})),d.on("playerror",(function(e,n){m({type:r.ON_PLAY_ERROR,error:new Error("[Play error] "+n)})})),d.on("loaderror",(function(e,n){m({type:r.ON_LOAD_ERROR,error:new Error("[Load error] "+n)})})),y(d),D.current=d}),[w,A]);n.useEffect((function(){return function(){D.current&&D.current.unload()}}),[]);var C=n.useMemo((function(){return p||{player:O,load:x,error:R,loading:A,playing:N,stopped:P,ready:g,duration:E,ended:L}}),[A,R,N,P,x,p,O,g,E,L]);return t.createElement(l.Provider,{value:C},t.createElement(s.Provider,{value:k},d))},exports.useAudioPlayer=function(e){var r=n.useContext(l),t=r.player,o=r.load,i=a(r,["player","load"]);n.useEffect((function(){var r=e||{},n=r.src,t=a(r,["src"]);n&&o(u({src:n},t))}),[e,o]);var c=n.useCallback((function(){t&&(t.playing()?t.pause():t.play())}),[t]);return u({},i,{player:t,play:t?t.play.bind(t):d,pause:t?t.pause.bind(t):d,stop:t?t.stop.bind(t):d,mute:t?t.mute.bind(t):d,volume:t?t.volume.bind(t):d,load:o,togglePlayPause:c})},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,c=o.duration,d=n.useContext(s),f=d.position,O=d.setPosition,y=n.useRef();n.useEffect((function(){u&&O(u.seek())}),[u,O,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,O]),p((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,O]);var _=n.useCallback((function(e){if(!u)return 0;var r=u.seek(e).seek();return O(r),r}),[u,O]),v=n.useMemo((function(){return f/c*100||0}),[c,f]);return{position:f,duration:c,seek:_,percentComplete:v}};
+"use strict";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 c(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),s=t.createContext({position:0,setPosition:function(){}}),d=function(){},p="undefined"!=typeof window?n.useLayoutEffect:n.useEffect;exports.AudioPlayerProvider=function(e){var d=e.children,p=e.value,f=n.useState(null),O=f[0],y=f[1],_=n.useReducer(c,i),v=_[0],A=v.loading,R=v.error,N=v.playing,P=v.stopped,E=v.duration,g=v.ready,L=v.ended,m=_[1],D=n.useRef(),b=n.useRef(),S=n.useState(0),h=S[0],T=S[1],k=n.useMemo((function(){return{position:h,setPosition:T}}),[h,T]),w=n.useCallback((function(e){return new o.Howl(e)}),[]),x=n.useCallback((function(e){var n=e.src,t=e.autoplay,o=void 0!==t&&t,i=e.html5,c=void 0!==i&&i,l=a(e,["src","autoplay","html5"]),s=!1;if(D.current){var d=D.current._src;if((Array.isArray(d)?d[0]:d)===n)return;A&&(b.current=D.current,b.current.once("load",(function(){var e;null===(e=b.current)||void 0===e||e.unload()}))),(s=D.current.playing())&&(D.current.stop(),D.current.off(),D.current=void 0)}m({type:r.START_LOAD});var p=w(u({src:n,autoplay:s||o,html5:c},l));"loaded"===p._state&&m({type:r.ON_LOAD,duration:p.duration()}),p.on("load",(function(){m({type:r.ON_LOAD,duration:p.duration()})})),p.on("play",(function(){m({type:r.ON_PLAY})})),p.on("end",(function(){m({type:r.ON_END})})),p.on("pause",(function(){m({type:r.ON_PAUSE})})),p.on("stop",(function(){m({type:r.ON_STOP})})),p.on("playerror",(function(e,n){m({type:r.ON_PLAY_ERROR,error:new Error("[Play error] "+n)})})),p.on("loaderror",(function(e,n){m({type:r.ON_LOAD_ERROR,error:new Error("[Load error] "+n)})})),y(p),D.current=p}),[w,A]);n.useEffect((function(){return function(){D.current&&D.current.unload()}}),[]);var C=n.useMemo((function(){return p||{player:O,load:x,error:R,loading:A,playing:N,stopped:P,ready:g,duration:E,ended:L}}),[A,R,N,P,x,p,O,g,E,L]);return t.createElement(l.Provider,{value:C},t.createElement(s.Provider,{value:k},d))},exports.useAudioPlayer=function(e){var r=n.useContext(l),t=r.player,o=r.load,i=a(r,["player","load"]);n.useEffect((function(){var r=e||{},n=r.src,t=a(r,["src"]);n&&o(u({src:n},t))}),[e,o]);var c=n.useCallback((function(){t&&(t.playing()?t.pause():t.play())}),[t]);return u({},i,{player:t,play:t?t.play.bind(t):d,pause:t?t.pause.bind(t):d,stop:t?t.stop.bind(t):d,mute:t?t.mute.bind(t):d,volume:t?t.volume.bind(t):d,load:o,togglePlayPause:c})},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,c=o.duration,d=n.useContext(s),f=d.position,O=d.setPosition,y=n.useRef();n.useEffect((function(){u&&O(u.seek())}),[u,O,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,O]),p((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,O]);var _=n.useCallback((function(e){if(!u)return 0;var r=u.seek(e).seek();return O(r),r}),[u,O]),v=n.useMemo((function(){return f/c*100||0}),[c,f]);return{position:f,duration:c,seek:_,percentComplete:v}};
 //# sourceMappingURL=react-use-audio-player.cjs.production.min.js.map

dist/react-use-audio-player.esm.js

@@ -177,4 +177,8 @@ import React, { useState, useReducer, useRef, useMemo, useCallback, useEffect, useContext, useLayoutEffect } from 'react';
       // @ts-ignore the _src argument actually exists
-      if (playerRef.current._src === src) return; // if the previous sound is still loading then destroy it as soon as it finishes
+      var _src = playerRef.current._src; // internal Howl _src property is sometimes an array and other times a single string
+      // still need to to do more research on why this is
 
+      var prevSrc = Array.isArray(_src) ? _src[0] : _src;
+      if (prevSrc === src) return; // if the previous sound is still loading then destroy it as soon as it finishes
+
       if (loading) {
@@ -181,0 +185,0 @@ prevPlayer.current = playerRef.current;

package.json

 {
     "name": "react-use-audio-player",
-    "version": "1.2.3",
+    "version": "1.2.4",
     "description": "React hook for building custom audio playback controls",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -177,2 +177,17 @@ # react-use-audio-player
 
+## Gotchas
+
+#### Streaming audio
+In order for streamed audio content to work, make sure to force the audio source to use html5 and specify the format of the audio as shown below:
+
+More information in this Howler [thread](https://github.com/goldfire/howler.js/issues/378)
+```typescript jsx
+const { pause } = useAudioPlayer({
+    autoplay: true,
+    src: "https://stream.toohotradio.net/128",
+    html5: true,
+    format: ["mp3"]
+})
+```
+
 ## Examples
@@ -179,0 +194,0 @@

No alert changes

Improved metrics

Total package byte prevSize

108201

increased by2%

Lines of code

832

increased by0.73%

Number of lines in readme file

211

increased by7.65%

No dependency changes