v1.1.6: refactoring

README.md

@@ -67,8 +67,7 @@ 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

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.5",
+  "version": "1.1.6",
   "description": "the react HOC for create custom players with any styles you like",
   "author": "amir-alipour",
   "license": "MIT",

src/index.tsx

@@ -116,6 +116,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
    *
    */
   const audioRef = useRef(new Audio(tracks[trackIndex]))
+  audioRef.current.autoplay = false
   audioRef.current.volume = volume / 100
   audioRef.current.muted = isMute
   audioRef.current.playbackRate = speed
@@ -333,7 +334,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
    */
 
   const repeat = (SetOnRepeat: boolean): void => {
-    if(SetOnRepeat) {
+    if (SetOnRepeat) {
       setIsRepeat(true)
     } else {
       setIsRepeat(false)
@@ -531,7 +532,7 @@ export interface PlayerType {
   isLoading: boolean
   isHaveError: boolean
   trackIndex: number
-  setTrackIndex: Function
+  setTrackIndex: (index: number) => void
   duration: number
   durationText: string
   trackProgress: number
@@ -540,22 +541,22 @@ export interface PlayerType {
   onScrub: Function
   onScrubEnd: Function
   isPlaying: boolean
-  setIsPlaying: Function
+  setIsPlaying: (isPlaying: boolean) => void
   play: Function
   pause: Function
   toNextTrack: Function
   toPrevTrack: Function
   isRepeat: boolean
-  repeat: Function
+  repeat: (setOnrepeat: boolean) => void
   volume: number
-  setVolume: Function
+  setVolume: (volume: number) => void
   speed: number
   playSlow: Function
   playNormal: Function
   playFast: Function
   isStopPlayMoreSong: boolean
   StopPlayMoreSong: Function
-  playShuffle: Function
+  playShuffle: (isShuffle: boolean) => void
   isShuffle: boolean
   playRandom: Function
   isMute: boolean