27 lines
803 B
JavaScript
27 lines
803 B
JavaScript
|
import React, { useEffect, useState, useCallback } from 'react'
|
||
|
|
|
||
|
|
export const PlayerControl = ({ interval, onTick, onStart, onStop }) => {
|
||
|
|
const dispatch = useDispatch()
|
||
|
|
const [isPlaying, setPlaying] = useState(false)
|
||
|
|
|
||
|
|
const [handle, setHandle] = useState(null)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
console.log('effect fired', isPlaying)
|
||
|
|
clearInterval(handle)
|
||
|
|
if (isPlaying) {
|
||
|
|
setHandle(setInterval(() => dispatch(incrementSegment()), 500))
|
||
|
|
}
|
||
|
|
}, [handle, isPlaying])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<button onClick={() => dispatch(stop())}>{'stop'}</button>
|
||
|
|
<button onClick={() => dispatch(pause())}>{'pause'}</button>
|
||
|
|
<button onClick={() => dispatch(start())}>{'play'}</button>
|
||
|
|
<div>playing: {isPlaying.toString()}</div>
|
||
|
|
<div>interval: {handle}</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|