From 11b6498760d5442a97da2feafa5fdb13956ea753 Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Tue, 8 Jun 2021 13:26:31 +0200
Subject: [PATCH] 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
---
 .../components/myProgressBar/MyProgressBar.jsx    | 15 ++++++++++-----
 .../myProgressBar/MyProgressBar.module.css        | 13 +++++++++++--
 .../features/viewers/presenter/PresenterView.jsx  |  6 +-----
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/client/src/common/components/myProgressBar/MyProgressBar.jsx b/client/src/common/components/myProgressBar/MyProgressBar.jsx
index dda5e48c6..e7006cdaa 100644
--- a/client/src/common/components/myProgressBar/MyProgressBar.jsx
+++ b/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>
   );
 }
diff --git a/client/src/common/components/myProgressBar/MyProgressBar.module.css b/client/src/common/components/myProgressBar/MyProgressBar.module.css
index 6cfcb0c25..1a24b7fd4 100644
--- a/client/src/common/components/myProgressBar/MyProgressBar.module.css
+++ b/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;
diff --git a/client/src/features/viewers/presenter/PresenterView.jsx b/client/src/features/viewers/presenter/PresenterView.jsx
index 53a74faab..edb8bb92b 100644
--- a/client/src/features/viewers/presenter/PresenterView.jsx
+++ b/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>
       )}