cottongin/gui-video-clipper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: show empty timeline lanes when no video is loaded

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
cottongin
2026-09-22 14:34:58 -04:00
parent 2f810111cc
commit 90f598050c
2 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/timeline/renderer.ts
View File

@@ -37,7 +37,8 @@ export function drawTimeline(
selectedClipId: string | null = null,
pendingInPoint: number | null = null,
waveform: WaveformData = { tiers: null },
thumbnailSpritesheets: ThumbnailSpritesheet[] = []
thumbnailSpritesheets: ThumbnailSpritesheet[] = [],
hasVideo: boolean = false
): void {
const { width, height } = state;
ctx.clearRect(0, 0, width, height);
@@ -50,13 +51,13 @@ export function drawTimeline(
if (thumbnailSpritesheets.length > 0) {
drawThumbnails(ctx, state, thumbnailSpritesheets, duration, 0, THUMB_LANE_HEIGHT);
} else {
drawPlaceholderLane(ctx, state, 0, THUMB_LANE_HEIGHT, 'Thumbnails');
drawPlaceholderLane(ctx, state, 0, THUMB_LANE_HEIGHT, 'Thumbnails', hasVideo);
}
if (waveform.tiers) {
drawWaveform(ctx, state, waveform, duration, THUMB_LANE_HEIGHT, WAVEFORM_LANE_HEIGHT);
} else {
drawPlaceholderLane(ctx, state, THUMB_LANE_HEIGHT, WAVEFORM_LANE_HEIGHT, 'Waveform');
drawPlaceholderLane(ctx, state, THUMB_LANE_HEIGHT, WAVEFORM_LANE_HEIGHT, 'Waveform', hasVideo);
}
drawClips(ctx, state, clips, selectedClipId, pendingInPoint);
@@ -114,16 +115,19 @@ function drawPlaceholderLane(
state: TimelineState,
y: number,
height: number,
label: string
label: string,
showLabel: boolean
): void {
ctx.fillStyle = '#2a2a3e';
ctx.fillRect(0, y, state.width, height);
ctx.strokeStyle = '#353550';
ctx.strokeRect(0, y, state.width, height);
ctx.fillStyle = '#6c7086';
ctx.font = '11px -apple-system, sans-serif';
ctx.textAlign = 'center';
ctx.fillText(`Generating ${label}…`, state.width / 2, y + height / 2 + 4);
if (showLabel) {
ctx.fillStyle = '#6c7086';
ctx.font = '11px -apple-system, sans-serif';
ctx.textAlign = 'center';
ctx.fillText(`Generating ${label}…`, state.width / 2, y + height / 2 + 4);
}
}
export function drawPlayhead(