show relative in offset overview

This commit is contained in:
arc-alex
2025-03-25 02:04:54 +08:00
parent 08c580f773
commit 05e3c8a9f8
4 changed files with 47 additions and 23 deletions
+1 -1
View File
@@ -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,
}));
@@ -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)} />
</>
);
@@ -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>
);
}
+40 -19
View File
@@ -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');