diff --git a/src/components/RsvpReader.js b/src/components/RsvpReader.js
index c153d8f..12f9b6b 100644
--- a/src/components/RsvpReader.js
+++ b/src/components/RsvpReader.js
@@ -9,6 +9,7 @@ import { PlayerControl } from './PlayerControl'
import styles from './RsvpReader.css'
import { PipeMarker, BorderMarker } from './PivotMarker'
import { Progress } from './Progress'
+import { TimeCalc } from './TimeCalc'
export const RsvpReader = () => {
return (
@@ -27,6 +28,7 @@ export const RsvpReader = () => {
+
diff --git a/src/components/TimeCalc.js b/src/components/TimeCalc.js
new file mode 100644
index 0000000..aaf3a67
--- /dev/null
+++ b/src/components/TimeCalc.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { selectSegments, selectWpm } from '../store/selectors'
+
+function formatTime(totalSeconds) {
+ const hours = Math.floor(totalSeconds / 3600)
+ const minutes = Math.floor((totalSeconds % 3600) / 60)
+ const seconds = Math.floor(totalSeconds % 60)
+ const pad = num => String(num).padStart(2, '0')
+ return `${hours}:${pad(minutes)}:${pad(seconds)}`
+}
+
+export const TimeCalc = () => {
+ const wpm = useSelector(selectWpm)
+ const segments = useSelector(selectSegments)
+ const minutesNeeded = segments.length / wpm
+ return (
+
+
Time needed
+ Time needed for Text: {formatTime(minutesNeeded * 60)}
+
+ )
+}