diff --git a/src/components/video-editor/timeline/timelineLayout.test.ts b/src/components/video-editor/timeline/timelineLayout.test.ts
index 42cdd329..3e880dbd 100644
--- a/src/components/video-editor/timeline/timelineLayout.test.ts
+++ b/src/components/video-editor/timeline/timelineLayout.test.ts
@@ -4,6 +4,8 @@ import {
getTimelineRowsMinHeightPx,
TIMELINE_AXIS_HEIGHT_PX,
TIMELINE_ROW_MIN_HEIGHT_PX,
+ TIMELINE_VIEWPORT_MIN_HEIGHT_PX,
+ TIMELINE_VISIBLE_ROW_COUNT,
} from "./timelineLayout";
describe("timelineLayout", () => {
@@ -28,4 +30,11 @@ describe("timelineLayout", () => {
TIMELINE_AXIS_HEIGHT_PX + 2 * TIMELINE_ROW_MIN_HEIGHT_PX,
);
});
+
+ it("caps the default timeline viewport to two visible rows", () => {
+ expect(TIMELINE_VISIBLE_ROW_COUNT).toBe(2);
+ expect(TIMELINE_VIEWPORT_MIN_HEIGHT_PX).toBe(
+ TIMELINE_AXIS_HEIGHT_PX + TIMELINE_VISIBLE_ROW_COUNT * TIMELINE_ROW_MIN_HEIGHT_PX,
+ );
+ });
});
diff --git a/src/components/video-editor/timeline/timelineLayout.ts b/src/components/video-editor/timeline/timelineLayout.ts
index bdf03a17..072b64d3 100644
--- a/src/components/video-editor/timeline/timelineLayout.ts
+++ b/src/components/video-editor/timeline/timelineLayout.ts
@@ -1,5 +1,6 @@
export const TIMELINE_AXIS_HEIGHT_PX = 32;
export const TIMELINE_ROW_MIN_HEIGHT_PX = 28;
+export const TIMELINE_VISIBLE_ROW_COUNT = 2;
function normalizeRowCount(rowCount: number) {
if (!Number.isFinite(rowCount)) {
@@ -16,3 +17,7 @@ export function getTimelineRowsMinHeightPx(rowCount: number) {
export function getTimelineContentMinHeightPx(rowCount: number) {
return TIMELINE_AXIS_HEIGHT_PX + getTimelineRowsMinHeightPx(rowCount);
}
+
+export const TIMELINE_VIEWPORT_MIN_HEIGHT_PX = getTimelineContentMinHeightPx(
+ TIMELINE_VISIBLE_ROW_COUNT,
+);