39 lines
1.0 KiB
JavaScript
39 lines
1.0 KiB
JavaScript
import React from 'react'
|
|
|
|
import { useSelector, useDispatch } from 'react-redux'
|
|
import {
|
|
selectHasNextSegment,
|
|
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 PlayerControl = () => {
|
|
const dispatch = useDispatch()
|
|
const running = useSelector(selectRunning)
|
|
const hasNext = useSelector(selectHasNextSegment)
|
|
const interval = useSelector(selectInterval)
|
|
|
|
useInterval(
|
|
() => {
|
|
if (!hasNext) dispatch(pause())
|
|
else dispatch(incrementSegment())
|
|
},
|
|
running ? interval : null
|
|
)
|
|
|
|
return (
|
|
<>
|
|
<IconButton Icon={FiSquare} onClick={() => dispatch(stop())} />
|
|
<IconButton
|
|
Icon={running ? FiPause : FiPlay}
|
|
onClick={() => dispatch(running ? pause() : start())}
|
|
disabled={!hasNext}
|
|
/>
|
|
</>
|
|
)
|
|
}
|