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

fix: CSS-grid layout to preserve video on toggle + magnification enhancements (brighter, larger, minor ticks)

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
cottongin
2026-09-22 17:30:47 -04:00
parent 124542b4c4
commit 23b30be357
2 changed files with 162 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,8 +28,8 @@ const WAVEFORM_LANE_HEIGHT = 40;
const CONTROLS_LANE_HEIGHT = 30;
const TICK_HEIGHT = 10;
const BASE_FONT_SIZE = 12;
const MAGNIFY_BONUS = 6;
const MAGNIFY_RADIUS = 80;
const MAGNIFY_BONUS = 10;
const MAGNIFY_RADIUS = 100;
export function drawTimeline(
ctx: CanvasRenderingContext2D,
@@ -82,6 +82,21 @@ function drawTimeTicks(
ctx.textAlign = 'center';
const baselineY = state.height - CONTROLS_LANE_HEIGHT + TICK_HEIGHT + 14;
// Draw minor ticks first (behind major ticks)
const minorInterval = tickInterval / 4;
const minorTickHeight = TICK_HEIGHT * 0.5;
for (let t = startTick - tickInterval; t <= state.visibleEnd + minorInterval; t += minorInterval) {
if (t < 0 || t > duration) continue;
if (Math.abs(t % tickInterval) < 0.001 || Math.abs(t % tickInterval - tickInterval) < 0.001) continue;
const x = timeToX(t, state);
ctx.strokeStyle = '#35354a';
ctx.beginPath();
ctx.moveTo(x, state.height - CONTROLS_LANE_HEIGHT);
ctx.lineTo(x, state.height - CONTROLS_LANE_HEIGHT + minorTickHeight);
ctx.stroke();
}
// Draw major ticks with labels
for (let t = startTick; t <= state.visibleEnd; t += tickInterval) {
if (t < 0 || t > duration) continue;
const x = timeToX(t, state);
@@ -93,15 +108,25 @@ function drawTimeTicks(
ctx.stroke();
let fontSize = BASE_FONT_SIZE;
let scale = 0;
if (mouseX !== null) {
const distance = Math.abs(x - mouseX);
if (distance < MAGNIFY_RADIUS) {
const scale = (1 + Math.cos((Math.PI * distance) / MAGNIFY_RADIUS)) / 2;
scale = (1 + Math.cos((Math.PI * distance) / MAGNIFY_RADIUS)) / 2;
fontSize = BASE_FONT_SIZE + MAGNIFY_BONUS * scale;
}
}
ctx.fillStyle = '#6c7086';
// Interpolate color from muted (#6c7086) to bright (#cdd6f4)
if (scale > 0) {
const r = Math.round(108 + (205 - 108) * scale);
const g = Math.round(112 + (214 - 112) * scale);
const b = Math.round(134 + (244 - 134) * scale);
ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
} else {
ctx.fillStyle = '#6c7086';
}
ctx.font = `${Math.round(fontSize)}px -apple-system, sans-serif`;
const label = formatTickLabel(t);