From 46f3d1f095575fe5676ffcf52d134e35e20544c1 Mon Sep 17 00:00:00 2001
From: Alfred Melch <dev@melch.pro>
Date: Sat, 14 Dec 2019 14:08:19 +0100
Subject: [PATCH] Integrate PlayerControl in SegmentControl

---
 src/components/{RsvpOptions.js => Options.js} |  2 +-
 .../{RsvpPlayer.js => PlayerControl.js}       | 20 +++++++++----------
 src/components/RsvpReader.js                  | 13 ++++++------
 .../{MainControl.js => SegmentControl.js}     |  3 ++-
 4 files changed, 19 insertions(+), 19 deletions(-)
 rename src/components/{RsvpOptions.js => Options.js} (95%)
 rename src/components/{RsvpPlayer.js => PlayerControl.js} (69%)
 rename src/components/{MainControl.js => SegmentControl.js} (93%)

diff --git a/src/components/RsvpOptions.js b/src/components/Options.js
similarity index 95%
rename from src/components/RsvpOptions.js
rename to src/components/Options.js
index 5394ebd..9a8fcf7 100644
--- a/src/components/RsvpOptions.js
+++ b/src/components/Options.js
@@ -3,7 +3,7 @@ import { useSelector, useDispatch } from 'react-redux'
 
 import { setMaxLength, setWpm } from '../store/actions'
 
-export const RsvpOptions = () => {
+export const Options = () => {
   const dispatch = useDispatch()
   const maxLength = useSelector(state => state.maxLength)
   const wpm = useSelector(state => state.wpm)
diff --git a/src/components/RsvpPlayer.js b/src/components/PlayerControl.js
similarity index 69%
rename from src/components/RsvpPlayer.js
rename to src/components/PlayerControl.js
index 8bc0a26..f3d1013 100644
--- a/src/components/RsvpPlayer.js
+++ b/src/components/PlayerControl.js
@@ -11,7 +11,7 @@ import { FiPlay, FiPause, FiSquare } from 'react-icons/fi'
 import { useInterval } from './generics/useInterval'
 import { IconButton } from '../styles/IconButton'
 
-export const RsvpPlayer = () => {
+export const PlayerControl = () => {
   const dispatch = useDispatch()
   const running = useSelector(selectRunning)
   const hasNext = useSelector(hasNextSegment)
@@ -26,15 +26,13 @@ export const RsvpPlayer = () => {
   )
 
   return (
-    <div>
-      <div>
-        <IconButton Icon={FiSquare} onClick={() => dispatch(stop())} />
-        <IconButton
-          Icon={running ? FiPause : FiPlay}
-          onClick={() => dispatch(running ? pause() : start())}
-          disabled={!hasNext}
-        />
-      </div>
-    </div>
+    <>
+      <IconButton Icon={FiSquare} onClick={() => dispatch(stop())} />
+      <IconButton
+        Icon={running ? FiPause : FiPlay}
+        onClick={() => dispatch(running ? pause() : start())}
+        disabled={!hasNext}
+      />
+    </>
   )
 }
diff --git a/src/components/RsvpReader.js b/src/components/RsvpReader.js
index 4f56dca..04925c9 100644
--- a/src/components/RsvpReader.js
+++ b/src/components/RsvpReader.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { TextInput } from './TextInput'
 import { TextOutput } from './TextOutput'
-import { MainControl } from './MainControl'
+import { SegmentControl } from './SegmentControl'
 import { RsvpSegment } from './RsvpSegment'
-import { RsvpOptions } from './RsvpOptions'
-import { RsvpPlayer } from './RsvpPlayer'
+import { Options } from './Options'
+import { PlayerControl } from './PlayerControl'
 
 import styles from './RsvpReader.css'
 
@@ -16,9 +16,10 @@ export const RsvpReader = () => {
       </div>
       <div className={styles.mainItem}>
         <RsvpSegment />
-        <MainControl></MainControl>
-        <RsvpOptions></RsvpOptions>
-        <RsvpPlayer />
+        <SegmentControl>
+          <PlayerControl />
+        </SegmentControl>
+        <Options></Options>
       </div>
       <div className={styles.item}>
         <TextOutput />
diff --git a/src/components/MainControl.js b/src/components/SegmentControl.js
similarity index 93%
rename from src/components/MainControl.js
rename to src/components/SegmentControl.js
index 7e76000..9b12ea8 100644
--- a/src/components/MainControl.js
+++ b/src/components/SegmentControl.js
@@ -16,7 +16,7 @@ import {
   decrementWord
 } from '../store/actions'
 
-export const MainControl = () => {
+export const SegmentControl = ({ children }) => {
   const dispatch = useDispatch()
   return (
     <div>
@@ -30,6 +30,7 @@ export const MainControl = () => {
         title="Previous Word"
         onClick={() => dispatch(decrementWord())}
       />
+      {children}
       <IconButton
         Icon={FiSkipForward}
         title="Next Word"