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

feat: search loading animation

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2023-09-10 18:19:47 +06:00
parent ab0fe5bdfa
commit b9d5c70301
5 changed files with 397 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/collections/spotube_icons.dart
View File

@ -96,4 +96,5 @@ abstract class SpotubeIcons {
static const window = Icons.window_rounded; static const window = Icons.window_rounded;
static const user = FeatherIcons.user; static const user = FeatherIcons.user;
static const edit = FeatherIcons.edit; static const edit = FeatherIcons.edit;
static const web = FeatherIcons.globe;
} }

22
lib/components/shared/track_table/track_collection_view/track_collection_heading.dart
View File

@ -1,5 +1,6 @@
import 'dart:ui'; import 'dart:ui';
import 'package:auto_size_text/auto_size_text.dart';
import 'package:fl_query/fl_query.dart'; import 'package:fl_query/fl_query.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
@ -103,11 +104,19 @@ class TrackCollectionHeading<T> extends HookConsumerWidget {
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max, mainAxisSize: MainAxisSize.max,
children: [ children: [
Text( ConstrainedBox(
title, constraints: BoxConstraints(
style: theme.textTheme.titleLarge!.copyWith( maxWidth: constrains.mdAndDown ? 400 : 300,
color: Colors.white, ),
fontWeight: FontWeight.w600, child: AutoSizeText(
title,
style: theme.textTheme.titleLarge!.copyWith(
color: Colors.white,
fontWeight: FontWeight.w600,
),
maxLines: 2,
minFontSize: 16,
overflow: TextOverflow.ellipsis,
), ),
), ),
if (album != null) if (album != null)
@ -125,11 +134,12 @@ class TrackCollectionHeading<T> extends HookConsumerWidget {
constraints: BoxConstraints( constraints: BoxConstraints(
maxWidth: constrains.mdAndDown ? 400 : 300, maxWidth: constrains.mdAndDown ? 400 : 300,
), ),
child: Text( child: AutoSizeText(
cleanDescription, cleanDescription,
style: const TextStyle(color: Colors.white), style: const TextStyle(color: Colors.white),
maxLines: 2, maxLines: 2,
overflow: TextOverflow.fade, overflow: TextOverflow.fade,
minFontSize: 14,
), ),
), ),
const SizedBox(height: 10), const SizedBox(height: 10),

6
lib/l10n/app_en.arb
View File

@ -27,7 +27,7 @@
"update_playlist": "Update playlist", "update_playlist": "Update playlist",
"create": "Create", "create": "Create",
"cancel": "Cancel", "cancel": "Cancel",
"update": "update", "update": "Update",
"playlist_name": "Playlist Name", "playlist_name": "Playlist Name",
"name_of_playlist": "Name of the playlist", "name_of_playlist": "Name of the playlist",
"description": "Description", "description": "Description",
@ -261,5 +261,7 @@
"piped_down_error_instructions": "The Piped instance {pipedInstance} is currently down\n\nEither change the instance or change the 'API type' to official YouTube API\n\nMake sure to restart the app after change", "piped_down_error_instructions": "The Piped instance {pipedInstance} is currently down\n\nEither change the instance or change the 'API type' to official YouTube API\n\nMake sure to restart the app after change",
"you_are_offline": "You are currently offline", "you_are_offline": "You are currently offline",
"connection_restored": "Your internet connection was restored", "connection_restored": "Your internet connection was restored",
"use_system_title_bar": "Use system title bar" "use_system_title_bar": "Use system title bar",
"crunching_results": "Crunching results...",
"search_to_get_results": "Search to get results"
} }

623
lib/pages/search/search.dart
View File

@ -55,13 +55,295 @@ class SearchPage extends HookConsumerWidget {
Future<void> onSearch() async { Future<void> onSearch() async {
await Future.wait([ await Future.wait([
searchTrack.refreshAll(), searchTrack.reset(),
searchAlbum.refreshAll(), searchAlbum.reset(),
searchPlaylist.refreshAll(), searchPlaylist.reset(),
searchArtist.refreshAll(), searchArtist.reset(),
]); ]).then((_) {
return Future.wait([
searchTrack.refreshAll(),
searchAlbum.refreshAll(),
searchPlaylist.refreshAll(),
searchArtist.refreshAll(),
]);
});
} }
final queries = [searchTrack, searchAlbum, searchPlaylist, searchArtist];
final isFetching = queries.every(
(s) => s.isLoadingPage || s.isRefreshingPage || !s.hasPageData,
) &&
searchTerm.isNotEmpty;
final resultWidget = HookBuilder(
builder: (context) {
final playlist = ref.watch(ProxyPlaylistNotifier.provider);
final playlistNotifier = ref.watch(ProxyPlaylistNotifier.notifier);
List<AlbumSimple> albums = [];
List<Artist> artists = [];
List<Track> tracks = [];
List<PlaylistSimple> playlists = [];
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);
} else if (item is PlaylistSimple) {
playlists.add(item);
} else if (item is Artist) {
artists.add(item);
} else if (item is Track) {
tracks.add(item);
}
}
}
return SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (tracks.isNotEmpty)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Text(
context.l10n.songs,
style: theme.textTheme.titleLarge!,
),
),
if (searchTrack.isLoadingPage)
const CircularProgressIndicator()
else if (searchTrack.hasPageError)
Text(
searchTrack.errors.lastOrNull?.toString() ?? "",
)
else
...tracks.mapIndexed((i, track) {
return TrackTile(
index: i,
track: track,
onTap: () async {
final isTrackPlaying =
playlist.activeTrack?.id == track.id;
if (!isTrackPlaying && context.mounted) {
final shouldPlay = (playlist.tracks.length) > 20
? await showPromptDialog(
context: context,
title: context.l10n.playing_track(
track.name!,
),
message: context.l10n.queue_clear_alert(
playlist.tracks.length,
),
)
: true;
if (shouldPlay) {
await playlistNotifier.load(
[track],
autoPlay: true,
);
}
}
},
);
}),
if (searchTrack.hasNextPage && tracks.isNotEmpty)
Center(
child: TextButton(
onPressed: searchTrack.isRefreshingPage
? null
: () => searchTrack.fetchNext(),
child: searchTrack.isRefreshingPage
? const CircularProgressIndicator()
: Text(context.l10n.load_more),
),
),
if (playlists.isNotEmpty)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Text(
context.l10n.playlists,
style: theme.textTheme.titleLarge!,
),
),
const SizedBox(height: 10),
ScrollConfiguration(
behavior: ScrollConfiguration.of(context).copyWith(
dragDevices: {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
},
),
child: Scrollbar(
scrollbarOrientation: mediaQuery.lgAndUp
? ScrollbarOrientation.bottom
: ScrollbarOrientation.top,
controller: playlistController,
child: Waypoint(
onTouchEdge: () {
searchPlaylist.fetchNext();
},
controller: playlistController,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
controller: playlistController,
padding: const EdgeInsets.symmetric(vertical: 4),
child: Row(
children: [
...playlists.mapIndexed(
(i, playlist) {
if (i == playlists.length - 1 &&
searchPlaylist.hasNextPage) {
return const ShimmerPlaybuttonCard(
count: 1);
}
return PlaylistCard(playlist);
},
),
],
),
),
),
),
),
if (searchPlaylist.isLoadingPage)
const CircularProgressIndicator(),
if (searchPlaylist.hasPageError)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Text(
searchPlaylist.errors.lastOrNull?.toString() ?? "",
),
),
const SizedBox(height: 20),
if (artists.isNotEmpty)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Text(
context.l10n.artists,
style: theme.textTheme.titleLarge!,
),
),
const SizedBox(height: 10),
ScrollConfiguration(
behavior: ScrollConfiguration.of(context).copyWith(
dragDevices: {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
},
),
child: Scrollbar(
controller: artistController,
child: Waypoint(
controller: artistController,
onTouchEdge: () {
searchArtist.fetchNext();
},
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
controller: artistController,
child: Row(
children: [
...artists.mapIndexed(
(i, artist) {
if (i == artists.length - 1 &&
searchArtist.hasNextPage) {
return const ShimmerPlaybuttonCard(
count: 1);
}
return Container(
margin: const EdgeInsets.symmetric(
horizontal: 15),
child: ArtistCard(artist),
);
},
),
],
),
),
),
),
),
if (searchArtist.isLoadingPage)
const CircularProgressIndicator(),
if (searchArtist.hasPageError)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Text(
searchArtist.errors.lastOrNull?.toString() ?? "",
),
),
const SizedBox(height: 20),
if (albums.isNotEmpty)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Text(
context.l10n.albums,
style: theme.textTheme.titleLarge!,
),
),
const SizedBox(height: 10),
ScrollConfiguration(
behavior: ScrollConfiguration.of(context).copyWith(
dragDevices: {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
},
),
child: Scrollbar(
controller: albumController,
child: Waypoint(
controller: albumController,
onTouchEdge: () {
searchAlbum.fetchNext();
},
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
controller: albumController,
child: Row(
children: [
...albums.mapIndexed((i, album) {
if (i == albums.length - 1 &&
searchAlbum.hasNextPage) {
return const ShimmerPlaybuttonCard(count: 1);
}
return AlbumCard(
TypeConversionUtils.simpleAlbum_X_Album(
album,
),
);
}),
],
),
),
),
),
),
if (searchAlbum.isLoadingPage)
const CircularProgressIndicator(),
if (searchAlbum.hasPageError)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Text(
searchAlbum.errors.lastOrNull?.toString() ?? "",
),
),
],
),
),
),
);
},
);
return SafeArea( return SafeArea(
bottom: false, bottom: false,
child: Scaffold( child: Scaffold(
@ -77,7 +359,7 @@ class SearchPage extends HookConsumerWidget {
), ),
color: theme.scaffoldBackgroundColor, color: theme.scaffoldBackgroundColor,
child: TextField( child: TextField(
autofocus: true, autofocus: queries.none((s) => s.hasPageData),
decoration: InputDecoration( decoration: InputDecoration(
prefixIcon: const Icon(SpotubeIcons.search), prefixIcon: const Icon(SpotubeIcons.search),
hintText: "${context.l10n.search}...", hintText: "${context.l10n.search}...",
@ -93,283 +375,64 @@ class SearchPage extends HookConsumerWidget {
}, },
), ),
), ),
HookBuilder( Expanded(
builder: (context) { child: AnimatedSwitcher(
final playlist = duration: const Duration(milliseconds: 300),
ref.watch(ProxyPlaylistNotifier.provider); child: searchTerm.isEmpty
final playlistNotifier = ? Column(
ref.watch(ProxyPlaylistNotifier.notifier); children: [
List<AlbumSimple> albums = []; SizedBox(
List<Artist> artists = []; height: mediaQuery.size.height * 0.2,
List<Track> tracks = []; ),
List<PlaylistSimple> playlists = []; Icon(
final pages = [ SpotubeIcons.web,
...searchTrack.pages, size: 120,
...searchAlbum.pages, color: theme.colorScheme.onBackground
...searchPlaylist.pages, .withOpacity(0.7),
...searchArtist.pages, ),
].expand<Page>((page) => page).toList(); const SizedBox(height: 20),
for (MapEntry<int, Page> page in pages.asMap().entries) { Text(
for (var item in page.value.items ?? []) { context.l10n.search_to_get_results,
if (item is AlbumSimple) { style: theme.textTheme.titleLarge?.copyWith(
albums.add(item); fontWeight: FontWeight.w900,
} else if (item is PlaylistSimple) { color: theme.colorScheme.onBackground
playlists.add(item); .withOpacity(0.5),
} else if (item is Artist) { ),
artists.add(item); ),
} else if (item is Track) { ],
tracks.add(item); )
} : isFetching
} ? Container(
} constraints: BoxConstraints(
return Expanded( maxWidth: mediaQuery.lgAndUp
child: SingleChildScrollView( ? mediaQuery.size.width * 0.5
child: Padding( : mediaQuery.size.width,
padding: const EdgeInsets.symmetric( ),
vertical: 8, padding: const EdgeInsets.symmetric(
horizontal: 20, horizontal: 20,
), ),
child: SafeArea( child: Column(
child: Column( mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment:
children: [ CrossAxisAlignment.center,
if (tracks.isNotEmpty) children: [
Text( Text(
context.l10n.songs, context.l10n.crunching_results,
style: theme.textTheme.titleLarge!, style: TextStyle(
), fontSize: 20,
if (searchTrack.isLoadingPage) fontWeight: FontWeight.w900,
const CircularProgressIndicator() color: theme.colorScheme.onBackground
else if (searchTrack.hasPageError) .withOpacity(0.7),
Text(
searchTrack.errors.lastOrNull
?.toString() ??
"",
)
else
...tracks.mapIndexed((i, track) {
return TrackTile(
index: i,
track: track,
onTap: () async {
final isTrackPlaying =
playlist.activeTrack?.id ==
track.id;
if (!isTrackPlaying &&
context.mounted) {
final shouldPlay =
(playlist.tracks.length) > 20
? await showPromptDialog(
context: context,
title: context.l10n
.playing_track(
track.name!,
),
message: context.l10n
.queue_clear_alert(
playlist
.tracks.length,
),
)
: true;
if (shouldPlay) {
await playlistNotifier.load(
[track],
autoPlay: true,
);
}
}
},
);
}),
if (searchTrack.hasNextPage &&
tracks.isNotEmpty)
Center(
child: TextButton(
onPressed: searchTrack.isRefreshingPage
? null
: () => searchTrack.fetchNext(),
child: searchTrack.isRefreshingPage
? const CircularProgressIndicator()
: Text(context.l10n.load_more),
),
),
if (playlists.isNotEmpty)
Text(
context.l10n.playlists,
style: theme.textTheme.titleLarge!,
),
const SizedBox(height: 10),
ScrollConfiguration(
behavior: ScrollConfiguration.of(context)
.copyWith(
dragDevices: {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
},
),
child: Scrollbar(
scrollbarOrientation: mediaQuery.lgAndUp
? ScrollbarOrientation.bottom
: ScrollbarOrientation.top,
controller: playlistController,
child: Waypoint(
onTouchEdge: () {
searchPlaylist.fetchNext();
},
controller: playlistController,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
controller: playlistController,
child: Row(
children: [
...playlists.mapIndexed(
(i, playlist) {
if (i ==
playlists.length -
1 &&
searchPlaylist
.hasNextPage) {
return const ShimmerPlaybuttonCard(
count: 1);
}
return PlaylistCard(playlist);
},
),
],
),
), ),
), ),
), const SizedBox(height: 20),
const LinearProgressIndicator(),
],
), ),
if (searchPlaylist.isLoadingPage) )
const CircularProgressIndicator(), : resultWidget,
if (searchPlaylist.hasPageError) ),
Text( ),
searchPlaylist.errors.lastOrNull
?.toString() ??
"",
),
const SizedBox(height: 20),
if (artists.isNotEmpty)
Text(
context.l10n.artists,
style: theme.textTheme.titleLarge!,
),
const SizedBox(height: 10),
ScrollConfiguration(
behavior: ScrollConfiguration.of(context)
.copyWith(
dragDevices: {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
},
),
child: Scrollbar(
controller: artistController,
child: Waypoint(
controller: artistController,
onTouchEdge: () {
searchArtist.fetchNext();
},
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
controller: artistController,
child: Row(
children: [
...artists.mapIndexed(
(i, artist) {
if (i == artists.length - 1 &&
searchArtist
.hasNextPage) {
return const ShimmerPlaybuttonCard(
count: 1);
}
return Container(
margin: const EdgeInsets
.symmetric(
horizontal: 15),
child: ArtistCard(artist),
);
},
),
],
),
),
),
),
),
if (searchArtist.isLoadingPage)
const CircularProgressIndicator(),
if (searchArtist.hasPageError)
Text(
searchArtist.errors.lastOrNull
?.toString() ??
"",
),
const SizedBox(height: 20),
if (albums.isNotEmpty)
Text(
context.l10n.albums,
style: theme.textTheme.titleMedium!,
),
const SizedBox(height: 10),
ScrollConfiguration(
behavior: ScrollConfiguration.of(context)
.copyWith(
dragDevices: {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
},
),
child: Scrollbar(
controller: albumController,
child: Waypoint(
controller: albumController,
onTouchEdge: () {
searchAlbum.fetchNext();
},
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
controller: albumController,
child: Row(
children: [
...albums.mapIndexed((i, album) {
if (i == albums.length - 1 &&
searchAlbum.hasNextPage) {
return const ShimmerPlaybuttonCard(
count: 1);
}
return AlbumCard(
TypeConversionUtils
.simpleAlbum_X_Album(
album,
),
);
}),
],
),
),
),
),
),
if (searchAlbum.isLoadingPage)
const CircularProgressIndicator(),
if (searchAlbum.hasPageError)
Text(
searchAlbum.errors.lastOrNull
?.toString() ??
"",
),
],
),
),
),
),
);
},
)
], ],
), ),
), ),

44
untranslated_messages.json
View File

@ -1,56 +1,78 @@
{ {
"bn": [ "bn": [
"update_playlist", "update_playlist",
"update" "update",
"crunching_results",
"search_to_get_results"
], ],
"ca": [ "ca": [
"update_playlist", "update_playlist",
"update" "update",
"crunching_results",
"search_to_get_results"
], ],
"de": [ "de": [
"update_playlist", "update_playlist",
"update" "update",
"crunching_results",
"search_to_get_results"
], ],
"es": [ "es": [
"update_playlist", "update_playlist",
"update" "update",
"crunching_results",
"search_to_get_results"
], ],
"fr": [ "fr": [
"update_playlist", "update_playlist",
"update" "update",
"crunching_results",
"search_to_get_results"
], ],
"hi": [ "hi": [
"update_playlist", "update_playlist",
"update" "update",
"crunching_results",
"search_to_get_results"
], ],
"ja": [ "ja": [
"update_playlist", "update_playlist",
"update" "update",
"crunching_results",
"search_to_get_results"
], ],
"pl": [ "pl": [
"update_playlist", "update_playlist",
"update" "update",
"crunching_results",
"search_to_get_results"
], ],
"pt": [ "pt": [
"update_playlist", "update_playlist",
"update" "update",
"crunching_results",
"search_to_get_results"
], ],
"ru": [ "ru": [
"update_playlist", "update_playlist",
"update" "update",
"crunching_results",
"search_to_get_results"
], ],
"zh": [ "zh": [
"update_playlist", "update_playlist",
"update" "update",
"crunching_results",
"search_to_get_results"
] ]
} }