Add language option

src/components/GutenbergSearch.js

@@ -3,7 +3,7 @@ import axios from 'axios'
 import { useDispatch } from 'react-redux'
 import { debounce } from 'debounce'
 
-import { setText } from '../store/actions.js'
+import { setText, setLang } from '../store/actions.js'
 
 async function search(searchTerm) {
   const regex = new RegExp(searchTerm, 'i')
@@ -29,6 +29,7 @@ const Book = ({ entry }) => {
     const url = `https://gutenberg.muperfredi.de/texts/${id}/stripped-body`
     const text = await axios.get(url).then(res => res.data.body)
     dispatch(setText(text))
+    dispatch(setLang(language[0]))
   }
   return (
     <div>

src/components/Options.js

@@ -2,15 +2,18 @@ import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { debounce } from 'debounce'
 
-import { setMaxLength, setWpm, setOffset } from '../store/actions'
+import { setMaxLength, setWpm, setOffset, setLang } from '../store/actions'
 import { Slider } from './Slider'
-import { selectOffset } from '../store/selectors'
+import { selectOffset, selectLang } from '../store/selectors'
+
+const availableLanguages = ['en', 'de']
 
 export const Options = () => {
   const dispatch = useDispatch()
   const maxLength = useSelector(state => state.maxLength)
   const wpm = useSelector(state => state.wpm)
   const offset = useSelector(selectOffset)
+  const lang = useSelector(selectLang)
 
   return (
     <div>
@@ -36,6 +39,14 @@ export const Options = () => {
         value={offset}
         onChange={val => dispatch(setOffset(val))}
       />
+      <label>
+        Language:
+        <select value={lang} onChange={e => dispatch(setLang(e.target.value))}>
+          {availableLanguages.map(l => (
+            <option key={l}>{l}</option>
+          ))}
+        </select>
+      </label>
     </div>
   )
 }

src/components/PlayerControl.js

@@ -4,7 +4,8 @@ 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'
@@ -16,6 +17,8 @@ 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/lib/intervalModifier.js

@@ -1,36 +1,16 @@
-const commonWords = [
+const commonWordsPerLang = {
-  'I',
+  en: 'i,he,she,it,you,the,a,to,of,and,in',
-  'he',
+  de: 'ich,er,sie,es,du,der,die,das,ein,zu,von,und,in'
-  'she',
+}
-  'it',
-  'you',
-  'the',
-  'a',
-  'to',
-  'of',
-  'and',
-  'in'
-]
-const punctuations = [
-  '.',
-  ',',
-  ':',
-  ';',
-  '\\',
-  '=',
-  '/',
-  '*',
-  '’',
-  '(',
-  ')',
-  '&'
-]
 
-export function intervalModifier(segment) {
+const punctuations = '.,:;\\=/*’()&'
+
+export function intervalModifier(segment, lang) {
   // double the interval on punctuations
-  if (punctuations.some(el => segment.includes(el))) return 2
+  if (punctuations.split('').some(el => segment.includes(el))) return 2
   // half the interval on common words
-  if (commonWords.includes(segment)) return 0.5
+  const commonWords = commonWordsPerLang[lang] || ''
+  if (commonWords.split(',').includes(segment.toLowerCase())) return 0.5
   // unmodified interval
   return 1
 }

src/store/actions.js

@@ -15,3 +15,4 @@ export const setOffset = offset => ({ type: 'SET_OFFSET', payload: offset })
 export const start = () => ({ type: 'START' })
 export const stop = () => ({ type: 'STOP' })
 export const pause = () => ({ type: 'PAUSE' })
+export const setLang = lang => ({ type: 'SET_LANG', payload: lang })

src/store/reducer.js

@@ -10,11 +10,12 @@ import {
 export const initialState = {
   originalText: 'Sample Text',
   curIdx: 0,
-  maxLength: 8,
+  maxLength: 10,
   isPlaying: false,
   wpm: 300,
   offset: -15,
-  running: false
+  running: false,
+  lang: 'en'
 }
 
 const reducer = {
@@ -40,7 +41,8 @@ const reducer = {
   SET_OFFSET: (state, payload) => ({ ...state, offset: payload }),
   START: state => ({ ...state, running: true }),
   STOP: state => ({ ...state, running: false, curIdx: 0 }),
-  PAUSE: state => ({ ...state, running: false })
+  PAUSE: state => ({ ...state, running: false }),
+  SET_LANG: (state, payload) => ({ ...state, lang: payload })
 }
 
 export const reducerFn = (state, { type, payload }) => {

src/store/selectors.js

@@ -142,12 +142,15 @@ export const safeSelectPrevSentence = createSelector(
 
 export const selectWpm = state => state.wpm
 export const selectOffset = state => state.offset
+export const selectLang = state => state.lang
 export const selectBaseInterval = createSelector(selectWpm, wpm => 60000 / wpm)
 
 export const selectIntervals = createSelector(
   selectSegments,
   selectBaseInterval,
-  (segments, interval) => segments.map(seg => interval * intervalModifier(seg))
+  selectLang,
+  (segments, interval, lang) =>
+    segments.map(seg => interval * intervalModifier(seg, lang))
 )
 
 export const selectInterval = createSelector(