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

Comparing version 0.0.14 to 0.0.15

dist/audioPlayerState.d.ts

 export declare enum Actions {
-    ON_LOAD = 0,
-    ON_PLAY = 1,
-    ON_END = 2,
-    ON_PAUSE = 3,
-    ON_STOP = 4,
-    ON_PLAY_ERROR = 5,
-    ON_LOAD_ERROR = 6,
-    RESET_ERRORS = 7
+    START_LOAD = 0,
+    ON_LOAD = 1,
+    ON_PLAY = 2,
+    ON_END = 3,
+    ON_PAUSE = 4,
+    ON_STOP = 5,
+    ON_PLAY_ERROR = 6,
+    ON_LOAD_ERROR = 7
 }
@@ -17,3 +17,6 @@ interface BaseAction {
 }
-declare type Action = BaseAction | ErrorAction;
+interface LoadAction extends BaseAction {
+    duration: number;
+}
+declare type Action = BaseAction | ErrorAction | LoadAction;
 export interface AudioPlayerState {
@@ -24,2 +27,4 @@ loading: boolean;
     error: Error | null;
+    duration: number;
+    ready: boolean;
 }
@@ -26,0 +31,0 @@ export declare const initialState: AudioPlayerState;

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

@@ -47,10 +47,10 @@ 'use strict';
 (function (Actions) {
-  Actions[Actions["ON_LOAD"] = 0] = "ON_LOAD";
-  Actions[Actions["ON_PLAY"] = 1] = "ON_PLAY";
-  Actions[Actions["ON_END"] = 2] = "ON_END";
-  Actions[Actions["ON_PAUSE"] = 3] = "ON_PAUSE";
-  Actions[Actions["ON_STOP"] = 4] = "ON_STOP";
-  Actions[Actions["ON_PLAY_ERROR"] = 5] = "ON_PLAY_ERROR";
-  Actions[Actions["ON_LOAD_ERROR"] = 6] = "ON_LOAD_ERROR";
-  Actions[Actions["RESET_ERRORS"] = 7] = "RESET_ERRORS";
+  Actions[Actions["START_LOAD"] = 0] = "START_LOAD";
+  Actions[Actions["ON_LOAD"] = 1] = "ON_LOAD";
+  Actions[Actions["ON_PLAY"] = 2] = "ON_PLAY";
+  Actions[Actions["ON_END"] = 3] = "ON_END";
+  Actions[Actions["ON_PAUSE"] = 4] = "ON_PAUSE";
+  Actions[Actions["ON_STOP"] = 5] = "ON_STOP";
+  Actions[Actions["ON_PLAY_ERROR"] = 6] = "ON_PLAY_ERROR";
+  Actions[Actions["ON_LOAD_ERROR"] = 7] = "ON_LOAD_ERROR";
 })(Actions || (Actions = {}));
@@ -62,12 +62,24 @@
   stopped: true,
-  error: null
+  error: null,
+  duration: 0,
+  ready: false
 };
 function reducer(state, action) {
   switch (action.type) {
-    case Actions.ON_LOAD:
+    case Actions.START_LOAD:
       return _extends({}, state, {
+        loading: true,
         stopped: true,
-        loading: false
+        ready: false,
+        error: null,
+        duration: 0
       });
 
+    case Actions.ON_LOAD:
+      return _extends({}, state, {
+        loading: false,
+        duration: action.duration,
+        ready: true
+      });
+
     case Actions.ON_PLAY:
@@ -106,7 +118,2 @@ return _extends({}, state, {
 
-    case Actions.RESET_ERRORS:
-      return _extends({}, state, {
-        error: null
-      });
-
     default:
@@ -135,2 +142,4 @@ return state;
       stopped = _useReducer$.stopped,
+      duration = _useReducer$.duration,
+      ready = _useReducer$.ready,
       dispatch = _useReducer[1];
@@ -155,3 +164,3 @@
     dispatch({
-      type: Actions.RESET_ERRORS
+      type: Actions.START_LOAD
     });
@@ -180,8 +189,9 @@ var wasPlaying = false;
 
-    }); // if this howl has already been loaded then there is no need to change loading state
+    }); // if this howl has already been loaded (cached) then fire the load action
     // @ts-ignore _state exists
 
-    if (howl._state !== "loaded") {
+    if (howl._state === "loaded") {
       dispatch({
-        type: Actions.ON_LOAD
+        type: Actions.ON_LOAD,
+        duration: howl.duration()
       });
@@ -192,3 +202,4 @@ }
       return void dispatch({
-        type: Actions.ON_LOAD
+        type: Actions.ON_LOAD,
+        duration: howl.duration()
       });
@@ -245,5 +256,6 @@ });
       stopped: stopped,
-      ready: !loading && !error
+      ready: ready,
+      duration: duration
     };
-  }, [loading, error, playing, stopped, load, value, player]);
+  }, [loading, error, playing, stopped, load, value, player, ready, duration]);
   return React__default.createElement(AudioPlayerContext.Provider, {
@@ -293,2 +305,3 @@ value: contextValue
     seek: player ? player.seek.bind(player) : noop,
+    volume: player ? player.volume.bind(player) : noop,
     load: load,
@@ -311,3 +324,4 @@ togglePlayPause: togglePlayPause
       playing = _useContext.playing,
-      stopped = _useContext.stopped;
+      stopped = _useContext.stopped,
+      duration = _useContext.duration;
 
@@ -321,12 +335,7 @@ var _useAudioPlayer = useAudioPlayer(),
 
-  var _useState2 = React.useState(0),
-      duration = _useState2[0],
-      setDuration = _useState2[1];
+  var animationFrameRef = React.useRef(); // sets position on player initialization and when the audio is stopped
 
-  var animationFrameRef = React.useRef(); // sets position and duration on player initialization and when the audio is stopped
-
   React.useEffect(function () {
     if (player) {
       setPosition(player.seek());
-      setDuration(player.duration());
     }
@@ -333,0 +342,0 @@ }, [player, stopped]); // updates position on a one second loop for low refresh rate default setting

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

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

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

@@ -40,10 +40,10 @@ import React, { useState, useReducer, useRef, useCallback, useEffect, useMemo, useContext, useLayoutEffect } from 'react';
 (function (Actions) {
-  Actions[Actions["ON_LOAD"] = 0] = "ON_LOAD";
-  Actions[Actions["ON_PLAY"] = 1] = "ON_PLAY";
-  Actions[Actions["ON_END"] = 2] = "ON_END";
-  Actions[Actions["ON_PAUSE"] = 3] = "ON_PAUSE";
-  Actions[Actions["ON_STOP"] = 4] = "ON_STOP";
-  Actions[Actions["ON_PLAY_ERROR"] = 5] = "ON_PLAY_ERROR";
-  Actions[Actions["ON_LOAD_ERROR"] = 6] = "ON_LOAD_ERROR";
-  Actions[Actions["RESET_ERRORS"] = 7] = "RESET_ERRORS";
+  Actions[Actions["START_LOAD"] = 0] = "START_LOAD";
+  Actions[Actions["ON_LOAD"] = 1] = "ON_LOAD";
+  Actions[Actions["ON_PLAY"] = 2] = "ON_PLAY";
+  Actions[Actions["ON_END"] = 3] = "ON_END";
+  Actions[Actions["ON_PAUSE"] = 4] = "ON_PAUSE";
+  Actions[Actions["ON_STOP"] = 5] = "ON_STOP";
+  Actions[Actions["ON_PLAY_ERROR"] = 6] = "ON_PLAY_ERROR";
+  Actions[Actions["ON_LOAD_ERROR"] = 7] = "ON_LOAD_ERROR";
 })(Actions || (Actions = {}));
@@ -55,12 +55,24 @@
   stopped: true,
-  error: null
+  error: null,
+  duration: 0,
+  ready: false
 };
 function reducer(state, action) {
   switch (action.type) {
-    case Actions.ON_LOAD:
+    case Actions.START_LOAD:
       return _extends({}, state, {
+        loading: true,
         stopped: true,
-        loading: false
+        ready: false,
+        error: null,
+        duration: 0
       });
 
+    case Actions.ON_LOAD:
+      return _extends({}, state, {
+        loading: false,
+        duration: action.duration,
+        ready: true
+      });
+
     case Actions.ON_PLAY:
@@ -99,7 +111,2 @@ return _extends({}, state, {
 
-    case Actions.RESET_ERRORS:
-      return _extends({}, state, {
-        error: null
-      });
-
     default:
@@ -128,2 +135,4 @@ return state;
       stopped = _useReducer$.stopped,
+      duration = _useReducer$.duration,
+      ready = _useReducer$.ready,
       dispatch = _useReducer[1];
@@ -148,3 +157,3 @@
     dispatch({
-      type: Actions.RESET_ERRORS
+      type: Actions.START_LOAD
     });
@@ -173,8 +182,9 @@ var wasPlaying = false;
 
-    }); // if this howl has already been loaded then there is no need to change loading state
+    }); // if this howl has already been loaded (cached) then fire the load action
     // @ts-ignore _state exists
 
-    if (howl._state !== "loaded") {
+    if (howl._state === "loaded") {
       dispatch({
-        type: Actions.ON_LOAD
+        type: Actions.ON_LOAD,
+        duration: howl.duration()
       });
@@ -185,3 +195,4 @@ }
       return void dispatch({
-        type: Actions.ON_LOAD
+        type: Actions.ON_LOAD,
+        duration: howl.duration()
       });
@@ -238,5 +249,6 @@ });
       stopped: stopped,
-      ready: !loading && !error
+      ready: ready,
+      duration: duration
     };
-  }, [loading, error, playing, stopped, load, value, player]);
+  }, [loading, error, playing, stopped, load, value, player, ready, duration]);
   return React.createElement(AudioPlayerContext.Provider, {
@@ -286,2 +298,3 @@ value: contextValue
     seek: player ? player.seek.bind(player) : noop,
+    volume: player ? player.volume.bind(player) : noop,
     load: load,
@@ -304,3 +317,4 @@ togglePlayPause: togglePlayPause
       playing = _useContext.playing,
-      stopped = _useContext.stopped;
+      stopped = _useContext.stopped,
+      duration = _useContext.duration;
 
@@ -314,12 +328,7 @@ var _useAudioPlayer = useAudioPlayer(),
 
-  var _useState2 = useState(0),
-      duration = _useState2[0],
-      setDuration = _useState2[1];
+  var animationFrameRef = useRef(); // sets position on player initialization and when the audio is stopped
 
-  var animationFrameRef = useRef(); // sets position and duration on player initialization and when the audio is stopped
-
   useEffect(function () {
     if (player) {
       setPosition(player.seek());
-      setDuration(player.duration());
     }
@@ -326,0 +335,0 @@ }, [player, stopped]); // updates position on a one second loop for low refresh rate default setting

dist/types.d.ts

@@ -15,2 +15,3 @@ /// <reference types="howler" />
     ready: boolean;
+    duration: number;
 }

dist/useAudioPlayer.d.ts

@@ -10,2 +10,3 @@ /// <reference types="howler" />
     seek: Howl["seek"] | typeof noop;
+    volume: Howl["volume"] | typeof noop;
     togglePlayPause: () => void;
@@ -12,0 +13,0 @@ };

package.json

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

README.md

@@ -120,2 +120,5 @@ # react-use-audio-player
     <br/>mutes the audio
+    
+-   `volume: (value: number) => number`
+    <br/>get/set the volume of the current sound. Volume values between 0.0 and 1.0
 
@@ -122,0 +125,0 @@ <br/>

No alert changes

Improved metrics

Total package byte prevSize

88183

increased by4.29%

Lines of code

741

increased by3.93%

Number of lines in readme file

187

increased by1.63%

No dependency changes