fix: calculate time to start

apps/client/src/features/viewers/timeline/TimelineEntry.tsx

@@ -3,7 +3,7 @@ import { alpha, cx } from '../../../common/utils/styleUtils';
 import { formatDuration, formatTime } from '../../../common/utils/time';
 import { useTranslation } from '../../../translation/TranslationProvider';
 
-import { getStatusLabel } from './timeline.utils';
+import { getStatusLabel, getTimeToStart } from './timeline.utils';
 
 import style from './Timeline.module.scss';
 
@@ -63,7 +63,7 @@ export function TimelineEntry(props: TimelineEntryProps) {
         {status !== 'done' && (
           <>
             <div className={style.duration}>{formattedDuration}</div>
-            <TimelineEntryStatus status={status} start={delayedStart} />
+            <TimelineEntryStatus delay={delay} start={start} status={status} />
           </>
         )}
       </div>
@@ -72,18 +72,19 @@ export function TimelineEntry(props: TimelineEntryProps) {
 }
 
 interface TimelineEntryStatusProps {
-  status: ProgressStatus;
+  delay: number;
   start: number;
+  status: ProgressStatus;
 }
 
 // we isolate this component to avoid isolate re-renders provoked by the clock changes
 function TimelineEntryStatus(props: TimelineEntryStatusProps) {
-  const { status, start } = props;
+  const { delay, start, status } = props;
   const { clock, offset } = useTimelineStatus();
   const { getLocalizedString } = useTranslation();
 
   // start times need to be normalised in a rundown that crosses midnight
-  let statusText = getStatusLabel(start - clock + offset, status);
+  let statusText = getStatusLabel(getTimeToStart(clock, start, delay, offset), status);
   if (statusText === 'live') {
     statusText = getLocalizedString('timeline.live');
   } else if (statusText === 'pending') {

apps/client/src/features/viewers/timeline/__tests__/timeline.utils.test.ts

@@ -1,6 +1,6 @@
 import { dayInMs } from 'ontime-utils';
 
-import { getElementPosition, makeTimelineSections } from '../timeline.utils';
+import { getElementPosition, getTimeToStart, makeTimelineSections } from '../timeline.utils';
 
 describe('getCSSPosition()', () => {
   it('accounts for rundown with one event', () => {
@@ -53,7 +53,7 @@ describe('getCSSPosition()', () => {
   });
 });
 
-describe('makeTmelineSections', () => {
+describe('makeTimelineSections', () => {
   it('creates an array between the hours given, end excluded', () => {
     const result = makeTimelineSections(11, 17);
     expect(result).toEqual(['11:00', '12:00', '13:00', '14:00', '15:00', '16:00']);
@@ -64,3 +64,34 @@ describe('makeTmelineSections', () => {
     expect(result).toEqual(['22:00', '23:00', '00:00', '01:00']);
   });
 });
+
+describe('getTimeToStart()', () => {
+  it("is the gap between now and the event's start time accounted for delays", () => {
+    const now = 150;
+    const start = 150;
+    const delay = 50;
+
+    const result = getTimeToStart(now, start, delay, 0);
+    expect(result).toBe(50);
+  });
+
+  it('accounts for offsets when running behind', () => {
+    const now = 150;
+    const start = 150;
+    const delay = 50;
+    const offset = -50; // running behind
+
+    const result = getTimeToStart(now, start, delay, offset);
+    expect(result).toBe(50 + 50);
+  });
+
+  it('accounts for offsets when running ahead', () => {
+    const now = 150;
+    const start = 150;
+    const delay = 50;
+    const offset = 10; // running behind
+
+    const result = getTimeToStart(now, start, delay, offset);
+    expect(result).toBe(50 - 10);
+  });
+});

apps/client/src/features/viewers/timeline/timeline.utils.ts

@@ -209,3 +209,10 @@ export function getFormattedTimeToStart(event: OntimeEvent, now: number, dueText
 
   return `T - ${formatDuration(timeToStart)}`;
 }
+
+/**
+ * Utility function calculates time to start
+ */
+export function getTimeToStart(now: number, start: number, delay: number, offset: number): number {
+  return start + delay - now - offset;
+}