v1.1.5 : change some functionalities

README.md

@@ -69,6 +69,45 @@ See the example directory for a basic working example of using this project.  To
 
 or <br />
 [![Edit blog](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/blissful-frost-yl38y)
+<br />
+
+```jsx
+<Reaplay tracks={songList} >
+      {(player) => {
+
+          return (
+            <>
+              <input
+                  type='range'
+                  value={player.trackProgress}
+                  step='1'
+                  min='0'
+                  max={player.duration ? player.duration : `${player.duration}`}
+                  onChange={(e) => player.onScrub(e.target.value)}
+                  onMouseUp={(e) => player.onScrubEnd(e)}
+                  onKeyUp={(e) => player.onScrubEnd(e)}
+                />
+
+                <button onClick={() => player.toPrevTrack()}>prev</button>
+                <button onClick={() => player.play()}>Play</button>
+                <button onClick={() => player.pause()}>Pause</button>
+                <button onClick={() => player.toNextTrack()}>next</button>
+
+                <input
+                  type='range'
+                  value={player.volume}
+                  step='1'
+                  min='0'
+                  max='100'
+                  onChange={(e) => player.setVolume(e.target.value)}
+                />
+                <button onClick={() => player.mute()}>mute<button/>
+                <button onClick={() => player.unmute()}>unmute<button/>
+            </>
+          )
+      }
+</Reaplay>
+```
 
 <br/>
 <br/>
@@ -100,7 +139,7 @@ Prop | Type | Default | Notes
 `volume` | Number | 100 | the player volume. <br/> `0` to `100`
 `speed` | Number | 1 | the player playbackRate. <br/> `0.5` or `1` or `2`
 `isStopPlayMoreSong` | Boolean | false | if the song will be end, dont play more anything
-`isShuffleList` | Boolean | false | if shuffleList will be true, any action do random </br> (next, prev, ended)
+`isShuffle` | Boolean | false | if shuffleList will be true, any action do random </br> (next, prev, ended)
 `isMute` | Boolean | false | the player mute status
 `buffered` | Number | 0 | the buffered value of the song <br/> `0` to `100`
 `bufferedText` | String | 0 | the buffered value of the song <br/> `0%` to `100%`
@@ -117,15 +156,16 @@ Event | param | Description | Example
 `setTrackIndex` | (trackIndex: number) | for change handly playing index. | `onClick`={() => player.setTrackIndex(5)}
 `toNextTrack` | () | go to next track of the tracks list | player.toNextTrack()
 `toPrevTrack` | () | go to prev track of the tracks list | player.toPrevTrack()
-`setIsRepeat` | (isRepeat: boolean) | turn on or off for repeat the playing song | player.setIsRepeat((isRepeat) => !isRepeat)
+`repeat` | (isRepeat: boolean) | turn on or off for repeat the playing song | player.repeat((isRepeat) => !isRepeat)
 `setVolume` | (volume: number) | set player volume, `0` to `100` | player.setVolume(70)
 `playSlow` | () | set player playbackRate (speed) to `0.5` | player.playSlow()
 `playNormal` | () | set player playbackRate (speed) to `1` | player.playNormal()
 `playFast` | () | set player playbackRate (speed) to `2` | player.playFast()
 `StopPlayMoreSong` | (stopped: boolean) | dont play more anything after the playing song will be ended | player.StopPlayMoreSong(true)
-`ShufflePlay` | () | play a random track of your tracks list | player.ShufflePlay()
-`setIsShuffleList` | (shuffle: boolean) | the all player action will be random </br> `next` `prev` `ended` | player.setIsShuffleList((isShuffle) => !isShuffle)
-`setIsMute` | (mute: boolean) | mute or umute the player | player.setIsMute((isMute) => !isMute)
+`playRandom` | () | play a random track of your tracks list | player.playRandom()
+`playShuffle` | (shuffle: boolean) | the all player action will be random </br> `next` `prev` `ended` | player.playShuffle((isShuffle) => !isShuffle)
+`mute` | () | mute  the player | player.mute()
+`unmute` | () | unmute  the player | player.unmute()
 `forward` | () | forward to 5s later | player.forward()
 `backward` | () | backward to 5s before | player.backward()
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reaplay",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "the react HOC for create custom players with any styles you like",
   "author": "amir-alipour",
   "license": "MIT",

src/index.tsx

@@ -33,7 +33,7 @@ interface Props {
  * @property {function}  player.toNextTrack
  * @property {function}  player.toPrevTrack
  * @property {boolean}  player.isRepeat
- * @property {function}  player.setIsRepeat
+ * @property {function}  player.repeat
  * @property {number}  player.volume
  * @property {function}  player.setVolume
  * @property {number}  player.speed
@@ -42,11 +42,12 @@ interface Props {
  * @property {function}  player.playFast
  * @property {boolean}  player.isStopPlayMoreSong
  * @property {function}  player.StopPlayMoreSong
- * @property {function}  player.ShufflePlay
- * @property {boolean}  player.isShuffleList
- * @property {function}  player.setIsShuffleList
+ * @property {boolean}  player.isShuffle
+ * @property {function}  player.playShuffle
+ * @property {function}  player.playRandom
  * @property {boolean}  player.isMute
- * @property {function}  player.setIsMute
+ * @property {function}  player.mute
+ * @property {function}  player.unmute
  * @property {number | string}  player.buffered
  * @property {string}  player.bufferedText
  * @property {function}  player.forward
@@ -159,7 +160,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
       if (audioRef.current.ended) {
         if (!isStopPlayMoreSong) {
           if (isShuffleList) {
-            ShufflePlay()
+            playRandom()
           } else {
             if (isRepeat) {
               setFourceRepeat((prev) => prev + 1)
@@ -244,7 +245,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
 
   const toPrevTrack = (): void => {
     if (isShuffleList) {
-      ShufflePlay()
+      playRandom()
     } else {
       if (trackIndex - 1 < 0) {
         setTrackIndex(tracks.length - 1)
@@ -265,7 +266,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
 
   const toNextTrack = (): void => {
     if (isShuffleList) {
-      ShufflePlay()
+      playRandom()
     } else {
       if (trackIndex < tracks.length - 1) {
         setTrackIndex(trackIndex + 1)
@@ -325,6 +326,40 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
     setSpeed(2)
   }
 
+  /**
+   * repeat
+   * @function
+   * @description set player to repeat current song
+   */
+
+  const repeat = (SetOnRepeat: boolean): void => {
+    if(SetOnRepeat) {
+      setIsRepeat(true)
+    } else {
+      setIsRepeat(false)
+    }
+  }
+
+  /**
+   * mute
+   * @function
+   * @description mute the player
+   */
+
+  const mute = (): void => {
+    setIsMute(true)
+  }
+
+  /**
+   * unmute
+   * @function
+   * @description unmute the player
+   */
+
+  const unmute = (): void => {
+    setIsMute(false)
+  }
+
   /**
    * shuffle play
    * @function
@@ -333,7 +368,15 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
    * get a random index from tracks length and play it
    */
 
-  const ShufflePlay = (): void => {
+  const playShuffle = (shuffle: boolean): void => {
+    if (shuffle) {
+      setIsShuffleList(true)
+    } else {
+      setIsShuffleList(false)
+    }
+  }
+
+  const playRandom = (): void => {
     let songsLength: number = tracks.length - 1
     let random: number = Math.floor(Math.random() * songsLength)
     setTrackIndex(random)
@@ -379,7 +422,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
 
   useLayoutEffect(() => {
     audioRef.current.pause()
-    setIsPlaying(false);
+    setIsPlaying(false)
     setIsLoading(true)
     setBuffered(0)
 
@@ -456,16 +499,17 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
     toNextTrack, // play next song function
     toPrevTrack, // play prevent song function
     isRepeat, // repeat state
-    setIsRepeat, // set repeat state
+    repeat, // set repeat state
     volume, // volume state
     setVolume, // set volume state
     isStopPlayMoreSong, // stop play more song at song ended
     StopPlayMoreSong, // set stop play more song
-    ShufflePlay, // play a random song at list function
-    isShuffleList, // shuffle list state
-    setIsShuffleList, // set shuffle list mode,
+    playShuffle, // play a random song at list function
+    isShuffle: isShuffleList, // is on shuffle or not
+    playRandom, // play a random song
     isMute, // the player is mute
-    setIsMute, // set player to mute or unmute
+    mute, // set player to mute
+    unmute, // set player to unmute
     buffered, // the buffered value of the song
     bufferedText: `${buffered}%`,
     backward, // forward to 5s
@@ -502,7 +546,7 @@ export interface PlayerType {
   toNextTrack: Function
   toPrevTrack: Function
   isRepeat: boolean
-  setIsRepeat: Function
+  repeat: Function
   volume: number
   setVolume: Function
   speed: number
@@ -511,11 +555,12 @@ export interface PlayerType {
   playFast: Function
   isStopPlayMoreSong: boolean
   StopPlayMoreSong: Function
-  ShufflePlay: Function
-  isShuffleList: boolean
-  setIsShuffleList: Function
+  playShuffle: Function
+  isShuffle: boolean
+  playRandom: Function
   isMute: boolean
-  setIsMute: Function
+  mute: Function
+  unmute: Function
   buffered: number | string
   bufferedText: string
   forward: Function