feat: negative timers

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

@@ -2,7 +2,7 @@ import { memo, useEffect, useState } from 'react';
 import { formatDisplay } from '../../dateConfig';
 import styles from './Countdown.module.css';
 
-const Countdown = ({ time, small, hideZeroHours }) => {
+const Countdown = ({ time, small, negative, hideZeroHours }) => {
   const [clock, setClock] = useState(time);
   let display = '-- : -- : --';
 
@@ -12,10 +12,13 @@ const Countdown = ({ time, small, hideZeroHours }) => {
 
   // prepare display string
   if (clock != null && !isNaN(clock))
-    display = formatDisplay(clock, hideZeroHours);
-
+    display = formatDisplay(Math.abs(clock), hideZeroHours);
+  const colour = negative ? '#ff7597' : '#fffffa';
   return (
-    <div className={small ? styles.countdownClockSmall : styles.countdownClock}>
+    <div
+      className={small ? styles.countdownClockSmall : styles.countdownClock}
+      style={{ color: colour }}
+    >
       {display}
     </div>
   );

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

@@ -4,9 +4,8 @@ import styles from './MyProgressBar.module.css';
 export default function MyProgressBar(props) {
   const { now, complete, showElapsed } = props;
   const percentComplete = showElapsed
-  ? clamp((100 - (now * 100) / complete + 2), 0, 100)
-  : clamp((now * 100) / complete - 2, 0, 100)
-
+  ? clamp((100 - (now * 100) / complete), 0, 100)
+  : clamp((now * 100) / complete, 0, 100)
 
   return (
     <div className={styles.progress}>

client/src/features/control/PlaybackControl.jsx

@@ -11,6 +11,7 @@ export default function PlaybackControl() {
   const [playback, setPlayback] = useState(null);
   const [timer, setTimer] = useState({
     clock: null,
+    running: null,
     currentSeconds: null,
     startedAt: null,
     expectedFinish: null,
@@ -90,6 +91,9 @@ export default function PlaybackControl() {
 
   const started = stringFromMillis(timer.startedAt, true);
   const finish = stringFromMillis(timer.expectedFinish, true);
+  const isNegative = timer.running < 0;
+  const isDelayed = false;
+  const isRolling = false;
 
   const incrementProps = {
     size: 'sm',
@@ -99,11 +103,19 @@ export default function PlaybackControl() {
     _focus: { boxShadow: 'none' },
   };
 
+  console.log('debug timer', timer.running);
   return (
     <div className={style.mainContainer}>
       <div className={style.timeContainer}>
+        <div className={style.indicators}>
+          <div className={style.indRoll} />
+          <div
+            className={isNegative ? style.indNegativeActive : style.indNegative}
+          />
+          <div className={style.indDelay} />
+        </div>
         <div className={style.timer}>
-          <Countdown time={timer?.currentSeconds} small />
+          <Countdown time={timer?.running} small negative={isNegative} />
         </div>
         <div className={style.start}>
           <span className={style.tag}>Started at </span>

client/src/features/control/PlaybackControl.module.css

@@ -17,10 +17,10 @@
 .timeContainer {
   display: grid;
   grid-template-areas:
-    'clk clk btn'
-    'sta fin btn';
+    'ind clk clk btn'
+    '... sta fin btn';
   grid-template-rows: 1fr auto;
-  grid-template-columns: 2fr 2fr 22%;
+  grid-template-columns: 1.5em 2fr 2fr 22%;
   gap: 5px;
   justify-items: start;
 }
@@ -29,14 +29,55 @@
   grid-area: clk;
 }
 
+.indicators {
+  grid-area: ind;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.indRoll,
+.indDelay,
+.indNegative {
+  background-color: rgba(0, 0, 0, 0.05);
+  margin: 0 auto;
+}
+
+.indRoll,
+.indDelay {
+  border-radius: 50%;
+  width: 0.8em;
+  height: 0.8em;
+}
+
+.indRollActive {
+  background-color: #2b6cb0;
+}
+
+.indNegative,
+.indNegativeActive {
+  margin: 0 auto;
+  width: 90%;
+  height: 0.3em
+}
+
+.indNegativeActive {
+  background-color: #ff7597;
+}
+
+.indDelayActive {
+  background-color: #dd6b20;
+}
+
 .btn {
   grid-area: btn;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
-  justify-content: space-between;
-  gap: 0.5em;
+  justify-content: space-around;
 }
 
 .minus {