README.md

@@ -67,8 +67,47 @@ const songList = [
 ## Example
 See the example directory for a basic working example of using this project.  To run it locally, run `npm install` in the [example directory](https://github.com/Amir-Alipour/reaplay/tree/master/example) and then `npm start`.
 
-or <br />
-[![Edit blog](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/blissful-frost-yl38y)
+or 
+<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/>
@@ -89,7 +128,7 @@ Param | Type | Default | Notes
 Prop | Type | Default | Notes
 --- | --- | --- | ---
 `isLoading` | Boolean | false | if use Uri tracks, you need wait for the uri will be load
-`isHaveError` | Boolean | false | use it for start at custom index of your tracks array
+`isHaveError` | Boolean | false | if your track returned error, it give you a boolean
 `trackIndex` | Number | 0 | the playing index of the tracks array
 `duration` | Number | song duration | the duration of the playing song
 `durationText` | String | song duration converted | the duration of the playing song converted to 00:00 string
@@ -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,20 +156,30 @@ 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()
+`forceUpdatePlayer` | () | forece Re-Render player | player.forceUpdatePlayer()
+`update` | () | update player | player.update()
 
 </br>
 </br>
+
+### Fix Browser Condition : 
+browsers don't give access to play sound without at least one user interaction with website <br/>
+
+<img width="798" alt="242920537-9cedf5bb-ad7e-4488-aa03-29765826182b" src="https://github-production-user-asset-6210df.s3.amazonaws.com/73488911/267464235-98384f28-a7f8-440b-9c2c-6745bfe9135a.png">
+
+
 </br>
 
 ## License

example/src/App.tsx

@@ -48,16 +48,16 @@ const App = () => {
                 <button onClick={() => player.toPrevTrack()}>prev</button>
                 <button
                   onClick={() =>
-                    player.setIsPlaying((isPlay: boolean) => !isPlay)
+                    player.setIsPlaying(player.isPlaying ? false : true)
                   }
                 >
                   {player.isPlaying ? 'pause' : 'play'}
                 </button>
                 <button onClick={() => player.toNextTrack()}>next</button>
                 <button
-                  onClick={() =>
-                    player.setIsRepeat((isRepeat: boolean) => !isRepeat)
-                  }
+                  onClick={() => {
+                    player.isRepeat ? player.repeat(false) : player.repeat(true)
+                  }}
                 >
                   {player.isRepeat ? 'un repeat' : 'repeat'}
                 </button>
@@ -71,11 +71,13 @@ const App = () => {
                   step='1'
                   min='0'
                   max='100'
-                  onChange={(e) => player.setVolume(e.target.value)}
+                  onChange={(e) => player.setVolume(+e.target.value)}
                   className='volume-range'
                 />
                 <button
-                  onClick={() => player.setIsMute((isMute: boolean) => !isMute)}
+                  onClick={() => {
+                    player.isMute ? player.unmute() : player.mute()
+                  }}
                   style={{ padding: '5px' }}
                 >
                   {player.isMute ? 'unmute' : 'mute'}

package.json

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