Add renovate.json

.gitignore

@@ -32,7 +32,6 @@
 /build/
 
 # Web related
-lib/generated_plugin_registrant.dart
 
 # Symbolication related
 app.*.symbols

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

@@ -17,7 +17,7 @@ extension DurationExt on Duration {
   }
 }
 
-const double playlistWidth = 300;
+const smartphoneSize = 700;
 
 class MusicPlayer extends StatefulWidget {
   final MusicsList musicsList;
@@ -55,7 +55,7 @@ class _MusicPlayerState extends State<MusicPlayer> {
 
     // Automatically choose next music if required
     if (currMusicPos >= _stack.length) {
-      var list = _playFilteredMusics
+      var list = (_playFilteredMusics && (_filteredList?.length ?? 0) > 1)
           ? _filteredList ?? widget.musicsList
           : widget.musicsList;
       var nextId = rng.nextInt(list.length);
@@ -156,82 +156,111 @@ class _MusicPlayerState extends State<MusicPlayer> {
 
   @override
   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() => _buildWithBackground(LayoutBuilder(
-          children: [
+        builder: (context, constraints) {
-            SizedBox(
+          return fluent.Row(
-              width: mainAreaWidth,
+            children: [
-              child: Stack(
+              SizedBox(
-                children: [
+                width: constraints.maxWidth,
-                  // Background image
+                child: Stack(
-                  CoverImage(
+                  children: [
-                    music: currMusic,
+                    fluent.SizedBox(
-                    width: mainAreaWidth,
+                      width: constraints.maxWidth,
-                    height: constraints.maxHeight,
+                      child: _buildPlayerWidget(),
-                    fit: BoxFit.cover,
+                    ),
-                  ),
+                    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
+  Widget _playerWithPlaylistPane() => LayoutBuilder(
-                  ClipRRect(
+        builder: (context, constraints) {
-                    // Clip it cleanly.
+          const double playerSize = 100;
-                    child: BackdropFilter(
+          return Column(
-                      filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
+            children: [
-                      child: Container(
+              fluent.SizedBox(
-                        color: Colors.black.withOpacity(0.8),
+                height: constraints.maxHeight - playerSize,
-                        alignment: Alignment.center,
+                child: _buildPlaylistPane(),
-                        child: SizedBox(
+              ),
-                          width: mainAreaWidth,
+              fluent.SizedBox(
-                          height: constraints.maxHeight,
+                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(
+                    child
-                    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(),
-                        ],
-                      )),
-                ],
               ),
-            ),
+            ],
-
+          );
-            // 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(
+                  _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),
-              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) {
+    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(
+        (_filteredList?.length ?? 0) < 2
-          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 +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 {

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

renovate.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json"
+}