From d5721f0479fba37f62c1c350850546ea1299dafd Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Wed, 24 Mar 2021 14:08:33 +0100
Subject: [PATCH] sketch playback component

---
 src/common/components/countdown/Countdown.jsx |  6 ++-
 .../components/countdown/Countdown.module.css |  8 +++
 src/features/control/PlaybackControl.jsx      | 50 +++++++++++++++++++
 .../control/PlaybackControl.module.css        | 43 ++++++++++++++++
 4 files changed, 105 insertions(+), 2 deletions(-)
 create mode 100644 src/features/control/PlaybackControl.jsx
 create mode 100644 src/features/control/PlaybackControl.module.css

diff --git a/src/common/components/countdown/Countdown.jsx b/src/common/components/countdown/Countdown.jsx
index 49ce8fa58..d1665348c 100644
--- a/src/common/components/countdown/Countdown.jsx
+++ b/src/common/components/countdown/Countdown.jsx
@@ -10,12 +10,14 @@ function display(seconds) {
   else return [hours, minutes, seconds % 60].map(format).join(':');
 }
 
-export default function Countdown({ time }) {
+export default function Countdown({ time, small }) {
   const [counter, setCounter] = useState(time);
 
   useEffect(() => {
     counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
   }, [counter]);
 
-  return <div className={styles.countdownClock}>{display(counter)}</div>;
+  return <div
+  className={small ? styles.countdownClockSmall : styles.countdownClock}
+  >{display(counter)}</div>;
 }
diff --git a/src/common/components/countdown/Countdown.module.css b/src/common/components/countdown/Countdown.module.css
index ae4f59410..4a9db03b0 100644
--- a/src/common/components/countdown/Countdown.module.css
+++ b/src/common/components/countdown/Countdown.module.css
@@ -8,4 +8,12 @@
   text-align: center;
   letter-spacing: 0.125em;
   line-height: 0.9;
+}
+
+.countdownClockSmall {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 6em;
+  text-align: center;
+  letter-spacing: 0.125em;
+  line-height: 0.9;
 }
\ No newline at end of file
diff --git a/src/features/control/PlaybackControl.jsx b/src/features/control/PlaybackControl.jsx
new file mode 100644
index 000000000..96bcd0d71
--- /dev/null
+++ b/src/features/control/PlaybackControl.jsx
@@ -0,0 +1,50 @@
+import { Button } from '@chakra-ui/button';
+import style from './PlaybackControl.module.css';
+import Countdown from '../../common/components/countdown/Countdown';
+
+export default function PlaybackControl() {
+  return (
+    <div className={style.mainContainer}>
+      <div className={style.timeContainer}>
+        <div className={style.timer}>
+          <Countdown time={15} small />
+        </div>
+        <Button width={50} colorScheme='blackAlpha' className={style.minu1}>
+          -1
+        </Button>
+        <Button width={50} colorScheme='blackAlpha' className={style.plus1}>
+          +1
+        </Button>
+        <Button width={50} colorScheme='blackAlpha' className={style.minu5}>
+          -5
+        </Button>
+        <Button width={50} colorScheme='blackAlpha' className={style.plus5}>
+          +5
+        </Button>
+      </div>
+
+      <div className={style.playbackContainer}>
+        <Button width={120} colorScheme='green' className={style.start}>
+          Start
+        </Button>
+        <Button width={120} colorScheme='orange' className={style.pause}>
+          Pause
+        </Button>
+        <Button width={120} colorScheme='yellow' className={style.reset}>
+          Reset
+        </Button>
+      </div>
+      <div className={style.trackContainer}>
+        <Button width={100} colorScheme='blackAlpha' className={style.prev}>
+          Prev
+        </Button>
+        <Button width={100} colorScheme='blackAlpha' className={style.next}>
+          Next
+        </Button>
+        <Button width={100} colorScheme='blackAlpha' className={style.reset}>
+          Roll
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/control/PlaybackControl.module.css b/src/features/control/PlaybackControl.module.css
new file mode 100644
index 000000000..21007be9e
--- /dev/null
+++ b/src/features/control/PlaybackControl.module.css
@@ -0,0 +1,43 @@
+.mainContainer {
+  width: 90%;
+  display: flex;
+  margin: 0 auto;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.timeContainer {
+  display: grid;
+  gap: 5px;
+  grid-template-areas:
+    'timer plus1 plus5'
+    'timer minu1 minu5';
+  grid-template-columns: auto 50px 50px;
+}
+
+.timer {
+  grid-area: timer;
+}
+
+.plus1 {
+  grid-area: plus1;
+}
+
+.plus5 {
+  grid-area: plus5;
+}
+
+.minu1 {
+  grid-area: minu1;
+}
+
+.minu5 {
+  grid-area: minu5;
+}
+
+.playbackContainer, .trackContainer {
+  display: flex;
+  justify-content: space-evenly;
+  padding-top: 0.5em;
+
+}
\ No newline at end of file