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

Show the list of musics

Browse Source
This commit is contained in:
Pierre HUBERT 2022-03-24 14:43:28 +01:00
parent 1ff98b7bbf
commit 702ce78a70
2 changed files with 169 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
lib/api.dart
View File

@ -1,7 +1,7 @@
import 'package:dio/dio.dart'; import 'package:dio/dio.dart';
import 'package:music_web_player/config.dart'; import 'package:music_web_player/config.dart';
class MusicEntry { class MusicEntry implements Comparable<MusicEntry> {
final int id; final int id;
final String artist; final String artist;
final String title; final String title;
@ -13,6 +13,16 @@ class MusicEntry {
}); });
String get coverCacheKey => "cover-$id"; String get coverCacheKey => "cover-$id";
String get fullName => "$artist - $title";
@override
String toString() => "MusicEntry($id, $artist, $title)";
@override
int compareTo(MusicEntry other) {
return fullName.compareTo(other.fullName);
}
} }
typedef MusicsList = List<MusicEntry>; typedef MusicsList = List<MusicEntry>;
@ -27,11 +37,15 @@ class API {
throw Exception("Request failed with status ${response.statusCode} !"); throw Exception("Request failed with status ${response.statusCode} !");
} }
return response.data final MusicsList list = response.data
.map((r) => .map((r) =>
MusicEntry(id: r["id"], artist: r["artist"], title: r["title"])) MusicEntry(id: r["id"], artist: r["artist"], title: r["title"]))
.toList() .toList()
.cast<MusicEntry>(); .cast<MusicEntry>();
list.sort();
return list;
} }
} }

248
lib/ui/music_player.dart
View File

@ -17,6 +17,8 @@ extension DurationExt on Duration {
} }
} }
const double playlistWidth = 300;
class MusicPlayer extends StatefulWidget { class MusicPlayer extends StatefulWidget {
final MusicsList musicsList; final MusicsList musicsList;
@ -38,19 +40,21 @@ class _MusicPlayerState extends State<MusicPlayer> {
Duration? get _position => _videoPlayerController?.value.position; Duration? get _position => _videoPlayerController?.value.position;
final List<MusicEntry> stack = []; final List<MusicEntry> _stack = [];
int currMusicPos = 0; int currMusicPos = 0;
var _showPlaylist = true;
MusicEntry get currMusic { MusicEntry get currMusic {
if (currMusicPos < 0) currMusicPos = 0; if (currMusicPos < 0) currMusicPos = 0;
// Automatically choose next music if required // Automatically choose next music if required
if (currMusicPos >= stack.length) { if (currMusicPos >= _stack.length) {
var nextId = rng.nextInt(widget.musicsList.length); var nextId = rng.nextInt(widget.musicsList.length);
stack.add(widget.musicsList[nextId]); _stack.add(widget.musicsList[nextId]);
} }
return stack[currMusicPos]; return _stack[currMusicPos];
} }
Future<void> _play() async { Future<void> _play() async {
@ -101,6 +105,12 @@ class _MusicPlayerState extends State<MusicPlayer> {
await _play(); await _play();
} }
void _playMusic(MusicEntry music) async {
_stack.insert(currMusicPos + 1, music);
_playNext();
print(_stack);
}
void _updatePosition(Duration d) => _videoPlayerController?.seekTo(d); void _updatePosition(Duration d) => _videoPlayerController?.seekTo(d);
@override @override
@ -112,108 +122,156 @@ class _MusicPlayerState extends State<MusicPlayer> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return LayoutBuilder( return LayoutBuilder(
builder: (context, constraints) => Stack( builder: (context, constraints) {
children: [ final mainAreaWidth =
// Background image constraints.maxWidth - (_showPlaylist ? playlistWidth : 0);
CoverImage(
music: currMusic,
width: constraints.maxWidth,
height: constraints.maxHeight,
fit: BoxFit.cover,
),
ClipRRect( return fluent.Row(
// Clip it cleanly. children: [
child: BackdropFilter( SizedBox(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10), width: mainAreaWidth,
child: Container( child: Stack(
color: Colors.black.withOpacity(0.8), children: [
alignment: Alignment.center, // Background image
child: SizedBox( CoverImage(
width: constraints.maxWidth, music: currMusic,
height: constraints.maxHeight, width: mainAreaWidth,
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(
width: mainAreaWidth,
child: _buildPlayerWidget(),
),
Positioned(
top: 10, right: 10, child: _buildToggleListButton()),
],
), ),
), ),
)),
_buildCenter(), // Playlist
], _showPlaylist
), ? SizedBox(
width: playlistWidth,
child: _buildPlaylistPane(),
)
: Container(),
],
);
},
); );
} }
Widget _buildCenter() { Widget _buildPlayerWidget() => fluent.Center(
return fluent.Center( child: SizedBox(
child: SizedBox( width: 250,
width: 250, child: Column(
child: Column( mainAxisAlignment: fluent.MainAxisAlignment.center,
mainAxisAlignment: fluent.MainAxisAlignment.center, crossAxisAlignment: fluent.CrossAxisAlignment.center,
crossAxisAlignment: fluent.CrossAxisAlignment.center, children: [
children: [ Material(
Material( borderRadius: const BorderRadius.all(
borderRadius: const BorderRadius.all( Radius.circular(18.0),
Radius.circular(18.0), ),
clipBehavior: Clip.hardEdge,
child: CoverImage(
width: 250,
height: 250,
music: currMusic,
fit: BoxFit.cover,
backgroundColor: Colors.black12,
icon:
const Icon(FluentIcons.music_note_2_24_regular, size: 90),
),
), ),
clipBehavior: Clip.hardEdge, const SizedBox(height: 40),
child: CoverImage( Text(
width: 250, currMusic.title,
height: 250, style: const TextStyle(fontSize: 22),
music: currMusic, textAlign: TextAlign.center,
fit: BoxFit.cover,
backgroundColor: Colors.black12,
icon: const Icon(FluentIcons.music_note_2_24_regular, size: 90),
), ),
), const SizedBox(height: 20),
const SizedBox(height: 40), Text(currMusic.artist, textAlign: TextAlign.center),
Text( const fluent.SizedBox(height: 40),
currMusic.title, fluent.Row(
style: const TextStyle(fontSize: 22), children: [
textAlign: TextAlign.center, DurationText(_position),
), const SizedBox(width: 15),
const SizedBox(height: 20), Flexible(
Text(currMusic.artist, textAlign: TextAlign.center), child: fluent.Slider(
const fluent.SizedBox(height: 40), max: _duration?.inSeconds as double? ?? 0,
fluent.Row( value: _position?.inSeconds as double? ?? 0,
children: [ onChanged: (d) =>
DurationText(_position), _updatePosition(Duration(seconds: d.toInt())),
const SizedBox(width: 15), label: _position?.formatted,
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,
), ),
), const SizedBox(width: 15),
const SizedBox(width: 15), DurationText(_duration),
DurationText(_duration), ],
], ),
), const fluent.SizedBox(height: 40),
const fluent.SizedBox(height: 40), fluent.Row(
fluent.Row( children: [
children: [ IconButton(
IconButton( icon: const PlayerIcon(fluent.FluentIcons.previous),
icon: const PlayerIcon(fluent.FluentIcons.previous), onPressed: currMusicPos == 0 ? null : _playPrevious,
onPressed: currMusicPos == 0 ? null : _playPrevious, ),
), const Spacer(),
const Spacer(), IconButton(
IconButton( icon: PlayerIcon(_isPlaying
icon: PlayerIcon(_isPlaying ? fluent.FluentIcons.pause
? fluent.FluentIcons.pause : fluent.FluentIcons.play),
: fluent.FluentIcons.play), onPressed: _isPlaying ? _pause : _play,
onPressed: _isPlaying ? _pause : _play, ),
), const Spacer(),
const Spacer(), IconButton(
IconButton( icon: const PlayerIcon(fluent.FluentIcons.next),
icon: const PlayerIcon(fluent.FluentIcons.next), onPressed: _playNext,
onPressed: _playNext, ),
), ],
], )
) ],
], ),
), ),
), );
Widget _buildToggleListButton() => fluent.ToggleButton(
checked: _showPlaylist,
onChanged: (s) => setState(() => _showPlaylist = s),
child: const fluent.Icon(fluent.FluentIcons.playlist_music),
);
Widget _buildPlaylistPane() {
return ListView.builder(
itemBuilder: (c, i) {
final music = widget.musicsList[i];
return ListTile(
title: Text(music.title),
subtitle: Text(music.artist),
selected: currMusic == music,
onTap: () => _playMusic(music),
);
},
itemCount: widget.musicsList.length,
); );
} }
} }