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

14
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,12 +104,20 @@ class TrackCollectionHeading<T> extends HookConsumerWidget {
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max, mainAxisSize: MainAxisSize.max,
children: [ children: [
Text( ConstrainedBox(
constraints: BoxConstraints(
maxWidth: constrains.mdAndDown ? 400 : 300,
),
child: AutoSizeText(
title, title,
style: theme.textTheme.titleLarge!.copyWith( style: theme.textTheme.titleLarge!.copyWith(
color: Colors.white, color: Colors.white,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
), ),
maxLines: 2,
minFontSize: 16,
overflow: TextOverflow.ellipsis,
),
), ),
if (album != null) if (album != null)
Text( Text(
@ -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"
} }

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

@ -55,50 +55,30 @@ class SearchPage extends HookConsumerWidget {
Future<void> onSearch() async { Future<void> onSearch() async {
await Future.wait([ await Future.wait([
searchTrack.reset(),
searchAlbum.reset(),
searchPlaylist.reset(),
searchArtist.reset(),
]).then((_) {
return Future.wait([
searchTrack.refreshAll(), searchTrack.refreshAll(),
searchAlbum.refreshAll(), searchAlbum.refreshAll(),
searchPlaylist.refreshAll(), searchPlaylist.refreshAll(),
searchArtist.refreshAll(), searchArtist.refreshAll(),
]); ]);
});
} }
return SafeArea( final queries = [searchTrack, searchAlbum, searchPlaylist, searchArtist];
bottom: false, final isFetching = queries.every(
child: Scaffold( (s) => s.isLoadingPage || s.isRefreshingPage || !s.hasPageData,
appBar: kIsDesktop && !kIsMacOS ? const PageWindowTitleBar() : null, ) &&
body: !authenticationNotifier.isLoggedIn searchTerm.isNotEmpty;
? const AnonymousFallback()
: Column( final resultWidget = HookBuilder(
children: [
Container(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 10,
),
color: theme.scaffoldBackgroundColor,
child: TextField(
autofocus: true,
decoration: InputDecoration(
prefixIcon: const Icon(SpotubeIcons.search),
hintText: "${context.l10n.search}...",
),
onSubmitted: (value) async {
ref.read(searchTermStateProvider.notifier).state =
value;
// Fl-Query is too fast, so we need to delay the search
// to prevent spamming the API :)
Timer(const Duration(milliseconds: 50), () {
onSearch();
});
},
),
),
HookBuilder(
builder: (context) { builder: (context) {
final playlist = final playlist = ref.watch(ProxyPlaylistNotifier.provider);
ref.watch(ProxyPlaylistNotifier.provider); final playlistNotifier = ref.watch(ProxyPlaylistNotifier.notifier);
final playlistNotifier =
ref.watch(ProxyPlaylistNotifier.notifier);
List<AlbumSimple> albums = []; List<AlbumSimple> albums = [];
List<Artist> artists = []; List<Artist> artists = [];
List<Track> tracks = []; List<Track> tracks = [];
@ -122,29 +102,27 @@ class SearchPage extends HookConsumerWidget {
} }
} }
} }
return Expanded(
child: SingleChildScrollView( return SingleChildScrollView(
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(vertical: 8),
vertical: 8,
horizontal: 20,
),
child: SafeArea( child: SafeArea(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
if (tracks.isNotEmpty) if (tracks.isNotEmpty)
Text( Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Text(
context.l10n.songs, context.l10n.songs,
style: theme.textTheme.titleLarge!, style: theme.textTheme.titleLarge!,
), ),
),
if (searchTrack.isLoadingPage) if (searchTrack.isLoadingPage)
const CircularProgressIndicator() const CircularProgressIndicator()
else if (searchTrack.hasPageError) else if (searchTrack.hasPageError)
Text( Text(
searchTrack.errors.lastOrNull searchTrack.errors.lastOrNull?.toString() ?? "",
?.toString() ??
"",
) )
else else
...tracks.mapIndexed((i, track) { ...tracks.mapIndexed((i, track) {
@ -153,22 +131,16 @@ class SearchPage extends HookConsumerWidget {
track: track, track: track,
onTap: () async { onTap: () async {
final isTrackPlaying = final isTrackPlaying =
playlist.activeTrack?.id == playlist.activeTrack?.id == track.id;
track.id; if (!isTrackPlaying && context.mounted) {
if (!isTrackPlaying && final shouldPlay = (playlist.tracks.length) > 20
context.mounted) {
final shouldPlay =
(playlist.tracks.length) > 20
? await showPromptDialog( ? await showPromptDialog(
context: context, context: context,
title: context.l10n title: context.l10n.playing_track(
.playing_track(
track.name!, track.name!,
), ),
message: context.l10n message: context.l10n.queue_clear_alert(
.queue_clear_alert( playlist.tracks.length,
playlist
.tracks.length,
), ),
) )
: true; : true;
@ -183,8 +155,7 @@ class SearchPage extends HookConsumerWidget {
}, },
); );
}), }),
if (searchTrack.hasNextPage && if (searchTrack.hasNextPage && tracks.isNotEmpty)
tracks.isNotEmpty)
Center( Center(
child: TextButton( child: TextButton(
onPressed: searchTrack.isRefreshingPage onPressed: searchTrack.isRefreshingPage
@ -196,14 +167,16 @@ class SearchPage extends HookConsumerWidget {
), ),
), ),
if (playlists.isNotEmpty) if (playlists.isNotEmpty)
Text( Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Text(
context.l10n.playlists, context.l10n.playlists,
style: theme.textTheme.titleLarge!, style: theme.textTheme.titleLarge!,
), ),
),
const SizedBox(height: 10), const SizedBox(height: 10),
ScrollConfiguration( ScrollConfiguration(
behavior: ScrollConfiguration.of(context) behavior: ScrollConfiguration.of(context).copyWith(
.copyWith(
dragDevices: { dragDevices: {
PointerDeviceKind.touch, PointerDeviceKind.touch,
PointerDeviceKind.mouse, PointerDeviceKind.mouse,
@ -222,15 +195,13 @@ class SearchPage extends HookConsumerWidget {
child: SingleChildScrollView( child: SingleChildScrollView(
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
controller: playlistController, controller: playlistController,
padding: const EdgeInsets.symmetric(vertical: 4),
child: Row( child: Row(
children: [ children: [
...playlists.mapIndexed( ...playlists.mapIndexed(
(i, playlist) { (i, playlist) {
if (i == if (i == playlists.length - 1 &&
playlists.length - searchPlaylist.hasNextPage) {
1 &&
searchPlaylist
.hasNextPage) {
return const ShimmerPlaybuttonCard( return const ShimmerPlaybuttonCard(
count: 1); count: 1);
} }
@ -246,21 +217,24 @@ class SearchPage extends HookConsumerWidget {
if (searchPlaylist.isLoadingPage) if (searchPlaylist.isLoadingPage)
const CircularProgressIndicator(), const CircularProgressIndicator(),
if (searchPlaylist.hasPageError) if (searchPlaylist.hasPageError)
Text( Padding(
searchPlaylist.errors.lastOrNull padding: const EdgeInsets.symmetric(horizontal: 8),
?.toString() ?? child: Text(
"", searchPlaylist.errors.lastOrNull?.toString() ?? "",
),
), ),
const SizedBox(height: 20), const SizedBox(height: 20),
if (artists.isNotEmpty) if (artists.isNotEmpty)
Text( Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Text(
context.l10n.artists, context.l10n.artists,
style: theme.textTheme.titleLarge!, style: theme.textTheme.titleLarge!,
), ),
),
const SizedBox(height: 10), const SizedBox(height: 10),
ScrollConfiguration( ScrollConfiguration(
behavior: ScrollConfiguration.of(context) behavior: ScrollConfiguration.of(context).copyWith(
.copyWith(
dragDevices: { dragDevices: {
PointerDeviceKind.touch, PointerDeviceKind.touch,
PointerDeviceKind.mouse, PointerDeviceKind.mouse,
@ -281,14 +255,12 @@ class SearchPage extends HookConsumerWidget {
...artists.mapIndexed( ...artists.mapIndexed(
(i, artist) { (i, artist) {
if (i == artists.length - 1 && if (i == artists.length - 1 &&
searchArtist searchArtist.hasNextPage) {
.hasNextPage) {
return const ShimmerPlaybuttonCard( return const ShimmerPlaybuttonCard(
count: 1); count: 1);
} }
return Container( return Container(
margin: const EdgeInsets margin: const EdgeInsets.symmetric(
.symmetric(
horizontal: 15), horizontal: 15),
child: ArtistCard(artist), child: ArtistCard(artist),
); );
@ -303,21 +275,24 @@ class SearchPage extends HookConsumerWidget {
if (searchArtist.isLoadingPage) if (searchArtist.isLoadingPage)
const CircularProgressIndicator(), const CircularProgressIndicator(),
if (searchArtist.hasPageError) if (searchArtist.hasPageError)
Text( Padding(
searchArtist.errors.lastOrNull padding: const EdgeInsets.symmetric(horizontal: 8),
?.toString() ?? child: Text(
"", searchArtist.errors.lastOrNull?.toString() ?? "",
),
), ),
const SizedBox(height: 20), const SizedBox(height: 20),
if (albums.isNotEmpty) if (albums.isNotEmpty)
Text( Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Text(
context.l10n.albums, context.l10n.albums,
style: theme.textTheme.titleMedium!, style: theme.textTheme.titleLarge!,
),
), ),
const SizedBox(height: 10), const SizedBox(height: 10),
ScrollConfiguration( ScrollConfiguration(
behavior: ScrollConfiguration.of(context) behavior: ScrollConfiguration.of(context).copyWith(
.copyWith(
dragDevices: { dragDevices: {
PointerDeviceKind.touch, PointerDeviceKind.touch,
PointerDeviceKind.mouse, PointerDeviceKind.mouse,
@ -338,12 +313,10 @@ class SearchPage extends HookConsumerWidget {
...albums.mapIndexed((i, album) { ...albums.mapIndexed((i, album) {
if (i == albums.length - 1 && if (i == albums.length - 1 &&
searchAlbum.hasNextPage) { searchAlbum.hasNextPage) {
return const ShimmerPlaybuttonCard( return const ShimmerPlaybuttonCard(count: 1);
count: 1);
} }
return AlbumCard( return AlbumCard(
TypeConversionUtils TypeConversionUtils.simpleAlbum_X_Album(
.simpleAlbum_X_Album(
album, album,
), ),
); );
@ -357,19 +330,109 @@ class SearchPage extends HookConsumerWidget {
if (searchAlbum.isLoadingPage) if (searchAlbum.isLoadingPage)
const CircularProgressIndicator(), const CircularProgressIndicator(),
if (searchAlbum.hasPageError) if (searchAlbum.hasPageError)
Text( Padding(
searchAlbum.errors.lastOrNull padding: const EdgeInsets.symmetric(horizontal: 8),
?.toString() ?? child: Text(
"", searchAlbum.errors.lastOrNull?.toString() ?? "",
),
), ),
], ],
), ),
), ),
), ),
),
); );
}, },
);
return SafeArea(
bottom: false,
child: Scaffold(
appBar: kIsDesktop && !kIsMacOS ? const PageWindowTitleBar() : null,
body: !authenticationNotifier.isLoggedIn
? const AnonymousFallback()
: Column(
children: [
Container(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 10,
),
color: theme.scaffoldBackgroundColor,
child: TextField(
autofocus: queries.none((s) => s.hasPageData),
decoration: InputDecoration(
prefixIcon: const Icon(SpotubeIcons.search),
hintText: "${context.l10n.search}...",
),
onSubmitted: (value) async {
ref.read(searchTermStateProvider.notifier).state =
value;
// Fl-Query is too fast, so we need to delay the search
// to prevent spamming the API :)
Timer(const Duration(milliseconds: 50), () {
onSearch();
});
},
),
),
Expanded(
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
child: searchTerm.isEmpty
? Column(
children: [
SizedBox(
height: mediaQuery.size.height * 0.2,
),
Icon(
SpotubeIcons.web,
size: 120,
color: theme.colorScheme.onBackground
.withOpacity(0.7),
),
const SizedBox(height: 20),
Text(
context.l10n.search_to_get_results,
style: theme.textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.w900,
color: theme.colorScheme.onBackground
.withOpacity(0.5),
),
),
],
) )
: isFetching
? Container(
constraints: BoxConstraints(
maxWidth: mediaQuery.lgAndUp
? mediaQuery.size.width * 0.5
: mediaQuery.size.width,
),
padding: const EdgeInsets.symmetric(
horizontal: 20,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Text(
context.l10n.crunching_results,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w900,
color: theme.colorScheme.onBackground
.withOpacity(0.7),
),
),
const SizedBox(height: 20),
const LinearProgressIndicator(),
],
),
)
: resultWidget,
),
),
], ],
), ),
), ),

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"
] ]
} }