WIP new UI

lib/api.dart

@@ -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) {

lib/ui/music_player.dart

@@ -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 =
+          final mainAreaWidth = constraints.maxWidth;
-            constraints.maxWidth - (_showPlaylist ? playlistWidth : 0);
 
           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(
+                  _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),
                   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
+            icon: PlayerIcon(
-                        ? fluent.FluentIcons.pause
+              _isPlaying ? fluent.FluentIcons.pause : fluent.FluentIcons.play,
-                        : 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 {

lib/ui/player_app.dart

@@ -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(),
       ),
     );
   }