fixes to shuffle and queue

This commit is contained in:
Forrest 2026-07-30 15:30:07 -04:00
parent 351d47b3ff
commit 5bf85a5f44
3 changed files with 312 additions and 55 deletions

View file

@ -5,6 +5,7 @@
import 'dart:async';
import 'dart:convert';
import 'dart:io' show File, Platform;
import 'dart:math' show Random;
import 'package:flutter/foundation.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
@ -108,6 +109,14 @@ class PlaybackController extends StateNotifier<PlaybackState> {
AudioPlayer? _player;
final Random _random = Random();
/// Snapshot of the queue order taken the moment shuffle was enabled, so
/// disabling it can restore the original (album / track-list) order. Null
/// while shuffle is off, or after a restart restored a shuffled queue (the
/// pre-shuffle order isn't persisted, so we can't rebuild it then).
List<Song>? _unshuffledOrder;
/// Coalesces rapid state changes (a position tick every second) into at most
/// one disk write per window.
Timer? _saveTimer;
@ -202,11 +211,26 @@ class PlaybackController extends StateNotifier<PlaybackState> {
// itself have been unstreamable).
final target = songs[startIndex.clamp(0, songs.length - 1)];
final targetIndex = streamable.indexOf(target);
final start =
var start =
targetIndex >= 0 ? targetIndex : startIndex.clamp(0, streamable.length - 1);
// With shuffle on, a fresh play still plays the chosen song first and
// shuffles the rest (we own the order — the player's own shuffle stays off).
// Remember the incoming order so a later un-shuffle can restore it.
var ordered = streamable;
if (state.shuffle && streamable.length > 1) {
_unshuffledOrder = [...streamable];
final first = streamable[start];
final rest = [...streamable]..removeAt(start);
rest.shuffle(_random);
ordered = [first, ...rest];
start = 0;
} else {
_unshuffledOrder = null;
}
state = state.copyWith(
queue: streamable,
queue: ordered,
currentIndex: start,
position: Duration.zero,
);
@ -221,13 +245,30 @@ class PlaybackController extends StateNotifier<PlaybackState> {
return;
}
await player.setAudioSources(
streamable.map(_sourceFor).toList(),
ordered.map(_sourceFor).toList(),
initialIndex: start,
);
await player.play();
// currentIndexStream fires _notifyCurrent for the started track.
}
/// Start playing the queue entry at [index] without rebuilding the queue —
/// used by the queue list so tapping a row jumps to it and keeps the current
/// (possibly shuffled) order intact.
Future<void> jumpTo(int index) async {
final q = state.queue;
if (index < 0 || index >= q.length) return;
final player = _player;
if (player == null) {
state = state.copyWith(currentIndex: index, position: Duration.zero);
_notifyCurrent();
return;
}
await player.seek(Duration.zero, index: index);
await player.play();
// currentIndexStream fires _notifyCurrent for the jumped-to track.
}
/// Insert [song] right after the current track (Timbre's "play next").
/// Falls back to [playSongs] when nothing is playing.
Future<void> playNext(Song song) async {
@ -313,15 +354,76 @@ class PlaybackController extends StateNotifier<PlaybackState> {
Future<void> seek(Duration position) async => _player?.seek(position);
/// Toggle shuffle by physically reordering the queue.
///
/// just_audio's built-in shuffle only reorders an invisible internal index —
/// `state.queue` (and therefore the queue UI) stays in album order, so the
/// playing track appears to jump around and `playNext` / `addToQueue` insert
/// relative to a position the shuffle ignores. Instead we own the order:
/// enabling shuffles only the *upcoming* songs and keeps the current track
/// (and already-played history) in place; disabling restores the pre-shuffle
/// order, dropping anything since removed and appending anything since added.
/// The player's own shuffle mode is left off permanently.
Future<void> toggleShuffle() async {
final enabled = !state.shuffle;
final q = state.queue;
final cur = state.currentIndex;
state = state.copyWith(shuffle: enabled);
final player = _player;
if (player != null) {
await player.setShuffleModeEnabled(enabled);
if (q.isEmpty || cur == null) return;
if (enabled) {
_unshuffledOrder = [...q];
final head = q.sublist(0, cur + 1);
final tail = q.sublist(cur + 1)..shuffle(_random);
await _applyOrder([...head, ...tail]);
} else {
final original = _unshuffledOrder;
_unshuffledOrder = null;
if (original == null) return; // e.g. a shuffled queue restored on launch.
final live = q.toSet();
final originalSet = original.toSet();
final restored = <Song>[
for (final s in original) if (live.contains(s)) s,
for (final s in q) if (!originalSet.contains(s)) s,
];
await _applyOrder(restored);
}
}
/// Reorder both `state.queue` and the player playlist to match [target].
///
/// [target] must be a permutation of the current queue by object identity.
/// We rebuild the player's sources from [target] in one shot (rather than a
/// sequence of live moves) so `state.queue` and the player can never drift
/// out of alignment — the playing track is reloaded at its current position,
/// so at most it re-buffers briefly. `currentIndex` follows the playing track
/// to its new slot.
Future<void> _applyOrder(List<Song> target) async {
final cur = state.current;
var newIndex = state.currentIndex ?? 0;
if (cur != null) {
final idx = target.indexWhere((s) => identical(s, cur));
if (idx >= 0) newIndex = idx;
}
final position = state.position;
final wasPlaying = state.playing;
state = state.copyWith(queue: target, currentIndex: newIndex);
final player = _player;
if (player == null) return;
// The current song is unchanged, so [_notifyCurrent]'s id dedupe suppresses
// a spurious re-scrobble when currentIndexStream re-fires for the rebuild.
await player.setAudioSources(
target.map(_sourceFor).toList(),
initialIndex: newIndex,
initialPosition: position,
);
if (wasPlaying) await player.play();
}
/// Cycle off → all → one → off (Timbre's queue-loop toggle, extended with
/// single-track repeat).
Future<void> cycleLoop() async {
@ -452,7 +554,8 @@ class PlaybackController extends StateNotifier<PlaybackState> {
streamable.map(_sourceFor).toList(),
initialIndex: start,
);
await player.setShuffleModeEnabled(shuffle);
// The persisted queue is already stored in play order, so shuffle is a UI
// flag only — the player's own shuffle mode stays off (see [toggleShuffle]).
await player.setLoopMode(loop);
if (savedPos > Duration.zero) await player.seek(savedPos, index: start);
// Intentionally no play() — restore leaves the queue paused.

View file

@ -18,7 +18,6 @@ class HomeScreen extends ConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) {
final client = ref.watch(subsonicClientProvider);
final recentAlbums = ref.watch(recentAlbumsProvider);
final rediscover = ref.watch(rediscoverProvider);
final newest = ref.watch(newestAlbumsProvider);
final random = ref.watch(randomAlbumsProvider);
@ -62,31 +61,9 @@ class HomeScreen extends ConsumerWidget {
artFor: artFor,
),
// Made For You — rediscover artists you're neglecting.
if (rediscover.isNotEmpty)
_Shelf(
title: 'Made For You',
onShuffle: () => ref.read(rediscoverSeedProvider.notifier).state++,
cards: [
for (final a in rediscover)
_ArtCard(
artUri: null,
title: a.name,
subtitle: 'Artist',
fallbackIcon: Icons.person_outline,
onTap: () => Navigator.of(context).push(
MaterialPageRoute(
builder: (_) => ArtistScreen(id: a.artistId),
),
),
),
],
),
// Random — server discovery shelf, shares the shuffle affordance.
_AlbumShelf(
title: 'Random',
albums: random,
// Random — a single spotlighted album, re-rolled via the shuffle action.
_RandomAlbum(
album: random,
artFor: artFor,
onShuffle: () => ref.read(rediscoverSeedProvider.notifier).state++,
),
@ -262,14 +239,12 @@ class _HeroShell extends StatelessWidget {
}
}
/// A horizontal shelf: a header (with an optional shuffle action) over a
/// scrolling row of art cards.
/// A horizontal shelf: a header over a scrolling row of art cards.
class _Shelf extends StatelessWidget {
const _Shelf({required this.title, required this.cards, this.onShuffle});
const _Shelf({required this.title, required this.cards});
final String title;
final List<Widget> cards;
final VoidCallback? onShuffle;
@override
Widget build(BuildContext context) {
@ -279,7 +254,7 @@ class _Shelf extends StatelessWidget {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_ShelfHeader(title: title, onShuffle: onShuffle),
_ShelfHeader(title: title),
const SizedBox(height: TimbreSpacing.md),
SizedBox(
height: 182,
@ -335,26 +310,22 @@ class _AlbumShelf extends StatelessWidget {
required this.title,
required this.albums,
required this.artFor,
this.onShuffle,
});
final String title;
final AsyncValue<List<Album>> albums;
final String? Function(String? coverArt, {int size}) artFor;
final VoidCallback? onShuffle;
@override
Widget build(BuildContext context) {
return albums.when(
loading: () => _Shelf(
title: title,
onShuffle: onShuffle,
cards: const [_ArtCardSkeleton(), _ArtCardSkeleton(), _ArtCardSkeleton()],
),
error: (_, _) => const SizedBox.shrink(),
data: (list) => _Shelf(
title: title,
onShuffle: onShuffle,
cards: [
for (final a in list)
_ArtCard(
@ -371,6 +342,134 @@ class _AlbumShelf extends StatelessWidget {
}
}
/// Random spotlight — a single album shown as cover-left / details-right.
/// Details are the album title, artist, release year and genre. Re-rolls via
/// the header's shuffle affordance. Hidden while loading errors or is empty.
class _RandomAlbum extends StatelessWidget {
const _RandomAlbum({
required this.album,
required this.artFor,
this.onShuffle,
});
final AsyncValue<List<Album>> album;
final String? Function(String? coverArt, {int size}) artFor;
final VoidCallback? onShuffle;
static const double _size = 132;
@override
Widget build(BuildContext context) {
final Album? a = album.maybeWhen(
data: (list) => list.isEmpty ? null : list.first,
orElse: () => null,
);
final bool loading = album.isLoading;
if (a == null && !loading) return const SizedBox.shrink();
return Padding(
padding: const EdgeInsets.only(bottom: TimbreSpacing.xl),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_ShelfHeader(title: 'Random', onShuffle: onShuffle),
const SizedBox(height: TimbreSpacing.md),
if (a == null)
const _RandomSkeleton()
else
InkWell(
onTap: () => Navigator.of(context).push(
MaterialPageRoute(builder: (_) => AlbumScreen(id: a.id)),
),
child: _RandomBody(album: a, artUri: artFor(a.coverArt)),
),
],
),
);
}
}
class _RandomBody extends StatelessWidget {
const _RandomBody({required this.album, required this.artUri});
final Album album;
final String? artUri;
@override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: SizedBox(
width: _RandomAlbum._size,
height: _RandomAlbum._size,
child: ColoredBox(
color: TimbreColors.surface,
child: artUri != null
? Image.network(artUri!,
key: ValueKey(artUri),
fit: BoxFit.cover,
gaplessPlayback: true,
errorBuilder: (_, _, _) => const Icon(
Icons.album_outlined, color: TimbreColors.dimmed))
: const Icon(Icons.album_outlined, color: TimbreColors.dimmed),
),
),
),
const SizedBox(width: TimbreSpacing.lg),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(album.name ?? 'Unknown album',
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: TimbreColors.foreground,
fontWeight: FontWeight.w700)),
const SizedBox(height: TimbreSpacing.xs),
if (album.artist != null)
Text(album.artist!,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(color: TimbreColors.dimmed)),
if (album.year != null)
Text('${album.year}',
style: const TextStyle(
color: TimbreColors.dimmed, fontSize: 12)),
if (album.genre != null)
Text(album.genre!,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: TimbreColors.dimmed, fontSize: 12)),
],
),
),
],
);
}
}
class _RandomSkeleton extends StatelessWidget {
const _RandomSkeleton();
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(4),
child: const SizedBox(
width: _RandomAlbum._size,
height: _RandomAlbum._size,
child: ColoredBox(color: TimbreColors.surface),
),
);
}
}
/// A fixed-width art tile with a caption — the shelf's building block.
class _ArtCard extends StatelessWidget {
const _ArtCard({
@ -378,14 +477,12 @@ class _ArtCard extends StatelessWidget {
required this.artUri,
this.subtitle,
this.onTap,
this.fallbackIcon = Icons.album_outlined,
});
final String title;
final String? artUri;
final String? subtitle;
final VoidCallback? onTap;
final IconData fallbackIcon;
static const double _size = 132;
@ -410,9 +507,10 @@ class _ArtCard extends StatelessWidget {
key: ValueKey(artUri),
fit: BoxFit.cover,
gaplessPlayback: true,
errorBuilder: (_, _, _) =>
Icon(fallbackIcon, color: TimbreColors.dimmed))
: Icon(fallbackIcon, color: TimbreColors.dimmed),
errorBuilder: (_, _, _) => const Icon(
Icons.album_outlined, color: TimbreColors.dimmed))
: const Icon(Icons.album_outlined,
color: TimbreColors.dimmed),
),
),
),

View file

@ -210,28 +210,84 @@ class _QueueToggle extends StatelessWidget {
}
/// The play queue with reorder-free remove controls. Fills whichever space the
/// top region gives it.
class _QueuePanel extends ConsumerWidget {
/// top region gives it. Because the engine keeps `state.queue` in true play
/// order (even when shuffled), rows read top-to-bottom as history → now
/// playing → up next: already-played rows are dimmed and the list auto-scrolls
/// to keep the current track at the top as playback advances.
class _QueuePanel extends ConsumerStatefulWidget {
const _QueuePanel();
@override
Widget build(BuildContext context, WidgetRef ref) {
ConsumerState<_QueuePanel> createState() => _QueuePanelState();
}
class _QueuePanelState extends ConsumerState<_QueuePanel> {
/// Fixed row height: a [TimbreSpacing.minTouchTarget] tall remove button plus
/// the [TimbreSpacing.xs] vertical padding above and below it. Pinning the
/// extent lets us scroll to a row by index without measuring.
static const double _rowExtent =
TimbreSpacing.minTouchTarget + TimbreSpacing.xs * 2;
final ScrollController _controller = ScrollController();
bool _didInitialScroll = false;
@override
void dispose() {
_controller.dispose();
super.dispose();
}
/// Bring the row at [index] to the top of the viewport (clamped), after the
/// current frame so the list has laid out.
void _scrollToIndex(int? index) {
if (index == null || index < 0) return;
WidgetsBinding.instance.addPostFrameCallback((_) {
if (!_controller.hasClients) return;
final target =
(index * _rowExtent).clamp(0.0, _controller.position.maxScrollExtent);
_controller.animateTo(
target,
duration: const Duration(milliseconds: 300),
curve: Curves.easeOutCubic,
);
});
}
@override
Widget build(BuildContext context) {
final state = ref.watch(playbackProvider);
final accent = Theme.of(context).colorScheme.primary;
// Follow the playing track as it advances (or as shuffle reorders things).
ref.listen<int?>(
playbackProvider.select((s) => s.currentIndex),
(_, next) => _scrollToIndex(next),
);
// Jump to the current track the first time the queue is populated.
if (!_didInitialScroll && state.queue.isNotEmpty) {
_didInitialScroll = true;
_scrollToIndex(state.currentIndex);
}
return HairlinePanel(
title: 'Queue',
trailing: '(${state.queue.length})',
padding: const EdgeInsets.symmetric(vertical: TimbreSpacing.md),
child: ListView.builder(
controller: _controller,
padding: EdgeInsets.zero,
itemExtent: _rowExtent,
itemCount: state.queue.length,
itemBuilder: (context, i) {
final song = state.queue[i];
final isCurrent = i == state.currentIndex;
final current = state.currentIndex;
final isCurrent = i == current;
final isPast = current != null && i < current;
final titleColor = isCurrent
? accent
: (isPast ? TimbreColors.dimmed : TimbreColors.foreground);
return InkWell(
onTap: () => ref
.read(playbackProvider.notifier)
.playSongs(state.queue, startIndex: i),
onTap: () => ref.read(playbackProvider.notifier).jumpTo(i),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: TimbreSpacing.lg,
@ -250,7 +306,7 @@ class _QueuePanel extends ConsumerWidget {
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: isCurrent ? accent : TimbreColors.foreground,
color: titleColor,
fontWeight:
isCurrent ? FontWeight.w700 : FontWeight.w400,
),