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

Comparing version 1.0.0 to 1.0.1

dist/context.d.ts

 import React from "react";
-import { AudioPlayerContext } from "./types";
-export declare const context: React.Context<AudioPlayerContext | null>;
+import { AudioPlayerContext, AudioPlayerPositionContext } from "./types";
+export declare const playerContext: React.Context<AudioPlayerContext | null>;
+export declare const positionContext: React.Context<AudioPlayerPositionContext>;

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

@@ -130,5 +130,11 @@ 'use strict';
 
-var context =
+var playerContext =
 /*#__PURE__*/
 React__default.createContext(null);
+var positionContext =
+/*#__PURE__*/
+React__default.createContext({
+  position: 0,
+  setPosition: function setPosition() {}
+});
 
@@ -156,2 +162,13 @@ function AudioPlayerProvider(_ref) {
   var prevPlayer = React.useRef();
+
+  var _useState2 = React.useState(0),
+      position = _useState2[0],
+      setPosition = _useState2[1];
+
+  var positionContextValue = React.useMemo(function () {
+    return {
+      position: position,
+      setPosition: setPosition
+    };
+  }, [position, setPosition]);
   var constructHowl = React.useCallback(function (audioProps) {
@@ -281,5 +298,7 @@ return new howler.Howl(audioProps);
   }, [loading, error, playing, stopped, load, value, player, ready, duration, ended]);
-  return React__default.createElement(context.Provider, {
+  return React__default.createElement(playerContext.Provider, {
     value: contextValue
-  }, children);
+  }, React__default.createElement(positionContext.Provider, {
+    value: positionContextValue
+  }, children));
 }
@@ -290,3 +309,3 @@
 var useAudioPlayer = function useAudioPlayer(options) {
-  var _useContext = React.useContext(context),
+  var _useContext = React.useContext(playerContext),
       player = _useContext.player,
@@ -338,3 +357,3 @@ load = _useContext.load,
 
-  var _useContext = React.useContext(context),
+  var _useContext = React.useContext(playerContext),
       player = _useContext.player,
@@ -345,5 +364,5 @@ playing = _useContext.playing,
 
-  var _useState = React.useState(0),
-      position = _useState[0],
-      setPosition = _useState[1];
+  var _useContext2 = React.useContext(positionContext),
+      position = _useContext2.position,
+      setPosition = _useContext2.setPosition;
 
@@ -356,3 +375,3 @@ var animationFrameRef = React.useRef(); // sets position on player initialization and when the audio is stopped
     }
-  }, [player, 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
 
@@ -367,3 +386,3 @@ React.useEffect(function () {
     };
-  }, [highRefreshRate, player, playing]); // 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
 
@@ -386,3 +405,3 @@ React.useLayoutEffect(function () {
     };
-  }, [highRefreshRate, player, playing]);
+  }, [highRefreshRate, player, playing, setPosition]);
   var seek = React.useCallback(function (position) {
@@ -396,3 +415,3 @@ if (!player) return 0; // it appears that howler returns the Howl object when seek is given a position
     return updatedPos;
-  }, [player]);
+  }, [player, setPosition]);
   return {
@@ -399,0 +418,0 @@ position: position,

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

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

@@ -1,2 +0,2 @@
-import React, { useState, useReducer, useRef, useCallback, useEffect, useMemo, useContext, useLayoutEffect } from 'react';
+import React, { useState, useReducer, useRef, useMemo, useCallback, useEffect, useContext, useLayoutEffect } from 'react';
 import { Howl } from 'howler';
@@ -123,5 +123,11 @@
 
-var context =
+var playerContext =
 /*#__PURE__*/
 React.createContext(null);
+var positionContext =
+/*#__PURE__*/
+React.createContext({
+  position: 0,
+  setPosition: function setPosition() {}
+});
 
@@ -149,2 +155,13 @@ function AudioPlayerProvider(_ref) {
   var prevPlayer = useRef();
+
+  var _useState2 = useState(0),
+      position = _useState2[0],
+      setPosition = _useState2[1];
+
+  var positionContextValue = useMemo(function () {
+    return {
+      position: position,
+      setPosition: setPosition
+    };
+  }, [position, setPosition]);
   var constructHowl = useCallback(function (audioProps) {
@@ -274,5 +291,7 @@ return new Howl(audioProps);
   }, [loading, error, playing, stopped, load, value, player, ready, duration, ended]);
-  return React.createElement(context.Provider, {
+  return React.createElement(playerContext.Provider, {
     value: contextValue
-  }, children);
+  }, React.createElement(positionContext.Provider, {
+    value: positionContextValue
+  }, children));
 }
@@ -283,3 +302,3 @@
 var useAudioPlayer = function useAudioPlayer(options) {
-  var _useContext = useContext(context),
+  var _useContext = useContext(playerContext),
       player = _useContext.player,
@@ -331,3 +350,3 @@ load = _useContext.load,
 
-  var _useContext = useContext(context),
+  var _useContext = useContext(playerContext),
       player = _useContext.player,
@@ -338,5 +357,5 @@ playing = _useContext.playing,
 
-  var _useState = useState(0),
-      position = _useState[0],
-      setPosition = _useState[1];
+  var _useContext2 = useContext(positionContext),
+      position = _useContext2.position,
+      setPosition = _useContext2.setPosition;
 
@@ -349,3 +368,3 @@ var animationFrameRef = useRef(); // sets position on player initialization and when the audio is stopped
     }
-  }, [player, 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
 
@@ -360,3 +379,3 @@ useEffect(function () {
     };
-  }, [highRefreshRate, player, playing]); // 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
 
@@ -379,3 +398,3 @@ useLayoutEffect(function () {
     };
-  }, [highRefreshRate, player, playing]);
+  }, [highRefreshRate, player, playing, setPosition]);
   var seek = useCallback(function (position) {
@@ -389,3 +408,3 @@ if (!player) return 0; // it appears that howler returns the Howl object when seek is given a position
     return updatedPos;
-  }, [player]);
+  }, [player, setPosition]);
   return {
@@ -392,0 +411,0 @@ position: position,

dist/types.d.ts

@@ -0,1 +1,2 @@
+import React from "react";
 import { HowlOptions, Howl } from "howler";
@@ -14,1 +15,5 @@ import { AudioPlayerState } from "./audioPlayerState";
 }
+export interface AudioPlayerPositionContext {
+    position: number;
+    setPosition: React.Dispatch<number>;
+}

package.json

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

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

103685

increased by5.03%

Lines of code

827

increased by5.22%

No dependency changes