diff --git a/src/components/RsvpReader.js b/src/components/RsvpReader.js
index da981f3..28694e6 100644
--- a/src/components/RsvpReader.js
+++ b/src/components/RsvpReader.js
@@ -30,7 +30,9 @@ export const RsvpReader = () => {
-
- {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)
+ <>
+
+ {mode}, {offset}
+
+
+ {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)
- return (
-
- {isWordStart && ' '}
-
- {segment}
+ return (
+
+ {isWordStart && ' '}
+
+ {segment}
+
-
- )
- })}
-
+ )
+ })}
+
+ >
)
}
diff --git a/src/store/reducer.js b/src/store/reducer.js
index f913c0e..f2d9bab 100644
--- a/src/store/reducer.js
+++ b/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 = {
diff --git a/src/store/selectors.js b/src/store/selectors.js
index cb8fc89..92d560d 100644
--- a/src/store/selectors.js
+++ b/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) }
+ }
+)