mirror of
https://github.com/KRTirtho/spotube.git
synced 2025-09-12 23:45:18 +00:00
feat(search): infinite scroll for tracks, artists, playlists and albums
This commit is contained in:
Kingkor Roy Tirtho
parent
1d4847ab0a
commit
e6761a6f8e
@ -6,9 +6,11 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:spotify/spotify.dart';
|
||||
import 'package:spotube/components/Album/AlbumCard.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/Shared/AnonymousFallback.dart';
|
||||
import 'package:spotube/components/Shared/TrackTile.dart';
|
||||
import 'package:spotube/components/Shared/Waypoint.dart';
|
||||
import 'package:spotube/hooks/useBreakpoints.dart';
|
||||
import 'package:spotube/models/CurrentPlaylist.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/type_conversion_utils.dart';
|
||||
import 'package:tuple/tuple.dart';
|
||||
import 'package:collection/collection.dart';
|
||||
|
||||
final searchTermStateProvider = StateProvider<String>((ref) => "");
|
||||
|
||||
@ -32,14 +35,6 @@ class Search extends HookConsumerWidget {
|
||||
final artistController = useScrollController();
|
||||
final breakpoint = useBreakpoints();
|
||||
|
||||
final searchMutation = useMutation(
|
||||
job: searchMutationJob,
|
||||
);
|
||||
|
||||
if (auth.isAnonymous) {
|
||||
return const AnonymousFallback();
|
||||
}
|
||||
|
||||
final getVariables = useCallback(
|
||||
() => Tuple2(
|
||||
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(
|
||||
child: Material(
|
||||
color: Theme.of(context).backgroundColor,
|
||||
@ -66,10 +92,8 @@ class Search extends HookConsumerWidget {
|
||||
decoration: InputDecoration(
|
||||
isDense: true,
|
||||
suffix: ElevatedButton(
|
||||
onPressed: onSearch,
|
||||
child: const Icon(Icons.search_rounded),
|
||||
onPressed: () {
|
||||
searchMutation.mutate(getVariables());
|
||||
},
|
||||
),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 10,
|
||||
@ -79,26 +103,24 @@ class Search extends HookConsumerWidget {
|
||||
hintText: "Search...",
|
||||
),
|
||||
onSubmitted: (value) {
|
||||
searchMutation.mutate(getVariables());
|
||||
onSearch();
|
||||
},
|
||||
),
|
||||
),
|
||||
HookBuilder(
|
||||
builder: (context) {
|
||||
if (searchMutation.hasError && searchMutation.isError) {
|
||||
return Text("Alas! Error=${searchMutation.error}");
|
||||
}
|
||||
if (searchMutation.isLoading) {
|
||||
return const CircularProgressIndicator();
|
||||
}
|
||||
|
||||
Playback playback = ref.watch(playbackProvider);
|
||||
List<AlbumSimple> albums = [];
|
||||
List<Artist> artists = [];
|
||||
List<Track> tracks = [];
|
||||
List<PlaylistSimple> playlists = [];
|
||||
for (MapEntry<int, Page> page
|
||||
in (searchMutation.data ?? []).asMap().entries) {
|
||||
final pages = [
|
||||
...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 ?? []) {
|
||||
if (item is AlbumSimple) {
|
||||
albums.add(item);
|
||||
@ -126,69 +148,112 @@ class Search extends HookConsumerWidget {
|
||||
"Songs",
|
||||
style: Theme.of(context).textTheme.headline5,
|
||||
),
|
||||
...tracks.asMap().entries.map((track) {
|
||||
String duration =
|
||||
"${track.value.duration?.inMinutes.remainder(60)}:${PrimitiveUtils.zeroPadNumStr(track.value.duration?.inSeconds.remainder(60) ?? 0)}";
|
||||
return TrackTile(
|
||||
playback,
|
||||
track: track,
|
||||
duration: duration,
|
||||
isActive: playback.track?.id == track.value.id,
|
||||
onTrackPlayButtonPressed: (currentTrack) async {
|
||||
var isPlaylistPlaying = playback.playlist?.id !=
|
||||
null &&
|
||||
playback.playlist?.id == currentTrack.id;
|
||||
if (!isPlaylistPlaying) {
|
||||
playback.playPlaylist(
|
||||
CurrentPlaylist(
|
||||
tracks: [currentTrack],
|
||||
id: currentTrack.id!,
|
||||
name: currentTrack.name!,
|
||||
thumbnail:
|
||||
TypeConversionUtils.image_X_UrlString(
|
||||
currentTrack.album?.images,
|
||||
placeholder: ImagePlaceholder.albumArt,
|
||||
),
|
||||
),
|
||||
);
|
||||
} else if (isPlaylistPlaying &&
|
||||
currentTrack.id != null &&
|
||||
currentTrack.id != playback.track?.id) {
|
||||
playback.play(currentTrack);
|
||||
}
|
||||
},
|
||||
);
|
||||
}),
|
||||
if (albums.isNotEmpty)
|
||||
if (searchTrack.isLoading &&
|
||||
!searchTrack.isFetchingNextPage)
|
||||
const CircularProgressIndicator()
|
||||
else if (searchTrack.hasError)
|
||||
Text(
|
||||
"Albums",
|
||||
searchTrack.error?[searchTrack.pageParams.last])
|
||||
else
|
||||
...tracks.asMap().entries.map((track) {
|
||||
String duration =
|
||||
"${track.value.duration?.inMinutes.remainder(60)}:${PrimitiveUtils.zeroPadNumStr(track.value.duration?.inSeconds.remainder(60) ?? 0)}";
|
||||
return TrackTile(
|
||||
playback,
|
||||
track: track,
|
||||
duration: duration,
|
||||
isActive: playback.track?.id == track.value.id,
|
||||
onTrackPlayButtonPressed: (currentTrack) async {
|
||||
var isPlaylistPlaying =
|
||||
playback.playlist?.id != null &&
|
||||
playback.playlist?.id ==
|
||||
currentTrack.id;
|
||||
if (!isPlaylistPlaying) {
|
||||
playback.playPlaylist(
|
||||
CurrentPlaylist(
|
||||
tracks: [currentTrack],
|
||||
id: currentTrack.id!,
|
||||
name: currentTrack.name!,
|
||||
thumbnail: TypeConversionUtils
|
||||
.image_X_UrlString(
|
||||
currentTrack.album?.images,
|
||||
placeholder:
|
||||
ImagePlaceholder.albumArt,
|
||||
),
|
||||
),
|
||||
);
|
||||
} else if (isPlaylistPlaying &&
|
||||
currentTrack.id != null &&
|
||||
currentTrack.id != playback.track?.id) {
|
||||
playback.play(currentTrack);
|
||||
}
|
||||
},
|
||||
);
|
||||
}),
|
||||
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(
|
||||
"Playlists",
|
||||
style: Theme.of(context).textTheme.headline5,
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
ScrollConfiguration(
|
||||
behavior: ScrollConfiguration.of(context).copyWith(
|
||||
dragDevices: {
|
||||
PointerDeviceKind.touch,
|
||||
PointerDeviceKind.mouse,
|
||||
},
|
||||
),
|
||||
child: Scrollbar(
|
||||
controller: albumController,
|
||||
child: SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
controller: albumController,
|
||||
child: Row(
|
||||
children: albums.map((album) {
|
||||
return AlbumCard(
|
||||
TypeConversionUtils.simpleAlbum_X_Album(
|
||||
album,
|
||||
if (searchPlaylist.isLoading &&
|
||||
!searchPlaylist.isFetchingNextPage)
|
||||
const CircularProgressIndicator()
|
||||
else if (searchPlaylist.hasError)
|
||||
Text(searchPlaylist
|
||||
.error?[searchPlaylist.pageParams.last])
|
||||
else
|
||||
ScrollConfiguration(
|
||||
behavior:
|
||||
ScrollConfiguration.of(context).copyWith(
|
||||
dragDevices: {
|
||||
PointerDeviceKind.touch,
|
||||
PointerDeviceKind.mouse,
|
||||
},
|
||||
),
|
||||
child: Scrollbar(
|
||||
scrollbarOrientation:
|
||||
breakpoint > Breakpoints.md
|
||||
? ScrollbarOrientation.bottom
|
||||
: ScrollbarOrientation.top,
|
||||
controller: playlistController,
|
||||
child: SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
controller: playlistController,
|
||||
child: Row(
|
||||
children: [
|
||||
...playlists.mapIndexed(
|
||||
(i, playlist) {
|
||||
if (i == playlists.length - 1 &&
|
||||
searchPlaylist.hasNextPage) {
|
||||
return Waypoint(
|
||||
onEnter: () {
|
||||
searchPlaylist.fetchNextPage();
|
||||
},
|
||||
child:
|
||||
const ShimmerPlaybuttonCard(
|
||||
count: 1),
|
||||
);
|
||||
}
|
||||
return PlaylistCard(playlist);
|
||||
},
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
if (artists.isNotEmpty)
|
||||
Text(
|
||||
@ -196,64 +261,105 @@ class Search extends HookConsumerWidget {
|
||||
style: Theme.of(context).textTheme.headline5,
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
ScrollConfiguration(
|
||||
behavior: ScrollConfiguration.of(context).copyWith(
|
||||
dragDevices: {
|
||||
PointerDeviceKind.touch,
|
||||
PointerDeviceKind.mouse,
|
||||
},
|
||||
),
|
||||
child: Scrollbar(
|
||||
controller: artistController,
|
||||
child: SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
if (searchArtist.isLoading &&
|
||||
!searchArtist.isFetchingNextPage)
|
||||
const CircularProgressIndicator()
|
||||
else if (searchArtist.hasError)
|
||||
Text(searchArtist
|
||||
.error?[searchArtist.pageParams.last])
|
||||
else
|
||||
ScrollConfiguration(
|
||||
behavior:
|
||||
ScrollConfiguration.of(context).copyWith(
|
||||
dragDevices: {
|
||||
PointerDeviceKind.touch,
|
||||
PointerDeviceKind.mouse,
|
||||
},
|
||||
),
|
||||
child: Scrollbar(
|
||||
controller: artistController,
|
||||
child: Row(
|
||||
children: artists
|
||||
.map(
|
||||
(artist) => Container(
|
||||
margin: const EdgeInsets.symmetric(
|
||||
horizontal: 15),
|
||||
child: ArtistCard(artist),
|
||||
),
|
||||
)
|
||||
.toList(),
|
||||
child: SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
controller: artistController,
|
||||
child: Row(
|
||||
children: [
|
||||
...artists.mapIndexed(
|
||||
(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(
|
||||
horizontal: 15),
|
||||
child: ArtistCard(artist),
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
if (playlists.isNotEmpty)
|
||||
if (albums.isNotEmpty)
|
||||
Text(
|
||||
"Playlists",
|
||||
"Albums",
|
||||
style: Theme.of(context).textTheme.headline5,
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
ScrollConfiguration(
|
||||
behavior: ScrollConfiguration.of(context).copyWith(
|
||||
dragDevices: {
|
||||
PointerDeviceKind.touch,
|
||||
PointerDeviceKind.mouse,
|
||||
},
|
||||
),
|
||||
child: Scrollbar(
|
||||
scrollbarOrientation: breakpoint > Breakpoints.md
|
||||
? ScrollbarOrientation.bottom
|
||||
: ScrollbarOrientation.top,
|
||||
controller: playlistController,
|
||||
child: SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
controller: playlistController,
|
||||
child: Row(
|
||||
children: playlists
|
||||
.map(
|
||||
(playlist) => PlaylistCard(playlist),
|
||||
)
|
||||
.toList(),
|
||||
if (searchAlbum.isLoading &&
|
||||
!searchAlbum.isFetchingNextPage)
|
||||
const CircularProgressIndicator()
|
||||
else if (searchAlbum.hasError)
|
||||
Text(
|
||||
searchAlbum.error?[searchAlbum.pageParams.last])
|
||||
else
|
||||
ScrollConfiguration(
|
||||
behavior:
|
||||
ScrollConfiguration.of(context).copyWith(
|
||||
dragDevices: {
|
||||
PointerDeviceKind.touch,
|
||||
PointerDeviceKind.mouse,
|
||||
},
|
||||
),
|
||||
child: Scrollbar(
|
||||
controller: albumController,
|
||||
child: SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
controller: albumController,
|
||||
child: Row(
|
||||
children: [
|
||||
...albums.mapIndexed((i, album) {
|
||||
if (i == albums.length - 1 &&
|
||||
searchAlbum.hasNextPage) {
|
||||
return Waypoint(
|
||||
onEnter: () {
|
||||
searchAlbum.fetchNextPage();
|
||||
},
|
||||
child: const ShimmerPlaybuttonCard(
|
||||
count: 1),
|
||||
);
|
||||
}
|
||||
return AlbumCard(
|
||||
TypeConversionUtils
|
||||
.simpleAlbum_X_Album(
|
||||
album,
|
||||
),
|
||||
);
|
||||
}),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
@ -174,13 +174,23 @@ final albumIsSavedForCurrentUserQueryJob =
|
||||
.isSavedAlbums([getVariable(queryKey)]).then((value) => value.first);
|
||||
});
|
||||
|
||||
final searchMutationJob = MutationJob<List<Page>, Tuple2<String, SpotifyApi>>(
|
||||
mutationKey: "search-query",
|
||||
task: (ref, variables) {
|
||||
final searchQueryJob = InfiniteQueryJob.withVariableKey<List<Page>,
|
||||
Tuple2<String, SpotifyApi>, int>(
|
||||
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 spotify = variables.item2;
|
||||
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);
|
||||
},
|
||||
);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user