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

Comparing version 0.0.11 to 0.0.12

dist/index.d.ts

@@ -35,3 +35,6 @@ /// <reference types="howler" />
 export declare const useAudioPlayer: (props?: AudioSrcProps | undefined) => UseAudioPlayer;
-export declare const useAudioPosition: () => AudioPosition;
+interface UseAudioPositionConfig {
+    highRefreshRate?: boolean;
+}
+export declare const useAudioPosition: (config?: UseAudioPositionConfig) => AudioPosition;
 export {};

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

@@ -12,2 +12,72 @@ 'use strict';
 
+var Actions;
+
+(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 = {}));
+
+var initialState = {
+  loading: true,
+  playing: false,
+  stopped: true,
+  error: null
+};
+function reducer(state, action) {
+  switch (action.type) {
+    case Actions.ON_LOAD:
+      return tslib.__assign(tslib.__assign({}, state), {
+        stopped: true,
+        loading: false
+      });
+
+    case Actions.ON_PLAY:
+      return tslib.__assign(tslib.__assign({}, state), {
+        playing: true,
+        stopped: false
+      });
+
+    case Actions.ON_STOP:
+    case Actions.ON_END:
+      return tslib.__assign(tslib.__assign({}, state), {
+        stopped: true,
+        playing: false
+      });
+
+    case Actions.ON_PAUSE:
+      return tslib.__assign(tslib.__assign({}, state), {
+        playing: false
+      });
+
+    case Actions.ON_PLAY_ERROR:
+      return tslib.__assign(tslib.__assign({}, state), {
+        playing: false,
+        stopped: true,
+        error: action.error
+      });
+
+    case Actions.ON_LOAD_ERROR:
+      return tslib.__assign(tslib.__assign({}, state), {
+        playing: false,
+        stopped: true,
+        loading: false,
+        error: action.error
+      });
+
+    case Actions.RESET_ERRORS:
+      return tslib.__assign(tslib.__assign({}, state), {
+        error: null
+      });
+
+    default:
+      return state;
+  }
+}
+
 var noop = function noop() {};
@@ -26,20 +96,21 @@
 
+  var _c = React.useReducer(reducer, initialState),
+      _d = _c[0],
+      loading = _d.loading,
+      error = _d.error,
+      playing = _d.playing,
+      stopped = _d.stopped,
+      dispatch = _c[1];
+
   var playerRef = React.useRef();
-
-  var _c = React.useState(null),
-      error = _c[0],
-      setError = _c[1];
-
-  var _d = React.useState(true),
-      loading = _d[0],
-      setLoading = _d[1];
-
-  var _e = React.useState(false),
-      playing = _e[0],
-      setPlaying = _e[1];
-
-  var _f = React.useState(true),
-      stopped = _f[0],
-      setStopped = _f[1];
-
+  var constructHowl = React.useCallback(function (_a) {
+    var src = _a.src,
+        format = _a.format,
+        autoplay = _a.autoplay;
+    return new howler.Howl({
+      src: src,
+      format: format,
+      autoplay: autoplay
+    });
+  }, []);
   var load = React.useCallback(function (_a) {
@@ -50,2 +121,5 @@ var src = _a.src,
         autoplay = _b === void 0 ? false : _b;
+    dispatch({
+      type: Actions.RESET_ERRORS
+    });
     var wasPlaying = false;
@@ -57,47 +131,69 @@
       if (playerRef.current._src === src) return;
-      wasPlaying = playerRef.current.playing(); // destroys the previous player
+      wasPlaying = playerRef.current.playing();
 
-      playerRef.current.unload();
+      if (wasPlaying) {
+        playerRef.current.stop(); // remove event handlers from player that is about to be replaced
+
+        playerRef.current.off();
+        playerRef.current = undefined;
+      }
     } // create a new player
 
 
-    var howl = new howler.Howl({
+    var howl = constructHowl({
       src: src,
       format: format,
-      autoplay: wasPlaying || autoplay,
-      onload: function onload() {
-        setError(null);
-        setStopped(true);
-        setLoading(false);
-      },
-      onplay: function onplay() {
-        // prevents howl from playing the same song twice
-        if (!howl.playing()) return;
-        setPlaying(true);
-        setStopped(false);
-      },
-      onend: function onend() {
-        setStopped(true);
-        setPlaying(false);
-      },
-      onpause: function onpause() {
-        return void setPlaying(false);
-      },
-      onstop: function onstop() {
-        setStopped(true);
-        setPlaying(false);
-      },
-      onplayerror: function onplayerror(_id, error) {
-        setError(new Error("[Play error] " + error));
-        setPlaying(false);
-        setStopped(true);
-      },
-      onloaderror: function onloaderror(_id, error) {
-        setError(new Error("[Load error] " + error));
-        setLoading(false);
-      }
+      autoplay: wasPlaying || autoplay // continues playing next song
+
+    }); // if this howl has already been loaded then there is no need to change loading state
+    // @ts-ignore _state exists
+
+    if (howl._state !== "loaded") {
+      dispatch({
+        type: Actions.ON_LOAD
+      });
+    }
+
+    howl.on("load", function () {
+      return void dispatch({
+        type: Actions.ON_LOAD
+      });
     });
+    howl.on("play", function () {
+      // prevents howl from playing the same song twice
+      if (!this.playing()) return;
+      dispatch({
+        type: Actions.ON_PLAY
+      });
+    });
+    howl.on("end", function () {
+      return void dispatch({
+        type: Actions.ON_END
+      });
+    });
+    howl.on("pause", function () {
+      return void dispatch({
+        type: Actions.ON_PAUSE
+      });
+    });
+    howl.on("stop", function () {
+      return void dispatch({
+        type: Actions.ON_STOP
+      });
+    });
+    howl.on("playerror", function (_id, error) {
+      dispatch({
+        type: Actions.ON_PLAY_ERROR,
+        error: new Error("[Play error] " + error)
+      });
+    });
+    howl.on("loaderror", function (_id, error) {
+      dispatch({
+        type: Actions.ON_LOAD_ERROR,
+        error: new Error("[Load error] " + error)
+      });
+    });
     setPlayer(howl);
     playerRef.current = howl;
-  }, []);
+  }, [constructHowl]);
   React.useEffect(function () {
@@ -109,11 +205,13 @@ // unload the player on unmount
   }, []);
-  var contextValue = value ? value : {
-    player: player,
-    load: load,
-    error: error,
-    loading: loading,
-    playing: playing,
-    stopped: stopped,
-    ready: !loading && !error
-  };
+  var contextValue = React.useMemo(function () {
+    return value ? value : {
+      player: player,
+      load: load,
+      error: error,
+      loading: loading,
+      playing: playing,
+      stopped: stopped,
+      ready: !loading && !error
+    };
+  }, [loading, error, playing, stopped, load, value, player]);
   return React__default.createElement(AudioPlayerContext.Provider, {
@@ -155,17 +253,24 @@ value: contextValue
 
-var useAudioPosition = function useAudioPosition() {
-  var _a = React.useContext(AudioPlayerContext),
-      player = _a.player,
-      playing = _a.playing,
-      stopped = _a.stopped;
+var useAudioPosition = function useAudioPosition(config) {
+  if (config === void 0) {
+    config = {};
+  }
 
-  var _b = React.useState(0),
-      position = _b[0],
-      setPosition = _b[1];
+  var _a = config.highRefreshRate,
+      highRefreshRate = _a === void 0 ? false : _a;
 
+  var _b = React.useContext(AudioPlayerContext),
+      player = _b.player,
+      playing = _b.playing,
+      stopped = _b.stopped;
+
   var _c = React.useState(0),
-      duration = _c[0],
-      setDuration = _c[1]; // sets position and duration on player initialization and when the audio is stopped
+      position = _c[0],
+      setPosition = _c[1];
 
+  var _d = React.useState(0),
+      duration = _d[0],
+      setDuration = _d[1]; // sets position and duration on player initialization and when the audio is stopped
 
+
   React.useEffect(function () {
@@ -176,7 +281,7 @@ if (player) {
     }
-  }, [player, stopped]); // updates position on a one second loop
+  }, [player, stopped]); // updates position on a one second loop for low refresh rate default setting
 
   React.useEffect(function () {
     var timeout;
-    if (player && playing) timeout = window.setInterval(function () {
+    if (!highRefreshRate && player && playing) timeout = window.setInterval(function () {
       return setPosition(player.seek());
@@ -187,3 +292,24 @@ }, 1000);
     };
-  }, [player, playing]);
+  }, [highRefreshRate, player, playing]); // updates position on a 60fps loop for high refresh rate setting
+
+  React.useEffect(function () {
+    var frame;
+
+    var animate = function animate() {
+      var _a;
+
+      setPosition((_a = player) === null || _a === void 0 ? void 0 : _a.seek());
+      frame = requestAnimationFrame(animate);
+    };
+
+    if (highRefreshRate && player && playing) {
+      animate();
+    }
+
+    return function () {
+      if (frame) {
+        cancelAnimationFrame(frame);
+      }
+    };
+  }, [highRefreshRate, player, playing]);
   return {
@@ -190,0 +316,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=require("tslib"),t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,o=require("howler"),u=function(){},a=n.createContext(null);exports.AudioPlayerProvider=function(e){var r=e.children,u=e.value,i=t.useState(null),l=i[0],s=i[1],c=t.useRef(),f=t.useState(null),d=f[0],p=f[1],y=t.useState(!0),v=y[0],b=y[1],_=t.useState(!1),m=_[0],g=_[1],w=t.useState(!0),x=w[0],E=w[1],P=t.useCallback((function(e){var r=e.src,t=e.format,n=e.autoplay,u=void 0!==n&&n,a=!1;if(c.current){if(c.current._src===r)return;a=c.current.playing(),c.current.unload()}var i=new o.Howl({src:r,format:t,autoplay:a||u,onload:function(){p(null),E(!0),b(!1)},onplay:function(){i.playing()&&(g(!0),E(!1))},onend:function(){E(!0),g(!1)},onpause:function(){g(!1)},onstop:function(){E(!0),g(!1)},onplayerror:function(e,r){p(new Error("[Play error] "+r)),g(!1),E(!0)},onloaderror:function(e,r){p(new Error("[Load error] "+r)),b(!1)}});s(i),c.current=i}),[]);return t.useEffect((function(){return function(){c.current&&c.current.unload()}}),[]),n.createElement(a.Provider,{value:u||{player:l,load:P,error:d,loading:v,playing:m,stopped:x,ready:!v&&!d}},r)},exports.useAudioPlayer=function(e){var n=t.useContext(a),o=n.player,i=n.load,l=r.__rest(n,["player","load"]),s=e||{},c=s.src,f=s.format,d=s.autoplay;return t.useEffect((function(){c&&i({src:c,format:f,autoplay:d})}),[c,f,d,i]),r.__assign(r.__assign({},l),{play:o?o.play.bind(o):u,pause:o?o.pause.bind(o):u,stop:o?o.stop.bind(o):u,mute:o?o.mute.bind(o):u,seek:o?o.seek.bind(o):u,load:i})},exports.useAudioPosition=function(){var e=t.useContext(a),r=e.player,n=e.playing,o=e.stopped,u=t.useState(0),i=u[0],l=u[1],s=t.useState(0),c=s[0],f=s[1];return t.useEffect((function(){r&&(l(r.seek()),f(r.duration()))}),[r,o]),t.useEffect((function(){var e;return r&&n&&(e=window.setInterval((function(){return l(r.seek())}),1e3)),function(){return clearTimeout(e)}}),[r,n]),{position:i,duration:c}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r,n=require("tslib"),t=require("react"),o=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,a=require("howler");!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 u={loading:!0,playing:!1,stopped:!0,error:null};function s(e,t){switch(t.type){case r.ON_LOAD:return n.__assign(n.__assign({},e),{stopped:!0,loading:!1});case r.ON_PLAY:return n.__assign(n.__assign({},e),{playing:!0,stopped:!1});case r.ON_STOP:case r.ON_END:return n.__assign(n.__assign({},e),{stopped:!0,playing:!1});case r.ON_PAUSE:return n.__assign(n.__assign({},e),{playing:!1});case r.ON_PLAY_ERROR:return n.__assign(n.__assign({},e),{playing:!1,stopped:!0,error:t.error});case r.ON_LOAD_ERROR:return n.__assign(n.__assign({},e),{playing:!1,stopped:!0,loading:!1,error:t.error});case r.RESET_ERRORS:return n.__assign(n.__assign({},e),{error:null});default:return e}}var i=function(){},_=o.createContext(null);exports.AudioPlayerProvider=function(e){var n=e.children,i=e.value,l=t.useState(null),c=l[0],p=l[1],O=t.useReducer(s,u),f=O[0],d=f.loading,R=f.error,y=f.playing,E=f.stopped,g=O[1],N=t.useRef(),A=t.useCallback((function(e){return new a.Howl({src:e.src,format:e.format,autoplay:e.autoplay})}),[]),v=t.useCallback((function(e){var n=e.src,t=e.format,o=e.autoplay,a=void 0!==o&&o;g({type:r.RESET_ERRORS});var u=!1;if(N.current){if(N.current._src===n)return;(u=N.current.playing())&&(N.current.stop(),N.current.off(),N.current=void 0)}var s=A({src:n,format:t,autoplay:u||a});"loaded"!==s._state&&g({type:r.ON_LOAD}),s.on("load",(function(){g({type:r.ON_LOAD})})),s.on("play",(function(){this.playing()&&g({type:r.ON_PLAY})})),s.on("end",(function(){g({type:r.ON_END})})),s.on("pause",(function(){g({type:r.ON_PAUSE})})),s.on("stop",(function(){g({type:r.ON_STOP})})),s.on("playerror",(function(e,n){g({type:r.ON_PLAY_ERROR,error:new Error("[Play error] "+n)})})),s.on("loaderror",(function(e,n){g({type:r.ON_LOAD_ERROR,error:new Error("[Load error] "+n)})})),p(s),N.current=s}),[A]);t.useEffect((function(){return function(){N.current&&N.current.unload()}}),[]);var P=t.useMemo((function(){return i||{player:c,load:v,error:R,loading:d,playing:y,stopped:E,ready:!d&&!R}}),[d,R,y,E,v,i,c]);return o.createElement(_.Provider,{value:P},n)},exports.useAudioPlayer=function(e){var r=t.useContext(_),o=r.player,a=r.load,u=n.__rest(r,["player","load"]),s=e||{},l=s.src,c=s.format,p=s.autoplay;return t.useEffect((function(){l&&a({src:l,format:c,autoplay:p})}),[l,c,p,a]),n.__assign(n.__assign({},u),{play:o?o.play.bind(o):i,pause:o?o.pause.bind(o):i,stop:o?o.stop.bind(o):i,mute:o?o.mute.bind(o):i,seek:o?o.seek.bind(o):i,load:a})},exports.useAudioPosition=function(e){void 0===e&&(e={});var r=e.highRefreshRate,n=void 0!==r&&r,o=t.useContext(_),a=o.player,u=o.playing,s=o.stopped,i=t.useState(0),l=i[0],c=i[1],p=t.useState(0),O=p[0],f=p[1];return t.useEffect((function(){a&&(c(a.seek()),f(a.duration()))}),[a,s]),t.useEffect((function(){var e;return!n&&a&&u&&(e=window.setInterval((function(){return c(a.seek())}),1e3)),function(){return clearTimeout(e)}}),[n,a,u]),t.useEffect((function(){var e;return n&&a&&u&&function r(){var n;c(null===(n=a)||void 0===n?void 0:n.seek()),e=requestAnimationFrame(r)}(),function(){e&&cancelAnimationFrame(e)}}),[n,a,u]),{position:l,duration:O}};
 //# sourceMappingURL=react-use-audio-player.cjs.production.min.js.map

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

@@ -1,5 +0,75 @@
-import { __rest, __assign } from 'tslib';
-import React, { useState, useRef, useCallback, useEffect, useContext } from 'react';
+import { __assign, __rest } from 'tslib';
+import React, { useState, useReducer, useRef, useCallback, useEffect, useMemo, useContext } from 'react';
 import { Howl } from 'howler';
 
+var Actions;
+
+(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 = {}));
+
+var initialState = {
+  loading: true,
+  playing: false,
+  stopped: true,
+  error: null
+};
+function reducer(state, action) {
+  switch (action.type) {
+    case Actions.ON_LOAD:
+      return __assign(__assign({}, state), {
+        stopped: true,
+        loading: false
+      });
+
+    case Actions.ON_PLAY:
+      return __assign(__assign({}, state), {
+        playing: true,
+        stopped: false
+      });
+
+    case Actions.ON_STOP:
+    case Actions.ON_END:
+      return __assign(__assign({}, state), {
+        stopped: true,
+        playing: false
+      });
+
+    case Actions.ON_PAUSE:
+      return __assign(__assign({}, state), {
+        playing: false
+      });
+
+    case Actions.ON_PLAY_ERROR:
+      return __assign(__assign({}, state), {
+        playing: false,
+        stopped: true,
+        error: action.error
+      });
+
+    case Actions.ON_LOAD_ERROR:
+      return __assign(__assign({}, state), {
+        playing: false,
+        stopped: true,
+        loading: false,
+        error: action.error
+      });
+
+    case Actions.RESET_ERRORS:
+      return __assign(__assign({}, state), {
+        error: null
+      });
+
+    default:
+      return state;
+  }
+}
+
 var noop = function noop() {};
@@ -18,20 +88,21 @@
 
+  var _c = useReducer(reducer, initialState),
+      _d = _c[0],
+      loading = _d.loading,
+      error = _d.error,
+      playing = _d.playing,
+      stopped = _d.stopped,
+      dispatch = _c[1];
+
   var playerRef = useRef();
-
-  var _c = useState(null),
-      error = _c[0],
-      setError = _c[1];
-
-  var _d = useState(true),
-      loading = _d[0],
-      setLoading = _d[1];
-
-  var _e = useState(false),
-      playing = _e[0],
-      setPlaying = _e[1];
-
-  var _f = useState(true),
-      stopped = _f[0],
-      setStopped = _f[1];
-
+  var constructHowl = useCallback(function (_a) {
+    var src = _a.src,
+        format = _a.format,
+        autoplay = _a.autoplay;
+    return new Howl({
+      src: src,
+      format: format,
+      autoplay: autoplay
+    });
+  }, []);
   var load = useCallback(function (_a) {
@@ -42,2 +113,5 @@ var src = _a.src,
         autoplay = _b === void 0 ? false : _b;
+    dispatch({
+      type: Actions.RESET_ERRORS
+    });
     var wasPlaying = false;
@@ -49,47 +123,69 @@
       if (playerRef.current._src === src) return;
-      wasPlaying = playerRef.current.playing(); // destroys the previous player
+      wasPlaying = playerRef.current.playing();
 
-      playerRef.current.unload();
+      if (wasPlaying) {
+        playerRef.current.stop(); // remove event handlers from player that is about to be replaced
+
+        playerRef.current.off();
+        playerRef.current = undefined;
+      }
     } // create a new player
 
 
-    var howl = new Howl({
+    var howl = constructHowl({
       src: src,
       format: format,
-      autoplay: wasPlaying || autoplay,
-      onload: function onload() {
-        setError(null);
-        setStopped(true);
-        setLoading(false);
-      },
-      onplay: function onplay() {
-        // prevents howl from playing the same song twice
-        if (!howl.playing()) return;
-        setPlaying(true);
-        setStopped(false);
-      },
-      onend: function onend() {
-        setStopped(true);
-        setPlaying(false);
-      },
-      onpause: function onpause() {
-        return void setPlaying(false);
-      },
-      onstop: function onstop() {
-        setStopped(true);
-        setPlaying(false);
-      },
-      onplayerror: function onplayerror(_id, error) {
-        setError(new Error("[Play error] " + error));
-        setPlaying(false);
-        setStopped(true);
-      },
-      onloaderror: function onloaderror(_id, error) {
-        setError(new Error("[Load error] " + error));
-        setLoading(false);
-      }
+      autoplay: wasPlaying || autoplay // continues playing next song
+
+    }); // if this howl has already been loaded then there is no need to change loading state
+    // @ts-ignore _state exists
+
+    if (howl._state !== "loaded") {
+      dispatch({
+        type: Actions.ON_LOAD
+      });
+    }
+
+    howl.on("load", function () {
+      return void dispatch({
+        type: Actions.ON_LOAD
+      });
     });
+    howl.on("play", function () {
+      // prevents howl from playing the same song twice
+      if (!this.playing()) return;
+      dispatch({
+        type: Actions.ON_PLAY
+      });
+    });
+    howl.on("end", function () {
+      return void dispatch({
+        type: Actions.ON_END
+      });
+    });
+    howl.on("pause", function () {
+      return void dispatch({
+        type: Actions.ON_PAUSE
+      });
+    });
+    howl.on("stop", function () {
+      return void dispatch({
+        type: Actions.ON_STOP
+      });
+    });
+    howl.on("playerror", function (_id, error) {
+      dispatch({
+        type: Actions.ON_PLAY_ERROR,
+        error: new Error("[Play error] " + error)
+      });
+    });
+    howl.on("loaderror", function (_id, error) {
+      dispatch({
+        type: Actions.ON_LOAD_ERROR,
+        error: new Error("[Load error] " + error)
+      });
+    });
     setPlayer(howl);
     playerRef.current = howl;
-  }, []);
+  }, [constructHowl]);
   useEffect(function () {
@@ -101,11 +197,13 @@ // unload the player on unmount
   }, []);
-  var contextValue = value ? value : {
-    player: player,
-    load: load,
-    error: error,
-    loading: loading,
-    playing: playing,
-    stopped: stopped,
-    ready: !loading && !error
-  };
+  var contextValue = useMemo(function () {
+    return value ? value : {
+      player: player,
+      load: load,
+      error: error,
+      loading: loading,
+      playing: playing,
+      stopped: stopped,
+      ready: !loading && !error
+    };
+  }, [loading, error, playing, stopped, load, value, player]);
   return React.createElement(AudioPlayerContext.Provider, {
@@ -147,17 +245,24 @@ value: contextValue
 
-var useAudioPosition = function useAudioPosition() {
-  var _a = useContext(AudioPlayerContext),
-      player = _a.player,
-      playing = _a.playing,
-      stopped = _a.stopped;
+var useAudioPosition = function useAudioPosition(config) {
+  if (config === void 0) {
+    config = {};
+  }
 
-  var _b = useState(0),
-      position = _b[0],
-      setPosition = _b[1];
+  var _a = config.highRefreshRate,
+      highRefreshRate = _a === void 0 ? false : _a;
 
+  var _b = useContext(AudioPlayerContext),
+      player = _b.player,
+      playing = _b.playing,
+      stopped = _b.stopped;
+
   var _c = useState(0),
-      duration = _c[0],
-      setDuration = _c[1]; // sets position and duration on player initialization and when the audio is stopped
+      position = _c[0],
+      setPosition = _c[1];
 
+  var _d = useState(0),
+      duration = _d[0],
+      setDuration = _d[1]; // sets position and duration on player initialization and when the audio is stopped
 
+
   useEffect(function () {
@@ -168,7 +273,7 @@ if (player) {
     }
-  }, [player, stopped]); // updates position on a one second loop
+  }, [player, stopped]); // updates position on a one second loop for low refresh rate default setting
 
   useEffect(function () {
     var timeout;
-    if (player && playing) timeout = window.setInterval(function () {
+    if (!highRefreshRate && player && playing) timeout = window.setInterval(function () {
       return setPosition(player.seek());
@@ -179,3 +284,24 @@ }, 1000);
     };
-  }, [player, playing]);
+  }, [highRefreshRate, player, playing]); // updates position on a 60fps loop for high refresh rate setting
+
+  useEffect(function () {
+    var frame;
+
+    var animate = function animate() {
+      var _a;
+
+      setPosition((_a = player) === null || _a === void 0 ? void 0 : _a.seek());
+      frame = requestAnimationFrame(animate);
+    };
+
+    if (highRefreshRate && player && playing) {
+      animate();
+    }
+
+    return function () {
+      if (frame) {
+        cancelAnimationFrame(frame);
+      }
+    };
+  }, [highRefreshRate, player, playing]);
   return {
@@ -182,0 +308,0 @@ position: position,

package.json

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

README.md

@@ -139,3 +139,3 @@ # react-use-audio-player
 const PlayBar = () => {
-    const { position, duration } = useAudioPosition()
+    const { position, duration } = useAudioPosition({ highRefreshRate: true })
     const [percent, setPercent] = React.useState(0)
@@ -153,2 +153,7 @@
 
+#### Arguments
+-   `(optional) config: { highRefreshRate: boolean }`
+    <br/>`highRefreshRate` will allow useAudioPosition to update state at a smooth 60fps rate
+    via the browser's requestAnimationFrame API. This is ideal for when you want smoother animations.
+
 #### Return Value
@@ -173,1 +178,11 @@
 5. follow the local README for further assistance
+
+## Release
+
+The most basic npm release strategy is being followed for now. A good explanation can be found [here](https://cloudfour.com/thinks/how-to-publish-an-updated-version-of-an-npm-package/).
+
+Steps
+1. commit work & tests
+2. `yarn/npm version` (preversion script will ensure code is tested and built)
+3. `yarn/npm publish`
+4. `git push` & `git push --tags`

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

76567

increased by54.2%

Number of package files

12

increased by9.09%

Lines of code

628

increased by67.47%

Number of lines in readme file

185

increased by8.19%

No dependency changes