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

Compare commits

base: pierre:1fc43fce7898665459b2b5ae2d32a113bc0c9dba
Branches Tags
pierre:master pierre:renovate/configure
...
compare: pierre:ba6f92e168d088abcfc68546e7be73a09a1607b3
Branches Tags
pierre:renovate/configure pierre:master

5 Commits
1fc43fce78 ... ba6f92e168

Author SHA1 Message Date
Pierre Hubert
ba6f92e168 Improve a little filter box 2022-10-01 16:15:31 +02:00
Pierre Hubert
e4594626ed Fix music icon in new UI 2022-10-01 16:09:01 +02:00
Pierre Hubert
ba6ea515d5 Add blurred background to new UI 2022-10-01 16:05:56 +02:00
Pierre Hubert
fa8f72c376 Improve new UI 2022-10-01 15:56:22 +02:00
Pierre Hubert
25e64f67e0 WIP new UI 2022-10-01 15:50:57 +02:00
3 changed files with 227 additions and 110 deletions
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) {

333
lib/ui/music_player.dart
View File

@@ -17,7 +17,7 @@ extension DurationExt on Duration {
}
}
const double playlistWidth = 300;
const smartphoneSize = 700;
class MusicPlayer extends StatefulWidget {
final MusicsList musicsList;
@@ -156,82 +156,111 @@ class _MusicPlayerState extends State<MusicPlayer> {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
final mainAreaWidth =
constraints.maxWidth - (_showPlaylist ? playlistWidth : 0);
if (!_showPlaylist) {
return _playerWithoutPlaylistPane();
} else {
return _playerWithPlaylistPane();
}
}
return fluent.Row(
children: [
SizedBox(
width: mainAreaWidth,
child: Stack(
children: [
// Background image
CoverImage(
music: currMusic,
width: mainAreaWidth,
height: constraints.maxHeight,
fit: BoxFit.cover,
),
Widget _playerWithoutPlaylistPane() => _buildWithBackground(LayoutBuilder(
builder: (context, constraints) {
return fluent.Row(
children: [
SizedBox(
width: constraints.maxWidth,
child: Stack(
children: [
fluent.SizedBox(
width: constraints.maxWidth,
child: _buildPlayerWidget(),
),
Positioned(
top: 10,
right: 10,
child: fluent.Row(
children: [
_buildToggleListButton(),
],
)),
Positioned(
bottom: 10,
right: 10,
child: fluent.Row(
children: [
_buildDownloadTrackButton(),
const SizedBox(width: 10),
_buildAboutButton(),
],
)),
],
),
),
],
);
},
));
// 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,
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: _buildWithBackground(
_buildSmallPlayerWidget(constraints.maxWidth)),
),
],
);
},
);
Widget _buildWithBackground(Widget child) => LayoutBuilder(
builder: (context, constraints) {
return fluent.Row(
children: [
SizedBox(
width: constraints.maxWidth,
child: Stack(
children: [
// Background image
CoverImage(
music: currMusic,
width: constraints.maxWidth,
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: constraints.maxWidth,
height: constraints.maxHeight,
),
),
),
),
),
fluent.SizedBox(
width: mainAreaWidth,
child: _buildPlayerWidget(),
),
Positioned(
top: 10,
right: 10,
child: fluent.Row(
children: [
_buildToggleListButton(),
],
)),
Positioned(
bottom: 10,
right: 10,
child: fluent.Row(
children: [
_buildDownloadTrackButton(),
const SizedBox(width: 10),
_buildAboutButton(),
],
)),
],
child
],
),
),
),
// Playlist
_showPlaylist
? SizedBox(
width: playlistWidth,
height: constraints.maxHeight,
child: _buildPlaylistPane(),
)
: Container(),
],
);
},
);
}
],
);
},
);
Widget _buildPlayerWidget() => fluent.Center(
child: SizedBox(
@@ -264,45 +293,128 @@ 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),
fluent.Row(
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,
),
],
)
_buildPlayersIcons(),
],
),
),
);
Widget _buildSmallPlayerWidget(double width) {
var partSize = width > smartphoneSize ? width / 3 : width / 2.5;
return Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
fluent.ClipRect(
child: SizedBox(
width: partSize,
child: Row(
children: [
RoundedImage(
child: CoverImage(
music: currMusic,
width: 80,
height: 80,
fit: BoxFit.cover,
backgroundColor: Colors.black12,
icon: const Icon(FluentIcons.music_note_2_24_regular,
size: 30),
),
),
// 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,
),
],
),
)
],
),
),
),
SizedBox(
width: partSize,
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(
onPressed: () =>
launchUrlString(currMusic.musicURL, webOnlyWindowName: "_blank"),
@@ -329,6 +441,8 @@ class _MusicPlayerState extends State<MusicPlayer> {
return Column(
children: [
fluent.TextBox(
decoration: const BoxDecoration(border: Border()),
minHeight: 20,
controller: _filterController,
placeholder: "Filter list...",
onChanged: (s) => _refreshFilteredList(),
@@ -364,13 +478,15 @@ class _MusicPlayerState extends State<MusicPlayer> {
itemCount: (_filteredList ?? widget.musicsList).length,
),
),
ListTile(
leading: fluent.ToggleSwitch(
checked: _playFilteredMusics,
onChanged: (v) => setState(() => _playFilteredMusics = v),
),
title: const Text("Play only filtered musics"),
)
(_filteredList?.length ?? 0) < 2
? Container()
: ListTile(
leading: fluent.ToggleSwitch(
checked: _playFilteredMusics,
onChanged: (v) => setState(() => _playFilteredMusics = v),
),
title: const Text("Play only filtered musics"),
)
],
);
}
@@ -378,11 +494,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(),
),
);
}