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

Comparing version 1.2.7 to 1.3.0

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

@@ -12,6 +12,5 @@ 'use strict';
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
@@ -23,9 +22,6 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {
     }
-
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
-
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -36,3 +32,2 @@ if (source == null) return {};
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
@@ -43,3 +38,2 @@ key = sourceKeys[i];
   }
-
   return target;
@@ -49,3 +43,2 @@ }
 var Actions;
-
 (function (Actions) {
@@ -61,3 +54,2 @@ Actions[Actions["START_LOAD"] = 0] = "START_LOAD";
 })(Actions || (Actions = {}));
-
 var initialState = {
@@ -82,3 +74,2 @@ loading: true,
       });
-
     case Actions.ON_LOAD:
@@ -91,3 +82,2 @@ return _extends({}, state, {
       });
-
     case Actions.ON_PLAY:
@@ -99,3 +89,2 @@ return _extends({}, state, {
       });
-
     case Actions.ON_STOP:
@@ -106,3 +95,2 @@ return _extends({}, state, {
       });
-
     case Actions.ON_END:
@@ -114,3 +102,2 @@ return _extends({}, state, {
       });
-
     case Actions.ON_PAUSE:
@@ -120,3 +107,2 @@ return _extends({}, state, {
       });
-
     case Actions.ON_PLAY_ERROR:
@@ -128,3 +114,2 @@ return _extends({}, state, {
       });
-
     case Actions.ON_LOAD_ERROR:
@@ -137,3 +122,2 @@ return _extends({}, state, {
       });
-
     default:
@@ -150,28 +134,24 @@ return state;
 
+var _excluded = ["src", "autoplay", "html5"];
 function AudioPlayerProvider(_ref) {
   var children = _ref.children,
-      value = _ref.value;
-
+    value = _ref.value;
   var _useState = React.useState(null),
-      player = _useState[0],
-      setPlayer = _useState[1];
-
+    player = _useState[0],
+    setPlayer = _useState[1];
   var _useReducer = React.useReducer(reducer, initialState),
-      _useReducer$ = _useReducer[0],
-      loading = _useReducer$.loading,
-      error = _useReducer$.error,
-      playing = _useReducer$.playing,
-      stopped = _useReducer$.stopped,
-      duration = _useReducer$.duration,
-      ready = _useReducer$.ready,
-      ended = _useReducer$.ended,
-      dispatch = _useReducer[1];
-
+    _useReducer$ = _useReducer[0],
+    loading = _useReducer$.loading,
+    error = _useReducer$.error,
+    playing = _useReducer$.playing,
+    stopped = _useReducer$.stopped,
+    duration = _useReducer$.duration,
+    ready = _useReducer$.ready,
+    ended = _useReducer$.ended,
+    dispatch = _useReducer[1];
   var playerRef = React.useRef();
   var prevPlayer = React.useRef();
-
   var _useState2 = React.useState(0),
-      position = _useState2[0],
-      setPosition = _useState2[1];
-
+    position = _useState2[0],
+    setPosition = _useState2[1];
   var positionContextValue = React.useMemo(function () {
@@ -188,19 +168,17 @@ return {
     var src = _ref2.src,
-        _ref2$autoplay = _ref2.autoplay,
-        autoplay = _ref2$autoplay === void 0 ? false : _ref2$autoplay,
-        _ref2$html = _ref2.html5,
-        html5 = _ref2$html === void 0 ? false : _ref2$html,
-        rest = _objectWithoutPropertiesLoose(_ref2, ["src", "autoplay", "html5"]);
-
+      _ref2$autoplay = _ref2.autoplay,
+      autoplay = _ref2$autoplay === void 0 ? false : _ref2$autoplay,
+      _ref2$html = _ref2.html5,
+      html5 = _ref2$html === void 0 ? false : _ref2$html,
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
     var wasPlaying = false;
-
     if (playerRef.current) {
       // don't do anything if we're asked to reload the same source
       // @ts-ignore the _src argument actually exists
-      var _src = playerRef.current._src; // internal Howl _src property is sometimes an array and other times a single string
+      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 (prevSrc === src) return;
+      // if the previous sound is still loading then destroy it as soon as it finishes
       if (loading) {
@@ -210,3 +188,2 @@ prevPlayer.current = playerRef.current;
           var _prevPlayer$current;
-
           (_prevPlayer$current = prevPlayer.current) === null || _prevPlayer$current === void 0 ? void 0 : _prevPlayer$current.unload();
@@ -216,22 +193,18 @@ });
         var _prevPlayer$current2;
-
         prevPlayer.current = playerRef.current;
         (_prevPlayer$current2 = prevPlayer.current) === null || _prevPlayer$current2 === void 0 ? void 0 : _prevPlayer$current2.unload();
       }
-
       wasPlaying = playerRef.current.playing();
-
       if (wasPlaying) {
-        playerRef.current.stop(); // remove event handlers from player that is about to be replaced
-
+        playerRef.current.stop();
+        // remove event handlers from player that is about to be replaced
         playerRef.current.off();
         playerRef.current = undefined;
       }
-    } // signal that the loading process has begun
-
-
+    }
+    // signal that the loading process has begun
     dispatch({
       type: Actions.START_LOAD
-    }); // create a new player
-
+    });
+    // create a new player
     var howl = constructHowl(_extends({
@@ -241,5 +214,5 @@ src: src,
       html5: html5
-    }, rest)); // if this howl has already been loaded (cached) then fire the load action
+    }, rest));
+    // if this howl has already been loaded (cached) then fire the load action
     // @ts-ignore _state exists
-
     if (howl._state === "loaded") {
@@ -251,3 +224,2 @@ dispatch({
     }
-
     howl.on("load", function () {
@@ -320,20 +292,19 @@ return void dispatch({
 
+var _excluded$1 = ["player", "load"],
+  _excluded2 = ["src"];
 var noop = function noop() {};
-
 var useAudioPlayer = function useAudioPlayer(options) {
   var _useContext = React.useContext(playerContext),
-      player = _useContext.player,
-      load = _useContext.load,
-      rest = _objectWithoutPropertiesLoose(_useContext, ["player", "load"]);
-
+    player = _useContext.player,
+    load = _useContext.load,
+    rest = _objectWithoutPropertiesLoose(_useContext, _excluded$1);
   React.useEffect(function () {
     var _ref = options || {},
-        src = _ref.src,
-        restOptions = _objectWithoutPropertiesLoose(_ref, ["src"]); // if useAudioPlayer is called without arguments
+      src = _ref.src,
+      restOptions = _objectWithoutPropertiesLoose(_ref, _excluded2);
+    // if useAudioPlayer is called without arguments
     // don't do anything: the user will have access
     // to the current context
-
-
-    if (!src) return; // todo: could improve perf even more by not calling load if the options haven't really changed across renders of the calling component
-
+    if (!src) return;
+    // todo: could improve perf even more by not calling load if the options haven't really changed across renders of the calling component
     load(_extends({
@@ -345,3 +316,2 @@ src: src
     if (!player) return;
-
     if (player.playing()) {
@@ -355,2 +325,3 @@ player.pause();
     return {
+      rate: player ? player.rate.bind(player) : noop,
       play: player ? player.play.bind(player) : noop,
@@ -379,5 +350,5 @@ pause: player ? player.pause.bind(player) : noop,
  */
-
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
 
+// gives current audio position state - updates in an animation frame loop for animating audio visualizations
 var useAudioPosition = function useAudioPosition(config) {
@@ -387,19 +358,15 @@ if (config === void 0) {
   }
-
   var _config = config,
-      _config$highRefreshRa = _config.highRefreshRate,
-      highRefreshRate = _config$highRefreshRa === void 0 ? false : _config$highRefreshRa;
-
+    _config$highRefreshRa = _config.highRefreshRate,
+    highRefreshRate = _config$highRefreshRa === void 0 ? false : _config$highRefreshRa;
   var _useContext = React.useContext(playerContext),
-      player = _useContext.player,
-      playing = _useContext.playing,
-      stopped = _useContext.stopped,
-      duration = _useContext.duration;
-
+    player = _useContext.player,
+    playing = _useContext.playing,
+    stopped = _useContext.stopped,
+    duration = _useContext.duration;
   var _useContext2 = React.useContext(positionContext),
-      position = _useContext2.position,
-      setPosition = _useContext2.setPosition;
-
-  var animationFrameRef = React.useRef(); // sets position on player initialization and when the audio is stopped
-
+    position = _useContext2.position,
+    setPosition = _useContext2.setPosition;
+  var animationFrameRef = React.useRef();
+  // sets position on player initialization and when the audio is stopped
   React.useEffect(function () {
@@ -409,4 +376,4 @@ if (player) {
     }
-  }, [player, setPosition, stopped]); // updates position on a one second loop for low refresh rate default setting
-
+  }, [player, setPosition, stopped]);
+  // updates position on a one second loop for low refresh rate default setting
   React.useEffect(function () {
@@ -420,4 +387,4 @@ var timeout;
     };
-  }, [highRefreshRate, player, playing, setPosition]); // updates position on a 60fps loop for high refresh rate setting
-
+  }, [highRefreshRate, player, playing, setPosition]);
+  // updates position on a 60fps loop for high refresh rate setting
   useIsomorphicLayoutEffect(function () {
@@ -427,9 +394,7 @@ var animate = function animate() {
       animationFrameRef.current = requestAnimationFrame(animate);
-    }; // kick off a new animation cycle when the player is defined and starts playing
-
-
+    };
+    // kick off a new animation cycle when the player is defined and starts playing
     if (highRefreshRate && player && playing) {
       animationFrameRef.current = requestAnimationFrame(animate);
     }
-
     return function () {
@@ -442,5 +407,5 @@ if (animationFrameRef.current) {
   var seek = React.useCallback(function (position) {
-    if (!player) return 0; // it appears that howler returns the Howl object when seek is given a position
+    if (!player) return 0;
+    // it appears that howler returns the Howl object when seek is given a position
     // to get the latest potion you must call seek again with no parameters
-
     var result = player.seek(position);
@@ -447,0 +412,0 @@ var updatedPos = result.seek();

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

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

@@ -5,6 +5,5 @@ import React, { useState, useReducer, useRef, useMemo, useCallback, useEffect, useContext, useLayoutEffect } from 'react';
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
@@ -16,9 +15,6 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {
     }
-
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
-
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -29,3 +25,2 @@ if (source == null) return {};
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
@@ -36,3 +31,2 @@ key = sourceKeys[i];
   }
-
   return target;
@@ -42,3 +36,2 @@ }
 var Actions;
-
 (function (Actions) {
@@ -54,3 +47,2 @@ Actions[Actions["START_LOAD"] = 0] = "START_LOAD";
 })(Actions || (Actions = {}));
-
 var initialState = {
@@ -75,3 +67,2 @@ loading: true,
       });
-
     case Actions.ON_LOAD:
@@ -84,3 +75,2 @@ return _extends({}, state, {
       });
-
     case Actions.ON_PLAY:
@@ -92,3 +82,2 @@ return _extends({}, state, {
       });
-
     case Actions.ON_STOP:
@@ -99,3 +88,2 @@ return _extends({}, state, {
       });
-
     case Actions.ON_END:
@@ -107,3 +95,2 @@ return _extends({}, state, {
       });
-
     case Actions.ON_PAUSE:
@@ -113,3 +100,2 @@ return _extends({}, state, {
       });
-
     case Actions.ON_PLAY_ERROR:
@@ -121,3 +107,2 @@ return _extends({}, state, {
       });
-
     case Actions.ON_LOAD_ERROR:
@@ -130,3 +115,2 @@ return _extends({}, state, {
       });
-
     default:
@@ -143,28 +127,24 @@ return state;
 
+var _excluded = ["src", "autoplay", "html5"];
 function AudioPlayerProvider(_ref) {
   var children = _ref.children,
-      value = _ref.value;
-
+    value = _ref.value;
   var _useState = useState(null),
-      player = _useState[0],
-      setPlayer = _useState[1];
-
+    player = _useState[0],
+    setPlayer = _useState[1];
   var _useReducer = useReducer(reducer, initialState),
-      _useReducer$ = _useReducer[0],
-      loading = _useReducer$.loading,
-      error = _useReducer$.error,
-      playing = _useReducer$.playing,
-      stopped = _useReducer$.stopped,
-      duration = _useReducer$.duration,
-      ready = _useReducer$.ready,
-      ended = _useReducer$.ended,
-      dispatch = _useReducer[1];
-
+    _useReducer$ = _useReducer[0],
+    loading = _useReducer$.loading,
+    error = _useReducer$.error,
+    playing = _useReducer$.playing,
+    stopped = _useReducer$.stopped,
+    duration = _useReducer$.duration,
+    ready = _useReducer$.ready,
+    ended = _useReducer$.ended,
+    dispatch = _useReducer[1];
   var playerRef = useRef();
   var prevPlayer = useRef();
-
   var _useState2 = useState(0),
-      position = _useState2[0],
-      setPosition = _useState2[1];
-
+    position = _useState2[0],
+    setPosition = _useState2[1];
   var positionContextValue = useMemo(function () {
@@ -181,19 +161,17 @@ return {
     var src = _ref2.src,
-        _ref2$autoplay = _ref2.autoplay,
-        autoplay = _ref2$autoplay === void 0 ? false : _ref2$autoplay,
-        _ref2$html = _ref2.html5,
-        html5 = _ref2$html === void 0 ? false : _ref2$html,
-        rest = _objectWithoutPropertiesLoose(_ref2, ["src", "autoplay", "html5"]);
-
+      _ref2$autoplay = _ref2.autoplay,
+      autoplay = _ref2$autoplay === void 0 ? false : _ref2$autoplay,
+      _ref2$html = _ref2.html5,
+      html5 = _ref2$html === void 0 ? false : _ref2$html,
+      rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
     var wasPlaying = false;
-
     if (playerRef.current) {
       // don't do anything if we're asked to reload the same source
       // @ts-ignore the _src argument actually exists
-      var _src = playerRef.current._src; // internal Howl _src property is sometimes an array and other times a single string
+      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 (prevSrc === src) return;
+      // if the previous sound is still loading then destroy it as soon as it finishes
       if (loading) {
@@ -203,3 +181,2 @@ prevPlayer.current = playerRef.current;
           var _prevPlayer$current;
-
           (_prevPlayer$current = prevPlayer.current) === null || _prevPlayer$current === void 0 ? void 0 : _prevPlayer$current.unload();
@@ -209,22 +186,18 @@ });
         var _prevPlayer$current2;
-
         prevPlayer.current = playerRef.current;
         (_prevPlayer$current2 = prevPlayer.current) === null || _prevPlayer$current2 === void 0 ? void 0 : _prevPlayer$current2.unload();
       }
-
       wasPlaying = playerRef.current.playing();
-
       if (wasPlaying) {
-        playerRef.current.stop(); // remove event handlers from player that is about to be replaced
-
+        playerRef.current.stop();
+        // remove event handlers from player that is about to be replaced
         playerRef.current.off();
         playerRef.current = undefined;
       }
-    } // signal that the loading process has begun
-
-
+    }
+    // signal that the loading process has begun
     dispatch({
       type: Actions.START_LOAD
-    }); // create a new player
-
+    });
+    // create a new player
     var howl = constructHowl(_extends({
@@ -234,5 +207,5 @@ src: src,
       html5: html5
-    }, rest)); // if this howl has already been loaded (cached) then fire the load action
+    }, rest));
+    // if this howl has already been loaded (cached) then fire the load action
     // @ts-ignore _state exists
-
     if (howl._state === "loaded") {
@@ -244,3 +217,2 @@ dispatch({
     }
-
     howl.on("load", function () {
@@ -313,20 +285,19 @@ return void dispatch({
 
+var _excluded$1 = ["player", "load"],
+  _excluded2 = ["src"];
 var noop = function noop() {};
-
 var useAudioPlayer = function useAudioPlayer(options) {
   var _useContext = useContext(playerContext),
-      player = _useContext.player,
-      load = _useContext.load,
-      rest = _objectWithoutPropertiesLoose(_useContext, ["player", "load"]);
-
+    player = _useContext.player,
+    load = _useContext.load,
+    rest = _objectWithoutPropertiesLoose(_useContext, _excluded$1);
   useEffect(function () {
     var _ref = options || {},
-        src = _ref.src,
-        restOptions = _objectWithoutPropertiesLoose(_ref, ["src"]); // if useAudioPlayer is called without arguments
+      src = _ref.src,
+      restOptions = _objectWithoutPropertiesLoose(_ref, _excluded2);
+    // if useAudioPlayer is called without arguments
     // don't do anything: the user will have access
     // to the current context
-
-
-    if (!src) return; // todo: could improve perf even more by not calling load if the options haven't really changed across renders of the calling component
-
+    if (!src) return;
+    // todo: could improve perf even more by not calling load if the options haven't really changed across renders of the calling component
     load(_extends({
@@ -338,3 +309,2 @@ src: src
     if (!player) return;
-
     if (player.playing()) {
@@ -348,2 +318,3 @@ player.pause();
     return {
+      rate: player ? player.rate.bind(player) : noop,
       play: player ? player.play.bind(player) : noop,
@@ -372,5 +343,5 @@ pause: player ? player.pause.bind(player) : noop,
  */
-
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 
+// gives current audio position state - updates in an animation frame loop for animating audio visualizations
 var useAudioPosition = function useAudioPosition(config) {
@@ -380,19 +351,15 @@ if (config === void 0) {
   }
-
   var _config = config,
-      _config$highRefreshRa = _config.highRefreshRate,
-      highRefreshRate = _config$highRefreshRa === void 0 ? false : _config$highRefreshRa;
-
+    _config$highRefreshRa = _config.highRefreshRate,
+    highRefreshRate = _config$highRefreshRa === void 0 ? false : _config$highRefreshRa;
   var _useContext = useContext(playerContext),
-      player = _useContext.player,
-      playing = _useContext.playing,
-      stopped = _useContext.stopped,
-      duration = _useContext.duration;
-
+    player = _useContext.player,
+    playing = _useContext.playing,
+    stopped = _useContext.stopped,
+    duration = _useContext.duration;
   var _useContext2 = useContext(positionContext),
-      position = _useContext2.position,
-      setPosition = _useContext2.setPosition;
-
-  var animationFrameRef = useRef(); // sets position on player initialization and when the audio is stopped
-
+    position = _useContext2.position,
+    setPosition = _useContext2.setPosition;
+  var animationFrameRef = useRef();
+  // sets position on player initialization and when the audio is stopped
   useEffect(function () {
@@ -402,4 +369,4 @@ if (player) {
     }
-  }, [player, setPosition, stopped]); // updates position on a one second loop for low refresh rate default setting
-
+  }, [player, setPosition, stopped]);
+  // updates position on a one second loop for low refresh rate default setting
   useEffect(function () {
@@ -413,4 +380,4 @@ var timeout;
     };
-  }, [highRefreshRate, player, playing, setPosition]); // updates position on a 60fps loop for high refresh rate setting
-
+  }, [highRefreshRate, player, playing, setPosition]);
+  // updates position on a 60fps loop for high refresh rate setting
   useIsomorphicLayoutEffect(function () {
@@ -420,9 +387,7 @@ var animate = function animate() {
       animationFrameRef.current = requestAnimationFrame(animate);
-    }; // kick off a new animation cycle when the player is defined and starts playing
-
-
+    };
+    // kick off a new animation cycle when the player is defined and starts playing
     if (highRefreshRate && player && playing) {
       animationFrameRef.current = requestAnimationFrame(animate);
     }
-
     return function () {
@@ -435,5 +400,5 @@ if (animationFrameRef.current) {
   var seek = useCallback(function (position) {
-    if (!player) return 0; // it appears that howler returns the Howl object when seek is given a position
+    if (!player) return 0;
+    // it appears that howler returns the Howl object when seek is given a position
     // to get the latest potion you must call seek again with no parameters
-
     var result = player.seek(position);
@@ -440,0 +405,0 @@ var updatedPos = result.seek();

dist/useAudioPlayer.d.ts

@@ -11,2 +11,3 @@ import { Howl, HowlOptions } from "howler";
     fade: Howl["fade"] | typeof noop;
+    rate: Howl["rate"] | typeof noop;
     togglePlayPause: () => void;
@@ -13,0 +14,0 @@ };

package.json

 {
     "name": "react-use-audio-player",
-    "version": "1.2.7",
+    "version": "1.3.0",
     "description": "React hook for building custom audio playback controls",
@@ -49,3 +49,3 @@ "main": "dist/index.js",
         "tslib": "^1.10.0",
-        "typescript": "^3.8.3"
+        "typescript": "^5.0.4"
     },
@@ -52,0 +52,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

118132

increased by2.42%

Lines of code

892

increased by4.33%

No dependency changes