gergle/lib/player_ui/body.dart
h7x4 6b82280c14
Multiple changes:
- Split up UI into several files
- Handle connection state better
- Add images
- Granular rebuilding of state dependent widgets
- Fix usage of alert dialogs
- Add some basic theming
- Add dialog for adding multiple links at once
2024-12-18 20:12:14 +01:00

187 lines
5.6 KiB
Dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:gergle/api/commands.dart';
import 'package:gergle/api/events.dart';
import 'package:gergle/player_ui/main.dart';
import 'package:gergle/state/connection_state_bloc.dart';
import 'package:gergle/state/player_state.dart';
import 'package:gergle/state/player_state_bloc.dart';
class PlayerUIBody extends StatelessWidget {
PlayerUIBody({super.key});
final TextEditingController _textController = TextEditingController();
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: playerBlocBuilder(
buildProps: (p) => [p.playlist, p.isPlaying],
builder: (context, playerState) => ReorderableListView.builder(
scrollDirection: Axis.vertical,
itemBuilder: (context, i) =>
_buildPlaylistTile(context, playerState, i),
itemCount: playerState.playlist.length,
onReorder: (from, to) {
BlocProvider.of<ConnectionStateBloc>(context).add(
Command.playlistMove(from, to),
);
if (from < to) {
to -= 1;
}
final item = playerState.playlist.removeAt(from);
playerState.playlist.insert(to, item);
BlocProvider.of<PlayerStateBloc>(context)
.add(PlaylistChange(playerState.playlist, local: true));
},
),
),
),
SizedBox.fromSize(size: const Size.fromHeight(20)),
_buildInputBar(context),
],
);
}
ListTile _buildPlaylistTile(
BuildContext context,
PlayerState playerState,
int i,
) {
final item = playerState.playlist[i];
return ListTile(
key: ValueKey(item.id),
title: Text(item.title ?? item.filename),
subtitle: Text(item.filename),
selected: item.current,
leading: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
"${i + 1}.",
style: Theme.of(context).textTheme.titleLarge,
),
IconButton(
icon: playerState.isPlaying && item.current
? const Icon(Icons.pause)
: const Icon(Icons.play_arrow),
onPressed: () {
BlocProvider.of<ConnectionStateBloc>(context)
.add(Command.playlistGoto(i));
},
),
],
),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: const Icon(Icons.copy),
onPressed: () =>
Clipboard.setData(ClipboardData(text: item.filename)),
),
IconButton(
icon: const Icon(Icons.delete_forever),
color: Colors.redAccent,
onPressed: () {
BlocProvider.of<ConnectionStateBloc>(context)
.add(Command.playlistRemove(i));
},
),
],
),
);
}
Widget _buildInputBar(BuildContext context) {
return Row(
children: [
Expanded(
child: TextField(
controller: _textController,
decoration: InputDecoration(
labelText: 'Add to playlist',
filled: true,
fillColor: const Color.fromARGB(10, 0, 0, 0),
border: OutlineInputBorder(
borderSide:
BorderSide(color: Theme.of(context).primaryColor, width: 2),
borderRadius: BorderRadius.circular(10),
),
),
onSubmitted: (value) {
BlocProvider.of<ConnectionStateBloc>(context)
.add(Command.load(value));
_textController.clear();
},
),
),
SizedBox.fromSize(size: const Size(10, 0)),
IconButton(
icon: const Icon(Icons.send),
onPressed: () {
BlocProvider.of<ConnectionStateBloc>(context)
.add(Command.load(_textController.text));
_textController.clear();
},
),
IconButton(
icon: const Icon(Icons.playlist_add),
onPressed: () async {
final blocProvider = BlocProvider.of<ConnectionStateBloc>(context);
final links = await _showAddManyLinksDialog(context);
if (links == null) {
return;
}
for (final link in links.split('\n')) {
blocProvider.add(Command.load(link));
}
},
),
],
);
}
Future<String?> _showAddManyLinksDialog(BuildContext context) async {
final textController = TextEditingController();
return await showDialog(
context: context,
builder: (context) => AlertDialog(
title: const Text('Add many links'),
content: TextField(
controller: textController,
decoration: const InputDecoration(
labelText: 'Links',
hintText: 'One link per line',
),
maxLines: 10,
),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text('Cancel'),
),
TextButton(
onPressed: () {
Navigator.of(context).pop(textController.text);
},
child: const Text('Add'),
),
],
),
);
}
}