Move player logic back in store
parent
da2ce4eb08
commit
14ce3b1450
@ -1,27 +1,40 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
|
||||||
import { useSelector, useDispatch } from 'react-redux'
|
import { useSelector, useDispatch } from 'react-redux'
|
||||||
import { hasNextSegment } from '../store/selectors'
|
import {
|
||||||
import { incrementSegment, resetSegment } from '../store/actions'
|
hasNextSegment,
|
||||||
import { Player } from './Player'
|
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 = () => {
|
export const RsvpPlayer = () => {
|
||||||
const dispatch = useDispatch()
|
const dispatch = useDispatch()
|
||||||
|
const running = useSelector(selectRunning)
|
||||||
const hasNext = useSelector(hasNextSegment)
|
const hasNext = useSelector(hasNextSegment)
|
||||||
const wpm = useSelector(state => state.wpm)
|
const interval = useSelector(selectInterval)
|
||||||
|
|
||||||
const onTick = stop => {
|
useInterval(
|
||||||
if (!hasNext) return stop()
|
() => {
|
||||||
dispatch(incrementSegment())
|
if (!hasNext) dispatch(pause())
|
||||||
}
|
else dispatch(incrementSegment())
|
||||||
|
},
|
||||||
|
running ? interval : null
|
||||||
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Player
|
<div>
|
||||||
delay={60000 / wpm}
|
<IconButton Icon={FiSquare} onClick={() => dispatch(stop())} />
|
||||||
onTick={onTick}
|
<IconButton
|
||||||
onStop={() => dispatch(resetSegment())}
|
Icon={running ? FiPause : FiPlay}
|
||||||
/>
|
onClick={() => dispatch(running ? pause() : start())}
|
||||||
|
disabled={!hasNext}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</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