node server + separate client folder

2026-08-13 11:23:50 +00:00 · 2021-04-05 22:33:31 +02:00
parent d0c8567022
commit c39f3f2dde
56 changed files with 724 additions and 6 deletions
@@ -0,0 +1,77 @@
+import { Button } from '@chakra-ui/button';
+import style from './PlaybackControl.module.css';
+import Countdown from '../../common/components/countdown/Countdown';
+import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
+
+// BUTTON DEFINITION
+const defProps = {
+  colorScheme: 'blackAlpha',
+  variant: 'outline',
+};
+
+const bigSize = 120;
+
+export default function PlaybackControl(props) {
+  const { time, roll } = props;
+
+  return (
+    <div className={style.mainContainer}>
+      <div className={style.timeContainer}>
+        <div className={style.timer}>
+          <Countdown time={time} small />
+        </div>
+      </div>
+      <div className={style.playbackContainer}>
+        <Button
+          width={bigSize}
+          colorScheme='green'
+          className={style.start}
+          disabled={roll}
+          onClick={() => props.playbackControl('play')}
+        >
+          Start
+        </Button>
+        <Button
+          width={bigSize}
+          colorScheme='orange'
+          className={style.pause}
+          disabled={roll}
+          onClick={() => props.playbackControl('pause')}
+        >
+          Pause
+        </Button>
+      </div>
+      <div className={style.trackContainer}>
+        <Button
+          width={bigSize}
+          {...defProps}
+          leftIcon={<ArrowBackIcon />}
+          className={style.prev}
+          disabled={roll}
+          onClick={() => props.playbackControl('previous')}
+        >
+          Prev
+        </Button>
+        <Button
+          width={bigSize}
+          {...defProps}
+          rightIcon={<ArrowForwardIcon />}
+          className={style.next}
+          disabled={roll}
+          onClick={() => props.playbackControl('next')}
+        >
+          Next
+        </Button>
+        <Button
+          width={bigSize}
+          colorScheme='blue'
+          className={style.reset}
+          onClick={() => props.playbackControl('roll')}
+          disabled
+        >
+          Roll
+        </Button>
+      </div>
+    </div>
+  );
+}
@@ -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;
+}