apm-react-audio-player 1.0.2 → 1.0.4

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) {
@@ -57,7 +86,7 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef) {
+var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtrl) {
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isPlaying = _useState2[0],
@@ -70,12 +99,18 @@ 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() {
     var seconds = Math.floor(audioRef.current.duration);
     setDuration(seconds);
-    progressBarRef.current.max = seconds;
+    if (!audioRef.current.currentSrc.includes('stream')) {
+      progressBarRef.current.max = seconds;
+    }
   };
   var updateCurrentTime = function updateCurrentTime() {
     setCurrentTime(progressBarRef.current.value);
@@ -88,11 +123,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 +139,7 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef) {
     pause();
   };
   var play = function play() {
+    setIsPlaying(true);
     audioRef.current.play();
     animationRef.current = window.requestAnimationFrame(whilePlaying);
   };
@@ -113,9 +151,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();
@@ -137,6 +173,11 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef) {
   var forwardThirty = function forwardThirty() {
     timeTravel(Number(progressBarRef.current.value) + 30);
   };
+  var volumeControl = function volumeControl(e) {
+    var value = e.target.value;
+    var volume = value / 100;
+    audioRef.current.volume = volume;
+  };
   return {
     onLoadedMetadata: onLoadedMetadata,
     calculateTime: calculateTime,
@@ -145,50 +186,113 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef) {
     backThirty: backThirty,
     forwardThirty: forwardThirty,
     isPlaying: isPlaying,
+    isFinished: isFinishedPlaying,
     currentTime: currentTime,
-    duration: duration
+    duration: duration,
+    volumeCtrl: volumeCtrl,
+    volumeControl: volumeControl
   };
 };
 
 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,
     description = props.description,
-    audioSrc = props.audioSrc;
+    audioSrc = props.audioSrc,
+    volumeCtrl = props.volumeCtrl,
+    playBtnClass = props.playBtnClass,
+    customHtml = props.customHtml,
+    customProps = props.customProps,
+    isLive = props.isLive;
 
   // 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;
+    duration = _useAudioPlayer.duration,
+    volumeControl = _useAudioPlayer.volumeControl;
   return audioSrc && /*#__PURE__*/React__default.createElement("div", {
     className: "audioPlayer",
     style: customStyles && customStyles.audioPlayer
-  }, "hi", /*#__PURE__*/React__default.createElement("div", {
-    className: "currentTime"
+  }, /*#__PURE__*/React__default.createElement("audio", {
+    ref: audioPlayerRef,
+    src: audioSrc,
+    preload: "metadata",
+    onLoadedMetadata: onLoadedMetadata
+  }), /*#__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", {
+    src: "/img/icon-volume-low.svg",
+    alt: ""
+  }), "Volume"), /*#__PURE__*/React__default.createElement("div", {
+    className: "player-controls player-controls-secondary"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "player-volume"
+  }, /*#__PURE__*/React__default.createElement("input", {
+    id: "player-volume",
+    type: "range",
+    className: "player-timeline-progress js-player-volume-current",
+    min: 0,
+    max: 100,
+    "aria-hidden": "true",
+    onChange: function onChange(e) {
+      return volumeControl(e);
+    }
+  }))))), /*#__PURE__*/React__default.createElement("div", {
+    className: "player-controls"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "player-btn-play-pause-outer"
+  }, /*#__PURE__*/React__default.createElement("button", {
+    onClick: togglePlaying,
+    className: playBtnClass,
+    style: customStyles && customStyles.playPause
+  }, isPlaying ? /*#__PURE__*/React__default.createElement(Pause, null) : /*#__PURE__*/React__default.createElement(Play, null)))), customHtml && customHtml, customProps.audioThumbnailSrc && /*#__PURE__*/React__default.createElement("div", {
+    className: "player-thumb-and-text"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "player-thumbnail"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    className: "player-thumbnail",
+    src: customProps.audioThumbnailSrc,
+    alt: customProps.audioThumbnailAlt
+  }))), !isLive && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "player-currentTime"
   }, calculateTime(currentTime)), /*#__PURE__*/React__default.createElement("div", {
-    className: "progressBarContainer"
+    className: "player-timeline"
   }, /*#__PURE__*/React__default.createElement("input", {
     type: "range",
-    className: "progressBar",
+    className: "player-timeline-progress",
     defaultValue: "0",
-    ref: progressBar,
+    "aria-hidden": "true",
+    ref: progressBarRef,
     onChange: changePlayerCurrentTime
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: "duration",
+    className: "player-duration",
     style: customStyles && customStyles.duration
-  }, duration && !isNaN(duration) && calculateTime(duration)), /*#__PURE__*/React__default.createElement("div", {
-    className: "textBox"
+  }, duration && !isNaN(duration) && calculateTime(duration))), /*#__PURE__*/React__default.createElement("div", {
+    className: "player-content"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "textBoxTitle"
+    className: "player-audio-type type-sm"
+  }, isLive ? /*#__PURE__*/React__default.createElement("div", {
+    className: "player-live-label"
+  }, "On Air") : /*#__PURE__*/React__default.createElement("div", {
+    className: "player-title"
   }, " ", title || '', " "), /*#__PURE__*/React__default.createElement("div", {
-    className: "textBoxDescription"
-  }, " ", description || '', " ")), ' ', "*/}");
+    className: "player-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.4",
   "author": "Jason Phan <jphan@mpr.org>",
   "license": "MIT",
   "private": false,