✨ User library

lib/router.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:rhythm_box/screens/auth/mobile_login.dart';
 import 'package:rhythm_box/screens/explore.dart';
+import 'package:rhythm_box/screens/library/view.dart';
 import 'package:rhythm_box/screens/player/lyrics.dart';
 import 'package:rhythm_box/screens/player/view.dart';
 import 'package:rhythm_box/screens/playlist/view.dart';
@@ -19,6 +20,11 @@ final router = GoRouter(routes: [
         name: 'explore',
         builder: (context, state) => const ExploreScreen(),
       ),
+      GoRoute(
+        path: '/library',
+        name: 'library',
+        builder: (context, state) => const LibraryScreen(),
+      ),
       GoRoute(
         path: '/search',
         name: 'search',

lib/screens/explore.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:go_router/go_router.dart';
 import 'package:rhythm_box/providers/spotify.dart';
-import 'package:rhythm_box/widgets/auto_cache_image.dart';
+import 'package:rhythm_box/widgets/playlist/playlist_tile.dart';
 import 'package:rhythm_box/widgets/sized_container.dart';
 import 'package:skeletonizer/skeletonizer.dart';
 import 'package:spotify/spotify.dart';
@@ -49,29 +49,8 @@ class _ExploreScreenState extends State<ExploreScreen> {
               itemCount: _featuredPlaylist?.length ?? 20,
               itemBuilder: (context, idx) {
                 final item = _featuredPlaylist?[idx];
-                return ListTile(
+                return PlaylistTile(
-                  leading: ClipRRect(
+                  item: item,
-                    borderRadius: const BorderRadius.all(Radius.circular(8)),
-                    child: item != null
-                        ? AutoCacheImage(
-                            item.images!.first.url!,
-                            width: 64.0,
-                            height: 64.0,
-                          )
-                        : const SizedBox(
-                            width: 64,
-                            height: 64,
-                            child: Center(
-                              child: Icon(Icons.image),
-                            ),
-                          ),
-                  ),
-                  title: Text(item?.name ?? 'Loading...'),
-                  subtitle: Text(
-                    item?.description ?? 'Please stand by...',
-                    maxLines: 2,
-                    overflow: TextOverflow.ellipsis,
-                  ),
                   onTap: () {
                     if (item == null) return;
                     GoRouter.of(context).pushNamed(

lib/screens/library/view.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:rhythm_box/providers/auth.dart';
+import 'package:rhythm_box/widgets/no_login_fallback.dart';
+import 'package:rhythm_box/widgets/playlist/user_playlist_list.dart';
+
+class LibraryScreen extends StatefulWidget {
+  const LibraryScreen({super.key});
+
+  @override
+  State<LibraryScreen> createState() => _LibraryScreenState();
+}
+
+class _LibraryScreenState extends State<LibraryScreen> {
+  late final AuthenticationProvider _authenticate = Get.find();
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: Theme.of(context).colorScheme.surface,
+      child: SafeArea(
+        child: Obx(() {
+          if (_authenticate.auth.value == null) {
+            return const NoLoginFallback();
+          }
+
+          return const Column(
+            children: [
+              Expanded(child: UserPlaylistList()),
+            ],
+          );
+        }),
+      ),
+    );
+  }
+}

lib/screens/player/lyrics.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:rhythm_box/widgets/lyrics/synced.dart';
+import 'package:rhythm_box/widgets/lyrics/synced_lyrics.dart';
 import 'package:rhythm_box/widgets/player/bottom_player.dart';
 
 class LyricsScreen extends StatelessWidget {

lib/screens/player/view.dart

@@ -16,7 +16,7 @@ import 'package:rhythm_box/services/audio_player/audio_player.dart';
 import 'package:rhythm_box/services/duration.dart';
 import 'package:rhythm_box/widgets/auto_cache_image.dart';
 import 'package:rhythm_box/services/audio_services/image.dart';
-import 'package:rhythm_box/widgets/lyrics/synced.dart';
+import 'package:rhythm_box/widgets/lyrics/synced_lyrics.dart';
 import 'package:rhythm_box/widgets/tracks/querying_track_info.dart';
 
 class PlayerScreen extends StatefulWidget {
@@ -75,45 +75,55 @@ class _PlayerScreenState extends State<PlayerScreen> {
                 child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: [
-                    LimitedBox(
+                    Obx(
-                      maxHeight: maxAlbumSize,
+                      () => LimitedBox(
-                      maxWidth: maxAlbumSize,
+                        maxHeight: maxAlbumSize,
-                      child: Hero(
+                        maxWidth: maxAlbumSize,
-                        tag: const Key('current-active-track-album-art'),
+                        child: Hero(
-                        child: ClipRRect(
+                          tag: const Key('current-active-track-album-art'),
-                          borderRadius:
+                          child: ClipRRect(
-                              const BorderRadius.all(Radius.circular(16)),
+                            borderRadius:
-                          child: AspectRatio(
+                                const BorderRadius.all(Radius.circular(16)),
-                            aspectRatio: 1,
+                            child: AspectRatio(
-                            child: _albumArt != null
+                              aspectRatio: 1,
-                                ? AutoCacheImage(
+                              child: _albumArt != null
-                                    _albumArt!,
+                                  ? AutoCacheImage(
-                                    width: albumSize,
+                                      _albumArt!,
-                                    height: albumSize,
+                                      width: albumSize,
-                                  )
+                                      height: albumSize,
-                                : Container(
+                                    )
-                                    color: Theme.of(context)
+                                  : Container(
-                                        .colorScheme
+                                      color: Theme.of(context)
-                                        .surfaceContainerHigh,
+                                          .colorScheme
-                                    width: 64,
+                                          .surfaceContainerHigh,
-                                    height: 64,
+                                      width: 64,
-                                    child:
+                                      height: 64,
-                                        const Center(child: Icon(Icons.image)),
+                                      child: const Center(
-                                  ),
+                                          child: Icon(Icons.image)),
-                          ),
+                                    ),
-                        ).marginSymmetric(horizontal: 24),
+                            ),
+                          ).marginSymmetric(horizontal: 24),
+                        ),
                       ),
                     ),
                     const Gap(24),
-                    Text(
+                    Obx(
-                      _playback.state.value.activeTrack?.name ?? 'Not playing',
+                      () => Text(
-                      style: Theme.of(context).textTheme.titleLarge,
+                        _playback.state.value.activeTrack?.name ??
+                            'Not playing',
+                        style: Theme.of(context).textTheme.titleLarge,
+                        textAlign: TextAlign.center,
+                      ),
                     ),
-                    Text(
+                    Obx(
-                      _playback.state.value.activeTrack?.artists?.asString() ??
+                      () => Text(
-                          'No author',
+                        _playback.state.value.activeTrack?.artists
-                      style: Theme.of(context).textTheme.bodyMedium,
+                                ?.asString() ??
-                      overflow: TextOverflow.ellipsis,
+                            'No author',
+                        style: Theme.of(context).textTheme.bodyMedium,
+                        overflow: TextOverflow.ellipsis,
+                        textAlign: TextAlign.center,
+                      ),
                     ),
                     const Gap(24),
                     Obx(
@@ -197,43 +207,49 @@ class _PlayerScreenState extends State<PlayerScreen> {
                             );
                           },
                         ),
-                        IconButton(
+                        Obx(
-                          icon: const Icon(Icons.skip_previous),
+                          () => IconButton(
-                          onPressed: _isFetchingActiveTrack
+                            icon: const Icon(Icons.skip_previous),
-                              ? null
-                              : audioPlayer.skipToPrevious,
-                        ),
-                        const Gap(8),
-                        SizedBox(
-                          width: 56,
-                          height: 56,
-                          child: IconButton.filled(
-                            icon: _isFetchingActiveTrack
-                                ? const SizedBox(
-                                    height: 20,
-                                    width: 20,
-                                    child: CircularProgressIndicator(
-                                      color: Colors.white,
-                                      strokeWidth: 2.5,
-                                    ),
-                                  )
-                                : Icon(
-                                    !_isPlaying
-                                        ? Icons.play_arrow
-                                        : Icons.pause,
-                                    size: 28,
-                                  ),
                             onPressed: _isFetchingActiveTrack
                                 ? null
-                                : _togglePlayState,
+                                : audioPlayer.skipToPrevious,
                           ),
                         ),
                         const Gap(8),
-                        IconButton(
+                        Obx(
-                          icon: const Icon(Icons.skip_next),
+                          () => SizedBox(
-                          onPressed: _isFetchingActiveTrack
+                            width: 56,
-                              ? null
+                            height: 56,
-                              : audioPlayer.skipToNext,
+                            child: IconButton.filled(
+                              icon: _isFetchingActiveTrack
+                                  ? const SizedBox(
+                                      height: 20,
+                                      width: 20,
+                                      child: CircularProgressIndicator(
+                                        color: Colors.white,
+                                        strokeWidth: 2.5,
+                                      ),
+                                    )
+                                  : Icon(
+                                      !_isPlaying
+                                          ? Icons.play_arrow
+                                          : Icons.pause,
+                                      size: 28,
+                                    ),
+                              onPressed: _isFetchingActiveTrack
+                                  ? null
+                                  : _togglePlayState,
+                            ),
+                          ),
+                        ),
+                        const Gap(8),
+                        Obx(
+                          () => IconButton(
+                            icon: const Icon(Icons.skip_next),
+                            onPressed: _isFetchingActiveTrack
+                                ? null
+                                : audioPlayer.skipToNext,
+                          ),
                         ),
                         Obx(
                           () => IconButton(

lib/screens/playlist/view.dart

@@ -37,19 +37,46 @@ class _PlaylistViewScreenState extends State<PlaylistViewScreen> {
       : false;
 
   bool _isLoading = true;
+  bool _isLoadingTracks = true;
   bool _isUpdating = false;
 
   Playlist? _playlist;
+  List<Track>? _tracks;
 
   Future<void> _pullPlaylist() async {
-    _playlist = await _spotify.api.playlists.get(widget.playlistId);
+    if (widget.playlistId == 'user-liked-tracks') {
+      _playlist = Playlist()
+        ..name = 'Liked Music'
+        ..description = 'Your favorite music'
+        ..type = 'playlist'
+        ..collaborative = false
+        ..public = false
+        ..id = 'user-liked-tracks';
+    } else {
+      _playlist = await _spotify.api.playlists.get(widget.playlistId);
+    }
     setState(() => _isLoading = false);
   }
 
+  Future<void> _pullTracks() async {
+    if (widget.playlistId == 'user-liked-tracks') {
+      _tracks = (await _spotify.api.tracks.me.saved.all())
+          .map((x) => x.track!)
+          .toList();
+    } else {
+      _tracks = (await _spotify.api.playlists
+              .getTracksByPlaylistId(widget.playlistId)
+              .all())
+          .toList();
+    }
+    setState(() => _isLoadingTracks = false);
+  }
+
   @override
   void initState() {
     super.initState();
     _pullPlaylist();
+    _pullTracks();
   }
 
   @override
@@ -86,14 +113,17 @@ class _PlaylistViewScreenState extends State<PlaylistViewScreen> {
                               elevation: 2,
                               child: ClipRRect(
                                 borderRadius: radius,
-                                child: Hero(
+                                child: (_playlist?.images?.isNotEmpty ?? false)
-                                  tag: Key('playlist-cover-${_playlist!.id}'),
+                                    ? AutoCacheImage(
-                                  child: AutoCacheImage(
+                                        _playlist!.images!.first.url!,
-                                    _playlist!.images!.first.url!,
+                                        width: 160.0,
-                                    width: 160.0,
+                                        height: 160.0,
-                                    height: 160.0,
+                                      )
-                                  ),
+                                    : const SizedBox(
-                                ),
+                                        width: 160,
+                                        height: 160,
+                                        child: Icon(Icons.image),
+                                      ),
                               ),
                             ),
                             const Gap(24),
@@ -116,7 +146,7 @@ class _PlaylistViewScreenState extends State<PlaylistViewScreen> {
                                   ),
                                   const Gap(8),
                                   Text(
-                                    "${NumberFormat.compactCurrency(symbol: '', decimalDigits: 2).format(_playlist!.followers!.total!)} saves",
+                                    "${NumberFormat.compactCurrency(symbol: '', decimalDigits: 2).format(_playlist!.followers?.total! ?? 0)} saves",
                                   ),
                                   Text(
                                     '#${_playlist!.id}',
@@ -153,14 +183,7 @@ class _PlaylistViewScreenState extends State<PlaylistViewScreen> {
 
                                         setState(() => _isUpdating = true);
 
-                                        final tracks = (await _spotify
+                                        await _playback.load(_tracks!,
-                                                .api.playlists
-                                                .getTracksByPlaylistId(
-                                                    widget.playlistId)
-                                                .all())
-                                            .toList();
-
-                                        await _playback.load(tracks,
                                             autoPlay: true);
                                         _playback.addCollection(_playlist!.id!);
                                         Get.find<PlaybackHistoryProvider>()
@@ -180,18 +203,11 @@ class _PlaylistViewScreenState extends State<PlaylistViewScreen> {
 
                                       audioPlayer.setShuffle(true);
 
-                                      final tracks = (await _spotify
-                                              .api.playlists
-                                              .getTracksByPlaylistId(
-                                                  widget.playlistId)
-                                              .all())
-                                          .toList();
-
                                       await _playback.load(
-                                        tracks,
+                                        _tracks!,
                                         autoPlay: true,
                                         initialIndex:
-                                            Random().nextInt(tracks.length),
+                                            Random().nextInt(_tracks!.length),
                                       );
                                       _playback.addCollection(_playlist!.id!);
                                       Get.find<PlaybackHistoryProvider>()
@@ -208,11 +224,15 @@ class _PlaylistViewScreenState extends State<PlaylistViewScreen> {
                   ),
                   SliverToBoxAdapter(
                     child: Text(
-                      'Songs (${_playlist!.tracks!.total})',
+                      'Songs (${_playlist!.tracks?.total ?? (_tracks?.length ?? 0)})',
                       style: Theme.of(context).textTheme.titleLarge,
                     ).paddingOnly(left: 28, right: 28, bottom: 4),
                   ),
-                  PlaylistTrackList(playlistId: widget.playlistId),
+                  PlaylistTrackList(
+                    isLoading: _isLoadingTracks,
+                    playlistId: widget.playlistId,
+                    tracks: _tracks,
+                  ),
                 ],
               ),
             );

lib/screens/settings.dart

@@ -45,8 +45,6 @@ class _SettingsScreenState extends State<SettingsScreen> {
               return FutureBuilder(
                 future: _spotify.api.me.get(),
                 builder: (context, snapshot) {
-                  print(snapshot.data);
-                  print(snapshot.error);
                   if (!snapshot.hasData) {
                     return const ListTile(
                       contentPadding:

lib/shells/nav_shell.dart

@@ -24,6 +24,7 @@ class _NavShellState extends State<NavShell> {
 
   final List<Destination> _allDestinations = <Destination>[
     Destination('explore'.tr, 'explore', Icons.explore),
+    Destination('library'.tr, 'library', Icons.video_library),
     Destination('search'.tr, 'search', Icons.search),
     Destination('settings'.tr, 'settings', Icons.settings),
   ];
@@ -40,6 +41,7 @@ class _NavShellState extends State<NavShell> {
             const BottomPlayer(key: Key('app-wide-bottom-player')),
             const Divider(height: 0.3, thickness: 0.3),
             BottomNavigationBar(
+              type: BottomNavigationBarType.fixed,
               landscapeLayout: BottomNavigationBarLandscapeLayout.centered,
               elevation: 0,
               showUnselectedLabels: false,

lib/translations/en_us.dart

@@ -1,6 +1,7 @@
 const i18nEnglish = {
   'appName': 'RhythmBox',
   'explore': 'Explore',
+  'library': 'Library',
   'settings': 'Settings',
   'search': 'Search',
 };

lib/translations/zh_cn.dart

@@ -1,6 +1,7 @@
 const i18nSimplifiedChinese = {
   'appName': '韵律盒',
   'explore': '探索',
+  'library': '资料库',
   'settings': '设置',
   'search': '搜索',
 };

lib/widgets/lyrics/synced_lyrics.dart

@@ -28,15 +28,16 @@ class _SyncedLyricsState extends State<SyncedLyrics> {
   final AutoScrollController _autoScrollController = AutoScrollController();
 
   late final int _textZoomLevel = widget.defaultTextZoom;
-  late Duration _durationCurrent = audioPlayer.position;
 
   SubtitleSimple? _lyric;
+  String? _activeTrackId;
 
   bool get _isLyricSynced =>
       _lyric == null ? false : _lyric!.lyrics.any((x) => x.time.inSeconds > 0);
 
   Future<void> _pullLyrics() async {
     if (_playback.state.value.activeTrack == null) return;
+    _activeTrackId = _playback.state.value.activeTrack!.id;
     final out = await _syncedLyrics.fetch(_playback.state.value.activeTrack!);
     setState(() => _lyric = out);
   }
@@ -49,11 +50,15 @@ class _SyncedLyricsState extends State<SyncedLyrics> {
   @override
   void initState() {
     super.initState();
-    _subscriptions = [
-      audioPlayer.positionStream
-          .listen((dur) => setState(() => _durationCurrent = dur)),
-    ];
     _pullLyrics();
+    _subscriptions = [
+      _playback.state.listen((value) {
+        if (value.activeTrack == null) return;
+        if (value.activeTrack!.id != _activeTrackId) {
+          _pullLyrics();
+        }
+      }),
+    ];
   }
 
   @override
@@ -77,18 +82,19 @@ class _SyncedLyricsState extends State<SyncedLyrics> {
         if (_lyric != null && _lyric!.lyrics.isNotEmpty)
           SliverList.builder(
             itemCount: _lyric!.lyrics.length,
-            itemBuilder: (context, idx) {
+            itemBuilder: (context, idx) => Obx(() {
               final lyricSlice = _lyric!.lyrics[idx];
               final lyricNextSlice = idx + 1 < _lyric!.lyrics.length
                   ? _lyric!.lyrics[idx + 1]
                   : null;
-              final isActive =
+              final isActive = _playback.durationCurrent.value.inSeconds >=
-                  _durationCurrent.inSeconds >= lyricSlice.time.inSeconds &&
+                      lyricSlice.time.inSeconds &&
-                      (lyricNextSlice == null ||
+                  (lyricNextSlice == null ||
-                          lyricNextSlice.time.inSeconds >
+                      lyricNextSlice.time.inSeconds >
-                              _durationCurrent.inSeconds);
+                          _playback.durationCurrent.value.inSeconds);
 
-              if (_durationCurrent.inSeconds == lyricSlice.time.inSeconds &&
+              if (_playback.durationCurrent.value.inSeconds ==
+                      lyricSlice.time.inSeconds &&
                   _isLyricSynced) {
                 _autoScrollController.scrollToIndex(
                   idx,
@@ -150,7 +156,7 @@ class _SyncedLyricsState extends State<SyncedLyrics> {
                         ),
                       ),
               );
-            },
+            }),
           ),
       ],
     );

lib/widgets/no_login_fallback.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:rhythm_box/widgets/sized_container.dart';
+
+class NoLoginFallback extends StatelessWidget {
+  const NoLoginFallback({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return CenteredContainer(
+      maxWidth: 280,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          const Icon(
+            Icons.login,
+            size: 48,
+          ),
+          const Gap(12),
+          Text(
+            'Connect with your Spotify',
+            style: Theme.of(context).textTheme.titleLarge,
+          ),
+          const Text(
+            'You need to connect RhythmBox with your spotify account in settings page, so that we can access your library.',
+            textAlign: TextAlign.center,
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/playlist/playlist_tile.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:rhythm_box/widgets/auto_cache_image.dart';
+import 'package:spotify/spotify.dart';
+
+class PlaylistTile extends StatelessWidget {
+  final PlaylistSimple? item;
+
+  final Function? onTap;
+
+  const PlaylistTile({super.key, required this.item, this.onTap});
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      leading: ClipRRect(
+        borderRadius: const BorderRadius.all(Radius.circular(8)),
+        child: (item?.images?.isNotEmpty ?? false)
+            ? AutoCacheImage(
+                item!.images!.first.url!,
+                width: 64.0,
+                height: 64.0,
+              )
+            : const SizedBox(
+                width: 64,
+                height: 64,
+                child: Center(
+                  child: Icon(Icons.image),
+                ),
+              ),
+      ),
+      title: Text(item?.name ?? 'Loading...'),
+      subtitle: Text(
+        item?.description ?? 'Please stand by...',
+        maxLines: 2,
+        overflow: TextOverflow.ellipsis,
+      ),
+      onTap: () {
+        if (onTap == null) return;
+        onTap!();
+      },
+    );
+  }
+}

lib/widgets/playlist/user_playlist_list.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:go_router/go_router.dart';
+import 'package:rhythm_box/providers/spotify.dart';
+import 'package:rhythm_box/widgets/playlist/playlist_tile.dart';
+import 'package:skeletonizer/skeletonizer.dart';
+import 'package:spotify/spotify.dart';
+
+class UserPlaylistList extends StatefulWidget {
+  const UserPlaylistList({super.key});
+
+  @override
+  State<UserPlaylistList> createState() => _UserPlaylistListState();
+}
+
+class _UserPlaylistListState extends State<UserPlaylistList> {
+  late final SpotifyProvider _spotify = Get.find();
+
+  PlaylistSimple get _userLikedPlaylist => PlaylistSimple()
+    ..name = 'Liked Music'
+    ..description = 'Your favorite music'
+    ..type = 'playlist'
+    ..collaborative = false
+    ..public = false
+    ..id = 'user-liked-tracks';
+
+  bool _isLoading = true;
+
+  List<PlaylistSimple>? _playlist;
+
+  Future<void> _pullPlaylist() async {
+    _playlist = [_userLikedPlaylist, ...await _spotify.api.playlists.me.all()];
+    setState(() => _isLoading = false);
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _pullPlaylist();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Skeletonizer(
+      enabled: _isLoading,
+      child: ListView.builder(
+        itemCount: _playlist?.length ?? 3,
+        itemBuilder: (context, idx) {
+          final item = _playlist?[idx];
+          return PlaylistTile(
+            item: item,
+            onTap: () {
+              if (item == null) return;
+              GoRouter.of(context).pushNamed(
+                'playlistView',
+                pathParameters: {'id': item.id!},
+              );
+            },
+          );
+        },
+      ),
+    );
+  }
+}

lib/widgets/tracks/playlist_track_list.dart

@@ -1,82 +1,42 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:rhythm_box/providers/audio_player.dart';
-import 'package:rhythm_box/providers/spotify.dart';
+import 'package:rhythm_box/widgets/tracks/track_tile.dart';
-import 'package:rhythm_box/widgets/auto_cache_image.dart';
 import 'package:skeletonizer/skeletonizer.dart';
 import 'package:spotify/spotify.dart';
-import 'package:rhythm_box/services/artist.dart';
 
-class PlaylistTrackList extends StatefulWidget {
+class PlaylistTrackList extends StatelessWidget {
   final String playlistId;
+  final List<Track>? tracks;
 
-  const PlaylistTrackList({super.key, required this.playlistId});
+  final bool isLoading;
 
-  @override
+  const PlaylistTrackList({
-  State<PlaylistTrackList> createState() => _PlaylistTrackListState();
+    super.key,
-}
+    this.isLoading = false,
-
+    required this.playlistId,
-class _PlaylistTrackListState extends State<PlaylistTrackList> {
+    required this.tracks,
-  late final SpotifyProvider _spotify = Get.find();
+  });
-
-  bool _isLoading = true;
-
-  List<Track>? _tracks;
-
-  Future<void> _pullTracks() async {
-    _tracks = (await _spotify.api.playlists
-            .getTracksByPlaylistId(widget.playlistId)
-            .all())
-        .toList();
-    setState(() => _isLoading = false);
-  }
-
-  @override
-  void initState() {
-    _pullTracks();
-    super.initState();
-  }
 
   @override
   Widget build(BuildContext context) {
     return Skeletonizer.sliver(
-      enabled: _isLoading,
+      enabled: isLoading,
       child: SliverList.builder(
-        itemCount: _tracks?.length ?? 3,
+        itemCount: tracks?.length ?? 3,
         itemBuilder: (context, idx) {
-          final item = _tracks?[idx];
+          final item = tracks?[idx];
-          return ListTile(
+          return TrackTile(
-            leading: ClipRRect(
+            item: item,
-              borderRadius: const BorderRadius.all(Radius.circular(8)),
-              child: item != null
-                  ? AutoCacheImage(
-                      item.album!.images!.first.url!,
-                      width: 64.0,
-                      height: 64.0,
-                    )
-                  : const SizedBox(
-                      width: 64,
-                      height: 64,
-                      child: Center(
-                        child: Icon(Icons.image),
-                      ),
-                    ),
-            ),
-            title: Text(item?.name ?? 'Loading...'),
-            subtitle: Text(
-              item?.artists?.asString() ?? 'Please stand by...',
-              maxLines: 1,
-              overflow: TextOverflow.ellipsis,
-            ),
             onTap: () {
               if (item == null) return;
               Get.find<AudioPlayerProvider>()
                 ..load(
-                  _tracks!,
+                  tracks!,
                   initialIndex: idx,
                   autoPlay: true,
                 )
-                ..addCollection(widget.playlistId);
+                ..addCollection(playlistId);
             },
           );
         },

lib/widgets/tracks/track_list.dart

@@ -1,9 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:rhythm_box/providers/audio_player.dart';
-import 'package:rhythm_box/widgets/auto_cache_image.dart';
+import 'package:rhythm_box/widgets/tracks/track_tile.dart';
 import 'package:spotify/spotify.dart';
-import 'package:rhythm_box/services/artist.dart';
 
 class TrackSliverList extends StatelessWidget {
   final List<Track> tracks;
@@ -19,21 +18,8 @@ class TrackSliverList extends StatelessWidget {
       itemCount: tracks.length,
       itemBuilder: (context, idx) {
         final item = tracks[idx];
-        return ListTile(
+        return TrackTile(
-          leading: ClipRRect(
+          item: item,
-            borderRadius: const BorderRadius.all(Radius.circular(8)),
-            child: AutoCacheImage(
-              item.album!.images!.first.url!,
-              width: 64.0,
-              height: 64.0,
-            ),
-          ),
-          title: Text(item.name ?? 'Loading...'),
-          subtitle: Text(
-            item.artists?.asString() ?? 'Please stand by...',
-            maxLines: 1,
-            overflow: TextOverflow.ellipsis,
-          ),
           onTap: () {
             Get.find<AudioPlayerProvider>().load(
               [item],

lib/widgets/tracks/track_tile.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:rhythm_box/widgets/auto_cache_image.dart';
+import 'package:spotify/spotify.dart';
+import 'package:rhythm_box/services/artist.dart';
+
+class TrackTile extends StatelessWidget {
+  final Track? item;
+
+  final Function? onTap;
+
+  const TrackTile({super.key, required this.item, this.onTap});
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      leading: ClipRRect(
+        borderRadius: const BorderRadius.all(Radius.circular(8)),
+        child: (item?.album?.images?.isNotEmpty ?? false)
+            ? AutoCacheImage(
+                item!.album!.images!.first.url!,
+                width: 64.0,
+                height: 64.0,
+              )
+            : const SizedBox(
+                width: 64,
+                height: 64,
+                child: Center(
+                  child: Icon(Icons.image),
+                ),
+              ),
+      ),
+      title: Text(item?.name ?? 'Loading...'),
+      subtitle: Text(
+        item?.artists?.asString() ?? 'Please stand by...',
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+      ),
+      onTap: () {
+        if (onTap == null) return;
+        onTap!();
+      },
+    );
+  }
+}