From 0a0dde057d6ce7da8430325833b761010772cde8 Mon Sep 17 00:00:00 2001 From: Psychotoxical Date: Wed, 8 Apr 2026 13:30:01 +0200 Subject: [PATCH] feat(seekbar): fade edges on waveform style Apply a destination-in gradient mask after drawing the waveform bars so both the left and right edges fade smoothly to transparent instead of cutting off abruptly. Co-Authored-By: Claude Sonnet 4.6 --- src/components/WaveformSeek.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/components/WaveformSeek.tsx b/src/components/WaveformSeek.tsx index cc3c3053..1d6e2842 100644 --- a/src/components/WaveformSeek.tsx +++ b/src/components/WaveformSeek.tsx @@ -152,6 +152,18 @@ function drawWaveform( ctx.shadowBlur = 0; } ctx.globalAlpha = 1; + + // Fade both edges to transparent using destination-in gradient mask + const fadeW = Math.min(22, w * 0.07); + const mask = ctx.createLinearGradient(0, 0, w, 0); + mask.addColorStop(0, 'transparent'); + mask.addColorStop(fadeW / w, 'black'); + mask.addColorStop(1 - fadeW / w, 'black'); + mask.addColorStop(1, 'transparent'); + ctx.globalCompositeOperation = 'destination-in'; + ctx.fillStyle = mask; + ctx.fillRect(0, 0, w, h); + ctx.globalCompositeOperation = 'source-over'; } function drawLineDot(canvas: HTMLCanvasElement, progress: number, buffered: number) {