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 { class API {
/// Get the list of music /// Get the list of music
static Future<MusicsList> getList() async { 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})); options: Options(headers: {"Token": config.apiToken}));
if (response.statusCode != 200) { if (response.statusCode != 200) {

314
lib/ui/music_player.dart
View File

@ -156,82 +156,97 @@ class _MusicPlayerState extends State<MusicPlayer> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return LayoutBuilder( if (!_showPlaylist) {
builder: (context, constraints) { return _playerWithoutPlaylistPane();
final mainAreaWidth = } else {
constraints.maxWidth - (_showPlaylist ? playlistWidth : 0); return _playerWithPlaylistPane();
}
}
return fluent.Row( Widget _playerWithoutPlaylistPane() => LayoutBuilder(
children: [ builder: (context, constraints) {
SizedBox( final mainAreaWidth = constraints.maxWidth;
width: mainAreaWidth,
child: Stack(
children: [
// Background image
CoverImage(
music: currMusic,
width: mainAreaWidth,
height: constraints.maxHeight,
fit: BoxFit.cover,
),
// Blur background image return fluent.Row(
ClipRRect( children: [
// Clip it cleanly. SizedBox(
child: BackdropFilter( width: mainAreaWidth,
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10), child: Stack(
child: Container( children: [
color: Colors.black.withOpacity(0.8), // Background image
alignment: Alignment.center, CoverImage(
child: SizedBox( music: currMusic,
width: mainAreaWidth, width: mainAreaWidth,
height: constraints.maxHeight, height: constraints.maxHeight,
fit: BoxFit.cover,
),
// Blur background image
ClipRRect(
// Clip it cleanly.
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(
color: Colors.black.withOpacity(0.8),
alignment: Alignment.center,
child: SizedBox(
width: mainAreaWidth,
height: constraints.maxHeight,
),
), ),
), ),
), ),
),
fluent.SizedBox( fluent.SizedBox(
width: mainAreaWidth, width: mainAreaWidth,
child: _buildPlayerWidget(), child: _buildPlayerWidget(),
), ),
Positioned( Positioned(
top: 10, top: 10,
right: 10, right: 10,
child: fluent.Row( child: fluent.Row(
children: [ children: [
_buildToggleListButton(), _buildToggleListButton(),
], ],
)), )),
Positioned( Positioned(
bottom: 10, bottom: 10,
right: 10, right: 10,
child: fluent.Row( child: fluent.Row(
children: [ children: [
_buildDownloadTrackButton(), _buildDownloadTrackButton(),
const SizedBox(width: 10), const SizedBox(width: 10),
_buildAboutButton(), _buildAboutButton(),
], ],
)), )),
], ],
),
), ),
), ],
);
},
);
// Playlist Widget _playerWithPlaylistPane() => LayoutBuilder(
_showPlaylist builder: (context, constraints) {
? SizedBox( const double playerSize = 100;
width: playlistWidth, return Column(
height: constraints.maxHeight, children: [
child: _buildPlaylistPane(), fluent.SizedBox(
) height: constraints.maxHeight - playerSize,
: Container(), child: _buildPlaylistPane(),
], ),
); fluent.SizedBox(
}, height: playerSize,
); width: constraints.maxWidth,
} child: _buildSmallPlayerWidget(constraints.maxWidth),
),
],
);
},
);
Widget _buildPlayerWidget() => fluent.Center( Widget _buildPlayerWidget() => fluent.Center(
child: SizedBox( child: SizedBox(
@ -264,45 +279,133 @@ class _MusicPlayerState extends State<MusicPlayer> {
children: [ children: [
DurationText(_position), DurationText(_position),
const SizedBox(width: 15), const SizedBox(width: 15),
Flexible( _buildProgressBar(),
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,
),
),
const SizedBox(width: 15), const SizedBox(width: 15),
DurationText(_duration), DurationText(_duration),
], ],
), ),
const fluent.SizedBox(height: 40), const fluent.SizedBox(height: 40),
fluent.Row( _buildPlayersIcons(),
children: [
IconButton(
icon: const PlayerIcon(fluent.FluentIcons.previous),
onPressed: currMusicPos == 0 ? null : _playPrevious,
),
const Spacer(),
IconButton(
icon: PlayerIcon(_isPlaying
? fluent.FluentIcons.pause
: fluent.FluentIcons.play),
onPressed: _isPlaying ? _pause : _play,
),
const Spacer(),
IconButton(
icon: const PlayerIcon(fluent.FluentIcons.next),
onPressed: _playNext,
),
],
)
], ],
), ),
), ),
); );
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: PlayerIcon(
fluent.FluentIcons.previous,
size: size,
),
onPressed: currMusicPos == 0 ? null : _playPrevious,
),
const Spacer(),
IconButton(
icon: PlayerIcon(
_isPlaying ? fluent.FluentIcons.pause : fluent.FluentIcons.play,
size: size,
),
onPressed: _isPlaying ? _pause : _play,
),
const Spacer(),
IconButton(
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,
),
);
Widget _buildDownloadTrackButton() => fluent.Button( Widget _buildDownloadTrackButton() => fluent.Button(
onPressed: () => onPressed: () =>
launchUrlString(currMusic.musicURL, webOnlyWindowName: "_blank"), launchUrlString(currMusic.musicURL, webOnlyWindowName: "_blank"),
@ -364,13 +467,15 @@ class _MusicPlayerState extends State<MusicPlayer> {
itemCount: (_filteredList ?? widget.musicsList).length, itemCount: (_filteredList ?? widget.musicsList).length,
), ),
), ),
ListTile( _filteredList == null
leading: fluent.ToggleSwitch( ? Container()
checked: _playFilteredMusics, : ListTile(
onChanged: (v) => setState(() => _playFilteredMusics = v), leading: fluent.ToggleSwitch(
), checked: _playFilteredMusics,
title: const Text("Play only filtered musics"), onChanged: (v) => setState(() => _playFilteredMusics = v),
) ),
title: const Text("Play only filtered musics"),
)
], ],
); );
} }
@ -378,11 +483,12 @@ class _MusicPlayerState extends State<MusicPlayer> {
class PlayerIcon extends StatelessWidget { class PlayerIcon extends StatelessWidget {
final IconData icon; 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 @override
Widget build(BuildContext context) => Icon(icon, size: 35); Widget build(BuildContext context) => Icon(icon, size: size ?? 35);
} }
class DurationText extends StatelessWidget { class DurationText extends StatelessWidget {

2
lib/ui/player_app.dart
View File

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