v1.1.4

react-player · May 18, 2023 · 038237d · 038237d
1 parent 0cb36d8
commit 038237d
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -112,7 +112,9 @@ Event | param | Description | Example
 `onScrub` |<pre>(value: number)</pre>| for change track progress on custom duration | `onChange`={(e) => player.onScrub(e.target.value)}
 `onScrubEnd` | () | `optional` -- use it on keyUp or ... on your (slider, range, any custom player duration controller) | `onMouseUp`={player.onScrubEnd} <br /> `onKeyUp`={player.onScrubEnd}
 `setIsPlaying` | (isPlaying: boolean) | for play or pause the song, use it. | `onClick`={() => player.setIsPlaying((isPlay) => !isPlay)}
-`setTrackIndex` | () | for change handly playing index. | `onClick`={() => player.setTrackIndex(5)}
+`play` | () |  for play the song, use it. | `onClick`={() => player.play()}
+`pause` | () | for pause the song, use it. | `onClick`={() => player.pause()}
+`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)

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -9,31 +9,24 @@ const songsFromLocal: string[] = [
   require('./songs/song2.mp3'),
   require('./songs/song3.mp3'),
   require('./songs/song4.mp3'),
-  require('./songs/song5.mp3'),
+  require('./songs/song5.mp3')
 ]
 // if you use local songs,
 // you need use ( require ) because react will hash the file names !!!
 
 // ===============================================================
 const App = () => {
-
   return (
-    <Reaplay tracks={songsFromLocal} startIndex={10}>
+    <Reaplay tracks={songsFromLocal} startIndex={2}>
       {(player: PlayerType) => {
-
         return (
           <>
             <div className='audio-player'>
-
-              <h1 className='track-name'>
-                {metadata[player.trackIndex].name}
-              </h1>
+              <h1 className='track-name'>{metadata[player.trackIndex].name}</h1>
               <h3 className='track-artist'>
                 {metadata[player.trackIndex].artist}
               </h3>
-              <p className='track-album'>
-                {metadata[player.trackIndex].album}
-              </p>
+              <p className='track-album'>{metadata[player.trackIndex].album}</p>
 
               <div className='track-progress'>
                 <p>{player.trackProgressText}</p>
@@ -45,36 +38,49 @@ const App = () => {
                   max={player.duration ? player.duration : `${player.duration}`}
                   className='progress'
                   onChange={(e) => player.onScrub(e.target.value)}
-                  onMouseUp={player.onScrubEnd}
-                  onKeyUp={player.onScrubEnd}
+                  onMouseUp={(e) => player.onScrubEnd(e)}
+                  onKeyUp={(e) => player.onScrubEnd(e)}
                 />
                 <p>{player.durationText}</p>
               </div>
 
               <div className='track-actions'>
                 <button onClick={() => player.toPrevTrack()}>prev</button>
-                <button onClick={() => player.setIsPlaying((isPlay: boolean) => !isPlay)}>{player.isPlaying ? "pause" : "play"}</button>
+                <button
+                  onClick={() =>
+                    player.setIsPlaying((isPlay: boolean) => !isPlay)
+                  }
+                >
+                  {player.isPlaying ? 'pause' : 'play'}
+                </button>
                 <button onClick={() => player.toNextTrack()}>next</button>
-                <button onClick={() => player.setIsRepeat((isRepeat: boolean) => !isRepeat)}>{player.isRepeat ? "un repeat" : "repeat"}</button>
+                <button
+                  onClick={() =>
+                    player.setIsRepeat((isRepeat: boolean) => !isRepeat)
+                  }
+                >
+                  {player.isRepeat ? 'un repeat' : 'repeat'}
+                </button>
               </div>
 
               <div className='track-volume'>
                 <p>{player.volume}</p>
                 <input
-                    type='range'
-                    value={player.volume}
-                    step='1'
-                    min="0"
-                    max="100"
-                    onChange={(e) => player.setVolume(e.target.value)}
-                    className='volume-range'
-                  />
-                  <button
-                    onClick={() => player.setIsMute((isMute: boolean) => !isMute)}
-                    style={{padding: "5px"}}
-                  >{player.isMute ? "unmute" : "mute"}</button>
+                  type='range'
+                  value={player.volume}
+                  step='1'
+                  min='0'
+                  max='100'
+                  onChange={(e) => player.setVolume(e.target.value)}
+                  className='volume-range'
+                />
+                <button
+                  onClick={() => player.setIsMute((isMute: boolean) => !isMute)}
+                  style={{ padding: '5px' }}
+                >
+                  {player.isMute ? 'unmute' : 'mute'}
+                </button>
               </div>
-
             </div>
           </>
         )

diff --git a/example/tsconfig.json b/example/tsconfig.json
@@ -15,7 +15,6 @@
     "noImplicitThis": true,
     "noImplicitAny": true,
     "strictNullChecks": true,
-    "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "allowSyntheticDefaultImports": true,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reaplay",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "the react HOC for create custom players with any styles you like",
   "author": "amir-alipour",
   "license": "MIT",

diff --git a/src/index.tsx b/src/index.tsx
@@ -4,7 +4,7 @@ import { ConvertTimeToText } from './helper'
 interface Props {
   tracks: string[]
   startIndex?: number
-  children?: ((props: PlayerType) => ReactNode) | ReactNode;
+  children?: ((props: PlayerType) => ReactNode) | ReactNode
 }
 // prop types should be like this interface
 
@@ -28,6 +28,8 @@ interface Props {
  * @property {function}  player.onScrubEnd
  * @property {boolean}  player.isPlaying
  * @property {function}  player.setIsPlaying
+ * @property {function}  player.play
+ * @property {function}  player.pause
  * @property {function}  player.toNextTrack
  * @property {function}  player.toPrevTrack
  * @property {boolean}  player.isRepeat
@@ -181,7 +183,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
    * on scrub get the slider or range tag value and replace it with playing song progress
    */
 
-  const onScrub = (value: number) => {
+  const onScrub = (value: number): void => {
     // Clear any timers already running
     clearInterval(intervalRef.current as NodeJS.Timeout)
     audioRef.current.currentTime = value
@@ -190,6 +192,30 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
 
   // -----------
 
+  /**
+   * play song
+   * @function
+   * @description play the current song
+   */
+
+  const play = (): void => {
+    setIsPlaying(true)
+  }
+
+  // -----------
+
+  /**
+   * pause song
+   * @function
+   * @description pause the current song
+   */
+
+  const pause = (): void => {
+    setIsPlaying(false)
+  }
+
+  // -----------
+
   /**
    * change scrub value
    * @function
@@ -199,7 +225,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
    * this optional function
    */
 
-  const onScrubEnd = () => {
+  const onScrubEnd = (): void => {
     // If not already playing, start
     if (!isPlaying) {
       setIsPlaying(true)
@@ -216,7 +242,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
    * if its first song, play at last song in tracks list
    */
 
-  const toPrevTrack = () => {
+  const toPrevTrack = (): void => {
     if (isShuffleList) {
       ShufflePlay()
     } else {
@@ -237,7 +263,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
    * if the last song, come at first song on tracks list
    */
 
-  const toNextTrack = () => {
+  const toNextTrack = (): void => {
     if (isShuffleList) {
       ShufflePlay()
     } else {
@@ -255,7 +281,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
    * @description forward to 5s later of playing song
    */
 
-  const forward = () => {
+  const forward = (): void => {
     audioRef.current.currentTime += 5
   }
 
@@ -265,7 +291,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
    * @description backward to 5s before of Track progress
    */
 
-  const backward = () => {
+  const backward = (): void => {
     audioRef.current.currentTime -= 5
   }
 
@@ -275,7 +301,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
    * @description set the player speed to (0.5)
    */
 
-  const playSlow = () => {
+  const playSlow = (): void => {
     setSpeed(0.5)
   }
 
@@ -285,7 +311,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
    * @description set the player speed to normal mode, (1)
    */
 
-  const playNormal = () => {
+  const playNormal = (): void => {
     setSpeed(1)
   }
 
@@ -295,7 +321,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
    * @description set player speed to (2), it be play 2x faster than normal mode
    */
 
-  const playFast = () => {
+  const playFast = (): void => {
     setSpeed(2)
   }
 
@@ -307,7 +333,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
    * get a random index from tracks length and play it
    */
 
-  const ShufflePlay = () => {
+  const ShufflePlay = (): void => {
     let songsLength: number = tracks.length - 1
     let random: number = Math.floor(Math.random() * songsLength)
     setTrackIndex(random)
@@ -353,6 +379,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
 
   useLayoutEffect(() => {
     audioRef.current.pause()
+    setIsPlaying(false);
     setIsLoading(true)
     setBuffered(0)
 
@@ -389,7 +416,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
    * if some time you need get player states seconds by seconds can use it.
    */
 
-  const Logger = () => {
+  const Logger = (): void => {
     console.log({
       trackIndex,
       duration: ConvertTimeToText(duration),
@@ -409,7 +436,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
   // *********
   // **
   // ==============  return data
-  const data : PlayerType = {
+  const data: PlayerType = {
     Logger, // log the states
     isLoading, // loading state
     isHaveError, // error state
@@ -424,6 +451,8 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
     onScrubEnd,
     isPlaying, // playing state
     setIsPlaying, // playing state setter
+    play, // play current song
+    pause, // pause current song
     toNextTrack, // play next song function
     toPrevTrack, // play prevent song function
     isRepeat, // repeat state
@@ -453,7 +482,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
   })
 }
 
-export type PlayerType = {
+export interface PlayerType {
   Logger: Function
   isLoading: boolean
   isHaveError: boolean
@@ -468,6 +497,8 @@ export type PlayerType = {
   onScrubEnd: Function
   isPlaying: boolean
   setIsPlaying: Function
+  play: Function
+  pause: Function
   toNextTrack: Function
   toPrevTrack: Function
   isRepeat: boolean