apm-react-audio-player 1.0.6 → 1.0.8

package/dist/index.js

@@ -7,35 +7,6 @@ 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) {
@@ -63,6 +34,20 @@ function _iterableToArrayLimit(arr, i) {
     return _arr;
   }
 }
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
 function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -104,7 +89,16 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
     isFinishedPlaying = _useState8[0],
     setIsFinishedPlaying = _useState8[1];
   var animationRef = React.useRef(); // reference the animation
-
+  var _useState9 = React.useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isMuted = _useState10[0],
+    setIsMuted = _useState10[1];
+  React.useEffect(function () {
+    if (currentTime === Number(duration)) {
+      restart();
+      setIsFinishedPlaying(true);
+    }
+  }, [currentTime]);
   var onLoadedMetadata = function onLoadedMetadata() {
     var seconds = Math.floor(audioRef.current.duration);
     setDuration(seconds);
@@ -140,9 +134,13 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
   };
   var play = function play() {
     setIsPlaying(true);
+    setIsFinishedPlaying(false);
     audioRef.current.play();
     animationRef.current = window.requestAnimationFrame(whilePlaying);
   };
+  var toggleMute = function toggleMute() {
+    setIsMuted(!isMuted);
+  };
   var calculateTime = function calculateTime(secs) {
     var minutes = Math.floor(secs / 60);
     var returnedMinutes = minutes < 10 ? "0".concat(minutes) : "".concat(minutes);
@@ -185,16 +183,49 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
     changePlayerCurrentTime: changePlayerCurrentTime,
     backThirty: backThirty,
     forwardThirty: forwardThirty,
+    play: play,
+    pause: pause,
     isPlaying: isPlaying,
-    isFinished: isFinishedPlaying,
+    isFinishedPlaying: isFinishedPlaying,
     currentTime: currentTime,
     duration: duration,
     volumeCtrl: volumeCtrl,
-    volumeControl: volumeControl
+    volumeControl: volumeControl,
+    toggleMute: toggleMute,
+    isMuted: isMuted
   };
 };
 
-var ReactAudioPlayer = function ReactAudioPlayer(props) {
+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"
+  }));
+};
+
+var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
   var _props$audioPlayerRef, _props$progressBarRef;
   // references
   var audioPlayerRef = (_props$audioPlayerRef = props.audioPlayerRef) !== null && _props$audioPlayerRef !== void 0 ? _props$audioPlayerRef : React.useRef(); // reference our audio component
@@ -207,18 +238,17 @@ var ReactAudioPlayer = function ReactAudioPlayer(props) {
     volumeCtrl = props.volumeCtrl,
     playBtnClass = props.playBtnClass,
     customHtml = props.customHtml,
-    isLive = props.isLive;
-
-  // hooks
-  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,
-    volumeControl = _useAudioPlayer.volumeControl;
+    isLive = props.isLive,
+    onLoadedMetadata = props.onLoadedMetadata,
+    calculateTime = props.calculateTime,
+    togglePlaying = props.togglePlaying,
+    changePlayerCurrentTime = props.changePlayerCurrentTime,
+    isPlaying = props.isPlaying,
+    currentTime = props.currentTime,
+    duration = props.duration,
+    volumeControl = props.volumeControl,
+    toggleMute = props.toggleMute,
+    isMuted = props.isMuted;
   return audioSrc && /*#__PURE__*/React__default.createElement("div", {
     className: "audioPlayer",
     style: customStyles && customStyles.audioPlayer
@@ -226,17 +256,27 @@ var ReactAudioPlayer = function ReactAudioPlayer(props) {
     ref: audioPlayerRef,
     src: audioSrc,
     preload: "metadata",
-    onLoadedMetadata: onLoadedMetadata
+    onLoadedMetadata: onLoadedMetadata,
+    muted: isMuted
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "player-layout"
   }, volumeCtrl && /*#__PURE__*/React__default.createElement("div", {
     className: "player-controls-secondary-outer"
   }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("span", {
     className: "player-volume-text"
-  }, /*#__PURE__*/React__default.createElement("img", {
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "player-volume-icon"
+  }, /*#__PURE__*/React__default.createElement("button", {
+    onClick: toggleMute,
+    "aria-label": isMuted === true ? 'Muted' : 'Not Muted',
+    title: isMuted === true ? 'Muted' : 'Not Muted'
+  }, !isMuted ? /*#__PURE__*/React__default.createElement("img", {
     src: "/img/icon-volume-low.svg",
-    alt: ""
-  }), "Volume"), /*#__PURE__*/React__default.createElement("div", {
+    alt: "Volume Button"
+  }) : /*#__PURE__*/React__default.createElement("img", {
+    src: "/img/icon-volume-mute.svg",
+    alt: "Volume Mute Button"
+  }))), /*#__PURE__*/React__default.createElement("span", null, "Volume")), /*#__PURE__*/React__default.createElement("div", {
     className: "player-controls player-controls-secondary"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "player-volume"
@@ -285,5 +325,43 @@ var ReactAudioPlayer = function ReactAudioPlayer(props) {
   }, description || '', " ")))));
 };
 
+var ReactAudioPlayer = function ReactAudioPlayer(props) {
+  var _props$audioPlayerRef, _props$progressBarRef;
+  // references
+  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 : '';
+
+  // hooks
+  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,
+    volumeControl = _useAudioPlayer.volumeControl,
+    toggleMute = _useAudioPlayer.toggleMute,
+    isMuted = _useAudioPlayer.isMuted;
+  return /*#__PURE__*/React__default.createElement(ReactAudioPlayerInner, _extends({}, props, {
+    audioPlayerRef: audioPlayerRef,
+    progressBarRef: progressBarRef,
+    customStyles: customStyles,
+    onLoadedMetadata: onLoadedMetadata,
+    calculateTime: calculateTime,
+    togglePlaying: togglePlaying,
+    changePlayerCurrentTime: changePlayerCurrentTime,
+    isPlaying: isPlaying,
+    currentTime: currentTime,
+    duration: duration,
+    volumeControl: volumeControl,
+    toggleMute: toggleMute,
+    isMuted: isMuted
+  }));
+};
+
 exports.ReactAudioPlayer = ReactAudioPlayer;
+exports.ReactAudioPlayerInner = ReactAudioPlayerInner;
 exports.useAudioPlayer = useAudioPlayer;

package/package.json

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