Move player logic back in store
parent
da2ce4eb08
commit
14ce3b1450
@ -1,27 +1,40 @@
|
||||
import React from 'react'
|
||||
|
||||
import { useSelector, useDispatch } from 'react-redux'
|
||||
import { hasNextSegment } from '../store/selectors'
|
||||
import { incrementSegment, resetSegment } from '../store/actions'
|
||||
import { Player } from './Player'
|
||||
import {
|
||||
hasNextSegment,
|
||||
selectRunning,
|
||||
selectInterval
|
||||
} from '../store/selectors'
|
||||
import { incrementSegment, stop, pause, start } from '../store/actions'
|
||||
import { FiPlay, FiPause, FiSquare } from 'react-icons/fi'
|
||||
import { useInterval } from './generics/useInterval'
|
||||
import { IconButton } from '../styles/IconButton'
|
||||
|
||||
export const RsvpPlayer = () => {
|
||||
const dispatch = useDispatch()
|
||||
const running = useSelector(selectRunning)
|
||||
const hasNext = useSelector(hasNextSegment)
|
||||
const wpm = useSelector(state => state.wpm)
|
||||
const interval = useSelector(selectInterval)
|
||||
|
||||
const onTick = stop => {
|
||||
if (!hasNext) return stop()
|
||||
dispatch(incrementSegment())
|
||||
}
|
||||
useInterval(
|
||||
() => {
|
||||
if (!hasNext) dispatch(pause())
|
||||
else dispatch(incrementSegment())
|
||||
},
|
||||
running ? interval : null
|
||||
)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Player
|
||||
delay={60000 / wpm}
|
||||
onTick={onTick}
|
||||
onStop={() => dispatch(resetSegment())}
|
||||
<div>
|
||||
<IconButton Icon={FiSquare} onClick={() => dispatch(stop())} />
|
||||
<IconButton
|
||||
Icon={running ? FiPause : FiPlay}
|
||||
onClick={() => dispatch(running ? pause() : start())}
|
||||
disabled={!hasNext}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -0,0 +1,22 @@
|
||||
import { useRef, useEffect } from 'react'
|
||||
|
||||
// from: https://overreacted.io/making-setinterval-declarative-with-react-hooks/
|
||||
export function useInterval(callback, delay) {
|
||||
const savedCallback = useRef()
|
||||
const x = 'asdf'
|
||||
// Remember the latest callback.
|
||||
useEffect(() => {
|
||||
savedCallback.current = callback
|
||||
}, [callback])
|
||||
|
||||
// Set up the interval.
|
||||
useEffect(() => {
|
||||
function tick() {
|
||||
savedCallback.current()
|
||||
}
|
||||
if (delay !== null) {
|
||||
let id = setInterval(tick, delay)
|
||||
return () => clearInterval(id)
|
||||
}
|
||||
}, [delay])
|
||||
}
|
Loading…
Reference in New Issue