apm-react-audio-player 1.0.9 → 1.0.11

package/dist/index.js

@@ -183,6 +183,23 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
     var volume = value / 100;
     audioRef.current.volume = volume;
   };
+  var formatCalculateTime = function formatCalculateTime(timeString) {
+    var toString = String(timeString);
+    if (toString.split(':').length === 3) {
+      var _toString$split = toString.split(':'),
+        _toString$split2 = _slicedToArray(_toString$split, 3),
+        hours = _toString$split2[0],
+        minutes = _toString$split2[1],
+        seconds = _toString$split2[2];
+      return "".concat(parseInt(hours), "hr ").concat(parseInt(minutes), "min ").concat(parseInt(seconds), "sec");
+    } else if (toString.split(':').length === 2) {
+      var _toString$split3 = toString.split(':'),
+        _toString$split4 = _slicedToArray(_toString$split3, 2),
+        _minutes = _toString$split4[0],
+        _seconds = _toString$split4[1];
+      return "".concat(parseInt(_minutes), "min ").concat(parseInt(_seconds), "sec");
+    }
+  };
   return {
     onLoadedMetadata: onLoadedMetadata,
     calculateTime: calculateTime,
@@ -199,7 +216,8 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
     volumeCtrl: volumeCtrl,
     volumeControl: volumeControl,
     toggleMute: toggleMute,
-    isMuted: isMuted
+    isMuted: isMuted,
+    formatCalculateTime: formatCalculateTime
   };
 };
 
@@ -212,8 +230,14 @@ var Play = function Play() {
     className: "play",
     height: "1em",
     width: "1em",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.createElement("path", {
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-labelledby": "play playButton"
+  }, /*#__PURE__*/React__default.createElement("title", {
+    id: "play"
+  }, "Play"), /*#__PURE__*/React__default.createElement("desc", {
+    id: "playButton"
+  }, "Play Button"), /*#__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"
   }));
 };
@@ -226,8 +250,14 @@ var Pause = function Pause() {
     viewBox: "0 0 448 512",
     height: "1em",
     width: "1em",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.createElement("path", {
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-labelledby": "pause pauseButton"
+  }, /*#__PURE__*/React__default.createElement("title", {
+    id: "pause"
+  }, "Pause"), /*#__PURE__*/React__default.createElement("desc", {
+    id: "pauseButton"
+  }, "Pause Button"), /*#__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"
   }));
 };
@@ -240,7 +270,6 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
 
   var customStyles = props ? props.style : '';
   var title = props.title,
-    description = props.description,
     audioSrc = props.audioSrc,
     volumeCtrl = props.volumeCtrl,
     playBtnClass = props.playBtnClass,
@@ -255,7 +284,10 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
     duration = props.duration,
     volumeControl = props.volumeControl,
     toggleMute = props.toggleMute,
-    isMuted = props.isMuted;
+    isMuted = props.isMuted,
+    formatCalculateTime = props.formatCalculateTime;
+  var audioDuration = duration && !isNaN(duration) && calculateTime(duration);
+  var formatDuration = duration && !isNaN(duration) && audioDuration && formatCalculateTime(audioDuration);
   return audioSrc && /*#__PURE__*/React__default.createElement("div", {
     className: "audioPlayer",
     style: customStyles && customStyles.audioPlayer
@@ -269,8 +301,8 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
     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("div", {
+    className: "player-volume-control"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "player-volume-icon"
   }, /*#__PURE__*/React__default.createElement("button", {
@@ -283,31 +315,33 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
   }) : /*#__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"
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "player-timeline player-controls-secondary"
   }, /*#__PURE__*/React__default.createElement("input", {
     id: "player-volume",
     type: "range",
-    className: "player-timeline-progress js-player-volume-current",
+    className: "player-volume-progress",
     min: 0,
     max: 100,
     "aria-hidden": "true",
+    "aria-valuetext": "100%",
     onChange: function onChange(e) {
       return volumeControl(e);
     }
-  }))))), /*#__PURE__*/React__default.createElement("div", {
+  })), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("img", {
+    src: "/img/icon-volume-high.svg",
+    alt: "Volume Button"
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "player-volume-label"
+  }, "Volume")), /*#__PURE__*/React__default.createElement("div", {
     className: "player-controls"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "player-btn-play-pause-outer"
+    className: "".concat(isPlaying ? 'is-playing' : '', " 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, !isLive && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "player-currentTime"
-  }, calculateTime(currentTime)), /*#__PURE__*/React__default.createElement("div", {
+  }, isPlaying ? /*#__PURE__*/React__default.createElement(Pause, null) : /*#__PURE__*/React__default.createElement(Play, null)))), !isLive && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "player-timeline"
   }, /*#__PURE__*/React__default.createElement("input", {
     type: "range",
@@ -316,20 +350,26 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
     "aria-hidden": "true",
     ref: progressBarRef,
     onChange: changePlayerCurrentTime
-  })), /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "player-times"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "player-currentTime"
+  }, calculateTime(currentTime)), /*#__PURE__*/React__default.createElement("div", {
     className: "player-duration",
     style: customStyles && customStyles.duration
-  }, duration && !isNaN(duration) && calculateTime(duration))), /*#__PURE__*/React__default.createElement("div", {
+  }, duration && !isNaN(duration) && calculateTime(duration))))), /*#__PURE__*/React__default.createElement("div", {
     className: "player-content"
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, customHtml && customHtml, /*#__PURE__*/React__default.createElement("div", {
     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-label"
+  }, "listen", /*#__PURE__*/React__default.createElement("div", {
+    className: "player-label-duration"
+  }, "[".concat(formatDuration, "]"))), /*#__PURE__*/React__default.createElement("div", {
     className: "player-title"
-  }, " ", title || '', " "), /*#__PURE__*/React__default.createElement("div", {
-    className: "player-description"
-  }, description || '', " ")))));
+  }, title || '', " ")))));
 };
 
 var ReactAudioPlayer = function ReactAudioPlayer(props) {
@@ -351,7 +391,8 @@ var ReactAudioPlayer = function ReactAudioPlayer(props) {
     duration = _useAudioPlayer.duration,
     volumeControl = _useAudioPlayer.volumeControl,
     toggleMute = _useAudioPlayer.toggleMute,
-    isMuted = _useAudioPlayer.isMuted;
+    isMuted = _useAudioPlayer.isMuted,
+    formatCalculateTime = _useAudioPlayer.formatCalculateTime;
   return /*#__PURE__*/React__default.createElement(ReactAudioPlayerInner, _extends({}, props, {
     audioPlayerRef: audioPlayerRef,
     progressBarRef: progressBarRef,
@@ -365,7 +406,8 @@ var ReactAudioPlayer = function ReactAudioPlayer(props) {
     duration: duration,
     volumeControl: volumeControl,
     toggleMute: toggleMute,
-    isMuted: isMuted
+    isMuted: isMuted,
+    formatCalculateTime: formatCalculateTime
   }));
 };
 

package/package.json

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