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

Comparing version 0.0.15 to 0.0.16

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

@@ -144,2 +144,3 @@ 'use strict';
   var playerRef = React.useRef();
+  var prevPlayer = React.useRef();
   var constructHowl = React.useCallback(function (_ref2) {
@@ -160,5 +161,2 @@ var src = _ref2.src,
         autoplay = _ref3$autoplay === void 0 ? false : _ref3$autoplay;
-    dispatch({
-      type: Actions.START_LOAD
-    });
     var wasPlaying = false;
@@ -169,3 +167,13 @@
       // @ts-ignore the _src argument actually exists
-      if (playerRef.current._src === src) return;
+      if (playerRef.current._src === src) return; // if the previous sound is still loading then destroy it as soon as it finishes
+
+      if (loading) {
+        prevPlayer.current = playerRef.current;
+        prevPlayer.current.once("load", function () {
+          var _prevPlayer$current;
+
+          (_prevPlayer$current = prevPlayer.current) === null || _prevPlayer$current === void 0 ? void 0 : _prevPlayer$current.unload();
+        });
+      }
+
       wasPlaying = playerRef.current.playing();
@@ -179,5 +187,9 @@
       }
-    } // create a new player
+    } // signal that the loading process has begun
 
 
+    dispatch({
+      type: Actions.START_LOAD
+    }); // create a new player
+
     var howl = constructHowl({
@@ -238,3 +250,3 @@ src: src,
     playerRef.current = howl;
-  }, [constructHowl]);
+  }, [constructHowl, loading]);
   React.useEffect(function () {
@@ -296,2 +308,13 @@ // unload the player on unmount
   }, [player]);
+  var seek = React.useCallback(function (position) {
+    var isHowl = function isHowl(input) {
+      if (input._src) return true;
+      return false;
+    };
+
+    if (!player) return;
+    var result = player.seek(position);
+    if (isHowl(result)) return;
+    return result;
+  }, [player]);
   return _extends({}, context, {
@@ -302,4 +325,4 @@ play: player ? player.play.bind(player) : noop,
     mute: player ? player.mute.bind(player) : noop,
-    seek: player ? player.seek.bind(player) : noop,
     volume: player ? player.volume.bind(player) : noop,
+    seek: seek,
     load: load,
@@ -306,0 +329,0 @@ togglePlayPause: togglePlayPause

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 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}};
+"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(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 a={loading:!0,playing:!1,stopped:!0,error:null,duration:0,ready:!1};function i(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,ready:!0});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:n.error});case r.ON_LOAD_ERROR:return u({},e,{playing:!1,stopped:!0,loading:!1,error:n.error});default:return e}}var c=t.createContext(null),l=function(){},s=function(e){var r=n.useContext(c),t=r.player,o=r.load,a=function(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}(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]),O=n.useCallback((function(e){if(t){var r=t.seek(e);if(!r._src)return r}}),[t]);return u({},a,{play:t?t.play.bind(t):l,pause:t?t.pause.bind(t):l,stop:t?t.stop.bind(t):l,mute:t?t.mute.bind(t):l,volume:t?t.volume.bind(t):l,seek:O,load:o,togglePlayPause:f})};exports.AudioPlayerProvider=function(e){var u=e.children,l=e.value,s=n.useState(null),p=s[0],d=s[1],f=n.useReducer(i,a),O=f[0],y=O.loading,_=O.error,A=O.playing,R=O.stopped,N=O.duration,v=O.ready,P=f[1],E=n.useRef(),g=n.useRef(),L=n.useCallback((function(e){return new o.Howl({src:e.src,format:e.format,autoplay:e.autoplay})}),[]),m=n.useCallback((function(e){var n=e.src,t=e.format,o=e.autoplay,u=void 0!==o&&o,a=!1;if(E.current){if(E.current._src===n)return;y&&(g.current=E.current,g.current.once("load",(function(){var e;null===(e=g.current)||void 0===e||e.unload()}))),(a=E.current.playing())&&(E.current.stop(),E.current.off(),E.current=void 0)}P({type:r.START_LOAD});var i=L({src:n,format:t,autoplay:a||u});"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}),[L,y]);n.useEffect((function(){return function(){E.current&&E.current.unload()}}),[]);var D=n.useMemo((function(){return l||{player:p,load:m,error:_,loading:y,playing:A,stopped:R,ready:v,duration:N}}),[y,_,A,R,m,l,p,v,N]);return t.createElement(c.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(c),u=o.player,a=o.playing,i=o.stopped,l=o.duration,p=s().seek,d=n.useState(0),f=d[0],O=d[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:l,seek:p}};
 //# sourceMappingURL=react-use-audio-player.cjs.production.min.js.map

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

@@ -137,2 +137,3 @@ import React, { useState, useReducer, useRef, useCallback, useEffect, useMemo, useContext, useLayoutEffect } from 'react';
   var playerRef = useRef();
+  var prevPlayer = useRef();
   var constructHowl = useCallback(function (_ref2) {
@@ -153,5 +154,2 @@ var src = _ref2.src,
         autoplay = _ref3$autoplay === void 0 ? false : _ref3$autoplay;
-    dispatch({
-      type: Actions.START_LOAD
-    });
     var wasPlaying = false;
@@ -162,3 +160,13 @@
       // @ts-ignore the _src argument actually exists
-      if (playerRef.current._src === src) return;
+      if (playerRef.current._src === src) return; // if the previous sound is still loading then destroy it as soon as it finishes
+
+      if (loading) {
+        prevPlayer.current = playerRef.current;
+        prevPlayer.current.once("load", function () {
+          var _prevPlayer$current;
+
+          (_prevPlayer$current = prevPlayer.current) === null || _prevPlayer$current === void 0 ? void 0 : _prevPlayer$current.unload();
+        });
+      }
+
       wasPlaying = playerRef.current.playing();
@@ -172,5 +180,9 @@
       }
-    } // create a new player
+    } // signal that the loading process has begun
 
 
+    dispatch({
+      type: Actions.START_LOAD
+    }); // create a new player
+
     var howl = constructHowl({
@@ -231,3 +243,3 @@ src: src,
     playerRef.current = howl;
-  }, [constructHowl]);
+  }, [constructHowl, loading]);
   useEffect(function () {
@@ -289,2 +301,13 @@ // unload the player on unmount
   }, [player]);
+  var seek = useCallback(function (position) {
+    var isHowl = function isHowl(input) {
+      if (input._src) return true;
+      return false;
+    };
+
+    if (!player) return;
+    var result = player.seek(position);
+    if (isHowl(result)) return;
+    return result;
+  }, [player]);
   return _extends({}, context, {
@@ -295,4 +318,4 @@ play: player ? player.play.bind(player) : noop,
     mute: player ? player.mute.bind(player) : noop,
-    seek: player ? player.seek.bind(player) : noop,
     volume: player ? player.volume.bind(player) : noop,
+    seek: seek,
     load: load,
@@ -299,0 +322,0 @@ togglePlayPause: togglePlayPause

dist/useAudioPlayer.d.ts

@@ -9,4 +9,4 @@ /// <reference types="howler" />
     mute: Howl["mute"] | typeof noop;
-    seek: Howl["seek"] | typeof noop;
     volume: Howl["volume"] | typeof noop;
+    seek: (position?: number) => number | undefined;
     togglePlayPause: () => void;
@@ -13,0 +13,0 @@ };

package.json

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

README.md

@@ -85,3 +85,3 @@ # react-use-audio-player
 
--   `laod: ({ src: string, format?: string, autoplay?: boolean }) => void`
+-   `load: ({ src: string, format?: string, autoplay?: boolean }) => void`
     <br/>method to lazily load audio
@@ -116,3 +116,3 @@
 
--   `seek: (position: number) => void`
+-   `seek: (position: number) => number | undefined`
     <br/>sets the position of the audio to position (seconds)
@@ -168,3 +168,3 @@
     
--   `seek: (position: number) => void`
+-   `seek`
     <br/> For convenience the `seek` method from useAudioPlayer is also returned from this hook
@@ -171,0 +171,0 @@

No alert changes

Improved metrics

Total package byte prevSize

93786

increased by6.35%

Lines of code

777

increased by4.86%

No dependency changes