src/components/RsvpReader.js

@@ -9,7 +9,7 @@ import { PlayerControl } from './PlayerControl'
 import styles from './RsvpReader.css'
 import { BorderMarker } from './PivotMarker'
 import { Progress } from './Progress'
-import { TotalTime } from './TotalTime'
+import { TimeCalc } from './TimeCalc'
 
 export const RsvpReader = () => {
   return (
@@ -28,7 +28,7 @@ export const RsvpReader = () => {
           </SegmentControl>
         </div>
         <Options></Options>
-        <TotalTime />
+        <TimeCalc />
       </div>
       <div className={styles.item}>{/* <TextOutput /> */}</div>
     </div>

src/components/TimeCalc.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
-import { selectTotalTime } from '../store/selectors'
+import { selectSegments, selectWpm } from '../store/selectors'
 
 function formatTime(totalSeconds) {
   const hours = Math.floor(totalSeconds / 3600)
@@ -10,12 +10,14 @@ function formatTime(totalSeconds) {
   return `${hours}:${pad(minutes)}:${pad(seconds)}`
 }
 
-export const TotalTime = () => {
-  const millis = useSelector(selectTotalTime)
+export const TimeCalc = () => {
+  const wpm = useSelector(selectWpm)
+  const segments = useSelector(selectSegments)
+  const minutesNeeded = segments.length / wpm
   return (
     <div>
       <h2>Time needed</h2>
-      Time needed for Text: {formatTime(millis / 1000)}
+      Time needed for Text: {formatTime(minutesNeeded * 60)}
     </div>
   )
 }

src/lib/intervalModifier.js

@@ -1,36 +0,0 @@
-const commonWords = [
-  'I',
-  'he',
-  'she',
-  'it',
-  'you',
-  'the',
-  'a',
-  'to',
-  'of',
-  'and',
-  'in'
-]
-const punctuations = [
-  '.',
-  ',',
-  ':',
-  ';',
-  '\\',
-  '=',
-  '/',
-  '*',
-  '’',
-  '(',
-  ')',
-  '&'
-]
-
-export function intervalModifier(segment) {
-  // double the interval on punctuations
-  if (punctuations.some(el => segment.includes(el))) return 2
-  // half the interval on common words
-  if (commonWords.includes(segment)) return 0.5
-  // unmodified interval
-  return 1
-}

src/store/selectors.js

@@ -3,7 +3,6 @@ import { parseText } from '../lib/parseText'
 
 import { getNextBiggerNumber, getNextSmallerNumber } from '../lib/array-util.js'
 import { pivotize } from '../lib/pivotize'
-import { intervalModifier } from '../lib/intervalModifier'
 
 // util
 const notNull = val => val != null
@@ -138,27 +137,11 @@ export const safeSelectPrevSentence = createSelector(
   (has, sentence, idx) => (has ? sentence : idx)
 )
 
-// options2
+// options
 
 export const selectWpm = state => state.wpm
+export const selectInterval = createSelector(selectWpm, wpm => 60000 / wpm)
 export const selectOffset = state => state.offset
-export const selectBaseInterval = createSelector(selectWpm, wpm => 60000 / wpm)
-
-export const selectIntervals = createSelector(
-  selectSegments,
-  selectBaseInterval,
-  (segments, interval) => segments.map(seg => interval * intervalModifier(seg))
-)
-
-export const selectInterval = createSelector(
-  selectIntervals,
-  selectCurrentSegmentIndex,
-  (intervals, idx) => intervals[idx]
-)
-
-export const selectTotalTime = createSelector(selectIntervals, intervals =>
-  intervals.reduce((a, b) => a + b, 0)
-)
 
 // player
 

src/styles/IconButton.css

@@ -13,9 +13,9 @@
 }
 
 .svgButton svg {
-  display: block;
   outline: none;
   transition: transform 0.1s linear;
+  vertical-align: middle;
 }
 
 .svgButton:focus {