diff --git a/e2e/playwright/fixtures/sceneFixture.ts b/e2e/playwright/fixtures/sceneFixture.ts index d81339117..b686ce736 100644 --- a/e2e/playwright/fixtures/sceneFixture.ts +++ b/e2e/playwright/fixtures/sceneFixture.ts @@ -36,7 +36,8 @@ type DragFromHandler = ( export class SceneFixture { public page: Page - + public streamWrapper!: Locator + public loadingIndicator!: Locator private exeIndicator!: Locator constructor(page: Page) { @@ -64,6 +65,8 @@ export class SceneFixture { this.page = page this.exeIndicator = page.getByTestId('model-state-indicator-execution-done') + this.streamWrapper = page.getByTestId('stream') + this.loadingIndicator = this.streamWrapper.getByTestId('loading') } makeMouseHelpers = ( diff --git a/e2e/playwright/regression-tests.spec.ts b/e2e/playwright/regression-tests.spec.ts index afacd5b6b..b50d55fd2 100644 --- a/e2e/playwright/regression-tests.spec.ts +++ b/e2e/playwright/regression-tests.spec.ts @@ -614,6 +614,38 @@ extrude001 = extrude(50, sketch001) await expect(gizmo).toBeVisible() }) }) + + test(`Refreshing the app doesn't cause the stream to pause on long-executing files`, async ({ + context, + homePage, + scene, + toolbar, + viewport, + }) => { + await context.folderSetupFn(async (dir) => { + const legoDir = path.join(dir, 'lego') + await fsp.mkdir(legoDir, { recursive: true }) + await fsp.copyFile( + executorInputPath('lego.kcl'), + path.join(legoDir, 'main.kcl') + ) + }) + + await test.step(`Test setup`, async () => { + await homePage.openProject('lego') + await toolbar.closePane('code') + }) + await test.step(`Waiting for the loading spinner to disappear`, async () => { + await scene.loadingIndicator.waitFor({ state: 'detached' }) + }) + await test.step(`The part should start loading quickly, not waiting until execution is complete`, async () => { + await scene.expectPixelColor( + [143, 143, 143], + { x: (viewport?.width ?? 1200) / 2, y: (viewport?.height ?? 500) / 2 }, + 15 + ) + }) + }) }) async function clickExportButton(page: Page) { diff --git a/src/components/Stream.tsx b/src/components/Stream.tsx index ad3e51f4a..795c9bf2b 100644 --- a/src/components/Stream.tsx +++ b/src/components/Stream.tsx @@ -218,20 +218,6 @@ export const Stream = () => { } }, [IDLE, streamState]) - /** - * Play the vid - */ - useEffect(() => { - if (!kclManager.isExecuting) { - setTimeout(() => { - // execute in the next event loop - videoRef.current?.play().catch((e) => { - console.warn('Video playing was prevented', e, videoRef.current) - }) - }) - } - }, [kclManager.isExecuting]) - useEffect(() => { if ( typeof window === 'undefined' || @@ -243,9 +229,15 @@ export const Stream = () => { // The browser complains if we try to load a new stream without pausing first. // Do not immediately play the stream! + // we instead use a setTimeout to play the stream in the next event loop try { videoRef.current.srcObject = mediaStream videoRef.current.pause() + setTimeout(() => { + videoRef.current?.play().catch((e) => { + console.warn('Video playing was prevented', e, videoRef.current) + }) + }) } catch (e) { console.warn('Attempted to pause stream while play was still loading', e) }