From 3fb84e0de069d7b2e609589a7ced735a105eab3e Mon Sep 17 00:00:00 2001 From: Alfred Melch Date: Sun, 22 Dec 2019 18:07:01 +0100 Subject: [PATCH] Add language option --- src/components/GutenbergSearch.js | 3 ++- src/components/Options.js | 15 ++++++++++-- src/components/PlayerControl.js | 5 +++- src/lib/intervalModifier.js | 40 ++++++++----------------------- src/store/actions.js | 1 + src/store/reducer.js | 8 ++++--- src/store/selectors.js | 5 +++- 7 files changed, 39 insertions(+), 38 deletions(-) diff --git a/src/components/GutenbergSearch.js b/src/components/GutenbergSearch.js index c797316..b153c76 100644 --- a/src/components/GutenbergSearch.js +++ b/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 (
diff --git a/src/components/Options.js b/src/components/Options.js index 7c354c2..d2f7436 100644 --- a/src/components/Options.js +++ b/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 (
@@ -36,6 +39,14 @@ export const Options = () => { value={offset} onChange={val => dispatch(setOffset(val))} /> +
) } diff --git a/src/components/PlayerControl.js b/src/components/PlayerControl.js index d8d4dd3..76b6bfb 100644 --- a/src/components/PlayerControl.js +++ b/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( () => { diff --git a/src/lib/intervalModifier.js b/src/lib/intervalModifier.js index 61900c5..ea25d4a 100644 --- a/src/lib/intervalModifier.js +++ b/src/lib/intervalModifier.js @@ -1,36 +1,16 @@ -const commonWords = [ - 'I', - 'he', - 'she', - 'it', - 'you', - 'the', - 'a', - 'to', - 'of', - 'and', - 'in' -] -const punctuations = [ - '.', - ',', - ':', - ';', - '\\', - '=', - '/', - '*', - '’', - '(', - ')', - '&' -] +const commonWordsPerLang = { + en: 'i,he,she,it,you,the,a,to,of,and,in', + de: 'ich,er,sie,es,du,der,die,das,ein,zu,von,und,in' +} -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 } diff --git a/src/store/actions.js b/src/store/actions.js index d886f99..674fbbf 100644 --- a/src/store/actions.js +++ b/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 }) diff --git a/src/store/reducer.js b/src/store/reducer.js index 5d40a8f..f913c0e 100644 --- a/src/store/reducer.js +++ b/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 }) => { diff --git a/src/store/selectors.js b/src/store/selectors.js index d602ee2..cb8fc89 100644 --- a/src/store/selectors.js +++ b/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(