bvandeusen/minstrel
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 46 Wiki Activity

feat(web,flutter): #401 — now-playing highlight on TrackRow + PlaylistTrackRow

Browse Source 
Cross-platform consistency: when a track is currently playing, its row
on the album / liked / history / search / playlist detail surfaces
gets the same accent-border + bg-lift treatment that QueueTrackRow
applies on the queue panel. Closes the inconsistency caught during
the #375 DRY audit (the queue row had a "you are here" indicator;
other track-row surfaces did not).

Web — TrackRow.svelte + PlaylistTrackRow.svelte:
  isCurrent = player.current?.id === track.id
  → border-l-2 border-l-accent bg-surface-hover when true.
  PlaylistTrackRow additionally gates on !isUnavailable so deleted
  rows never match a phantom playing id.

Flutter — TrackRow + _PlaylistTrackRow:
  TrackRow becomes a ConsumerWidget, watches mediaItemProvider, and
  wraps its InkWell in a Container whose BoxDecoration carries the
  fs.iron background + 2px fs.accent left border when current. Title
  text also shifts to fs.accent and FontWeight.w500. Same pattern for
  _PlaylistTrackRow.

No "Now playing" pill on these surfaces — the player bar already
names the track, so the accent band alone reads as enough cue.

For #401 / #356 umbrella.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
bvandeusen
2026-05-13 14:05:33 -04:00
co-authored by Claude Opus 4.7
parent e282766268
commit bb9e979876
4 changed files with 135 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/TrackRow.svelte
+9 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import type { TrackRef } from '$lib/api/types';
import { formatDuration } from '$lib/media/duration';
import { playQueue, enqueueTrack, playRadio } from '$lib/player/store.svelte';
import { player, playQueue, enqueueTrack, playRadio } from '$lib/player/store.svelte';
import { Plus } from 'lucide-svelte';
import LikeButton from './LikeButton.svelte';
import TrackMenu from './TrackMenu.svelte';
@@ -16,6 +16,13 @@
const track = $derived(tracks[index]);
// Mirrors QueueTrackRow's "now playing" treatment so the user sees
// which row in the album / liked / history / search view is currently
// playing without having to read the player bar. Only the accent
// border + bg lift — no "Now playing" pill, since the player bar
// already names the track.
const isCurrent = $derived(player.current?.id === track.id);
function activate() {
if (onPlay) onPlay(tracks, index);
else playQueue(tracks, index);
@@ -49,7 +56,7 @@
aria-label={track.title}
onclick={onRowClick}
onkeydown={onRowKey}
class="grid w-full cursor-pointer grid-cols-[32px_1fr_auto_auto_auto_auto_auto] items-center gap-4 px-3 py-2 text-left text-sm odd:bg-surface/50 hover:bg-surface focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
class="grid w-full cursor-pointer grid-cols-[32px_1fr_auto_auto_auto_auto_auto] items-center gap-4 px-3 py-2 text-left text-sm odd:bg-surface/50 hover:bg-surface focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent {isCurrent ? 'border-l-2 border-l-accent bg-surface-hover' : ''}"
>
<span class="text-right tabular-nums text-text-secondary">
{track.track_number ?? '—'}