kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-12 23:45:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(search): infinite scroll for tracks, artists, playlists and albums

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2022-10-25 12:13:19 +06:00
parent 1d4847ab0a
commit e6761a6f8e
2 changed files with 242 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

220
lib/components/Search/Search.dart
View File

@ -6,9 +6,11 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotify/spotify.dart'; import 'package:spotify/spotify.dart';
import 'package:spotube/components/Album/AlbumCard.dart'; import 'package:spotube/components/Album/AlbumCard.dart';
import 'package:spotube/components/Artist/ArtistCard.dart'; import 'package:spotube/components/Artist/ArtistCard.dart';
import 'package:spotube/components/LoaderShimmers/ShimmerPlaybuttonCard.dart';
import 'package:spotube/components/Playlist/PlaylistCard.dart'; import 'package:spotube/components/Playlist/PlaylistCard.dart';
import 'package:spotube/components/Shared/AnonymousFallback.dart'; import 'package:spotube/components/Shared/AnonymousFallback.dart';
import 'package:spotube/components/Shared/TrackTile.dart'; import 'package:spotube/components/Shared/TrackTile.dart';
import 'package:spotube/components/Shared/Waypoint.dart';
import 'package:spotube/hooks/useBreakpoints.dart'; import 'package:spotube/hooks/useBreakpoints.dart';
import 'package:spotube/models/CurrentPlaylist.dart'; import 'package:spotube/models/CurrentPlaylist.dart';
import 'package:spotube/provider/Auth.dart'; import 'package:spotube/provider/Auth.dart';
@ -18,6 +20,7 @@ import 'package:spotube/provider/SpotifyRequests.dart';
import 'package:spotube/utils/primitive_utils.dart'; import 'package:spotube/utils/primitive_utils.dart';
import 'package:spotube/utils/type_conversion_utils.dart'; import 'package:spotube/utils/type_conversion_utils.dart';
import 'package:tuple/tuple.dart'; import 'package:tuple/tuple.dart';
import 'package:collection/collection.dart';
final searchTermStateProvider = StateProvider<String>((ref) => ""); final searchTermStateProvider = StateProvider<String>((ref) => "");
@ -32,14 +35,6 @@ class Search extends HookConsumerWidget {
final artistController = useScrollController(); final artistController = useScrollController();
final breakpoint = useBreakpoints(); final breakpoint = useBreakpoints();
final searchMutation = useMutation(
job: searchMutationJob,
);
if (auth.isAnonymous) {
return const AnonymousFallback();
}
final getVariables = useCallback( final getVariables = useCallback(
() => Tuple2( () => Tuple2(
ref.read(searchTermStateProvider), ref.read(searchTermStateProvider),
@ -48,6 +43,37 @@ class Search extends HookConsumerWidget {
[], [],
); );
final searchTrack = useInfiniteQuery(
job: searchQueryJob(SearchType.track.key),
externalData: getVariables());
final searchAlbum = useInfiniteQuery(
job: searchQueryJob(SearchType.album.key),
externalData: getVariables());
final searchPlaylist = useInfiniteQuery(
job: searchQueryJob(SearchType.playlist.key),
externalData: getVariables());
final searchArtist = useInfiniteQuery(
job: searchQueryJob(SearchType.artist.key),
externalData: getVariables());
if (auth.isAnonymous) {
return const AnonymousFallback();
}
void onSearch() {
for (final query in [
searchTrack,
searchAlbum,
searchPlaylist,
searchArtist,
]) {
query.enabled = false;
query.fetched = true;
query.setExternalData(getVariables());
query.refetch();
}
}
return SafeArea( return SafeArea(
child: Material( child: Material(
color: Theme.of(context).backgroundColor, color: Theme.of(context).backgroundColor,
@ -66,10 +92,8 @@ class Search extends HookConsumerWidget {
decoration: InputDecoration( decoration: InputDecoration(
isDense: true, isDense: true,
suffix: ElevatedButton( suffix: ElevatedButton(
onPressed: onSearch,
child: const Icon(Icons.search_rounded), child: const Icon(Icons.search_rounded),
onPressed: () {
searchMutation.mutate(getVariables());
},
), ),
contentPadding: const EdgeInsets.symmetric( contentPadding: const EdgeInsets.symmetric(
horizontal: 10, horizontal: 10,
@ -79,26 +103,24 @@ class Search extends HookConsumerWidget {
hintText: "Search...", hintText: "Search...",
), ),
onSubmitted: (value) { onSubmitted: (value) {
searchMutation.mutate(getVariables()); onSearch();
}, },
), ),
), ),
HookBuilder( HookBuilder(
builder: (context) { builder: (context) {
if (searchMutation.hasError && searchMutation.isError) {
return Text("Alas! Error=${searchMutation.error}");
}
if (searchMutation.isLoading) {
return const CircularProgressIndicator();
}
Playback playback = ref.watch(playbackProvider); Playback playback = ref.watch(playbackProvider);
List<AlbumSimple> albums = []; List<AlbumSimple> albums = [];
List<Artist> artists = []; List<Artist> artists = [];
List<Track> tracks = []; List<Track> tracks = [];
List<PlaylistSimple> playlists = []; List<PlaylistSimple> playlists = [];
for (MapEntry<int, Page> page final pages = [
in (searchMutation.data ?? []).asMap().entries) { ...searchTrack.pages,
...searchAlbum.pages,
...searchPlaylist.pages,
...searchArtist.pages,
].expand<Page>((page) => page ?? []).toList();
for (MapEntry<int, Page> page in pages.asMap().entries) {
for (var item in page.value.items ?? []) { for (var item in page.value.items ?? []) {
if (item is AlbumSimple) { if (item is AlbumSimple) {
albums.add(item); albums.add(item);
@ -126,6 +148,13 @@ class Search extends HookConsumerWidget {
"Songs", "Songs",
style: Theme.of(context).textTheme.headline5, style: Theme.of(context).textTheme.headline5,
), ),
if (searchTrack.isLoading &&
!searchTrack.isFetchingNextPage)
const CircularProgressIndicator()
else if (searchTrack.hasError)
Text(
searchTrack.error?[searchTrack.pageParams.last])
else
...tracks.asMap().entries.map((track) { ...tracks.asMap().entries.map((track) {
String duration = String duration =
"${track.value.duration?.inMinutes.remainder(60)}:${PrimitiveUtils.zeroPadNumStr(track.value.duration?.inSeconds.remainder(60) ?? 0)}"; "${track.value.duration?.inMinutes.remainder(60)}:${PrimitiveUtils.zeroPadNumStr(track.value.duration?.inSeconds.remainder(60) ?? 0)}";
@ -135,19 +164,21 @@ class Search extends HookConsumerWidget {
duration: duration, duration: duration,
isActive: playback.track?.id == track.value.id, isActive: playback.track?.id == track.value.id,
onTrackPlayButtonPressed: (currentTrack) async { onTrackPlayButtonPressed: (currentTrack) async {
var isPlaylistPlaying = playback.playlist?.id != var isPlaylistPlaying =
null && playback.playlist?.id != null &&
playback.playlist?.id == currentTrack.id; playback.playlist?.id ==
currentTrack.id;
if (!isPlaylistPlaying) { if (!isPlaylistPlaying) {
playback.playPlaylist( playback.playPlaylist(
CurrentPlaylist( CurrentPlaylist(
tracks: [currentTrack], tracks: [currentTrack],
id: currentTrack.id!, id: currentTrack.id!,
name: currentTrack.name!, name: currentTrack.name!,
thumbnail: thumbnail: TypeConversionUtils
TypeConversionUtils.image_X_UrlString( .image_X_UrlString(
currentTrack.album?.images, currentTrack.album?.images,
placeholder: ImagePlaceholder.albumArt, placeholder:
ImagePlaceholder.albumArt,
), ),
), ),
); );
@ -159,32 +190,66 @@ class Search extends HookConsumerWidget {
}, },
); );
}), }),
if (albums.isNotEmpty) if (searchTrack.hasNextPage && tracks.isNotEmpty)
Center(
child: TextButton(
onPressed: searchTrack.isFetchingNextPage
? null
: () => searchTrack.fetchNextPage(),
child: searchTrack.isFetchingNextPage
? const CircularProgressIndicator()
: const Text("Load more"),
),
),
if (playlists.isNotEmpty)
Text( Text(
"Albums", "Playlists",
style: Theme.of(context).textTheme.headline5, style: Theme.of(context).textTheme.headline5,
), ),
const SizedBox(height: 10), const SizedBox(height: 10),
if (searchPlaylist.isLoading &&
!searchPlaylist.isFetchingNextPage)
const CircularProgressIndicator()
else if (searchPlaylist.hasError)
Text(searchPlaylist
.error?[searchPlaylist.pageParams.last])
else
ScrollConfiguration( ScrollConfiguration(
behavior: ScrollConfiguration.of(context).copyWith( behavior:
ScrollConfiguration.of(context).copyWith(
dragDevices: { dragDevices: {
PointerDeviceKind.touch, PointerDeviceKind.touch,
PointerDeviceKind.mouse, PointerDeviceKind.mouse,
}, },
), ),
child: Scrollbar( child: Scrollbar(
controller: albumController, scrollbarOrientation:
breakpoint > Breakpoints.md
? ScrollbarOrientation.bottom
: ScrollbarOrientation.top,
controller: playlistController,
child: SingleChildScrollView( child: SingleChildScrollView(
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
controller: albumController, controller: playlistController,
child: Row( child: Row(
children: albums.map((album) { children: [
return AlbumCard( ...playlists.mapIndexed(
TypeConversionUtils.simpleAlbum_X_Album( (i, playlist) {
album, if (i == playlists.length - 1 &&
), searchPlaylist.hasNextPage) {
return Waypoint(
onEnter: () {
searchPlaylist.fetchNextPage();
},
child:
const ShimmerPlaybuttonCard(
count: 1),
); );
}).toList(), }
return PlaylistCard(playlist);
},
),
],
), ),
), ),
), ),
@ -196,8 +261,16 @@ class Search extends HookConsumerWidget {
style: Theme.of(context).textTheme.headline5, style: Theme.of(context).textTheme.headline5,
), ),
const SizedBox(height: 10), const SizedBox(height: 10),
if (searchArtist.isLoading &&
!searchArtist.isFetchingNextPage)
const CircularProgressIndicator()
else if (searchArtist.hasError)
Text(searchArtist
.error?[searchArtist.pageParams.last])
else
ScrollConfiguration( ScrollConfiguration(
behavior: ScrollConfiguration.of(context).copyWith( behavior:
ScrollConfiguration.of(context).copyWith(
dragDevices: { dragDevices: {
PointerDeviceKind.touch, PointerDeviceKind.touch,
PointerDeviceKind.mouse, PointerDeviceKind.mouse,
@ -209,47 +282,80 @@ class Search extends HookConsumerWidget {
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
controller: artistController, controller: artistController,
child: Row( child: Row(
children: artists children: [
.map( ...artists.mapIndexed(
(artist) => Container( (i, artist) {
if (i == artists.length - 1 &&
searchArtist.hasNextPage) {
return Waypoint(
onEnter: () {
searchArtist.fetchNextPage();
},
child:
const ShimmerPlaybuttonCard(
count: 1),
);
}
return Container(
margin: const EdgeInsets.symmetric( margin: const EdgeInsets.symmetric(
horizontal: 15), horizontal: 15),
child: ArtistCard(artist), child: ArtistCard(artist),
);
},
), ),
) ],
.toList(),
), ),
), ),
), ),
), ),
const SizedBox(height: 20), const SizedBox(height: 20),
if (playlists.isNotEmpty) if (albums.isNotEmpty)
Text( Text(
"Playlists", "Albums",
style: Theme.of(context).textTheme.headline5, style: Theme.of(context).textTheme.headline5,
), ),
const SizedBox(height: 10), const SizedBox(height: 10),
if (searchAlbum.isLoading &&
!searchAlbum.isFetchingNextPage)
const CircularProgressIndicator()
else if (searchAlbum.hasError)
Text(
searchAlbum.error?[searchAlbum.pageParams.last])
else
ScrollConfiguration( ScrollConfiguration(
behavior: ScrollConfiguration.of(context).copyWith( behavior:
ScrollConfiguration.of(context).copyWith(
dragDevices: { dragDevices: {
PointerDeviceKind.touch, PointerDeviceKind.touch,
PointerDeviceKind.mouse, PointerDeviceKind.mouse,
}, },
), ),
child: Scrollbar( child: Scrollbar(
scrollbarOrientation: breakpoint > Breakpoints.md controller: albumController,
? ScrollbarOrientation.bottom
: ScrollbarOrientation.top,
controller: playlistController,
child: SingleChildScrollView( child: SingleChildScrollView(
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
controller: playlistController, controller: albumController,
child: Row( child: Row(
children: playlists children: [
.map( ...albums.mapIndexed((i, album) {
(playlist) => PlaylistCard(playlist), if (i == albums.length - 1 &&
) searchAlbum.hasNextPage) {
.toList(), return Waypoint(
onEnter: () {
searchAlbum.fetchNextPage();
},
child: const ShimmerPlaybuttonCard(
count: 1),
);
}
return AlbumCard(
TypeConversionUtils
.simpleAlbum_X_Album(
album,
),
);
}),
],
), ),
), ),
), ),

18
lib/provider/SpotifyRequests.dart
View File

@ -174,13 +174,23 @@ final albumIsSavedForCurrentUserQueryJob =
.isSavedAlbums([getVariable(queryKey)]).then((value) => value.first); .isSavedAlbums([getVariable(queryKey)]).then((value) => value.first);
}); });
final searchMutationJob = MutationJob<List<Page>, Tuple2<String, SpotifyApi>>( final searchQueryJob = InfiniteQueryJob.withVariableKey<List<Page>,
mutationKey: "search-query", Tuple2<String, SpotifyApi>, int>(
task: (ref, variables) { preQueryKey: "search-query",
initialParam: 0,
enabled: false,
getNextPageParam: (lastPage, lastParam) =>
(lastPage.first.items?.length ?? 0) < 10 ? null : lastParam + 10,
getPreviousPageParam: (lastPage, lastParam) => lastParam - 10,
task: (queryKey, pageParam, variables) {
final queryString = variables.item1; final queryString = variables.item1;
final spotify = variables.item2; final spotify = variables.item2;
if (queryString.isEmpty) return []; if (queryString.isEmpty) return [];
return spotify.search.get(queryString).first(10); final searchType = getVariable(queryKey);
return spotify.search.get(
queryString,
types: [SearchType(searchType)],
).getPage(10, pageParam);
}, },
); );