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; +}