feat: presenter view

- connected to websockets
- some styling changes
- reusable components
- some small bugfixes

client/src/common/components/countdown/Countdown.jsx

@@ -1,16 +1,18 @@
 import { useEffect, useState } from 'react';
 import styles from './Countdown.module.css';
 
-function formatDisplay(seconds) {
+function formatDisplay(seconds, hideZero) {
   const format = (val) => `0${Math.floor(val)}`.slice(-2);
   const hours = seconds / 3600;
   const minutes = (seconds % 3600) / 60;
 
-  return [hours, minutes, seconds % 60].map(format).join(':');
+  if (hideZero && hours < 1)
+    return [minutes, seconds % 60].map(format).join(':');
+  else return [hours, minutes, seconds % 60].map(format).join(':');
 }
 
 export default function Countdown(props) {
-  const { time, small } = props;
+  const { time, small, hideZeroHours } = props;
   const [clock, setClock] = useState(time);
   let display = '-- : -- : --';
 
@@ -19,7 +21,8 @@ export default function Countdown(props) {
   }, [time]);
 
   // prepare display string
-  if (clock != null && !isNaN(clock)) display = formatDisplay(clock);
+  if (clock != null && !isNaN(clock))
+    display = formatDisplay(clock, hideZeroHours);
 
   return (
     <div className={small ? styles.countdownClockSmall : styles.countdownClock}>

client/src/common/components/countdown/Countdown.module.css

@@ -9,11 +9,10 @@
 
 /* Viewers */
 .countdownClock {
-  font-size: 18vw;
-  margin-top: 6vh;
-  margin-bottom: 5vh;
+  font-size: 21vw;
+  line-height: 21vw;
   text-align: center;
-  letter-spacing: 0.125em;
+  letter-spacing: 1vw;
 }
 
 /* Editor */

client/src/common/components/myProgressBar/MyProgressBar.jsx

@@ -1,15 +1,15 @@
 import { clamp } from '../../../app/utils';
 import styles from './MyProgressBar.module.css';
 
-export default function MyProgressBar({ normalisedComplete }) {
-  const percentComplete = clamp(100 - normalisedComplete * 100, 0, 100);
-  const completeWidth = `${percentComplete}%`;
+export default function MyProgressBar(props) {
+  const { now, complete } = props;
+  const percentComplete = clamp((now * 100) / complete, 0, 100);
 
   return (
     <div className={styles.progress}>
       <div
         className={styles.progressBar}
-        style={{ width: completeWidth }}
+        style={{ width: `${percentComplete}%` }}
       ></div>
     </div>
   );

client/src/common/components/myProgressBar/MyProgressBar.module.css

@@ -1,21 +1,13 @@
 .progress {
-  padding: 1vh;
-  width: 90%;
-  margin: 0 auto;
-  background: rgba(0, 0, 0, 0.25);
-  border-radius: 6px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
+  height: 2vh;
+  background-color: rgba(255, 255, 255, 0.13);
+  border-radius: 4px;
 }
 
 .progressBar {
+  width: 30%;
   height: 2vh;
-  background: linear-gradient(
-    90deg,
-    rgb(145, 255, 191, 1) 0%,
-    rgba(145, 255, 191, 0.8) 20%,
-    rgba(145, 255, 191, 0.5) 50%,
-    rgba(145, 255, 191, 0.2) 100%
-  );
+  background-color: rgba(255, 255, 255, 0.79);
   border-radius: 4px;
   transition: 0.4s linear;
   transition-property: width, background-color;

client/src/common/dateConfig.js

@@ -10,11 +10,13 @@ export const stringFromMillis = (
 ) => {
   if (ms === null) return ifNull;
   const showWith0 = (value) => (value < 10 ? `0${value}` : value);
-  const hours = showWith0(Math.floor((ms / (1000 * 60 * 60)) % 60));
+  const hours = showWith0(Math.floor(((ms / (1000 * 60 * 60)) % 60) % 24));
   const minutes = showWith0(Math.floor((ms / (1000 * 60)) % 60));
   const seconds = showWith0(Math.floor((ms / 1000) % 60));
   return showSeconds
-    ? `${parseInt(hours) ? `${hours}${delim}` : ''}${minutes}${delim}${seconds}`
+    ? `${
+        parseInt(hours) ? `${hours}${delim}` : `00${delim}`
+      }${minutes}${delim}${seconds}`
     : `${parseInt(hours) ? `${hours}` : '00'}${delim}${minutes}`;
 };