Working player

src/components/Player.js

@@ -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>
+  )
+}

src/components/PlayerControl.js

@@ -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>
+  )
+}

src/components/RsvpOptions.js

@@ -1,11 +1,13 @@
 import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 
-import { setMaxLength } from '../store/actions'
+import { setMaxLength, setWpm } from '../store/actions'
 
 export const RsvpOptions = () => {
-  const maxLength = useSelector(state => state.maxLength)
   const dispatch = useDispatch()
+  const maxLength = useSelector(state => state.maxLength)
+  const wpm = useSelector(state => state.wpm)
+
   return (
     <div>
       <input
@@ -16,6 +18,14 @@ export const RsvpOptions = () => {
         onChange={e => dispatch(setMaxLength(e.target.value))}
       />
       {maxLength}
+      <input
+        type="range"
+        min="100"
+        max="1000"
+        value={wpm}
+        onChange={e => dispatch(setWpm(e.target.value))}
+      />
+      {wpm}
     </div>
   )
 }

src/components/RsvpReader.js

@@ -5,6 +5,7 @@ import { TextOutput } from './TextOutput'
 import { MainControl } from './MainControl'
 import { RsvpSegment } from './RsvpSegment'
 import { RsvpOptions } from './RsvpOptions'
+import { PlayerControl } from './PlayerControl'
 
 const FlexRow = styled.div`
   display: flex;
@@ -25,6 +26,7 @@ export const RsvpReader = () => {
         <RsvpSegment />
         <MainControl></MainControl>
         <RsvpOptions></RsvpOptions>
+        <PlayerControl />
       </FlexItem>
       <FlexItem>
         <TextOutput />

src/store/actions.js

@@ -9,3 +9,7 @@ export const setMaxLength = length => ({
   type: 'SET_MAX_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' })

src/store/reducer.js

@@ -8,7 +8,9 @@ import {
 export const initialState = {
   originalText: 'Sample Text',
   curIdx: 0,
-  maxLength: 5
+  maxLength: 5,
+  isPlaying: false,
+  wpm: 300
 }
 
 const reducer = {
@@ -24,7 +26,11 @@ const reducer = {
   DEC_WORD: state => ({ ...state, curIdx: selectPrevWord(state) }),
   INC_SENTENCE: state => ({ ...state, curIdx: selectNextSentence(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 }) => {

src/store/selectors.js

@@ -26,6 +26,14 @@ export const selectCurrentSegment = createSelector(
   (parsedText, curIdx) => parsedText.segments[curIdx]
 )
 
+export const hasNextSegment = createSelector(
+  selectSegments,
+  selectCurrentSegmentIndex,
+  (segments, idx) => {
+    return idx < segments.length - 1
+  }
+)
+
 // next/prev words
 
 export const selectWords = createSelector(
@@ -69,3 +77,7 @@ export const selectPrevSentence = createSelector(
 
 export const selectHasNextSentence = createSelector(selectNextSentence, Boolean)
 export const selectHasPrevSentence = createSelector(selectPrevSentence, Boolean)
+
+// player
+
+export const selectPlaying = state => state.isPlaying