feat(flutter): queue screen + skipToQueueItem support
- audio_handler: override skipToQueueItem(index) -> _player.seek(zero, index: i) - player/queue_screen.dart: list of MediaItems with current track highlighted (left accent border + Now Playing badge), tap-to-jump on non-current rows - /queue route + queue_music icon on /now-playing AppBar Reorder + remove deferred for v1.
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||||
|
import 'package:go_router/go_router.dart';
|
||||||
|
|
||||||
import '../theme/theme_extension.dart';
|
import '../theme/theme_extension.dart';
|
||||||
import 'player_provider.dart';
|
import 'player_provider.dart';
|
||||||
@@ -28,6 +29,13 @@ class NowPlayingScreen extends ConsumerWidget {
|
|||||||
icon: Icon(Icons.expand_more, color: fs.parchment),
|
icon: Icon(Icons.expand_more, color: fs.parchment),
|
||||||
onPressed: () => Navigator.of(context).pop(),
|
onPressed: () => Navigator.of(context).pop(),
|
||||||
),
|
),
|
||||||
|
actions: [
|
||||||
|
IconButton(
|
||||||
|
icon: Icon(Icons.queue_music, color: fs.parchment),
|
||||||
|
tooltip: 'Queue',
|
||||||
|
onPressed: () => GoRouter.of(context).push('/queue'),
|
||||||
|
),
|
||||||
|
],
|
||||||
),
|
),
|
||||||
body: SafeArea(
|
body: SafeArea(
|
||||||
child: Padding(
|
child: Padding(
|
||||||
|
|||||||
@@ -0,0 +1,118 @@
|
|||||||
|
import 'package:audio_service/audio_service.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||||
|
import 'package:go_router/go_router.dart';
|
||||||
|
|
||||||
|
import '../theme/theme_extension.dart';
|
||||||
|
import 'player_provider.dart';
|
||||||
|
|
||||||
|
class QueueScreen extends ConsumerWidget {
|
||||||
|
const QueueScreen({super.key});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context, WidgetRef ref) {
|
||||||
|
final fs = Theme.of(context).extension<FabledSwordTheme>()!;
|
||||||
|
final queue = ref.watch(queueProvider).value ?? const [];
|
||||||
|
final current = ref.watch(mediaItemProvider).value;
|
||||||
|
return Scaffold(
|
||||||
|
backgroundColor: fs.obsidian,
|
||||||
|
appBar: AppBar(
|
||||||
|
backgroundColor: fs.obsidian,
|
||||||
|
elevation: 0,
|
||||||
|
leading: IconButton(
|
||||||
|
icon: Icon(Icons.arrow_back, color: fs.parchment),
|
||||||
|
onPressed: () => context.pop(),
|
||||||
|
),
|
||||||
|
title: Text('Queue', style: TextStyle(color: fs.parchment)),
|
||||||
|
),
|
||||||
|
body: queue.isEmpty
|
||||||
|
? Center(
|
||||||
|
child: Text('Queue is empty.', style: TextStyle(color: fs.ash)),
|
||||||
|
)
|
||||||
|
: ListView.separated(
|
||||||
|
itemCount: queue.length,
|
||||||
|
separatorBuilder: (_, __) => Divider(height: 1, color: fs.iron),
|
||||||
|
itemBuilder: (ctx, i) => _QueueRow(
|
||||||
|
item: queue[i],
|
||||||
|
index: i,
|
||||||
|
isCurrent: current?.id == queue[i].id,
|
||||||
|
onTap: () async {
|
||||||
|
final h = ref.read(audioHandlerProvider);
|
||||||
|
await h.skipToQueueItem(i);
|
||||||
|
await h.play();
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _QueueRow extends StatelessWidget {
|
||||||
|
const _QueueRow({
|
||||||
|
required this.item,
|
||||||
|
required this.index,
|
||||||
|
required this.isCurrent,
|
||||||
|
required this.onTap,
|
||||||
|
});
|
||||||
|
|
||||||
|
final MediaItem item;
|
||||||
|
final int index;
|
||||||
|
final bool isCurrent;
|
||||||
|
final VoidCallback onTap;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final fs = Theme.of(context).extension<FabledSwordTheme>()!;
|
||||||
|
final dur = item.duration;
|
||||||
|
String? durLabel;
|
||||||
|
if (dur != null) {
|
||||||
|
final m = (dur.inSeconds ~/ 60).toString().padLeft(2, '0');
|
||||||
|
final s = (dur.inSeconds % 60).toString().padLeft(2, '0');
|
||||||
|
durLabel = '$m:$s';
|
||||||
|
}
|
||||||
|
return InkWell(
|
||||||
|
onTap: isCurrent ? null : onTap,
|
||||||
|
child: Container(
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
border: isCurrent
|
||||||
|
? Border(left: BorderSide(color: fs.accent, width: 2))
|
||||||
|
: null,
|
||||||
|
color: isCurrent ? fs.iron : null,
|
||||||
|
),
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
|
||||||
|
child: Row(children: [
|
||||||
|
if (isCurrent)
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.only(right: 8),
|
||||||
|
child: Icon(Icons.graphic_eq, color: fs.accent, size: 16),
|
||||||
|
),
|
||||||
|
Expanded(
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
item.title,
|
||||||
|
maxLines: 1,
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
style: TextStyle(
|
||||||
|
color: isCurrent ? fs.accent : fs.parchment,
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: isCurrent ? FontWeight.w500 : FontWeight.w400,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Text(
|
||||||
|
'${item.artist ?? ''} · ${item.album ?? ''}',
|
||||||
|
maxLines: 1,
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
style: TextStyle(color: fs.ash, fontSize: 12),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
if (durLabel != null)
|
||||||
|
Text(durLabel, style: TextStyle(color: fs.ash, fontSize: 12)),
|
||||||
|
]),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -11,6 +11,7 @@ import '../library/home_screen.dart';
|
|||||||
import '../library/library_screen.dart';
|
import '../library/library_screen.dart';
|
||||||
import '../player/now_playing_screen.dart';
|
import '../player/now_playing_screen.dart';
|
||||||
import '../player/player_bar.dart';
|
import '../player/player_bar.dart';
|
||||||
|
import '../player/queue_screen.dart';
|
||||||
import '../playlists/playlist_detail_screen.dart';
|
import '../playlists/playlist_detail_screen.dart';
|
||||||
import '../playlists/playlists_list_screen.dart';
|
import '../playlists/playlists_list_screen.dart';
|
||||||
import '../search/search_screen.dart';
|
import '../search/search_screen.dart';
|
||||||
@@ -55,6 +56,7 @@ GoRouter buildRouter(Ref ref) {
|
|||||||
builder: (_, s) => AlbumDetailScreen(id: s.pathParameters['id']!),
|
builder: (_, s) => AlbumDetailScreen(id: s.pathParameters['id']!),
|
||||||
),
|
),
|
||||||
GoRoute(path: '/now-playing', builder: (_, __) => const NowPlayingScreen()),
|
GoRoute(path: '/now-playing', builder: (_, __) => const NowPlayingScreen()),
|
||||||
|
GoRoute(path: '/queue', builder: (_, __) => const QueueScreen()),
|
||||||
GoRoute(path: '/search', builder: (_, __) => const SearchScreen()),
|
GoRoute(path: '/search', builder: (_, __) => const SearchScreen()),
|
||||||
GoRoute(path: '/library', builder: (_, __) => const LibraryScreen()),
|
GoRoute(path: '/library', builder: (_, __) => const LibraryScreen()),
|
||||||
GoRoute(path: '/playlists', builder: (_, __) => const PlaylistsListScreen()),
|
GoRoute(path: '/playlists', builder: (_, __) => const PlaylistsListScreen()),
|
||||||
|
|||||||
Reference in New Issue
Block a user