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

350
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,69 +148,112 @@ class Search extends HookConsumerWidget {
"Songs", "Songs",
style: Theme.of(context).textTheme.headline5, style: Theme.of(context).textTheme.headline5,
), ),
...tracks.asMap().entries.map((track) { if (searchTrack.isLoading &&
String duration = !searchTrack.isFetchingNextPage)
"${track.value.duration?.inMinutes.remainder(60)}:${PrimitiveUtils.zeroPadNumStr(track.value.duration?.inSeconds.remainder(60) ?? 0)}"; const CircularProgressIndicator()
return TrackTile( else if (searchTrack.hasError)
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)
Text( 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, style: Theme.of(context).textTheme.headline5,
), ),
const SizedBox(height: 10), const SizedBox(height: 10),
ScrollConfiguration( if (searchPlaylist.isLoading &&
behavior: ScrollConfiguration.of(context).copyWith( !searchPlaylist.isFetchingNextPage)
dragDevices: { const CircularProgressIndicator()
PointerDeviceKind.touch, else if (searchPlaylist.hasError)
PointerDeviceKind.mouse, Text(searchPlaylist
}, .error?[searchPlaylist.pageParams.last])
), else
child: Scrollbar( ScrollConfiguration(
controller: albumController, behavior:
child: SingleChildScrollView( ScrollConfiguration.of(context).copyWith(
scrollDirection: Axis.horizontal, dragDevices: {
controller: albumController, PointerDeviceKind.touch,
child: Row( PointerDeviceKind.mouse,
children: albums.map((album) { },
return AlbumCard( ),
TypeConversionUtils.simpleAlbum_X_Album( child: Scrollbar(
album, 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), const SizedBox(height: 20),
if (artists.isNotEmpty) if (artists.isNotEmpty)
Text( Text(
@ -196,64 +261,105 @@ class Search extends HookConsumerWidget {
style: Theme.of(context).textTheme.headline5, style: Theme.of(context).textTheme.headline5,
), ),
const SizedBox(height: 10), const SizedBox(height: 10),
ScrollConfiguration( if (searchArtist.isLoading &&
behavior: ScrollConfiguration.of(context).copyWith( !searchArtist.isFetchingNextPage)
dragDevices: { const CircularProgressIndicator()
PointerDeviceKind.touch, else if (searchArtist.hasError)
PointerDeviceKind.mouse, Text(searchArtist
}, .error?[searchArtist.pageParams.last])
), else
child: Scrollbar( ScrollConfiguration(
controller: artistController, behavior:
child: SingleChildScrollView( ScrollConfiguration.of(context).copyWith(
scrollDirection: Axis.horizontal, dragDevices: {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
},
),
child: Scrollbar(
controller: artistController, controller: artistController,
child: Row( child: SingleChildScrollView(
children: artists scrollDirection: Axis.horizontal,
.map( controller: artistController,
(artist) => Container( child: Row(
margin: const EdgeInsets.symmetric( children: [
horizontal: 15), ...artists.mapIndexed(
child: ArtistCard(artist), (i, artist) {
), if (i == artists.length - 1 &&
) searchArtist.hasNextPage) {
.toList(), 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), 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),
ScrollConfiguration( if (searchAlbum.isLoading &&
behavior: ScrollConfiguration.of(context).copyWith( !searchAlbum.isFetchingNextPage)
dragDevices: { const CircularProgressIndicator()
PointerDeviceKind.touch, else if (searchAlbum.hasError)
PointerDeviceKind.mouse, Text(
}, searchAlbum.error?[searchAlbum.pageParams.last])
), else
child: Scrollbar( ScrollConfiguration(
scrollbarOrientation: breakpoint > Breakpoints.md behavior:
? ScrollbarOrientation.bottom ScrollConfiguration.of(context).copyWith(
: ScrollbarOrientation.top, dragDevices: {
controller: playlistController, PointerDeviceKind.touch,
child: SingleChildScrollView( PointerDeviceKind.mouse,
scrollDirection: Axis.horizontal, },
controller: playlistController, ),
child: Row( child: Scrollbar(
children: playlists controller: albumController,
.map( child: SingleChildScrollView(
(playlist) => PlaylistCard(playlist), scrollDirection: Axis.horizontal,
) controller: albumController,
.toList(), 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,
),
);
}),
],
),
), ),
), ),
), ),
),
], ],
), ),
), ),

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