From 038237dee3a2c1a9670dd052c3846ec22b061eeb Mon Sep 17 00:00:00 2001 From: amir alipour Date: Thu, 18 May 2023 16:22:01 +0330 Subject: [PATCH] v1.1.4 --- README.md | 4 ++- example/src/App.tsx | 62 ++++++++++++++++++++++++------------------- example/tsconfig.json | 1 - package.json | 2 +- src/index.tsx | 59 ++++++++++++++++++++++++++++++---------- 5 files changed, 83 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index 432de3e..644637b 100644 --- a/README.md +++ b/README.md @@ -112,7 +112,9 @@ Event | param | Description | Example `onScrub` |
(value: number)
| 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}
`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 index 1e87da5..875f7b1 100644 --- 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 ( - + {(player: PlayerType) => { - return ( <>
- -

- {metadata[player.trackIndex].name} -

+

{metadata[player.trackIndex].name}

{metadata[player.trackIndex].artist}

-

- {metadata[player.trackIndex].album} -

+

{metadata[player.trackIndex].album}

{player.trackProgressText}

@@ -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)} />

{player.durationText}

- + - +

{player.volume}

player.setVolume(e.target.value)} - className='volume-range' - /> - + type='range' + value={player.volume} + step='1' + min='0' + max='100' + onChange={(e) => player.setVolume(e.target.value)} + className='volume-range' + /> +
-
) diff --git a/example/tsconfig.json b/example/tsconfig.json index 0c3c27a..4c18358 100644 --- 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 index 6013258..39bb062 100644 --- 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 index e034818..147ffb0 100644 --- 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