apm-react-audio-player 1.0.19 → 1.0.21

package/README.md

@@ -4,7 +4,7 @@ This is a light react audio player that is wrapped around a HTML5 audio tag, cre
 
 The library was designed to add a audio player to a body of a story which will not trigger the static audio player.
 
-![audio player img](/public/audioPlayerImg.jpg)
+![Alt text](./public//audioimg.png)
 
 ## Table of Contents
 
@@ -56,52 +56,103 @@ The library uses named exports for all modules.
 To import the player module:
 
 ```javascript
-import { ReactAudioPlayer } from 'apm-react-audio-player';
+import { ReactAudioPlayerInner, useAudioPlayer } from 'apm-react-audio-player';
 ```
 ## Usage
 
 ### Props
 See the [audio tag documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) for detailed explanations of these attributes.
 
+
 Prop | Type | Default | Notes
 --- | --- | --- | ---
-`title` | String | *empty string* | ---
-`description` | String | *empty string* | ---
-`url` | String | *empty string* | ---
-`customStyles` | Object | --- | ---
-`forwardBackward` | Boolean | false | ---
+`title` | String | *empty string* | The title of the audio track
+`audioSrc` | String | *empty string* | The source URL of the audio file
+`description` | String | *empty string* | The description of the audio track
+`audioPlayerRef` | Object | *empty object* | A ref object for the audio player
+`progressBarRef` | Object | *empty object* | A ref object for the progress bar
+`onLoadedMetadata` | Function | --- | A function to handle the `loadedmetadata` event
+`togglePlaying` | Function | --- | A function to toggle the playing state
+`isPlaying` | Boolean | false | Whether the audio is currently playing
+`isMuted` | Boolean | false | Whether the audio is currently muted
+`toggleMute` | Function | --- | A function to toggle the mute state
+`volumeControl` | Function | --- | A function to control the volume
+`currentTime` | Number | null | The current time of the audio track
+`duration` | Number | null | The duration of the audio track
+`rewindControl` | Function | --- | A function to rewind the audio track
+`forwardControl` | Function | --- | A function to fast forward the audio track
+`changePlayerCurrentTime` | Function | --- | A function to change the current time of the audio track
+`calculateTime` | Function | --- | A function to calculate the time for the audio track
+`formatCalculateTime` | Function | --- | A function to format the calculated time
+`playBtnClass` | String | *empty string* | The CSS class for the play button
+`customStyles` | Object | --- | Custom styles for the audio player
+`customHtml` | JSX.Element | `<></>` | Custom HTML to be rendered inside the player
 
 ### Example
 
 ```javascript
-class Example extends Component {
-  const url='example.mp3'
-  const audioStyles = {
-    audioPlayer: {
-      width: '1200px',
-      backgroundColor: 'lightBlue'
-    },
-    playPause: {
-      background: 'blue'
-    },
-    duration: {
-      color: '#26c9c3'
-    }
-  };
-  render() {
+import { ReactAudioPlayerInner, useAudioPlayer } from 'apm-react-audio-player';
+
+const Example = () => {
+
+  const audioPlayerRef = React.useRef();
+  const progressBarRef = React.useRef();
+
+  const {
+    onLoadedMetadata,
+    calculateTime,
+    volumeControl,
+    togglePlaying,
+    toggleMute,
+    isMuted,
+    changePlayerCurrentTime,
+    play,
+    isPlaying,
+    isFinishedPlaying,
+    currentTime,
+    duration,
+    formatCalculateTime,
+    rewindControl,
+    forwardControl
+  } = useAudioPlayer(audioPlayerRef, progressBarRef);
+
     return (
-      <ReactAudioPlayer
-      title={'title'}
-      description={'description'}
-      audioSrc={url}
-      audioStyles={audioStyles}
-      forwardBackward={true}
+       <ReactAudioPlayerInner
+        title={'MPR NEWS'}
+        audioSrc={'https://play.publicradio.org/web/o/minnesota/podcasts/art_hounds/2024/06/26/arthounds_art-hounds-franconia_20240626_64.mp3'}
+        description={'description'}
+        playBtnClass="player-btn player-btn-playpause js-player-play"
+        audioPlayerRef={audioPlayerRef}
+        progressBarRef={progressBarRef}
+           onLoadedMetadata={onLoadedMetadata}
+        play={play}
+        isPlaying={isPlaying}
+        togglePlaying={togglePlaying}
+        isMuted={isMuted}
+        currentTime={currentTime}
+        duration={duration}
+        isAudioFinished={isFinishedPlaying}
+        toggleMute={toggleMute}
+        volumeCtrl={volumeControl}
+        changePlayerCurrentTime={changePlayerCurrentTime}
+        rewindControl={rewindControl}
+        forwardControl={forwardControl}
+        calculateTime={calculateTime}
+        formatCalculateTime={formatCalculateTime}
+        customHtml={<></>}
     />
-    )
-  }
+  )
 }
 ```
 
+## Publishing
+
+1. Ensure every merge request and/or change to `apm-react-audio-player` should always come with an updated version (ex. 1.0.17 to 1.0.18) in the package.json.
+2. Once the changes is on Main branch, locally run:
+   1. `git pull main`
+   2. `yarn run build` or `npm run build`
+   3. `yarn publish` or `npm publish`
+
 ## License
 
 MIT © [Phanx091](https://github.com/Phanx091)

package/dist/index.js

@@ -356,8 +356,7 @@ var ReactAudioPlayerInner = function ReactAudioPlayerInner(props) {
   }, /*#__PURE__*/React__default.createElement("button", {
     onClick: togglePlaying,
     className: playBtnClass,
-    style: customStyles && customStyles.playPause,
-    id: "playbutton"
+    style: customStyles && customStyles.playPause
   }, 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", {

package/package.json

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