Working player
This commit is contained in:
parent
a14ed6bdc1
commit
6bd4240e5d
26
src/components/Player.js
Normal file
26
src/components/Player.js
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
40
src/components/PlayerControl.js
Normal file
40
src/components/PlayerControl.js
Normal file
@ -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>
|
||||||
|
)
|
||||||
|
}
|
@ -1,11 +1,13 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { useSelector, useDispatch } from 'react-redux'
|
import { useSelector, useDispatch } from 'react-redux'
|
||||||
|
|
||||||
import { setMaxLength } from '../store/actions'
|
import { setMaxLength, setWpm } from '../store/actions'
|
||||||
|
|
||||||
export const RsvpOptions = () => {
|
export const RsvpOptions = () => {
|
||||||
const maxLength = useSelector(state => state.maxLength)
|
|
||||||
const dispatch = useDispatch()
|
const dispatch = useDispatch()
|
||||||
|
const maxLength = useSelector(state => state.maxLength)
|
||||||
|
const wpm = useSelector(state => state.wpm)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<input
|
<input
|
||||||
@ -16,6 +18,14 @@ export const RsvpOptions = () => {
|
|||||||
onChange={e => dispatch(setMaxLength(e.target.value))}
|
onChange={e => dispatch(setMaxLength(e.target.value))}
|
||||||
/>
|
/>
|
||||||
{maxLength}
|
{maxLength}
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="100"
|
||||||
|
max="1000"
|
||||||
|
value={wpm}
|
||||||
|
onChange={e => dispatch(setWpm(e.target.value))}
|
||||||
|
/>
|
||||||
|
{wpm}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -5,6 +5,7 @@ import { TextOutput } from './TextOutput'
|
|||||||
import { MainControl } from './MainControl'
|
import { MainControl } from './MainControl'
|
||||||
import { RsvpSegment } from './RsvpSegment'
|
import { RsvpSegment } from './RsvpSegment'
|
||||||
import { RsvpOptions } from './RsvpOptions'
|
import { RsvpOptions } from './RsvpOptions'
|
||||||
|
import { PlayerControl } from './PlayerControl'
|
||||||
|
|
||||||
const FlexRow = styled.div`
|
const FlexRow = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -25,6 +26,7 @@ export const RsvpReader = () => {
|
|||||||
<RsvpSegment />
|
<RsvpSegment />
|
||||||
<MainControl></MainControl>
|
<MainControl></MainControl>
|
||||||
<RsvpOptions></RsvpOptions>
|
<RsvpOptions></RsvpOptions>
|
||||||
|
<PlayerControl />
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<TextOutput />
|
<TextOutput />
|
||||||
|
@ -9,3 +9,7 @@ export const setMaxLength = length => ({
|
|||||||
type: 'SET_MAX_LENGTH',
|
type: 'SET_MAX_LENGTH',
|
||||||
payload: length
|
payload: length
|
||||||
})
|
})
|
||||||
|
export const setWpm = wpm => ({ type: 'SET_WPM', payload: wpm })
|
||||||
|
export const start = () => ({ type: 'START' })
|
||||||
|
export const pause = () => ({ type: 'PAUSE' })
|
||||||
|
export const stop = () => ({ type: 'STOP' })
|
||||||
|
@ -8,7 +8,9 @@ import {
|
|||||||
export const initialState = {
|
export const initialState = {
|
||||||
originalText: 'Sample Text',
|
originalText: 'Sample Text',
|
||||||
curIdx: 0,
|
curIdx: 0,
|
||||||
maxLength: 5
|
maxLength: 5,
|
||||||
|
isPlaying: false,
|
||||||
|
wpm: 300
|
||||||
}
|
}
|
||||||
|
|
||||||
const reducer = {
|
const reducer = {
|
||||||
@ -24,7 +26,11 @@ const reducer = {
|
|||||||
DEC_WORD: state => ({ ...state, curIdx: selectPrevWord(state) }),
|
DEC_WORD: state => ({ ...state, curIdx: selectPrevWord(state) }),
|
||||||
INC_SENTENCE: state => ({ ...state, curIdx: selectNextSentence(state) }),
|
INC_SENTENCE: state => ({ ...state, curIdx: selectNextSentence(state) }),
|
||||||
DEC_SENTENCE: state => ({ ...state, curIdx: selectPrevSentence(state) }),
|
DEC_SENTENCE: state => ({ ...state, curIdx: selectPrevSentence(state) }),
|
||||||
SET_MAX_LENGTH: (state, payload) => ({ ...state, maxLength: payload })
|
SET_MAX_LENGTH: (state, payload) => ({ ...state, maxLength: payload }),
|
||||||
|
SET_WPM: (state, payload) => ({ ...state, wpm: payload }),
|
||||||
|
START: state => ({ ...state, isPlaying: true }),
|
||||||
|
PAUSE: state => ({ ...state, isPlaying: false }),
|
||||||
|
STOP: state => ({ ...state, isPlaying: false, curIdx: 0 })
|
||||||
}
|
}
|
||||||
|
|
||||||
export const reducerFn = (state, { type, payload }) => {
|
export const reducerFn = (state, { type, payload }) => {
|
||||||
|
@ -26,6 +26,14 @@ export const selectCurrentSegment = createSelector(
|
|||||||
(parsedText, curIdx) => parsedText.segments[curIdx]
|
(parsedText, curIdx) => parsedText.segments[curIdx]
|
||||||
)
|
)
|
||||||
|
|
||||||
|
export const hasNextSegment = createSelector(
|
||||||
|
selectSegments,
|
||||||
|
selectCurrentSegmentIndex,
|
||||||
|
(segments, idx) => {
|
||||||
|
return idx < segments.length - 1
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
// next/prev words
|
// next/prev words
|
||||||
|
|
||||||
export const selectWords = createSelector(
|
export const selectWords = createSelector(
|
||||||
@ -69,3 +77,7 @@ export const selectPrevSentence = createSelector(
|
|||||||
|
|
||||||
export const selectHasNextSentence = createSelector(selectNextSentence, Boolean)
|
export const selectHasNextSentence = createSelector(selectNextSentence, Boolean)
|
||||||
export const selectHasPrevSentence = createSelector(selectPrevSentence, Boolean)
|
export const selectHasPrevSentence = createSelector(selectPrevSentence, Boolean)
|
||||||
|
|
||||||
|
// player
|
||||||
|
|
||||||
|
export const selectPlaying = state => state.isPlaying
|
||||||
|
Loading…
Reference in New Issue
Block a user