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

Comparing version 0.0.18 to 1.0.0

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

@@ -314,13 +314,2 @@ 'use strict';
   }, [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({}, rest, {
@@ -332,3 +321,2 @@ play: player ? player.play.bind(player) : noop,
     volume: player ? player.volume.bind(player) : noop,
-    seek: seek,
     load: load,
@@ -354,5 +342,2 @@ togglePlayPause: togglePlayPause
 
-  var _useAudioPlayer = useAudioPlayer(),
-      seek = _useAudioPlayer.seek;
-
   var _useState = React.useState(0),
@@ -397,2 +382,11 @@ position = _useState[0],
   }, [highRefreshRate, player, playing]);
+  var seek = React.useCallback(function (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);
+    var updatedPos = result.seek();
+    setPosition(updatedPos);
+    return updatedPos;
+  }, [player]);
   return {
@@ -399,0 +393,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 c=t.createContext(null),l=function(){},s=function(e){var r=n.useContext(c),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]),O=n.useCallback((function(e){if(t){var r=t.seek(e);if(!r._src)return r}}),[t]);return u({},i,{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,a=e.value,l=n.useState(null),s=l[0],p=l[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,c=e.xhr,l=void 0===c?{method:"GET",headers:void 0,withCredentials:void 0}:c,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:l});"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(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,d=o.duration,l=s().seek,p=n.useState(0),f=p[0],O=p[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:d,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 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])}};
 //# sourceMappingURL=react-use-audio-player.cjs.production.min.js.map

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

@@ -307,13 +307,2 @@ import React, { useState, useReducer, useRef, useCallback, useEffect, useMemo, useContext, useLayoutEffect } from 'react';
   }, [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({}, rest, {
@@ -325,3 +314,2 @@ play: player ? player.play.bind(player) : noop,
     volume: player ? player.volume.bind(player) : noop,
-    seek: seek,
     load: load,
@@ -347,5 +335,2 @@ togglePlayPause: togglePlayPause
 
-  var _useAudioPlayer = useAudioPlayer(),
-      seek = _useAudioPlayer.seek;
-
   var _useState = useState(0),
@@ -390,2 +375,11 @@ position = _useState[0],
   }, [highRefreshRate, player, playing]);
+  var seek = useCallback(function (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);
+    var updatedPos = result.seek();
+    setPosition(updatedPos);
+    return updatedPos;
+  }, [player]);
   return {
@@ -392,0 +386,0 @@ position: position,

dist/useAudioPlayer.d.ts

@@ -10,3 +10,2 @@ import { Howl } from "howler";
     volume: Howl["volume"] | typeof noop;
-    seek: (position?: number) => number | undefined;
     togglePlayPause: () => void;
@@ -13,0 +12,0 @@ };

dist/useAudioPosition.d.ts

@@ -1,2 +0,1 @@
-import { AudioPlayerControls } from "./useAudioPlayer";
 interface UseAudioPositionConfig {
@@ -8,5 +7,5 @@ highRefreshRate?: boolean;
     duration: number;
-    seek: AudioPlayerControls["seek"];
+    seek: (position: number) => number;
 }
 export declare const useAudioPosition: (config?: UseAudioPositionConfig) => AudioPosition;
 export {};

package.json

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

README.md

@@ -133,5 +133,2 @@ # react-use-audio-player
 
--   `seek: (position: number) => number | undefined`
-    <br/>sets the position of the audio to position (seconds)
-
 -   `mute: () => void`
@@ -157,3 +154,3 @@ <br/>mutes the audio
 const PlayBar = () => {
-    const { position, duration } = useAudioPosition({ highRefreshRate: true })
+    const { position, duration, seek } = useAudioPosition({ highRefreshRate: true })
     const [percent, setPercent] = React.useState(0)
@@ -164,4 +161,8 @@
     }, [position, duration])
+    
+    const goToPosition = React.useCallback((percentage) => {
+        seek(duration * percentage)
+    }, [duration, seek])
 
-    return <ProgressBar percentComplete={percent} />
+    return <ProgressBar percentComplete={percent} onBarPositionClick={goToPosition} />
 }
@@ -187,4 +188,4 @@ ```
     
--   `seek`
-    <br/> For convenience the `seek` method from useAudioPlayer is also returned from this hook
+-   `seek: (position: number) => number`
+    <br/>sets the position of the audio to position (seconds)
 
@@ -191,0 +192,0 @@ ## Examples

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

207

increased by0.49%

Worsened metrics

Total package byte prevSize

98722

decreased by-0.49%

Lines of code

786

decreased by-1.5%

No dependency changes