Add paginated outputText

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,17 +5,26 @@ 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>
+        {mode}, {offset}
+      </div>
       <div>
         {segments.map((segment, idx) => {
+          idx = idx + offset
           const isCurrent = curSegment === idx
           const isWordStart = words.includes(idx)
           const wordBeginning = isWordStart
@@ -38,5 +47,6 @@ export const TextOutput = () => {
           )
         })}
       </div>
+    </>
   )
 }

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