pierre/MusicPlayer
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

WIP new UI

Browse Source
This commit is contained in:
Pierre HUBERT 2022-10-01 15:50:49 +02:00
parent 1fc43fce78
commit 25e64f67e0
3 changed files with 212 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/api.dart
View File

@ -30,7 +30,7 @@ typedef MusicsList = List<MusicEntry>;
class API {
/// Get the list of music
static Future<MusicsList> getList() async {
final response = await Dio().get(config.apiURL + "/list",
final response = await Dio().get("${config.apiURL}/list",
options: Options(headers: {"Token": config.apiToken}));
if (response.statusCode != 200) {

172
lib/ui/music_player.dart
View File

@ -156,10 +156,16 @@ class _MusicPlayerState extends State<MusicPlayer> {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
if (!_showPlaylist) {
return _playerWithoutPlaylistPane();
} else {
return _playerWithPlaylistPane();
}
}
Widget _playerWithoutPlaylistPane() => LayoutBuilder(
builder: (context, constraints) {
final mainAreaWidth =
constraints.maxWidth - (_showPlaylist ? playlistWidth : 0);
final mainAreaWidth = constraints.maxWidth;
return fluent.Row(
children: [
@ -218,20 +224,29 @@ class _MusicPlayerState extends State<MusicPlayer> {
],
),
),
// Playlist
_showPlaylist
? SizedBox(
width: playlistWidth,
height: constraints.maxHeight,
child: _buildPlaylistPane(),
)
: Container(),
],
);
},
);
}
Widget _playerWithPlaylistPane() => LayoutBuilder(
builder: (context, constraints) {
const double playerSize = 100;
return Column(
children: [
fluent.SizedBox(
height: constraints.maxHeight - playerSize,
child: _buildPlaylistPane(),
),
fluent.SizedBox(
height: playerSize,
width: constraints.maxWidth,
child: _buildSmallPlayerWidget(constraints.maxWidth),
),
],
);
},
);
Widget _buildPlayerWidget() => fluent.Center(
child: SizedBox(
@ -264,42 +279,130 @@ class _MusicPlayerState extends State<MusicPlayer> {
children: [
DurationText(_position),
const SizedBox(width: 15),
Flexible(
child: fluent.Slider(
max: _duration?.inSeconds as double? ?? 0,
value: _position?.inSeconds as double? ?? 0,
onChanged: (d) =>
_updatePosition(Duration(seconds: d.toInt())),
label: _position?.formatted,
),
),
_buildProgressBar(),
const SizedBox(width: 15),
DurationText(_duration),
],
),
const fluent.SizedBox(height: 40),
_buildPlayersIcons(),
],
),
),
);
Widget _buildSmallPlayerWidget(double width) => fluent.Container(
color: Colors.black,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
fluent.ClipRect(
child: Flexible(
flex: 1,
child: ConstrainedBox(
constraints:
BoxConstraints(maxWidth: min(350, width * (1 / 2))),
child: Row(
children: [
RoundedImage(
child: CoverImage(
music: currMusic,
width: 80,
height: 80,
backgroundColor: Colors.black,
fit: BoxFit.cover,
),
),
// Artist area
const SizedBox(width: 10),
fluent.ClipRect(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
currMusic.title,
style: const TextStyle(fontSize: 22),
overflow: TextOverflow.ellipsis,
),
Text(
currMusic.artist,
textAlign: TextAlign.start,
overflow: TextOverflow.ellipsis,
),
],
),
)
],
),
),
),
),
const Spacer(),
Flexible(
child: ConstrainedBox(
constraints:
BoxConstraints(maxWidth: min(500, width * (1 / 4))),
child: Column(
children: [
fluent.Row(
children: [
DurationText(_position),
const SizedBox(width: 20),
_buildProgressBar(),
const SizedBox(width: 20),
DurationText(_duration),
],
),
const SizedBox(height: 5),
_buildPlayersIcons(25),
],
)),
),
const Spacer(),
_buildToggleListButton()
],
),
),
);
Widget _buildPlayersIcons([double? size]) => fluent.Row(
children: [
IconButton(
icon: const PlayerIcon(fluent.FluentIcons.previous),
icon: PlayerIcon(
fluent.FluentIcons.previous,
size: size,
),
onPressed: currMusicPos == 0 ? null : _playPrevious,
),
const Spacer(),
IconButton(
icon: PlayerIcon(_isPlaying
? fluent.FluentIcons.pause
: fluent.FluentIcons.play),
icon: PlayerIcon(
_isPlaying ? fluent.FluentIcons.pause : fluent.FluentIcons.play,
size: size,
),
onPressed: _isPlaying ? _pause : _play,
),
const Spacer(),
IconButton(
icon: const PlayerIcon(fluent.FluentIcons.next),
icon: PlayerIcon(
fluent.FluentIcons.next,
size: size,
),
onPressed: _playNext,
),
],
)
],
),
);
Widget _buildProgressBar() => Flexible(
child: fluent.Slider(
max: _duration?.inSeconds as double? ?? 0,
value: _position?.inSeconds as double? ?? 0,
onChanged: (d) => _updatePosition(Duration(seconds: d.toInt())),
label: _position?.formatted,
),
);
@ -364,7 +467,9 @@ class _MusicPlayerState extends State<MusicPlayer> {
itemCount: (_filteredList ?? widget.musicsList).length,
),
),
ListTile(
_filteredList == null
? Container()
: ListTile(
leading: fluent.ToggleSwitch(
checked: _playFilteredMusics,
onChanged: (v) => setState(() => _playFilteredMusics = v),
@ -378,11 +483,12 @@ class _MusicPlayerState extends State<MusicPlayer> {
class PlayerIcon extends StatelessWidget {
final IconData icon;
final double? size;
const PlayerIcon(this.icon, {Key? key}) : super(key: key);
const PlayerIcon(this.icon, {Key? key, this.size}) : super(key: key);
@override
Widget build(BuildContext context) => Icon(icon, size: 35);
Widget build(BuildContext context) => Icon(icon, size: size ?? 35);
}
class DurationText extends StatelessWidget {

2
lib/ui/player_app.dart
View File

@ -20,11 +20,11 @@ class PlayerApp extends StatelessWidget {
brightness: Brightness.dark,
),
home: fluent.FluentTheme(
child: const AppHome(),
data: fluent.ThemeData(
iconTheme: const IconThemeData(color: Colors.white),
brightness: fluent.Brightness.dark,
),
child: const AppHome(),
),
);
}