Skip to content

Show track progress as darker blue fill in tracklist rows

jedmund requested to merge jedmund/track-progress-bar into main

Adds a per-row progress indicator to the expanded tracklist. The currently playing track renders a slightly darker blue (bg-blue-100) fill that grows left-to-right as the song plays, edge-to-edge within the row and clipped by the row border radius — as if the row itself is filling with color.

Changes

  • src/routes/+page.svelte: track currentTime/duration from the audio element's ontimeupdate, reset them in stopAudio() and playTrack(), derive progress, pass to FileList.
  • src/lib/components/FileList.svelte: new progress prop. Row buttons get relative overflow-hidden so rounded-lg clips the fill. An absolutely-positioned bg-blue-100 div spans the row height and widens with progress; content spans get relative so they paint above it.

Merge request reports