diff --git a/apps/client/src/common/hooks/useSocket.ts b/apps/client/src/common/hooks/useSocket.ts
index e44c83775..6bbd8634f 100644
--- a/apps/client/src/common/hooks/useSocket.ts
+++ b/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,
}));
diff --git a/apps/client/src/features/overview/Overview.tsx b/apps/client/src/features/overview/Overview.tsx
index 1e10a82d7..a2eee0ea8 100644
--- a/apps/client/src/features/overview/Overview.tsx
+++ b/apps/client/src/features/overview/Overview.tsx
@@ -170,7 +170,7 @@ function RuntimeOverview() {
return (
<>
-
+
>
);
diff --git a/apps/client/src/features/overview/composite/TimeLayout.tsx b/apps/client/src/features/overview/composite/TimeLayout.tsx
index 181af8da1..a1a19cd9a 100644
--- a/apps/client/src/features/overview/composite/TimeLayout.tsx
+++ b/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 (
{label}
- {value}
+
+ {value}
+
);
}
diff --git a/e2e/tests/features/212-time-until.spec.ts b/e2e/tests/features/212-time-until.spec.ts
index 358991bf2..81b5beb40 100644
--- a/e2e/tests/features/212-time-until.spec.ts
+++ b/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');