mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-31 03:49:11 +00:00
Claude
57362d85de
Two problems were feeding the confusion: - Any wheel, touch, or pointerdown event broke the follow, with no tolerance. A stray touch or trackpad momentum after a deliberate gesture disengaged it as readily as a real scroll away from the read position, with no way to tell the two apart from the outside. The operator view solved the same problem with a distance check against the loaded item's expected position, which this now mirrors: it takes a real scroll (past 1.5 lines) to count as taking over, in a new hasBrokenFollow(), unit tested like the rest of the scroll maths. - The runtime flag and the view option shared adjacent, opposite-valence names (followLocked / followLoaded) and were ANDed together in a third place to get the value the button actually needed. Renamed the runtime flag to autoScrollLocked, matching the operator's own lockAutoScroll for the same concept, and moved the AND into the hook so it exposes one signal the view no longer has to assemble itself. Also fixes the threshold check reading a stale position: a burst of wheel events can fire faster than the animation frame that keeps the scroll ref in sync, so it now reads the element's scrollTop directly rather than the ref a frame behind it. Caught by testing the tolerance in a live browser rather than trusting the unit tests alone. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Cb8RVPNQ2ETPJxdy4b8CHf
73 lines
3.0 KiB
TypeScript
73 lines
3.0 KiB
TypeScript
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/);
|
|
});
|
|
|
|
test('follow tolerates a small scroll and breaks on a real one, like the operator view', async ({ page, request }) => {
|
|
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');
|
|
|
|
const scroller = page.getByTestId('teleprompter-scroller');
|
|
const follow = page.getByTestId('teleprompter-follow');
|
|
await expect(scroller).toBeVisible();
|
|
await expect(follow).toBeDisabled();
|
|
|
|
await page.mouse.move(960, 500);
|
|
await page.mouse.wheel(0, 15);
|
|
await expect(follow).toBeDisabled();
|
|
|
|
await page.mouse.wheel(0, 400);
|
|
await expect(follow).toBeEnabled();
|
|
|
|
await page.keyboard.press('l');
|
|
await expect(follow).toBeDisabled();
|
|
});
|