apm-react-audio-player 1.0.2 → 1.0.3

package/dist/index.js

@@ -7,6 +7,35 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React = require('react');
 var React__default = _interopDefault(React);
 
+var Play = function Play() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    stroke: "currentColor",
+    fill: "currentColor",
+    strokeWidth: "0",
+    viewBox: "0 0 448 512",
+    className: "play",
+    height: "1em",
+    width: "1em",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"
+  }));
+};
+
+var Pause = function Pause() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    stroke: "currentColor",
+    fill: "currentColor",
+    strokeWidth: "0",
+    viewBox: "0 0 448 512",
+    height: "1em",
+    width: "1em",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z"
+  }));
+};
+
 function _iterableToArrayLimit(arr, i) {
   var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
   if (null != _i) {
@@ -70,6 +99,10 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef) {
     _useState6 = _slicedToArray(_useState5, 2),
     currentTime = _useState6[0],
     setCurrentTime = _useState6[1];
+  var _useState7 = React.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isFinishedPlaying = _useState8[0],
+    setIsFinishedPlaying = _useState8[1];
   var animationRef = React.useRef(); // reference the animation
 
   var onLoadedMetadata = function onLoadedMetadata() {
@@ -88,11 +121,13 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef) {
     // when you reach the end of the song
     if (progressBarRef.current.value === duration) {
       restart();
+      setIsFinishedPlaying(true);
       return;
     }
     animationRef.current = window.requestAnimationFrame(whilePlaying);
   };
   var pause = function pause() {
+    setIsPlaying(false);
     audioRef.current.pause();
     window.cancelAnimationFrame(animationRef.current);
   };
@@ -102,6 +137,7 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef) {
     pause();
   };
   var play = function play() {
+    setIsPlaying(true);
     audioRef.current.play();
     animationRef.current = window.requestAnimationFrame(whilePlaying);
   };
@@ -113,9 +149,7 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef) {
     return "".concat(returnedMinutes, ":").concat(returnedSeconds);
   };
   var togglePlaying = function togglePlaying() {
-    var prevState = isPlaying;
-    setIsPlaying(!prevState);
-    if (!prevState) {
+    if (!isPlaying) {
       play();
     } else {
       pause();
@@ -145,15 +179,17 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef) {
     backThirty: backThirty,
     forwardThirty: forwardThirty,
     isPlaying: isPlaying,
+    isFinished: isFinishedPlaying,
     currentTime: currentTime,
     duration: duration
   };
 };
 
 var ReactAudioPlayer = function ReactAudioPlayer(props) {
+  var _props$audioPlayerRef, _props$progressBarRef;
   // references
-  var audioPlayer = React.useRef(); // reference our audio component
-  var progressBar = React.useRef(); // reference our progress bar
+  var audioPlayerRef = (_props$audioPlayerRef = props.audioPlayerRef) !== null && _props$audioPlayerRef !== void 0 ? _props$audioPlayerRef : React.useRef(); // reference our audio component
+  var progressBarRef = (_props$progressBarRef = props.progressBarRef) !== null && _props$progressBarRef !== void 0 ? _props$progressBarRef : React.useRef(); // reference our progress bar
 
   var customStyles = props ? props.style : '';
   var title = props.title,
@@ -161,15 +197,31 @@ var ReactAudioPlayer = function ReactAudioPlayer(props) {
     audioSrc = props.audioSrc;
 
   // hooks
-  var _useAudioPlayer = useAudioPlayer(audioPlayer, progressBar),
+  var _useAudioPlayer = useAudioPlayer(audioPlayerRef, progressBarRef),
+    onLoadedMetadata = _useAudioPlayer.onLoadedMetadata,
     calculateTime = _useAudioPlayer.calculateTime,
+    togglePlaying = _useAudioPlayer.togglePlaying,
     changePlayerCurrentTime = _useAudioPlayer.changePlayerCurrentTime,
+    isPlaying = _useAudioPlayer.isPlaying,
     currentTime = _useAudioPlayer.currentTime,
     duration = _useAudioPlayer.duration;
   return audioSrc && /*#__PURE__*/React__default.createElement("div", {
     className: "audioPlayer",
     style: customStyles && customStyles.audioPlayer
-  }, "hi", /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("audio", {
+    ref: audioPlayerRef,
+    src: audioSrc,
+    preload: "metadata",
+    onLoadedMetadata: onLoadedMetadata
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "playPauseContainer"
+  }, /*#__PURE__*/React__default.createElement("button", {
+    onClick: togglePlaying,
+    className: "playPause",
+    style: customStyles && customStyles.playPause
+  }, isPlaying ? /*#__PURE__*/React__default.createElement(Pause, null) : /*#__PURE__*/React__default.createElement(Play, {
+    className: "play"
+  }))), /*#__PURE__*/React__default.createElement("div", {
     className: "currentTime"
   }, calculateTime(currentTime)), /*#__PURE__*/React__default.createElement("div", {
     className: "progressBarContainer"
@@ -177,7 +229,7 @@ var ReactAudioPlayer = function ReactAudioPlayer(props) {
     type: "range",
     className: "progressBar",
     defaultValue: "0",
-    ref: progressBar,
+    ref: progressBarRef,
     onChange: changePlayerCurrentTime
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "duration",
@@ -188,7 +240,8 @@ var ReactAudioPlayer = function ReactAudioPlayer(props) {
     className: "textBoxTitle"
   }, " ", title || '', " "), /*#__PURE__*/React__default.createElement("div", {
     className: "textBoxDescription"
-  }, " ", description || '', " ")), ' ', "*/}");
+  }, " ", description || '', " ")));
 };
 
 exports.ReactAudioPlayer = ReactAudioPlayer;
+exports.useAudioPlayer = useAudioPlayer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apm-react-audio-player",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "author": "Jason Phan <jphan@mpr.org>",
   "license": "MIT",
   "private": false,