node server + separate client folder

2026-08-12 19:03:47 +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>
+  );
+}