bvandeusen
bb9e979876
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>
101 lines
3.6 KiB
Dart
101 lines
3.6 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
|
|
import '../../models/track.dart';
|
|
import '../../player/player_provider.dart';
|
|
import '../../shared/widgets/track_actions/track_actions_button.dart';
|
|
import '../../theme/theme_extension.dart';
|
|
import 'cached_indicator.dart';
|
|
|
|
class TrackRow extends ConsumerWidget {
|
|
const TrackRow({
|
|
required this.track,
|
|
required this.onTap,
|
|
this.trailing,
|
|
this.actions = true,
|
|
super.key,
|
|
});
|
|
final TrackRef track;
|
|
final VoidCallback onTap;
|
|
final Widget? trailing;
|
|
|
|
/// Render the 3-dot TrackActionsButton at the end of the row. Default
|
|
/// true; pass false in surfaces that don't want the menu (e.g. when
|
|
/// showing a static read-only list).
|
|
final bool actions;
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final fs = Theme.of(context).extension<FabledSwordTheme>()!;
|
|
final mins = (track.durationSec ~/ 60).toString().padLeft(2, '0');
|
|
final secs = (track.durationSec % 60).toString().padLeft(2, '0');
|
|
// Watch the currently-playing media item so the row's accent
|
|
// highlight tracks playback state. Matches _QueueRow's visual
|
|
// treatment in queue_screen.dart so the "you are here" cue is
|
|
// consistent across album / playlist / queue surfaces.
|
|
final currentId = ref.watch(mediaItemProvider).value?.id;
|
|
final isCurrent = currentId != null && currentId == track.id;
|
|
return Container(
|
|
decoration: BoxDecoration(
|
|
color: isCurrent ? fs.iron : null,
|
|
border: isCurrent
|
|
? Border(left: BorderSide(color: fs.accent, width: 2))
|
|
: null,
|
|
),
|
|
child: InkWell(
|
|
onTap: onTap,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
|
|
child: Row(children: [
|
|
if (track.trackNumber != null)
|
|
SizedBox(
|
|
width: 22,
|
|
child: Text(
|
|
track.trackNumber.toString(),
|
|
style: TextStyle(color: fs.ash, fontSize: 13),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
track.title,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
color: isCurrent ? fs.accent : fs.parchment,
|
|
fontSize: 14,
|
|
fontWeight:
|
|
isCurrent ? FontWeight.w500 : FontWeight.w400,
|
|
),
|
|
),
|
|
// Skip the artist line entirely when empty so the row
|
|
// height collapses to a single line of title — keeps
|
|
// dense album views from looking padded.
|
|
if (track.artistName.isNotEmpty)
|
|
Text(
|
|
track.artistName,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(color: fs.ash, fontSize: 12),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
CachedIndicator(trackId: track.id),
|
|
Text('$mins:$secs', style: TextStyle(color: fs.ash, fontSize: 12)),
|
|
if (trailing != null)
|
|
Padding(
|
|
padding: const EdgeInsets.only(left: 8),
|
|
child: trailing!,
|
|
),
|
|
if (actions) TrackActionsButton(track: track),
|
|
]),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|