Skip to content

Commit 5befbb5

Browse files
miguel-heygenmiguel-heygen
committed
test(studio): gate timeline viewport performance in Chromium
1 parent 2f24063 commit 5befbb5

6 files changed

Lines changed: 422 additions & 0 deletions

File tree

‎packages/studio/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
"build": "vite build && tsup",
5050
"typecheck": "tsc --noEmit",
5151
"test": "vitest run",
52+
"test:timeline-virtualization": "node tests/e2e/timeline-virtualization.mjs",
5253
"test:watch": "vitest",
5354
"report:sdk-cutover": "bun src/utils/sdkCutoverPolicy.report.ts"
5455
},

‎packages/studio/src/hooks/useStudioTestHooks.test.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,15 @@ describe("timeline performance fixture", () => {
112112
expect(usePlayerStore.getState().lintFindingsByElement.size).toBe(0);
113113
expect(usePlayerStore.getState().elements).toHaveLength(1_000);
114114
expect(usePlayerStore.getState().expandedClipIds.size).toBe(1_000);
115+
116+
api.resetTimelinePerformanceFixture();
117+
expect(notifications).toBe(2);
118+
expect(usePlayerStore.getState()).toMatchObject({
119+
isPlaying: false,
120+
duration: 0,
121+
timelineReady: false,
122+
elements: [],
123+
});
115124
unsubscribe();
116125
act(() => root.unmount());
117126
expect(window.__studioTest).toBeUndefined();

‎packages/studio/src/hooks/useStudioTestHooks.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ interface StudioTestApi {
2626
loadTimelinePerformanceFixture: (
2727
spec: TimelinePerformanceFixtureSpec,
2828
) => TimelinePerformanceFixtureSummary;
29+
resetTimelinePerformanceFixture: () => void;
2930
readTimelinePerformanceDiagnostics: () => Readonly<TimelinePerformanceDiagnostics>;
3031
timelineViewportBudgets: typeof TIMELINE_VIEWPORT_BUDGETS;
3132
}
@@ -88,6 +89,9 @@ export function useStudioTestHooks({
8889
});
8990
return fixture.summary;
9091
},
92+
resetTimelinePerformanceFixture: () => {
93+
usePlayerStore.getState().reset();
94+
},
9195
readTimelinePerformanceDiagnostics: () => readTimelinePerformanceDiagnostics(),
9296
timelineViewportBudgets: TIMELINE_VIEWPORT_BUDGETS,
9397
};

‎packages/studio/tests/e2e/fixtures/timeline-virtualization/hyperframes.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"$schema": "https://hyperframes.heygen.com/schema/hyperframes.json",
3+
"paths": {
4+
"blocks": "compositions",
5+
"components": "compositions/components",
6+
"assets": "assets"
7+
}
8+
}

‎packages/studio/tests/e2e/fixtures/timeline-virtualization/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Timeline virtualization QA fixture</title>
7+
<style>
8+
html,
9+
body {
10+
width: 1920px;
11+
height: 1080px;
12+
margin: 0;
13+
overflow: hidden;
14+
background: #0a0a0b;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<div
20+
id="timeline-virtualization-anchor"
21+
class="clip"
22+
data-composition-id="timeline-virtualization"
23+
data-width="1920"
24+
data-height="1080"
25+
data-start="0"
26+
data-duration="60"
27+
data-fps="30"
28+
data-track-index="0"
29+
style="position: absolute; inset: 0"
30+
></div>
31+
<script>
32+
window.__timelines = window.__timelines || {};
33+
window.__timelines["timeline-virtualization"] = {
34+
pause() {},
35+
seek() {},
36+
};
37+
</script>
38+
</body>
39+
</html>

0 commit comments

Comments
 (0)