feat: stage manager view

small fixes in other components
- message control fields have value from socket
- added millis to string

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

@@ -1,16 +1,7 @@
 import { useEffect, useState } from 'react';
+import { formatDisplay } from '../../dateConfig';
 import styles from './Countdown.module.css';
 
-function formatDisplay(seconds, hideZero) {
-  const format = (val) => `0${Math.floor(val)}`.slice(-2);
-  const hours = seconds / 3600;
-  const minutes = (seconds % 3600) / 60;
-
-  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, hideZeroHours } = props;
   const [clock, setClock] = useState(time);

client/src/common/dateConfig.js

@@ -20,6 +20,17 @@ export const stringFromMillis = (
     : `${parseInt(hours) ? `${hours}` : '00'}${delim}${minutes}`;
 };
 
+// another go at simpler string formatting (counters)
+export function formatDisplay(seconds, hideZero) {
+  const format = (val) => `0${Math.floor(val)}`.slice(-2);
+  const hours = seconds / 3600;
+  const minutes = (seconds % 3600) / 60;
+
+  if (hideZero && hours < 1)
+    return [minutes, seconds % 60].map(format).join(':');
+  else return [hours, minutes, seconds % 60].map(format).join(':');
+}
+
 // millis to seconds
 export const millisToSeconds = (millis) => {
   return Math.floor(millis / 1000);