styles: muly

- change progressbar (show countdown instead of ellapsed)
- fix issue where it would not refresh if there was no time
- add style countdown to red background

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

@@ -3,16 +3,21 @@ import styles from './MyProgressBar.module.css';
 
 export default function MyProgressBar(props) {
   const { now, complete, showElapsed } = props;
-  const percentComplete = showElapsed
-  ? clamp((100 - (now * 100) / complete), 0, 100)
-  : clamp((now * 100) / complete, 0, 100)
+
+  let percentComplete = showElapsed ? 0 : 100;
+
+  if (now != null && complete != null) {
+    percentComplete = showElapsed
+      ? clamp(100 - (now * 100) / complete, 0, 100)
+      : clamp((now * 100) / complete, 0, 100);
+  }
 
   return (
-    <div className={styles.progress}>
+    <div className={showElapsed ? styles.progress : styles.progressCountdown}>
       <div
         className={styles.progressBar}
         style={{ width: `${percentComplete}%` }}
-      ></div>
+      />
     </div>
   );
 }

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

@@ -1,13 +1,22 @@
-.progress {
+.progress,
+.progressCountdown {
   height: 2vh;
   background-color: rgba(255, 255, 255, 0.13);
   border-radius: 4px;
 }
 
+.progress {
+  background-color: rgba(255, 255, 255, 0.13);
+}
+
+.progressCountdown {
+  background-color: #ff7597;
+}
+
 .progressBar {
   width: 100%;
   height: 2vh;
-  background-color: rgba(255, 255, 255, 0.79);
+  background-color: rgb(255, 255, 255);
   border-radius: 4px;
   transition: 1s linear;
   transition-property: width;

client/src/features/viewers/presenter/PresenterView.jsx

@@ -71,11 +71,7 @@ export default function PresenterView(props) {
             isPlaying ? style.progressContainer : style.progressContainerPaused
           }
         >
-          <MyProgressBar
-            now={normalisedTime}
-            complete={time.durationSeconds}
-            showElapsed
-          />
+          <MyProgressBar now={normalisedTime} complete={time.durationSeconds} />
         </div>
       )}