show relative in offset overview

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

@@ -160,7 +160,7 @@ export const useRuntimePlaybackOverview = createSelector((state: RuntimeStore) =
 
   numEvents: state.runtime.numEvents,
   selectedEventIndex: state.runtime.selectedEventIndex,
-  offset: state.runtime.offset,
+  offset: state.runtime.offsetMode === OffsetMode.Absolute ? state.runtime.offset : state.runtime.relativeOffset,
 
   currentBlock: state.currentBlock,
 }));

apps/client/src/features/overview/Overview.tsx

@@ -170,7 +170,7 @@ function RuntimeOverview() {
 
   return (
     <>
-      <TimeColumn label='Offset' value={offsetText} className={offsetClasses} />
+      <TimeColumn label='Offset' value={offsetText} className={offsetClasses} testId='offset' />
       <TimeColumn label='Time now' value={formatedTime(clock)} />
     </>
   );

apps/client/src/features/overview/composite/TimeLayout.tsx

@@ -10,13 +10,16 @@ interface TimeLayoutProps {
   muted?: boolean;
   daySpan?: number;
   className?: string;
+  testId?: string;
 }
 
-export function TimeColumn({ label, value, muted, className }: TimeLayoutProps) {
+export function TimeColumn({ label, value, muted, className, testId }: TimeLayoutProps) {
   return (
     <div className={style.column}>
       <span className={style.label}>{label}</span>
-      <span className={cx([style.clock, muted && style.muted, className])}>{value}</span>
+      <span className={cx([style.clock, muted && style.muted, className])} data-testid={testId}>
+        {value}
+      </span>
     </div>
   );
 }

e2e/tests/features/212-time-until.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-test('linked time until', async ({ page }) => {
+test('time until absolute', async ({ page }) => {
   await page.goto('http://localhost:4001/editor');
 
   await page.getByRole('button', { name: 'Clear rundown' }).click();
@@ -11,15 +11,48 @@ test('linked time until', async ({ page }) => {
   await page.getByRole('button', { name: 'Event', exact: true }).nth(1).click();
   await page.getByRole('button', { name: 'Event', exact: true }).nth(1).click();
 
+  await page.getByRole('button', { name: 'Absolute' }).click();
   await page.getByTestId('entry-1').getByLabel('Start event').click();
+  await expect(page.getByTestId('offset')).not.toContainText('00:00:00'); // This might be a bad test requires that the test is not run at 0h
+  await page.getByLabel('Pause event').click();
+
+  await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('9m');
+  await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('19m');
+  await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('29m');
+
+  await page.getByTestId('entry-1').getByTestId('time-input-duration').click();
+  await page.getByTestId('entry-1').getByTestId('time-input-duration').fill('6h');
+  await page.getByTestId('entry-1').getByTestId('time-input-duration').press('Enter');
+
+  await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('5h59m');
+  await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('6h9m');
+  await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('6h19m');
+
+  await page.getByTestId('entry-1').getByTestId('time-input-duration').click();
+  await page.getByTestId('entry-1').getByTestId('time-input-duration').fill('30s');
+  await page.getByTestId('entry-1').getByTestId('time-input-duration').press('Enter');
+
+  await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('29s');
+  await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('10m');
+  await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('20m');
+});
+
+test('time until relative', async ({ page }) => {
+  await page.goto('http://localhost:4001/editor');
+
+  await page.getByRole('button', { name: 'Clear rundown' }).click();
+  await page.getByRole('button', { name: 'Delete all' }).click();
+
+  await page.getByRole('button', { name: 'Create Event' }).click();
+  await page.getByRole('button', { name: 'Event' }).nth(4).click();
+  await page.getByRole('button', { name: 'Event', exact: true }).nth(1).click();
+  await page.getByRole('button', { name: 'Event', exact: true }).nth(1).click();
+
+  await page.getByRole('button', { name: 'Relative' }).click();
+  await page.getByTestId('entry-1').getByLabel('Start event').click();
+  await expect(page.getByTestId('offset')).toContainText('00:00:00'); // This might be a bad test as it ruires the evaluation to happen within 1s
   await page.getByLabel('Pause event').click();
 
-  await page.getByRole('button', { name: 'Absolute' }).click();
-  await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('9m');
-  await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('19m');
-  await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('29m');
-
-  await page.getByRole('button', { name: 'Relative' }).click();
   await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('9m');
   await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('19m');
   await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('29m');
@@ -28,12 +61,6 @@ test('linked time until', async ({ page }) => {
   await page.getByTestId('entry-1').getByTestId('time-input-duration').fill('6h');
   await page.getByTestId('entry-1').getByTestId('time-input-duration').press('Enter');
 
-  await page.getByRole('button', { name: 'Absolute' }).click();
-  await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('5h59m');
-  await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('6h9m');
-  await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('6h19m');
-
-  await page.getByRole('button', { name: 'Relative' }).click();
   await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('5h59m');
   await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('6h9m');
   await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('6h19m');
@@ -42,12 +69,6 @@ test('linked time until', async ({ page }) => {
   await page.getByTestId('entry-1').getByTestId('time-input-duration').fill('30s');
   await page.getByTestId('entry-1').getByTestId('time-input-duration').press('Enter');
 
-  await page.getByRole('button', { name: 'Absolute' }).click();
-  await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('29s');
-  await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('10m');
-  await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('20m');
-
-  await page.getByRole('button', { name: 'Relative' }).click();
   await expect(page.getByTestId('entry-2').locator('#event-block')).toContainText('29s');
   await expect(page.getByTestId('entry-3').locator('#event-block')).toContainText('10m');
   await expect(page.getByTestId('entry-4').locator('#event-block')).toContainText('20m');