feat(teleprompter): add teleprompter view

e2e/tests/002-view-navigation.spec.ts

@@ -9,45 +9,52 @@ test.describe('test view navigation feature', () => {
   test('Timeline', async ({ page }) => {
     await openNavigationMenu(page);
     await page.getByRole('button', { name: 'Timeline' }).click();
-    page.locator('data-testid=timeline-view');
+    await expect(page.getByTestId('timeline-view')).toBeVisible();
     await expect(page).toHaveURL('/timeline');
   });
 
   test('Backstage', async ({ page }) => {
     await openNavigationMenu(page);
     await page.getByRole('button', { name: 'Backstage' }).click();
-    page.locator('data-testid=backstage-view');
+    await expect(page.getByTestId('backstage-view')).toBeVisible();
     await expect(page).toHaveURL('/backstage');
   });
 
   test('Studio Clock', async ({ page }) => {
     await openNavigationMenu(page);
     await page.getByRole('button', { name: 'Studio Clock' }).click();
-    page.locator('data-testid=studio-view');
+    await expect(page.getByTestId('studio-view')).toBeVisible();
     await expect(page).toHaveURL('/studio');
   });
 
   test('Countdown', async ({ page }) => {
     await openNavigationMenu(page);
     await page.getByRole('button', { name: 'Countdown' }).click();
-    page.locator('data-testid=countdown-view');
+    await expect(page.getByTestId('countdown-view')).toBeVisible();
     await expect(page).toHaveURL('/countdown');
   });
 
   test('Project Info', async ({ page }) => {
     await openNavigationMenu(page);
     await page.getByRole('button', { name: 'Project Info' }).click();
-    page.locator('data-testid=project-view');
+    await expect(page.getByTestId('project-view')).toBeVisible();
     await expect(page).toHaveURL('/info');
   });
 
   test('Timer', async ({ page }) => {
     await openNavigationMenu(page);
     await page.getByRole('button', { name: 'Timer', exact: true }).click();
-    page.locator('data-testid=timer-view');
+    await expect(page.getByTestId('timer-view')).toBeVisible();
     await expect(page).toHaveURL('/timer');
   });
 
+  test('Teleprompter', async ({ page }) => {
+    await openNavigationMenu(page);
+    await page.getByRole('button', { name: 'Teleprompter' }).click();
+    await expect(page.getByTestId('teleprompter-view')).toBeVisible();
+    await expect(page).toHaveURL('/teleprompter');
+  });
+
   /**
    * The shortcut has to read the current open state, not the one captured when it was
    * registered, otherwise it only ever opens the menu.

e2e/tests/features/207-view-params.spec.ts

@@ -38,3 +38,25 @@ test('View params keeps the values of collapsed sections', async ({ page }) => {
   await expect(page).toHaveURL(/.*hideClock=true/);
   await expect(page.getByText('TIME NOW', { exact: true })).not.toBeInViewport();
 });
+
+test('View params configures teleprompter view', async ({ page, request }) => {
+  const response = await request.post('/data/db/demo');
+  expect(response.ok()).toBe(true);
+
+  await page.goto('/teleprompter?script=note');
+
+  const readingMarker = page.locator('.teleprompter__reading-marker');
+  await expect(readingMarker).toBeVisible();
+
+  await page.mouse.move(Math.random() * 100, Math.random() * 100);
+  await page.getByTestId('navigation__toggle-settings').click();
+
+  const readingLineSwitch = page.locator('label:has(input[name="readingLine"]) [role="switch"]');
+  await expect(readingLineSwitch).toHaveAttribute('aria-checked', 'true');
+
+  await readingLineSwitch.click();
+  await page.getByTestId('apply-view-params').click();
+
+  await expect(page).toHaveURL(/.*readingLine=false/);
+  await expect(readingMarker).toHaveCount(0);
+});

e2e/tests/features/215-teleprompter.spec.ts

@@ -0,0 +1,48 @@
+import { expect, test } from '@playwright/test';
+
+test('teleprompter renders and responds to its primary controls', async ({ page, request }) => {
+  // Earlier feature specs edit the loaded rundown. Restore the real demo project
+  // instead of manufacturing test-only events: its notes are the script fixture.
+  const response = await request.post('/data/db/demo');
+  expect(response.ok()).toBe(true);
+  const loadResponse = await request.get('/api/load/index/5');
+  expect(loadResponse.ok()).toBe(true);
+
+  await page.goto('/teleprompter?script=note&flipV=true');
+
+  const view = page.getByTestId('teleprompter-view');
+  const scroller = page.getByTestId('teleprompter-scroller');
+  const speed = page.getByTestId('teleprompter-speed');
+
+  await expect(view).toBeVisible();
+  await expect(scroller).toBeVisible();
+  await expect(page.getByText('Music plays, holding slide on screens')).toBeVisible();
+  await expect(speed).toContainText('14');
+  await expect(view).toHaveCSS('transform', /^matrix\(1, 0, 0, -1/);
+
+  // Following uses layout coordinates, which must remain stable when the view's
+  // visual coordinates are inverted by a vertical transform.
+  const loadedBlock = page.locator('.teleprompter__block[data-loaded]');
+  await expect(loadedBlock).toBeAttached();
+  const expectedScrollTop = await loadedBlock.evaluate((element) => {
+    const scroller = element.closest('.teleprompter')?.querySelector<HTMLElement>('.teleprompter__scroller');
+    if (!scroller) throw new Error('Teleprompter scroller not found');
+    return Math.max(0, (element as HTMLElement).offsetTop - scroller.clientHeight * 0.25);
+  });
+  await expect
+    .poll(async () => Math.abs((await scroller.evaluate((element) => element.scrollTop)) - expectedScrollTop))
+    .toBeLessThan(2);
+
+  await page.goto('/teleprompter?script=note');
+
+  await page.keyboard.press('Space');
+  await expect.poll(() => scroller.evaluate((element) => element.scrollTop)).toBeGreaterThan(0);
+  await page.keyboard.press('Space');
+
+  await page.keyboard.press('ArrowRight');
+  await page.keyboard.press('f');
+  await expect(speed).toContainText('15');
+  await expect(page).toHaveURL(/speed=15/);
+  await expect(page).toHaveURL(/flipH=true/);
+  await expect(view).toHaveCSS('transform', /^matrix\(-1/);
+});