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

Comparing version 0.0.12 to 0.0.13

dist/index.d.ts

@@ -24,2 +24,3 @@ /// <reference types="howler" />
     seek: Howl["seek"] | typeof noop;
+    togglePlayPause: () => void;
 };
@@ -26,0 +27,0 @@ interface AudioPlayerProviderProps {

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

@@ -159,5 +159,3 @@ 'use strict';
     howl.on("play", function () {
-      // prevents howl from playing the same song twice
-      if (!this.playing()) return;
-      dispatch({
+      return void dispatch({
         type: Actions.ON_PLAY
@@ -239,2 +237,11 @@ });
   }, [src, format, autoplay, load]);
+  var togglePlayPause = React.useCallback(function () {
+    if (!player) return;
+
+    if (player.playing()) {
+      player.pause();
+    } else {
+      player.play();
+    }
+  }, [player]);
   return tslib.__assign(tslib.__assign({}, context), {
@@ -246,3 +253,4 @@ play: player ? player.play.bind(player) : noop,
     seek: player ? player.seek.bind(player) : noop,
-    load: load
+    load: load,
+    togglePlayPause: togglePlayPause
   });
@@ -270,4 +278,5 @@ }; // gives current audio position state - updates in an animation frame loop for animating audio visualizations
       duration = _d[0],
-      setDuration = _d[1]; // sets position and duration on player initialization and when the audio is stopped
+      setDuration = _d[1];
 
+  var animationFrameRef = React.useRef(); // sets position and duration on player initialization and when the audio is stopped
 
@@ -291,5 +300,3 @@ React.useEffect(function () {
 
-  React.useEffect(function () {
-    var frame;
-
+  React.useLayoutEffect(function () {
     var animate = function animate() {
@@ -299,12 +306,13 @@ var _a;
       setPosition((_a = player) === null || _a === void 0 ? void 0 : _a.seek());
-      frame = requestAnimationFrame(animate);
-    };
+      animationFrameRef.current = requestAnimationFrame(animate);
+    }; // kick off a new animation cycle when the player is defined and starts playing
 
+
     if (highRefreshRate && player && playing) {
-      animate();
+      animationFrameRef.current = requestAnimationFrame(animate);
     }
 
     return function () {
-      if (frame) {
-        cancelAnimationFrame(frame);
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
       }
@@ -311,0 +319,0 @@ };

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("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}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r,n=require("tslib"),t=require("react"),a=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,o=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(){},_=a.createContext(null);exports.AudioPlayerProvider=function(e){var n=e.children,i=e.value,c=t.useState(null),l=c[0],p=c[1],f=t.useReducer(s,u),O=f[0],d=O.loading,R=O.error,y=O.playing,E=O.stopped,g=f[1],N=t.useRef(),A=t.useCallback((function(e){return new o.Howl({src:e.src,format:e.format,autoplay:e.autoplay})}),[]),v=t.useCallback((function(e){var n=e.src,t=e.format,a=e.autoplay,o=void 0!==a&&a;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||o});"loaded"!==s._state&&g({type:r.ON_LOAD}),s.on("load",(function(){g({type:r.ON_LOAD})})),s.on("play",(function(){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:l,load:v,error:R,loading:d,playing:y,stopped:E,ready:!d&&!R}}),[d,R,y,E,v,i,l]);return a.createElement(_.Provider,{value:P},n)},exports.useAudioPlayer=function(e){var r=t.useContext(_),a=r.player,o=r.load,u=n.__rest(r,["player","load"]),s=e||{},c=s.src,l=s.format,p=s.autoplay;t.useEffect((function(){c&&o({src:c,format:l,autoplay:p})}),[c,l,p,o]);var f=t.useCallback((function(){a&&(a.playing()?a.pause():a.play())}),[a]);return n.__assign(n.__assign({},u),{play:a?a.play.bind(a):i,pause:a?a.pause.bind(a):i,stop:a?a.stop.bind(a):i,mute:a?a.mute.bind(a):i,seek:a?a.seek.bind(a):i,load:o,togglePlayPause:f})},exports.useAudioPosition=function(e){void 0===e&&(e={});var r=e.highRefreshRate,n=void 0!==r&&r,a=t.useContext(_),o=a.player,u=a.playing,s=a.stopped,i=t.useState(0),c=i[0],l=i[1],p=t.useState(0),f=p[0],O=p[1],d=t.useRef();return t.useEffect((function(){o&&(l(o.seek()),O(o.duration()))}),[o,s]),t.useEffect((function(){var e;return!n&&o&&u&&(e=window.setInterval((function(){return l(o.seek())}),1e3)),function(){return clearTimeout(e)}}),[n,o,u]),t.useLayoutEffect((function(){return n&&o&&u&&(d.current=requestAnimationFrame((function e(){var r;l(null===(r=o)||void 0===r?void 0:r.seek()),d.current=requestAnimationFrame(e)}))),function(){d.current&&cancelAnimationFrame(d.current)}}),[n,o,u]),{position:c,duration:f}};
 //# sourceMappingURL=react-use-audio-player.cjs.production.min.js.map

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

 import { __assign, __rest } from 'tslib';
-import React, { useState, useReducer, useRef, useCallback, useEffect, useMemo, useContext } from 'react';
+import React, { useState, useReducer, useRef, useCallback, useEffect, useMemo, useContext, useLayoutEffect } from 'react';
 import { Howl } from 'howler';
@@ -152,5 +152,3 @@
     howl.on("play", function () {
-      // prevents howl from playing the same song twice
-      if (!this.playing()) return;
-      dispatch({
+      return void dispatch({
         type: Actions.ON_PLAY
@@ -232,2 +230,11 @@ });
   }, [src, format, autoplay, load]);
+  var togglePlayPause = useCallback(function () {
+    if (!player) return;
+
+    if (player.playing()) {
+      player.pause();
+    } else {
+      player.play();
+    }
+  }, [player]);
   return __assign(__assign({}, context), {
@@ -239,3 +246,4 @@ play: player ? player.play.bind(player) : noop,
     seek: player ? player.seek.bind(player) : noop,
-    load: load
+    load: load,
+    togglePlayPause: togglePlayPause
   });
@@ -263,4 +271,5 @@ }; // gives current audio position state - updates in an animation frame loop for animating audio visualizations
       duration = _d[0],
-      setDuration = _d[1]; // sets position and duration on player initialization and when the audio is stopped
+      setDuration = _d[1];
 
+  var animationFrameRef = useRef(); // sets position and duration on player initialization and when the audio is stopped
 
@@ -284,5 +293,3 @@ useEffect(function () {
 
-  useEffect(function () {
-    var frame;
-
+  useLayoutEffect(function () {
     var animate = function animate() {
@@ -292,12 +299,13 @@ var _a;
       setPosition((_a = player) === null || _a === void 0 ? void 0 : _a.seek());
-      frame = requestAnimationFrame(animate);
-    };
+      animationFrameRef.current = requestAnimationFrame(animate);
+    }; // kick off a new animation cycle when the player is defined and starts playing
 
+
     if (highRefreshRate && player && playing) {
-      animate();
+      animationFrameRef.current = requestAnimationFrame(animate);
     }
 
     return function () {
-      if (frame) {
-        cancelAnimationFrame(frame);
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
       }
@@ -304,0 +312,0 @@ };

package.json

 {
     "name": "react-use-audio-player",
-    "version": "0.0.12",
+    "version": "0.0.13",
     "description": "React hook for building custom audio playback controls",
@@ -29,2 +29,3 @@ "main": "dist/index.js",
         "test": "tsdx test --passWithNoTests",
+        "test:integration": "cypress run",
         "lint": "tsdx lint",
@@ -40,2 +41,4 @@ "prepare": "tsdx build",
         "@types/react-dom": "^16.9.4",
+        "cypress": "^4.1.0",
+        "eslint-plugin-cypress": "^2.10.3",
         "husky": "^3.1.0",
@@ -42,0 +45,0 @@ "react": "^16.12.0",

README.md

@@ -6,2 +6,3 @@ # react-use-audio-player
 ![Version](https://img.shields.io/npm/v/react-use-audio-player)
+[![CircleCI](https://circleci.com/gh/E-Kuerschner/useAudioPlayer/tree/master.svg?style=shield)](https://app.circleci.com/github/E-Kuerschner/useAudioPlayer/pipelines?branch=master)
 
@@ -57,3 +58,3 @@ ## Install
 const AudioPlayer = ({ file }) => {
-    const { play, pause, ready, loading, playing } = useAudioPlayer({
+    const { togglePlayPause, ready, loading, playing } = useAudioPlayer({
         src: file,
@@ -64,10 +65,2 @@ format: "mp3",
 
-    const togglePlay = () => {
-        if (playing) {
-            pause()
-        } else {
-            play()
-        }
-    }
-
     if (!ready && !loading) return <div>No audio to play</div>
@@ -78,3 +71,3 @@ if (loading) return <div>Loading audio</div>
         <div>
-            <button onClick={togglePlay}>{playing ? "Pause" : "Play"}</button>
+            <button onClick={togglePlayPause}>{playing ? "Pause" : "Play"}</button>
         </div>
@@ -120,2 +113,5 @@ )
 
+-   `togglePlayPause: () => void`
+    <br/>convenient equivalent to alternating calls to `play` and `pause`
+
 -   `stop: () => void`
@@ -122,0 +118,0 @@ <br/>stops the audio, returning the position to 0

Fixed alerts

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

79800

4.22%

Lines of code

645

2.71%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Dev dependency count

12

20%

Number of lines in readme file

181

-2.16%

No dependency changes