package-lock.json

@@ -9796,14 +9796,6 @@
       "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz",
       "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA=="
     },
-    "reselect-tools": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/reselect-tools/-/reselect-tools-0.0.7.tgz",
-      "integrity": "sha512-+RGguS8ph21y04l6YwQwL+VfJ/c0qyZKCkhCd5ZwbNJ/lklsJml3CIim+uaG/t+7jYZQcwDW4bk5+VzTeuzwtw==",
-      "requires": {
-        "reselect": "4.0.0"
-      }
-    },
     "resolve": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.13.1.tgz",

package.json

@@ -24,8 +24,7 @@
     "react-redux": "^7.1.3",
     "redux": "^4.0.4",
     "regenerator-runtime": "^0.13.3",
-    "reselect": "^4.0.0",
+    "reselect": "^4.0.0"
-    "reselect-tools": "0.0.7"
   },
   "devDependencies": {
     "@babel/core": "^7.7.5",

src/components/PlayerControl.js

@@ -4,7 +4,8 @@ import { useSelector, useDispatch } from 'react-redux'
 import {
   selectHasNextSegment,
   selectRunning,
-  selectInterval
+  selectInterval,
+  selectCurrentSegment
 } from '../store/selectors'
 import { incrementSegment, stop, pause, start } from '../store/actions'
 import { FiPlay, FiPause, FiSquare } from 'react-icons/fi'
@@ -16,6 +17,8 @@ export const PlayerControl = () => {
   const running = useSelector(selectRunning)
   const hasNext = useSelector(selectHasNextSegment)
   const interval = useSelector(selectInterval)
+  const segment = useSelector(selectCurrentSegment)
+  console.log(interval, segment)
 
   useInterval(
     () => {

src/components/RsvpReader.js

@@ -30,9 +30,7 @@ export const RsvpReader = () => {
         <Options></Options>
         <TotalTime />
       </div>
-      <div className={styles.item}>
+      <div className={styles.item}>{/* <TextOutput /> */}</div>
-        <TextOutput />
-      </div>
     </div>
   )
 }

src/components/TextOutput.css

@@ -1,5 +1,5 @@
 .current {
-  background-color: yellow;
+  text-decoration: underline;
 }
 
 .sentenceBeginning {

src/components/TextOutput.js

@@ -5,23 +5,17 @@ import classNames from 'classnames'
 import { getNextSmallerNumber } from '../lib/array-util.js'
 import {
   selectParsedText,
-  selectCurrentSegmentIndex,
+  selectCurrentSegmentIndex
-  selectDisplayMode,
-  selectSegmentWindow
 } from '../store/selectors.js'
 
 import styles from './TextOutput.css'
 
 export const TextOutput = () => {
-  const { segments, offset } = useSelector(selectSegmentWindow)
+  const { segments, sentences, words } = useSelector(selectParsedText)
-  const { sentences, words } = useSelector(selectParsedText)
   const curSegment = useSelector(selectCurrentSegmentIndex)
-  const mode = useSelector(selectDisplayMode)
   return (
-    <>
     <div>
       {segments.map((segment, idx) => {
-          idx = idx + offset
         const isCurrent = curSegment === idx
         const isWordStart = words.includes(idx)
         const wordBeginning = isWordStart
@@ -44,6 +38,5 @@ export const TextOutput = () => {
         )
       })}
     </div>
-    </>
   )
 }

src/lib/parseText.js

@@ -1,5 +1,3 @@
-const sentenceEndings = '.!?:;'
-
 /**
  * Returns an object containing the segmented text and metainfo about word and
  * sentence beginnings
@@ -26,9 +24,7 @@ export function parseText(text, maxLength) {
     curIdx += fragments.length
 
     // set flag if next word is sentence beginning
-    sentenceFlag = sentenceEndings
+    sentenceFlag = word.endsWith('.')
-      .split('')
-      .some(ending => word.endsWith(ending))
   }
 
   return { segments, words, sentences }

src/store/index.js

@@ -1,14 +1,8 @@
 import { createStore } from 'redux'
-import { registerSelectors, getStateWith } from 'reselect-tools'
-
 import { reducerFn, initialState } from './reducer'
-import * as selectors from './selectors'
 
 export const store = createStore(
   reducerFn,
   initialState,
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 )
-
-registerSelectors(selectors)
-getStateWith(() => store.getState())

src/store/reducer.js

@@ -15,15 +15,7 @@ export const initialState = {
   wpm: 300,
   offset: -15,
   running: false,
-  lang: 'en',
+  lang: 'en'
-  textDisplay: {
-    mode: 'pagination',
-    options: {
-      pagination: { pageLength: 50 },
-      segments: { prev: 9, next: 40 },
-      sentences: { prev: 1, next: 8 }
-    }
-  }
 }
 
 const reducer = {

src/store/selectors.js

@@ -11,10 +11,9 @@ const notNull = val => val != null
 // parsedText selectors
 
 export const selectMaxLength = state => state.maxLength
-export const selectOriginalText = state => state.originalText
 
 export const selectParsedText = createSelector(
-  selectOriginalText,
+  state => state.originalText,
   selectMaxLength,
   (originalText, maxLength) => parseText(originalText, maxLength)
 )
@@ -167,26 +166,3 @@ export const selectTotalTime = createSelector(selectIntervals, intervals =>
 // player
 
 export const selectRunning = state => state.running
-
-// text display
-
-export const selectDisplayMode = state => state.textDisplay.mode
-export const selectDisplayOptions = state => state.textDisplay.options
-export const selectCurrentDisplayOptions = createSelector(
-  selectDisplayMode,
-  selectDisplayOptions,
-  (mode, options) => options[mode]
-)
-
-export const selectSegmentWindow = createSelector(
-  selectDisplayMode,
-  selectCurrentDisplayOptions,
-  selectCurrentSegmentIndex,
-  selectSegments,
-  (mode, options, idx, segments) => {
-    const page = Math.floor(idx / options.pageLength)
-    const start = page * options.pageLength
-    const end = page * options.pageLength + options.pageLength
-    return { offset: start, segments: segments.slice(start, end) }
-  }
-)