remove text output debug

package-lock.json

@@ -9796,6 +9796,14 @@
       "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,7 +24,8 @@
     "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,8 +4,7 @@ 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'
@@ -17,8 +16,6 @@ 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,7 +30,9 @@ 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 {
-  text-decoration: underline;
+  background-color: yellow;
 }
 
 .sentenceBeginning {

src/components/TextOutput.js

@@ -5,38 +5,45 @@ 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, sentences, words } = useSelector(selectParsedText)
+  const { segments, offset } = useSelector(selectSegmentWindow)
+  const { sentences, words } = useSelector(selectParsedText)
   const curSegment = useSelector(selectCurrentSegmentIndex)
+  const mode = useSelector(selectDisplayMode)
   return (
-    <div>
+    <>
-      {segments.map((segment, idx) => {
+      <div>
-        const isCurrent = curSegment === idx
+        {segments.map((segment, idx) => {
-        const isWordStart = words.includes(idx)
+          idx = idx + offset
-        const wordBeginning = isWordStart
+          const isCurrent = curSegment === idx
-          ? idx
+          const isWordStart = words.includes(idx)
-          : getNextSmallerNumber(idx, words)
+          const wordBeginning = isWordStart
-        const isSentenceStart = sentences.includes(wordBeginning)
+            ? idx
+            : getNextSmallerNumber(idx, words)
+          const isSentenceStart = sentences.includes(wordBeginning)
 
-        return (
+          return (
-          <span key={idx}>
+            <span key={idx}>
-            {isWordStart && ' '}
+              {isWordStart && ' '}
-            <span
+              <span
-              className={classNames({
+                className={classNames({
-                [styles.current]: isCurrent,
+                  [styles.current]: isCurrent,
-                [styles.sentenceBeginning]: isSentenceStart
+                  [styles.sentenceBeginning]: isSentenceStart
-              })}
+                })}
-            >
+              >
-              {segment}
+                {segment}
+              </span>
             </span>
-          </span>
+          )
-        )
+        })}
-      })}
+      </div>
-    </div>
+    </>
   )
 }

src/lib/parseText.js

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

src/store/index.js

@@ -1,8 +1,14 @@
 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,7 +15,15 @@ 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,9 +11,10 @@ const notNull = val => val != null
 // parsedText selectors
 
 export const selectMaxLength = state => state.maxLength
+export const selectOriginalText = state => state.originalText
 
 export const selectParsedText = createSelector(
-  state => state.originalText,
+  selectOriginalText,
   selectMaxLength,
   (originalText, maxLength) => parseText(originalText, maxLength)
 )
@@ -166,3 +167,26 @@ 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) }
+  }
+)