Add a progress bar

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}
+    />
+  )
+}

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>