diff --git a/apps/client/src/features/viewers/timeline/TimelineEntry.tsx b/apps/client/src/features/viewers/timeline/TimelineEntry.tsx
index 433af75b8..9a132cd40 100644
--- a/apps/client/src/features/viewers/timeline/TimelineEntry.tsx
+++ b/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' && (
<>
{formattedDuration}
-
+
>
)}
@@ -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') {
diff --git a/apps/client/src/features/viewers/timeline/__tests__/timeline.utils.test.ts b/apps/client/src/features/viewers/timeline/__tests__/timeline.utils.test.ts
index a522b36ef..876ddac95 100644
--- a/apps/client/src/features/viewers/timeline/__tests__/timeline.utils.test.ts
+++ b/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);
+ });
+});
diff --git a/apps/client/src/features/viewers/timeline/timeline.utils.ts b/apps/client/src/features/viewers/timeline/timeline.utils.ts
index 1903abaf8..c6b4ab3aa 100644
--- a/apps/client/src/features/viewers/timeline/timeline.utils.ts
+++ b/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;
+}