Skip to content

Commit 038237d

Browse files
Amir-AlipourAmir-Alipour
committed
v1.1.4
1 parent 0cb36d8 commit 038237d

File tree

5 files changed

+83
-45
lines changed

5 files changed

+83
-45
lines changed

‎README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,9 @@ Event | param | Description | Example
112112
`onScrub` |<pre>(value: number)</pre>| for change track progress on custom duration | `onChange`={(e) => player.onScrub(e.target.value)}
113113
`onScrubEnd` | () | `optional` -- use it on keyUp or ... on your (slider, range, any custom player duration controller) | `onMouseUp`={player.onScrubEnd} <br /> `onKeyUp`={player.onScrubEnd}
114114
`setIsPlaying` | (isPlaying: boolean) | for play or pause the song, use it. | `onClick`={() => player.setIsPlaying((isPlay) => !isPlay)}
115-
`setTrackIndex` | () | for change handly playing index. | `onClick`={() => player.setTrackIndex(5)}
115+
`play` | () | for play the song, use it. | `onClick`={() => player.play()}
116+
`pause` | () | for pause the song, use it. | `onClick`={() => player.pause()}
117+
`setTrackIndex` | (trackIndex: number) | for change handly playing index. | `onClick`={() => player.setTrackIndex(5)}
116118
`toNextTrack` | () | go to next track of the tracks list | player.toNextTrack()
117119
`toPrevTrack` | () | go to prev track of the tracks list | player.toPrevTrack()
118120
`setIsRepeat` | (isRepeat: boolean) | turn on or off for repeat the playing song | player.setIsRepeat((isRepeat) => !isRepeat)

‎example/src/App.tsx

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,24 @@ const songsFromLocal: string[] = [
99
require('./songs/song2.mp3'),
1010
require('./songs/song3.mp3'),
1111
require('./songs/song4.mp3'),
12-
require('./songs/song5.mp3'),
12+
require('./songs/song5.mp3')
1313
]
1414
// if you use local songs,
1515
// you need use ( require ) because react will hash the file names !!!
1616

1717
// ===============================================================
1818
const App = () => {
19-
2019
return (
21-
<Reaplay tracks={songsFromLocal} startIndex={10}>
20+
<Reaplay tracks={songsFromLocal} startIndex={2}>
2221
{(player: PlayerType) => {
23-
2422
return (
2523
<>
2624
<div className='audio-player'>
27-
28-
<h1 className='track-name'>
29-
{metadata[player.trackIndex].name}
30-
</h1>
25+
<h1 className='track-name'>{metadata[player.trackIndex].name}</h1>
3126
<h3 className='track-artist'>
3227
{metadata[player.trackIndex].artist}
3328
</h3>
34-
<p className='track-album'>
35-
{metadata[player.trackIndex].album}
36-
</p>
29+
<p className='track-album'>{metadata[player.trackIndex].album}</p>
3730

3831
<div className='track-progress'>
3932
<p>{player.trackProgressText}</p>
@@ -45,36 +38,49 @@ const App = () => {
4538
max={player.duration ? player.duration : `${player.duration}`}
4639
className='progress'
4740
onChange={(e) => player.onScrub(e.target.value)}
48-
onMouseUp={player.onScrubEnd}
49-
onKeyUp={player.onScrubEnd}
41+
onMouseUp={(e) => player.onScrubEnd(e)}
42+
onKeyUp={(e) => player.onScrubEnd(e)}
5043
/>
5144
<p>{player.durationText}</p>
5245
</div>
5346

5447
<div className='track-actions'>
5548
<button onClick={() => player.toPrevTrack()}>prev</button>
56-
<button onClick={() => player.setIsPlaying((isPlay: boolean) => !isPlay)}>{player.isPlaying ? "pause" : "play"}</button>
49+
<button
50+
onClick={() =>
51+
player.setIsPlaying((isPlay: boolean) => !isPlay)
52+
}
53+
>
54+
{player.isPlaying ? 'pause' : 'play'}
55+
</button>
5756
<button onClick={() => player.toNextTrack()}>next</button>
58-
<button onClick={() => player.setIsRepeat((isRepeat: boolean) => !isRepeat)}>{player.isRepeat ? "un repeat" : "repeat"}</button>
57+
<button
58+
onClick={() =>
59+
player.setIsRepeat((isRepeat: boolean) => !isRepeat)
60+
}
61+
>
62+
{player.isRepeat ? 'un repeat' : 'repeat'}
63+
</button>
5964
</div>
6065

6166
<div className='track-volume'>
6267
<p>{player.volume}</p>
6368
<input
64-
type='range'
65-
value={player.volume}
66-
step='1'
67-
min="0"
68-
max="100"
69-
onChange={(e) => player.setVolume(e.target.value)}
70-
className='volume-range'
71-
/>
72-
<button
73-
onClick={() => player.setIsMute((isMute: boolean) => !isMute)}
74-
style={{padding: "5px"}}
75-
>{player.isMute ? "unmute" : "mute"}</button>
69+
type='range'
70+
value={player.volume}
71+
step='1'
72+
min='0'
73+
max='100'
74+
onChange={(e) => player.setVolume(e.target.value)}
75+
className='volume-range'
76+
/>
77+
<button
78+
onClick={() => player.setIsMute((isMute: boolean) => !isMute)}
79+
style={{ padding: '5px' }}
80+
>
81+
{player.isMute ? 'unmute' : 'mute'}
82+
</button>
7683
</div>
77-
7884
</div>
7985
</>
8086
)

‎example/tsconfig.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
"noImplicitThis": true,
1616
"noImplicitAny": true,
1717
"strictNullChecks": true,
18-
"suppressImplicitAnyIndexErrors": true,
1918
"noUnusedLocals": true,
2019
"noUnusedParameters": true,
2120
"allowSyntheticDefaultImports": true,

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "reaplay",
3-
"version": "1.1.3",
3+
"version": "1.1.4",
44
"description": "the react HOC for create custom players with any styles you like",
55
"author": "amir-alipour",
66
"license": "MIT",

‎src/index.tsx

Lines changed: 45 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { ConvertTimeToText } from './helper'
44
interface Props {
55
tracks: string[]
66
startIndex?: number
7-
children?: ((props: PlayerType) => ReactNode) | ReactNode;
7+
children?: ((props: PlayerType) => ReactNode) | ReactNode
88
}
99
// prop types should be like this interface
1010

@@ -28,6 +28,8 @@ interface Props {
2828
* @property {function} player.onScrubEnd
2929
* @property {boolean} player.isPlaying
3030
* @property {function} player.setIsPlaying
31+
* @property {function} player.play
32+
* @property {function} player.pause
3133
* @property {function} player.toNextTrack
3234
* @property {function} player.toPrevTrack
3335
* @property {boolean} player.isRepeat
@@ -181,7 +183,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
181183
* on scrub get the slider or range tag value and replace it with playing song progress
182184
*/
183185

184-
const onScrub = (value: number) => {
186+
const onScrub = (value: number): void => {
185187
// Clear any timers already running
186188
clearInterval(intervalRef.current as NodeJS.Timeout)
187189
audioRef.current.currentTime = value
@@ -190,6 +192,30 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
190192

191193
// -----------
192194

195+
/**
196+
* play song
197+
* @function
198+
* @description play the current song
199+
*/
200+
201+
const play = (): void => {
202+
setIsPlaying(true)
203+
}
204+
205+
// -----------
206+
207+
/**
208+
* pause song
209+
* @function
210+
* @description pause the current song
211+
*/
212+
213+
const pause = (): void => {
214+
setIsPlaying(false)
215+
}
216+
217+
// -----------
218+
193219
/**
194220
* change scrub value
195221
* @function
@@ -199,7 +225,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
199225
* this optional function
200226
*/
201227

202-
const onScrubEnd = () => {
228+
const onScrubEnd = (): void => {
203229
// If not already playing, start
204230
if (!isPlaying) {
205231
setIsPlaying(true)
@@ -216,7 +242,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
216242
* if its first song, play at last song in tracks list
217243
*/
218244

219-
const toPrevTrack = () => {
245+
const toPrevTrack = (): void => {
220246
if (isShuffleList) {
221247
ShufflePlay()
222248
} else {
@@ -237,7 +263,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
237263
* if the last song, come at first song on tracks list
238264
*/
239265

240-
const toNextTrack = () => {
266+
const toNextTrack = (): void => {
241267
if (isShuffleList) {
242268
ShufflePlay()
243269
} else {
@@ -255,7 +281,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
255281
* @description forward to 5s later of playing song
256282
*/
257283

258-
const forward = () => {
284+
const forward = (): void => {
259285
audioRef.current.currentTime += 5
260286
}
261287

@@ -265,7 +291,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
265291
* @description backward to 5s before of Track progress
266292
*/
267293

268-
const backward = () => {
294+
const backward = (): void => {
269295
audioRef.current.currentTime -= 5
270296
}
271297

@@ -275,7 +301,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
275301
* @description set the player speed to (0.5)
276302
*/
277303

278-
const playSlow = () => {
304+
const playSlow = (): void => {
279305
setSpeed(0.5)
280306
}
281307

@@ -285,7 +311,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
285311
* @description set the player speed to normal mode, (1)
286312
*/
287313

288-
const playNormal = () => {
314+
const playNormal = (): void => {
289315
setSpeed(1)
290316
}
291317

@@ -295,7 +321,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
295321
* @description set player speed to (2), it be play 2x faster than normal mode
296322
*/
297323

298-
const playFast = () => {
324+
const playFast = (): void => {
299325
setSpeed(2)
300326
}
301327

@@ -307,7 +333,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
307333
* get a random index from tracks length and play it
308334
*/
309335

310-
const ShufflePlay = () => {
336+
const ShufflePlay = (): void => {
311337
let songsLength: number = tracks.length - 1
312338
let random: number = Math.floor(Math.random() * songsLength)
313339
setTrackIndex(random)
@@ -353,6 +379,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
353379

354380
useLayoutEffect(() => {
355381
audioRef.current.pause()
382+
setIsPlaying(false);
356383
setIsLoading(true)
357384
setBuffered(0)
358385

@@ -389,7 +416,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
389416
* if some time you need get player states seconds by seconds can use it.
390417
*/
391418

392-
const Logger = () => {
419+
const Logger = (): void => {
393420
console.log({
394421
trackIndex,
395422
duration: ConvertTimeToText(duration),
@@ -409,7 +436,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
409436
// *********
410437
// **
411438
// ============== return data
412-
const data : PlayerType = {
439+
const data: PlayerType = {
413440
Logger, // log the states
414441
isLoading, // loading state
415442
isHaveError, // error state
@@ -424,6 +451,8 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
424451
onScrubEnd,
425452
isPlaying, // playing state
426453
setIsPlaying, // playing state setter
454+
play, // play current song
455+
pause, // pause current song
427456
toNextTrack, // play next song function
428457
toPrevTrack, // play prevent song function
429458
isRepeat, // repeat state
@@ -453,7 +482,7 @@ export const Reaplay = ({ tracks, startIndex = 0, children }: Props) => {
453482
})
454483
}
455484

456-
export type PlayerType = {
485+
export interface PlayerType {
457486
Logger: Function
458487
isLoading: boolean
459488
isHaveError: boolean
@@ -468,6 +497,8 @@ export type PlayerType = {
468497
onScrubEnd: Function
469498
isPlaying: boolean
470499
setIsPlaying: Function
500+
play: Function
501+
pause: Function
471502
toNextTrack: Function
472503
toPrevTrack: Function
473504
isRepeat: boolean

0 commit comments

Comments
 (0)