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-tools": "0.0.7"
+    "reselect": "^4.0.0"
   },
   "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}>
-        <TextOutput />
-      </div>
+      <div className={styles.item}>{/* <TextOutput /> */}</div>
     </div>
   )
 }

src/components/TextOutput.css

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

src/components/TextOutput.js

@@ -5,45 +5,38 @@ import classNames from 'classnames'
 import { getNextSmallerNumber } from '../lib/array-util.js'
 import {
   selectParsedText,
-  selectCurrentSegmentIndex,
-  selectDisplayMode,
-  selectSegmentWindow
+  selectCurrentSegmentIndex
 } from '../store/selectors.js'
 
 import styles from './TextOutput.css'
 
 export const TextOutput = () => {
-  const { segments, offset } = useSelector(selectSegmentWindow)
-  const { sentences, words } = useSelector(selectParsedText)
+  const { segments, 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
-            ? idx
-            : getNextSmallerNumber(idx, words)
-          const isSentenceStart = sentences.includes(wordBeginning)
+    <div>
+      {segments.map((segment, idx) => {
+        const isCurrent = curSegment === idx
+        const isWordStart = words.includes(idx)
+        const wordBeginning = isWordStart
+          ? idx
+          : getNextSmallerNumber(idx, words)
+        const isSentenceStart = sentences.includes(wordBeginning)
 
-          return (
-            <span key={idx}>
-              {isWordStart && ' '}
-              <span
-                className={classNames({
-                  [styles.current]: isCurrent,
-                  [styles.sentenceBeginning]: isSentenceStart
-                })}
-              >
-                {segment}
-              </span>
+        return (
+          <span key={idx}>
+            {isWordStart && ' '}
+            <span
+              className={classNames({
+                [styles.current]: isCurrent,
+                [styles.sentenceBeginning]: isSentenceStart
+              })}
+            >
+              {segment}
             </span>
-          )
-        })}
-      </div>
-    </>
+          </span>
+        )
+      })}
+    </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
-      .split('')
-      .some(ending => word.endsWith(ending))
+    sentenceFlag = word.endsWith('.')
   }
 
   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',
-  textDisplay: {
-    mode: 'pagination',
-    options: {
-      pagination: { pageLength: 50 },
-      segments: { prev: 9, next: 40 },
-      sentences: { prev: 1, next: 8 }
-    }
-  }
+  lang: 'en'
 }
 
 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) }
-  }
-)