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,38 +5,48 @@ 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
+        {mode}, {offset}
-        const isWordStart = words.includes(idx)
+      </div>
-        const wordBeginning = isWordStart
+      <div>
-          ? idx
+        {segments.map((segment, idx) => {
-          : getNextSmallerNumber(idx, words)
+          idx = idx + offset
-        const isSentenceStart = sentences.includes(wordBeginning)
+          const isCurrent = curSegment === idx
+          const isWordStart = words.includes(idx)
+          const wordBeginning = isWordStart
+            ? 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/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) }
+  }
+)