lee/Recordly
1
0
Fork 0
mirror of https://github.com/webadderallorg/Recordly.git synced 2026-09-27 16:25:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(timeline): cap viewport to two rows

Browse Source
This commit is contained in:
webadderall
2026-04-27 16:24:35 +10:00
parent f1449073e6
commit fe5fdff35a
4 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/video-editor/VideoEditor.tsx
+4 -2
View File
@@ -124,6 +124,7 @@ import {
RECORDLY_ISSUES_URL,
} from "./TutorialHelp";
import TimelineEditor, { type TimelineEditorHandle } from "./timeline/TimelineEditor";
import { TIMELINE_VIEWPORT_MIN_HEIGHT_PX } from "./timeline/timelineLayout";
import { normalizeCursorTelemetry } from "./timeline/zoomSuggestionUtils";
import {
type AnnotationRegion,
@@ -5698,8 +5699,9 @@ export default function VideoEditor() {
<div
className="flex-shrink-0 flex flex-col"
style={{
height: timelineCollapsed ? undefined : "15%",
minHeight: timelineCollapsed ? 0 : 160,
height: timelineCollapsed ? undefined : TIMELINE_VIEWPORT_MIN_HEIGHT_PX,
minHeight: timelineCollapsed ? 0 : TIMELINE_VIEWPORT_MIN_HEIGHT_PX,
maxHeight: timelineCollapsed ? undefined : TIMELINE_VIEWPORT_MIN_HEIGHT_PX,
}}
>
<TimelineEditor
src/components/video-editor/timeline/TimelineEditor.tsx
+1 -1
View File
@@ -2059,7 +2059,7 @@ const TimelineEditor = forwardRef<TimelineEditorHandle, TimelineEditorProps>(
}
return (
<div className="flex-1 min-h-0 flex flex-col bg-editor-bg overflow-auto">
<div className="flex-1 min-h-0 flex flex-col bg-editor-bg overflow-hidden">
{hideToolbar ? null : (
<div className="flex items-center gap-2 px-4 py-2 border-b border-foreground/10 bg-editor-panel">
<div className="flex items-center gap-1">
src/components/video-editor/timeline/timelineLayout.test.ts
+9
View File
@@ -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,
);
});
});
src/components/video-editor/timeline/timelineLayout.ts
+5
View File
@@ -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,
);