feat: implement basic seekbar

lib/api/audio/audioplayer_service.dart

@@ -26,11 +26,19 @@ class AudioPlayerService {
   /// Registers listeners on the player
   void setup() {
     if (_setUp) return;
+    _player.createPositionStream().listen((d) {
+      if (!isPlaying) return;
+      progressNotifier.value = [
+        d.inSeconds,
+        _songList[_player.currentIndex!].duration,
+      ];
+    });
     _player.currentIndexStream.listen((index) {
       logger.d("Done fired");
       songNotifier.value = index == null ? null : _songList[index];
       _setColorScheme();
     });
+
     _setUp = true;
   }
 
@@ -70,10 +78,16 @@ class AudioPlayerService {
     logger.d("Playing ${_player.currentIndex}");
   }
 
+  /// Moves to the specified number of seconds
+  Future<void> seek(double position) async {
+    await _player.seek(Duration(seconds: position.toInt()));
+  }
+
   /// Sets color scheme from image
   Future<void> _setColorScheme() async {
     if (AudioPlayerService().song == null) {
       themeNotifier.value = ColorScheme.fromSeed(seedColor: Colors.deepPurple);
+      return;
     }
     themeNotifier.value = await ColorScheme.fromImageProvider(
       provider: CachedNetworkImageProvider(

lib/main.dart

@@ -35,6 +35,9 @@ final ValueNotifier<ColorScheme> themeNotifier =
 /// Notifier to change theme from inside the app
 final ValueNotifier<Song?> songNotifier = ValueNotifier(null);
 
+/// Notifier for the song progress bar
+final ValueNotifier<List<int>> progressNotifier = ValueNotifier([0, 1]);
+
 /// Main app class
 class MyApp extends StatelessWidget {
   /// Main app class
@@ -58,9 +61,12 @@ class MyApp extends StatelessWidget {
                 return Stack(
                   children: [
                     child!,
-                    Player(
+                    Material(
+                      type: MaterialType.transparency,
+                      child: Player(
                         key: playerKey,
                       ),
+                    ),
                   ],
                 );
               },

lib/widgets/player.dart

@@ -1,6 +1,7 @@
 import 'package:auto_size_text/auto_size_text.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_xlider/flutter_xlider.dart';
 import 'package:ocarina/api/audio/audioplayer_service.dart';
 import 'package:ocarina/api/subsonic/song.dart';
 import 'package:ocarina/main.dart';
@@ -208,13 +209,22 @@ class PlayerState extends State<Player> {
                   ),
                 ),
               ),
-              SizedBox(
+              Container(
+                // Full player controls here
                 height: 90.h,
+                color: Theme.of(context).colorScheme.primaryContainer,
                 width: 100.w,
                 child: Center(
                   child: Column(
                     children: [
-                      ClipRRect(
+                      const SizedBox(
+                        height: 30,
+                      ),
+                      SizedBox(
+                        width: 80.w,
+                        height: 80.w,
+                        child: ClipRRect(
+                          // borderRadius: BorderRadius.circular(16),
                           child: (AudioPlayerService().song == null)
                               ? ColoredBox(
                                   color: Theme.of(context)
@@ -230,7 +240,8 @@ class PlayerState extends State<Player> {
                                   ),
                                 )
                               : (CachedNetworkImage(
-                                cacheKey: AudioPlayerService().song!.coverArtId,
+                                  cacheKey:
+                                      AudioPlayerService().song!.coverArtId,
                                   imageUrl:
                                       AudioPlayerService().song!.coverArtUrl,
                                   placeholder: (c, d) => Shimmer.fromColors(
@@ -260,6 +271,77 @@ class PlayerState extends State<Player> {
                                   },
                                 )),
                         ),
+                      ),
+                      const SizedBox(
+                        height: 10,
+                      ),
+                      SizedBox(
+                        width: 70.w,
+                        height: 40,
+                        child: AutoSizeText(
+                          AudioPlayerService().song?.title ?? "Nothing",
+                          textAlign: TextAlign.center,
+                          style: TextStyle(
+                            fontWeight: FontWeight.bold,
+                            fontSize: 20.sp,
+                          ),
+                          overflowReplacement: TextScroll(
+                            AudioPlayerService().song?.title ?? "Nothing",
+                            textAlign: TextAlign.center,
+                            style: TextStyle(
+                              fontWeight: FontWeight.bold,
+                              fontSize: 20.sp,
+                            ),
+                          ),
+                        ),
+                      ),
+                      SizedBox(
+                        width: 70.w,
+                        height: 50,
+                        child: AutoSizeText(
+                          AudioPlayerService().song?.artistName ?? "Nobody",
+                          style: TextStyle(fontSize: 16.sp),
+                          textAlign: TextAlign.center,
+                          overflowReplacement: TextScroll(
+                            AudioPlayerService().song?.artistName ?? "Nobody",
+                            style: TextStyle(
+                              fontSize: 16.sp,
+                            ),
+                          ),
+                        ),
+                      ),
+                      const SizedBox(
+                        height: 10,
+                      ),
+                      SizedBox(
+                        width: 60.w,
+                        height: 40,
+                        child: Overlay(
+                          initialEntries: [
+                            OverlayEntry(
+                              builder: (c) => ValueListenableBuilder<List<int>>(
+                                valueListenable: progressNotifier,
+                                builder: (c, v, _) {
+                                  return FlutterSlider(
+                                    values: [v[0].toDouble()],
+                                    max: v[1].toDouble(),
+                                    min: 0,
+                                    onDragCompleted:
+                                        (handlerIndex, lowerValue, upperValue) {
+                                      if (AudioPlayerService().song == null) {
+                                        return;
+                                      }
+                                      logger.d(lowerValue);
+                                      AudioPlayerService()
+                                          .seek(lowerValue as double);
+                                    },
+                                  );
+                                },
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
                     ],
                   ),
                 ),

pubspec.lock

@@ -368,6 +368,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_xlider:
+    dependency: "direct main"
+    description:
+      name: flutter_xlider
+      sha256: b83da229b8a2153adeefc5d9e08e0060689c8dc2187b30e3502cf67c1a6495be
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.5.0"
   frontend_server_client:
     dependency: transitive
     description:

pubspec.yaml

@@ -55,6 +55,7 @@ dependencies:
   shared_preferences: ^2.2.3
   dynamic_color: ^1.7.0
   cached_network_image: ^3.3.1
+  flutter_xlider: ^3.5.0
 
 dev_dependencies:
   build_runner: ^2.4.9