refactor: unify progress bar logic

apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx

@@ -1,12 +1,12 @@
 import { MaybeNumber } from 'ontime-types';
 
-import { clamp } from '../../utils/math';
+import { getProgress } from '../../utils/getProgress';
 
 import './MultiPartProgressBar.scss';
 
 interface MultiPartProgressBar {
   now: MaybeNumber;
-  complete: number;
+  complete: MaybeNumber;
   normalColor: string;
   warning?: MaybeNumber;
   warningColor: string;
@@ -31,10 +31,9 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
     className = '',
   } = props;
 
-  const percentRemaining = complete === 0 ? 0 : 100 - clamp(100 - (Math.max(now ?? 0, 0) * 100) / complete, 0, 100);
-
-  const dangerWidth = danger ? clamp((danger / complete) * 100, 0, 100) : 0;
-  const warningWidth = warning ? clamp((warning / complete) * 100 - dangerWidth, 0, 100) : 0;
+  const percentRemaining = 100 - getProgress(now, complete);
+  const dangerWidth = danger ? 100 - getProgress(danger, complete) : 0;
+  const warningWidth = warning ? 100 - dangerWidth - getProgress(warning, complete) : 0;
 
   return (
     <div

apps/client/src/common/components/progress-bar/ProgressBar.tsx

@@ -1,22 +1,23 @@
-import { clamp } from '../../utils/math';
+import { MaybeNumber } from 'ontime-types';
+
+import { getProgress } from '../../utils/getProgress';
 
 import './ProgressBar.scss';
 
 interface ProgressBarProps {
-  now?: number;
-  complete?: number;
+  current: MaybeNumber;
+  duration: MaybeNumber;
   hidden?: boolean;
   className?: string;
 }
 
 export default function ProgressBar(props: ProgressBarProps) {
-  const { now = 0, complete = 100, hidden, className = '' } = props;
-
-  const percentComplete = clamp(100 - (Math.max(now, 0) * 100) / complete, 0, 100);
+  const { current, duration, hidden, className = '' } = props;
+  const progress = getProgress(current, duration);
 
   return (
     <div className={`progress-bar__bg ${hidden ? 'progress-bar__bg--hidden' : ''} ${className}`}>
-      <div className='progress-bar__indicator' style={{ width: `${percentComplete}%` }} />
+      <div className='progress-bar__indicator' style={{ width: `${progress}%` }} />
     </div>
   );
 }

apps/client/src/common/hooks/useSocket.ts

@@ -150,7 +150,6 @@ export const useClock = () => {
 /** Used by the progress bar components */
 export const useProgressData = () => {
   const featureSelector = (state: RuntimeStore) => ({
-    addedTime: state.timer.addedTime,
     current: state.timer.current,
     duration: state.timer.duration,
     timeWarning: state.eventNow?.timeWarning ?? null,

apps/client/src/common/utils/getProgress.ts

@@ -0,0 +1,23 @@
+import { MaybeNumber } from 'ontime-types';
+
+import { clamp } from './math';
+
+/**
+ * Returns completion percentage of a progress bar
+ * This code assumes the current time and duration have addedTime already applied
+ */
+export function getProgress(current: MaybeNumber, duration: MaybeNumber) {
+  if (current === null || duration === null) {
+    return 0;
+  }
+
+  if (current <= 0) {
+    return 100;
+  }
+
+  if (current >= duration) {
+    return 0;
+  }
+
+  return clamp(((duration - current) / duration) * 100, 0, 100);
+}