refactor: unify progress bar logic

apps/client/src/features/cuesheet/cuesheet-progress/CuesheetProgress.tsx

@@ -6,18 +6,17 @@ import styles from './CuesheetProgress.module.scss';
 
 export default function CuesheetProgress() {
   const { data } = useViewSettings();
-  const { addedTime, current, duration, timeWarning, timeDanger } = useProgressData();
-  const totalTime = (duration ?? 0) + (addedTime ?? 0);
+  const { current, duration, timeWarning, timeDanger } = useProgressData();
 
   return (
     <MultiPartProgressBar
       now={current}
-      complete={totalTime}
-      normalColor={data!.normalColor}
+      complete={duration}
+      normalColor={data.normalColor}
       warning={timeWarning}
-      warningColor={data!.warningColor}
+      warningColor={data.warningColor}
       danger={timeDanger}
-      dangerColor={data!.dangerColor}
+      dangerColor={data.dangerColor}
       className={styles.progressOverride}
       ignoreCssOverride
     />

apps/client/src/features/operator/status-bar/StatusBarProgress.tsx

@@ -11,13 +11,12 @@ interface StatusBarProgressProps {
 
 export default function StatusBarProgress(props: StatusBarProgressProps) {
   const { viewSettings } = props;
-  const { addedTime, current, duration, timeWarning, timeDanger } = useProgressData();
-  const totalTime = (duration ?? 0) + (addedTime ?? 0);
+  const { current, duration, timeWarning, timeDanger } = useProgressData();
 
   return (
     <MultiPartProgressBar
       now={current}
-      complete={totalTime}
+      complete={duration}
       normalColor={viewSettings.normalColor}
       warning={timeWarning}
       warningColor={viewSettings.warningColor}

apps/client/src/features/rundown/event-block/composite/EventBlockProgressBar.tsx

@@ -1,29 +1,12 @@
-import { MaybeNumber } from 'ontime-types';
-
 import { useTimer } from '../../../../common/hooks/useSocket';
-import { clamp } from '../../../../common/utils/math';
+import { getProgress } from '../../../../common/utils/getProgress';
 
 import style from './EventBlockProgressBar.module.scss';
 
-export function getPercentComplete(remaining: MaybeNumber, total: MaybeNumber): number {
-  if (remaining === null || total === null) {
-    return 0;
-  }
-
-  if (remaining <= 0) {
-    return 100;
-  }
-
-  if (remaining === total) {
-    return 0;
-  }
-
-  return clamp(100 - (remaining * 100) / total, 0, 100);
-}
-
 export default function EventBlockProgressBar() {
   const timer = useTimer();
 
-  const progress = `${getPercentComplete(timer.current, timer.duration)}%`;
-  return <div className={style.progressBar} style={{ width: progress }} />;
+  const progress = getProgress(timer.current, timer.duration);
+
+  return <div className={style.progressBar} style={{ width: `${progress}%` }} />;
 }

apps/client/src/features/rundown/event-block/composite/__tests__/EventBlockProgressBar.test.ts

@@ -1,27 +0,0 @@
-import { dayInMs } from 'ontime-utils';
-
-import { getPercentComplete } from '../EventBlockProgressBar';
-
-describe('getPercentComplete()', () => {
-  describe('calculates progress in normal cases', () => {
-    const testScenarios = [
-      { current: 0, duration: 0, expect: 100 },
-      { current: 0, duration: 100, expect: 100 },
-      { current: 0, duration: dayInMs, expect: 100 },
-      { current: 10, duration: 100, expect: 90 },
-      { current: 50, duration: 100, expect: 50 },
-      { current: 100, duration: 100, expect: 0 },
-    ];
-
-    testScenarios.forEach((testCase) => {
-      it(`handles ${testCase.current} / ${testCase.duration}`, () => {
-        const progress = getPercentComplete(testCase.current, testCase.duration);
-        expect(progress).toBe(testCase.expect);
-      });
-    });
-  });
-  it('is 0 if we dont have a current or duration', () => {
-    const progress = getPercentComplete(null, null);
-    expect(progress).toBe(0);
-  });
-});

apps/client/src/features/viewers/backstage/Backstage.tsx

@@ -94,7 +94,6 @@ export default function Backstage(props: BackstageProps) {
   let stageTimer = millisToString(time.current, { fallback: timerPlaceholderMin });
   stageTimer = removeLeadingZero(stageTimer);
 
-  const totalTime = (time.duration ?? 0) + (time.addedTime ?? 0);
   const defaultFormat = getDefaultFormat(settings?.timeFormat);
   const backstageOptions = getBackstageOptions(defaultFormat, customFields);
 
@@ -111,8 +110,8 @@ export default function Backstage(props: BackstageProps) {
 
       <ProgressBar
         className='progress-container'
-        now={time.current ?? undefined}
-        complete={totalTime}
+        current={time.current}
+        duration={time.duration}
         hidden={!showProgress}
       />