From c774725270eb59f8697f9757fb724eb2a5ca05eb Mon Sep 17 00:00:00 2001
From: Alfred Melch <dev@melch.pro>
Date: Sun, 22 Dec 2019 12:17:15 +0100
Subject: [PATCH] Add a progress bar

---
 src/components/Progress.js   | 15 +++++++++++++++
 src/components/RsvpReader.js |  2 ++
 2 files changed, 17 insertions(+)
 create mode 100644 src/components/Progress.js

diff --git a/src/components/Progress.js b/src/components/Progress.js
new file mode 100644
index 0000000..8f1115f
--- /dev/null
+++ b/src/components/Progress.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { selectCurrentSegmentIndex, selectSegments } from '../store/selectors'
+
+export const Progress = () => {
+  const curIdx = useSelector(selectCurrentSegmentIndex)
+  const segments = useSelector(selectSegments)
+  return (
+    <progress
+      style={{ width: '100%' }}
+      value={curIdx}
+      max={segments.length - 1}
+    />
+  )
+}
diff --git a/src/components/RsvpReader.js b/src/components/RsvpReader.js
index 2a4192f..c153d8f 100644
--- a/src/components/RsvpReader.js
+++ b/src/components/RsvpReader.js
@@ -8,6 +8,7 @@ import { PlayerControl } from './PlayerControl'
 
 import styles from './RsvpReader.css'
 import { PipeMarker, BorderMarker } from './PivotMarker'
+import { Progress } from './Progress'
 
 export const RsvpReader = () => {
   return (
@@ -16,6 +17,7 @@ export const RsvpReader = () => {
         <TextInput />
       </div>
       <div className={styles.mainItem}>
+        <Progress />
         <BorderMarker>
           <Segment />
         </BorderMarker>