apm-react-audio-player 1.0.11 → 1.0.12

package/dist/index.js

@@ -167,16 +167,18 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
     setCurrentTime(progressBarRef.current.value);
     progressBarRef.current.style.setProperty('--seek-before-width', "".concat(progressBarRef.current.value / duration * 100, "%"));
   };
-  var timeTravel = function timeTravel(newTime) {
-    progressBarRef.current.value = newTime;
+  var changeRange = function changeRange() {
+    audioRef.current.currentTime = progressBarRef.current.value;
     updateCurrentTime();
     changePlayerCurrentTime();
   };
-  var backThirty = function backThirty() {
-    timeTravel(Number(progressBarRef.current.value) - 30);
+  var rewindControl = function rewindControl() {
+    progressBarRef.current.value = Number(progressBarRef.current.value) - 15;
+    changeRange();
   };
-  var forwardThirty = function forwardThirty() {
-    timeTravel(Number(progressBarRef.current.value) + 30);
+  var forwardControl = function forwardControl() {
+    progressBarRef.current.value = Number(progressBarRef.current.value) + 15;
+    changeRange();
   };
   var volumeControl = function volumeControl(e) {
     var value = e.target.value;
@@ -205,8 +207,8 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
     calculateTime: calculateTime,
     togglePlaying: togglePlaying,
     changePlayerCurrentTime: changePlayerCurrentTime,
-    backThirty: backThirty,
-    forwardThirty: forwardThirty,
+    rewindControl: rewindControl,
+    forwardControl: forwardControl,
     play: play,
     pause: pause,
     isPlaying: isPlaying,
@@ -214,9 +216,9 @@ var useAudioPlayer = function useAudioPlayer(audioRef, progressBarRef, volumeCtr
     currentTime: currentTime,
     duration: duration,
     volumeCtrl: volumeCtrl,
+    isMuted: isMuted,
     volumeControl: volumeControl,
     toggleMute: toggleMute,
-    isMuted: isMuted,
     formatCalculateTime: formatCalculateTime
   };
 };
@@ -285,7 +287,9 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
     volumeControl = props.volumeControl,
     toggleMute = props.toggleMute,
     isMuted = props.isMuted,
-    formatCalculateTime = props.formatCalculateTime;
+    formatCalculateTime = props.formatCalculateTime,
+    rewindControl = props.rewindControl,
+    forwardControl = props.forwardControl;
   var audioDuration = duration && !isNaN(duration) && calculateTime(duration);
   var formatDuration = duration && !isNaN(duration) && audioDuration && formatCalculateTime(audioDuration);
   return audioSrc && /*#__PURE__*/React__default.createElement("div", {
@@ -335,13 +339,27 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
     className: "player-volume-label"
   }, "Volume")), /*#__PURE__*/React__default.createElement("div", {
     className: "player-controls"
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, !isLive && /*#__PURE__*/React__default.createElement("div", {
+    className: "player-backward-forward-controls"
+  }, /*#__PURE__*/React__default.createElement("button", {
+    onClick: rewindControl
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: "/img/icon-rewind-15.svg",
+    alt: "Backward 15 seconds"
+  }))), /*#__PURE__*/React__default.createElement("div", {
     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)))), !isLive && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+  }, isPlaying ? /*#__PURE__*/React__default.createElement(Pause, null) : /*#__PURE__*/React__default.createElement(Play, null))), !isLive && /*#__PURE__*/React__default.createElement("div", {
+    className: "player-backward-forward-controls"
+  }, /*#__PURE__*/React__default.createElement("button", {
+    onClick: forwardControl
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: "/img/icon-forward-15.svg",
+    alt: "Forward 15 seconds"
+  })))), !isLive && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "player-timeline"
   }, /*#__PURE__*/React__default.createElement("input", {
     type: "range",
@@ -392,22 +410,26 @@ var ReactAudioPlayer = function ReactAudioPlayer(props) {
     volumeControl = _useAudioPlayer.volumeControl,
     toggleMute = _useAudioPlayer.toggleMute,
     isMuted = _useAudioPlayer.isMuted,
-    formatCalculateTime = _useAudioPlayer.formatCalculateTime;
+    formatCalculateTime = _useAudioPlayer.formatCalculateTime,
+    rewindControl = _useAudioPlayer.rewindControl,
+    forwardControl = _useAudioPlayer.forwardControl;
   return /*#__PURE__*/React__default.createElement(ReactAudioPlayerInner, _extends({}, props, {
     audioPlayerRef: audioPlayerRef,
     progressBarRef: progressBarRef,
+    isPlaying: isPlaying,
+    isMuted: isMuted,
+    currentTime: currentTime,
+    duration: duration,
     customStyles: customStyles,
     onLoadedMetadata: onLoadedMetadata,
     calculateTime: calculateTime,
     togglePlaying: togglePlaying,
     changePlayerCurrentTime: changePlayerCurrentTime,
-    isPlaying: isPlaying,
-    currentTime: currentTime,
-    duration: duration,
     volumeControl: volumeControl,
     toggleMute: toggleMute,
-    isMuted: isMuted,
-    formatCalculateTime: formatCalculateTime
+    formatCalculateTime: formatCalculateTime,
+    rewindControl: rewindControl,
+    forwardControl: forwardControl
   }));
 };
 

package/package.json

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