From 8abf6aee7007b10dd2d05b6f8c886e4d790f7129 Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Sun, 28 May 2023 10:26:07 +0200
Subject: [PATCH] fix: progress bar handles added time (#416)

---
 apps/client/src/features/viewers/backstage/Backstage.tsx | 4 +++-
 apps/client/src/features/viewers/timer/Timer.tsx         | 6 ++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/features/viewers/backstage/Backstage.tsx b/apps/client/src/features/viewers/backstage/Backstage.tsx
index 618efc7de..d76468aec 100644
--- a/apps/client/src/features/viewers/backstage/Backstage.tsx
+++ b/apps/client/src/features/viewers/backstage/Backstage.tsx
@@ -72,6 +72,8 @@ export default function Backstage(props: BackstageProps) {
     }
   }
 
+  const totalTime = (time.duration ?? 0) + (time.addedTime ?? 0);
+
   return (
     <div className={`backstage ${isMirrored ? 'mirror' : ''}`} data-testid='backstage-view'>
       <NavigationMenu />
@@ -87,7 +89,7 @@ export default function Backstage(props: BackstageProps) {
       <ProgressBar
         className='progress-container'
         now={time.current ?? undefined}
-        complete={time.duration ?? undefined}
+        complete={totalTime}
         hidden={!showProgress}
       />
 
diff --git a/apps/client/src/features/viewers/timer/Timer.tsx b/apps/client/src/features/viewers/timer/Timer.tsx
index 7b0c43b5a..9929501d8 100644
--- a/apps/client/src/features/viewers/timer/Timer.tsx
+++ b/apps/client/src/features/viewers/timer/Timer.tsx
@@ -62,10 +62,12 @@ export default function Timer(props: TimerProps) {
   const clock = formatTime(time.clock, formatOptions);
   const showOverlay = pres.text !== '' && pres.visible;
   const isPlaying = time.playback !== Playback.Pause;
+
   const isNegative =
     (time.current ?? 0) < 0 && time.timerType !== TimerType.Clock && time.timerType !== TimerType.CountUp;
-
   const finished = time.playback === Playback.Play && (time.current ?? 0) < 0 && time.startedAt;
+  const totalTime = (time.duration ?? 0) + (time.addedTime ?? 0);
+
   const showEndMessage = (time.current ?? 1) < 0 && viewSettings.endMessage;
   const showProgress = time.playback !== Playback.Stop;
   const showFinished = finished && (time.timerType !== TimerType.Clock || showEndMessage);
@@ -121,7 +123,7 @@ export default function Timer(props: TimerProps) {
       <MultiPartProgressBar
         className={isPlaying ? 'progress-container' : 'progress-container progress-container--paused'}
         now={time.current || 0}
-        complete={time.duration || 0}
+        complete={totalTime}
         normalColor={viewSettings.normalColor}
         warning={viewSettings.warningThreshold}
         warningColor={viewSettings.warningColor}