Working player
parent
a14ed6bdc1
commit
6bd4240e5d
@ -0,0 +1,26 @@
|
||||
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>
|
||||
)
|
||||
}
|
@ -0,0 +1,40 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react'
|
||||
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import { selectPlaying, hasNextSegment } from '../store/selectors'
|
||||
import { start, stop, pause, incrementSegment } from '../store/actions'
|
||||
|
||||
export const PlayerControl = ({ onTick }) => {
|
||||
const dispatch = useDispatch()
|
||||
const isPlaying = useSelector(selectPlaying)
|
||||
const hasNext = useSelector(hasNextSegment)
|
||||
const wpm = useSelector(state => state.wpm)
|
||||
|
||||
const [handle, setHandle] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
clearInterval(handle)
|
||||
if (isPlaying) {
|
||||
setHandle(setInterval(() => dispatch(incrementSegment()), 60000 / wpm))
|
||||
}
|
||||
}, [isPlaying, wpm])
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasNext) dispatch(pause())
|
||||
}, [hasNext, dispatch])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button onClick={() => dispatch(stop())}>{'stop'}</button>
|
||||
{isPlaying && (
|
||||
<button onClick={() => dispatch(pause())}>{'pause'}</button>
|
||||
)}{' '}
|
||||
{!isPlaying && (
|
||||
<button onClick={() => dispatch(start())}>{'play'}</button>
|
||||
)}
|
||||
<div>playing: {isPlaying.toString()}</div>
|
||||
<div>interval: {handle}</div>
|
||||
<div>has next: {hasNext.toString()}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
Loading…
Reference in New Issue