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

Comparing version 0.0.17 to 0.0.18

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

@@ -155,17 +155,19 @@ 'use strict';
   var prevPlayer = React.useRef();
-  var constructHowl = React.useCallback(function (_ref2) {
+  var constructHowl = React.useCallback(function (audioProps) {
+    return new howler.Howl(audioProps);
+  }, []);
+  var load = React.useCallback(function (_ref2) {
     var src = _ref2.src,
-        format = _ref2.format,
-        autoplay = _ref2.autoplay;
-    return new howler.Howl({
-      src: src,
-      format: format,
-      autoplay: autoplay
-    });
-  }, []);
-  var load = React.useCallback(function (_ref3) {
-    var src = _ref3.src,
-        format = _ref3.format,
-        _ref3$autoplay = _ref3.autoplay,
-        autoplay = _ref3$autoplay === void 0 ? false : _ref3$autoplay;
+        _ref2$format = _ref2.format,
+        format = _ref2$format === void 0 ? undefined : _ref2$format,
+        _ref2$autoplay = _ref2.autoplay,
+        autoplay = _ref2$autoplay === void 0 ? false : _ref2$autoplay,
+        _ref2$html = _ref2.html5,
+        html5 = _ref2$html === void 0 ? false : _ref2$html,
+        _ref2$xhr = _ref2.xhr,
+        xhr = _ref2$xhr === void 0 ? {
+      method: "GET",
+      headers: undefined,
+      withCredentials: undefined
+    } : _ref2$xhr;
     var wasPlaying = false;
@@ -205,4 +207,5 @@
       format: format,
-      autoplay: wasPlaying || autoplay // continues playing next song
-
+      autoplay: wasPlaying || autoplay,
+      html5: html5,
+      xhr: xhr
     }); // if this howl has already been loaded (cached) then fire the load action
@@ -285,3 +288,3 @@ // @ts-ignore _state exists
 
-var useAudioPlayer = function useAudioPlayer(props) {
+var useAudioPlayer = function useAudioPlayer(options) {
   var _useContext = React.useContext(context),
@@ -292,6 +295,5 @@ player = _useContext.player,
 
-  var _ref = props || {},
+  var _ref = options || {},
       src = _ref.src,
-      format = _ref.format,
-      autoplay = _ref.autoplay;
+      restOptions = _objectWithoutPropertiesLoose(_ref, ["src"]);
 
@@ -303,8 +305,6 @@ React.useEffect(function () {
     if (!src) return;
-    load({
-      src: src,
-      format: format,
-      autoplay: autoplay
-    });
-  }, [src, format, autoplay, load]);
+    load(_extends({
+      src: src
+    }, restOptions));
+  }, [src, restOptions, load]);
   var togglePlayPause = React.useCallback(function () {
@@ -311,0 +311,0 @@ if (!player) return;

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(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,ended:!1,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,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(){},d=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||{},d=i.src,s=i.format,p=i.autoplay;n.useEffect((function(){d&&o({src:d,format:s,autoplay:p})}),[d,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({},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,d=n.useState(null),s=d[0],p=d[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=O.ended,g=f[1],E=n.useRef(),L=n.useRef(),m=n.useCallback((function(e){return new o.Howl({src:e.src,format:e.format,autoplay:e.autoplay})}),[]),D=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&&(L.current=E.current,L.current.once("load",(function(){var e;null===(e=L.current)||void 0===e||e.unload()}))),(a=E.current.playing())&&(E.current.stop(),E.current.off(),E.current=void 0)}g({type:r.START_LOAD});var i=m({src:n,format:t,autoplay:a||u});"loaded"===i._state&&g({type:r.ON_LOAD,duration:i.duration()}),i.on("load",(function(){g({type:r.ON_LOAD,duration:i.duration()})})),i.on("play",(function(){g({type:r.ON_PLAY})})),i.on("end",(function(){g({type:r.ON_END})})),i.on("pause",(function(){g({type:r.ON_PAUSE})})),i.on("stop",(function(){g({type:r.ON_STOP})})),i.on("playerror",(function(e,n){g({type:r.ON_PLAY_ERROR,error:new Error("[Play error] "+n)})})),i.on("loaderror",(function(e,n){g({type:r.ON_LOAD_ERROR,error:new Error("[Load error] "+n)})})),p(i),E.current=i}),[m,y]);n.useEffect((function(){return function(){E.current&&E.current.unload()}}),[]);var b=n.useMemo((function(){return l||{player:s,load:D,error:_,loading:y,playing:A,stopped:R,ready:v,duration:N,ended:P}}),[y,_,A,R,D,l,s,v,N,P]);return t.createElement(c.Provider,{value:b},u)},exports.useAudioPlayer=d,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,s=d().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:l,seek:s}};
+"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}};
 //# sourceMappingURL=react-use-audio-player.cjs.production.min.js.map

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

@@ -148,17 +148,19 @@ import React, { useState, useReducer, useRef, useCallback, useEffect, useMemo, useContext, useLayoutEffect } from 'react';
   var prevPlayer = useRef();
-  var constructHowl = useCallback(function (_ref2) {
+  var constructHowl = useCallback(function (audioProps) {
+    return new Howl(audioProps);
+  }, []);
+  var load = useCallback(function (_ref2) {
     var src = _ref2.src,
-        format = _ref2.format,
-        autoplay = _ref2.autoplay;
-    return new Howl({
-      src: src,
-      format: format,
-      autoplay: autoplay
-    });
-  }, []);
-  var load = useCallback(function (_ref3) {
-    var src = _ref3.src,
-        format = _ref3.format,
-        _ref3$autoplay = _ref3.autoplay,
-        autoplay = _ref3$autoplay === void 0 ? false : _ref3$autoplay;
+        _ref2$format = _ref2.format,
+        format = _ref2$format === void 0 ? undefined : _ref2$format,
+        _ref2$autoplay = _ref2.autoplay,
+        autoplay = _ref2$autoplay === void 0 ? false : _ref2$autoplay,
+        _ref2$html = _ref2.html5,
+        html5 = _ref2$html === void 0 ? false : _ref2$html,
+        _ref2$xhr = _ref2.xhr,
+        xhr = _ref2$xhr === void 0 ? {
+      method: "GET",
+      headers: undefined,
+      withCredentials: undefined
+    } : _ref2$xhr;
     var wasPlaying = false;
@@ -198,4 +200,5 @@
       format: format,
-      autoplay: wasPlaying || autoplay // continues playing next song
-
+      autoplay: wasPlaying || autoplay,
+      html5: html5,
+      xhr: xhr
     }); // if this howl has already been loaded (cached) then fire the load action
@@ -278,3 +281,3 @@ // @ts-ignore _state exists
 
-var useAudioPlayer = function useAudioPlayer(props) {
+var useAudioPlayer = function useAudioPlayer(options) {
   var _useContext = useContext(context),
@@ -285,6 +288,5 @@ player = _useContext.player,
 
-  var _ref = props || {},
+  var _ref = options || {},
       src = _ref.src,
-      format = _ref.format,
-      autoplay = _ref.autoplay;
+      restOptions = _objectWithoutPropertiesLoose(_ref, ["src"]);
 
@@ -296,8 +298,6 @@ useEffect(function () {
     if (!src) return;
-    load({
-      src: src,
-      format: format,
-      autoplay: autoplay
-    });
-  }, [src, format, autoplay, load]);
+    load(_extends({
+      src: src
+    }, restOptions));
+  }, [src, restOptions, load]);
   var togglePlayPause = useCallback(function () {
@@ -304,0 +304,0 @@ if (!player) return;

dist/types.d.ts

@@ -1,11 +0,13 @@
-/// <reference types="howler" />
+import { HowlOptions, Howl } from "howler";
 import { AudioPlayerState } from "./audioPlayerState";
-export interface AudioSrcProps {
+export interface AudioOptions {
     src: string;
     format?: string;
-    autoplay?: boolean;
+    autoplay?: HowlOptions["autoplay"];
+    html5?: HowlOptions["html5"];
+    xhr?: HowlOptions["xhr"];
 }
 export interface AudioPlayerContext extends AudioPlayerState {
     player: Howl | null;
-    load: (args: AudioSrcProps) => void;
+    load: (args: AudioOptions) => void;
 }

dist/useAudioPlayer.d.ts

@@ -1,3 +0,3 @@
-/// <reference types="howler" />
-import { AudioPlayerContext, AudioSrcProps } from "./types";
+import { Howl } from "howler";
+import { AudioPlayerContext, AudioOptions } from "./types";
 declare const noop: () => void;
@@ -13,3 +13,3 @@ export declare type AudioPlayerControls = Omit<AudioPlayerContext, "player"> & {
 };
-export declare const useAudioPlayer: (props?: AudioSrcProps | undefined) => AudioPlayerControls;
+export declare const useAudioPlayer: (options?: AudioOptions | undefined) => AudioPlayerControls;
 export {};

package.json

 {
     "name": "react-use-audio-player",
-    "version": "0.0.17",
+    "version": "0.0.18",
     "description": "React hook for building custom audio playback controls",
@@ -36,3 +36,3 @@ "main": "dist/index.js",
     "devDependencies": {
-        "@types/howler": "^2.1.2",
+        "@types/howler": "^2.2.0",
         "@types/jest": "^24.0.25",
@@ -54,3 +54,3 @@ "@types/react": "^16.9.17",
     "dependencies": {
-        "howler": "^2.1.2"
+        "howler": "^2.2.0"
     },
@@ -57,0 +57,0 @@ "husky": {

README.md

@@ -7,2 +7,3 @@ # 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)
+![npm bundle size](https://img.shields.io/bundlephobia/min/react-use-audio-player)
 
@@ -78,6 +79,20 @@ ## Install
 #### Arguments
-
--   `(optional) audioPlayerConfig: { src: string, format?: string, autoplay?: boolean }`
-    <br/>`autoplay` and `format` are optional. `autoplay` will default to false.
-
+`useAudioPlayer` optionally accepts some configuration as its only argument.
+The available options closely mirror howler's options but differ in some areas. 
+    
+- `src: string`
+<br/> The path to an audio file
+    
+- `format?: string`
+<br/> The format of the audio file. The format is infered from the file extension by default.
+    
+- `autoplay?: boolean`
+<br/> Read more [here](https://github.com/goldfire/howler.js#autoplay-boolean-false)
+    
+- `html5?: boolean`
+<br/> Read more [here](https://github.com/goldfire/howler.js#html5-boolean-false)
+   
+- `xhr?: Object`
+<br/> Read more [here](https://github.com/goldfire/howler.js#xhr-object-null)
+    
 #### Return Value
@@ -87,4 +102,4 @@
 
--   `load: ({ src: string, format?: string, autoplay?: boolean }) => void`
-    <br/>method to lazily load audio
+-   `load: (config: object) => void`
+    <br/>method to lazily load audio. It accepts the same configuration object that useAudioPlayer does.
 
@@ -193,2 +208,2 @@ -   `loading: boolean`
 3. `yarn/npm publish`
-4. `git push` & `git push --tags`
+4. `git push` & `git push --tags`

No alert changes

Improved metrics

Total package byte prevSize

99209

increased by3.55%

Number of package files

17

increased by6.25%

Lines of code

798

increased by0.5%

Number of lines in readme file

206

increased by8.42%

Dependency changes

• Updatedhowler@^2.2.0