mirror of
https://github.com/KRTirtho/spotube.git
synced 2025-09-13 16:05:18 +00:00
feat: search loading animation
This commit is contained in:
Kingkor Roy Tirtho
parent
ab0fe5bdfa
commit
b9d5c70301
@ -96,4 +96,5 @@ abstract class SpotubeIcons {
|
||||
static const window = Icons.window_rounded;
|
||||
static const user = FeatherIcons.user;
|
||||
static const edit = FeatherIcons.edit;
|
||||
static const web = FeatherIcons.globe;
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import 'dart:ui';
|
||||
|
||||
import 'package:auto_size_text/auto_size_text.dart';
|
||||
import 'package:fl_query/fl_query.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
@ -103,12 +104,20 @@ class TrackCollectionHeading<T> extends HookConsumerWidget {
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
children: [
|
||||
Text(
|
||||
ConstrainedBox(
|
||||
constraints: BoxConstraints(
|
||||
maxWidth: constrains.mdAndDown ? 400 : 300,
|
||||
),
|
||||
child: AutoSizeText(
|
||||
title,
|
||||
style: theme.textTheme.titleLarge!.copyWith(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
maxLines: 2,
|
||||
minFontSize: 16,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
if (album != null)
|
||||
Text(
|
||||
@ -125,11 +134,12 @@ class TrackCollectionHeading<T> extends HookConsumerWidget {
|
||||
constraints: BoxConstraints(
|
||||
maxWidth: constrains.mdAndDown ? 400 : 300,
|
||||
),
|
||||
child: Text(
|
||||
child: AutoSizeText(
|
||||
cleanDescription,
|
||||
style: const TextStyle(color: Colors.white),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.fade,
|
||||
minFontSize: 14,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
"update_playlist": "Update playlist",
|
||||
"create": "Create",
|
||||
"cancel": "Cancel",
|
||||
"update": "update",
|
||||
"update": "Update",
|
||||
"playlist_name": "Playlist Name",
|
||||
"name_of_playlist": "Name of the playlist",
|
||||
"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",
|
||||
"you_are_offline": "You are currently offline",
|
||||
"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"
|
||||
}
|
||||
@ -55,50 +55,30 @@ class SearchPage extends HookConsumerWidget {
|
||||
|
||||
Future<void> onSearch() async {
|
||||
await Future.wait([
|
||||
searchTrack.reset(),
|
||||
searchAlbum.reset(),
|
||||
searchPlaylist.reset(),
|
||||
searchArtist.reset(),
|
||||
]).then((_) {
|
||||
return Future.wait([
|
||||
searchTrack.refreshAll(),
|
||||
searchAlbum.refreshAll(),
|
||||
searchPlaylist.refreshAll(),
|
||||
searchArtist.refreshAll(),
|
||||
]);
|
||||
});
|
||||
}
|
||||
|
||||
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: 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(
|
||||
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);
|
||||
final playlist = ref.watch(ProxyPlaylistNotifier.provider);
|
||||
final playlistNotifier = ref.watch(ProxyPlaylistNotifier.notifier);
|
||||
List<AlbumSimple> albums = [];
|
||||
List<Artist> artists = [];
|
||||
List<Track> tracks = [];
|
||||
@ -122,29 +102,27 @@ class SearchPage extends HookConsumerWidget {
|
||||
}
|
||||
}
|
||||
}
|
||||
return Expanded(
|
||||
child: SingleChildScrollView(
|
||||
|
||||
return SingleChildScrollView(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: 8,
|
||||
horizontal: 20,
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(vertical: 8),
|
||||
child: SafeArea(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
if (tracks.isNotEmpty)
|
||||
Text(
|
||||
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() ??
|
||||
"",
|
||||
searchTrack.errors.lastOrNull?.toString() ?? "",
|
||||
)
|
||||
else
|
||||
...tracks.mapIndexed((i, track) {
|
||||
@ -153,22 +131,16 @@ class SearchPage extends HookConsumerWidget {
|
||||
track: track,
|
||||
onTap: () async {
|
||||
final isTrackPlaying =
|
||||
playlist.activeTrack?.id ==
|
||||
track.id;
|
||||
if (!isTrackPlaying &&
|
||||
context.mounted) {
|
||||
final shouldPlay =
|
||||
(playlist.tracks.length) > 20
|
||||
playlist.activeTrack?.id == track.id;
|
||||
if (!isTrackPlaying && context.mounted) {
|
||||
final shouldPlay = (playlist.tracks.length) > 20
|
||||
? await showPromptDialog(
|
||||
context: context,
|
||||
title: context.l10n
|
||||
.playing_track(
|
||||
title: context.l10n.playing_track(
|
||||
track.name!,
|
||||
),
|
||||
message: context.l10n
|
||||
.queue_clear_alert(
|
||||
playlist
|
||||
.tracks.length,
|
||||
message: context.l10n.queue_clear_alert(
|
||||
playlist.tracks.length,
|
||||
),
|
||||
)
|
||||
: true;
|
||||
@ -183,8 +155,7 @@ class SearchPage extends HookConsumerWidget {
|
||||
},
|
||||
);
|
||||
}),
|
||||
if (searchTrack.hasNextPage &&
|
||||
tracks.isNotEmpty)
|
||||
if (searchTrack.hasNextPage && tracks.isNotEmpty)
|
||||
Center(
|
||||
child: TextButton(
|
||||
onPressed: searchTrack.isRefreshingPage
|
||||
@ -196,14 +167,16 @@ class SearchPage extends HookConsumerWidget {
|
||||
),
|
||||
),
|
||||
if (playlists.isNotEmpty)
|
||||
Text(
|
||||
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(
|
||||
behavior: ScrollConfiguration.of(context).copyWith(
|
||||
dragDevices: {
|
||||
PointerDeviceKind.touch,
|
||||
PointerDeviceKind.mouse,
|
||||
@ -222,15 +195,13 @@ class SearchPage extends HookConsumerWidget {
|
||||
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) {
|
||||
if (i == playlists.length - 1 &&
|
||||
searchPlaylist.hasNextPage) {
|
||||
return const ShimmerPlaybuttonCard(
|
||||
count: 1);
|
||||
}
|
||||
@ -246,21 +217,24 @@ class SearchPage extends HookConsumerWidget {
|
||||
if (searchPlaylist.isLoadingPage)
|
||||
const CircularProgressIndicator(),
|
||||
if (searchPlaylist.hasPageError)
|
||||
Text(
|
||||
searchPlaylist.errors.lastOrNull
|
||||
?.toString() ??
|
||||
"",
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8),
|
||||
child: Text(
|
||||
searchPlaylist.errors.lastOrNull?.toString() ?? "",
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
if (artists.isNotEmpty)
|
||||
Text(
|
||||
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(
|
||||
behavior: ScrollConfiguration.of(context).copyWith(
|
||||
dragDevices: {
|
||||
PointerDeviceKind.touch,
|
||||
PointerDeviceKind.mouse,
|
||||
@ -281,14 +255,12 @@ class SearchPage extends HookConsumerWidget {
|
||||
...artists.mapIndexed(
|
||||
(i, artist) {
|
||||
if (i == artists.length - 1 &&
|
||||
searchArtist
|
||||
.hasNextPage) {
|
||||
searchArtist.hasNextPage) {
|
||||
return const ShimmerPlaybuttonCard(
|
||||
count: 1);
|
||||
}
|
||||
return Container(
|
||||
margin: const EdgeInsets
|
||||
.symmetric(
|
||||
margin: const EdgeInsets.symmetric(
|
||||
horizontal: 15),
|
||||
child: ArtistCard(artist),
|
||||
);
|
||||
@ -303,21 +275,24 @@ class SearchPage extends HookConsumerWidget {
|
||||
if (searchArtist.isLoadingPage)
|
||||
const CircularProgressIndicator(),
|
||||
if (searchArtist.hasPageError)
|
||||
Text(
|
||||
searchArtist.errors.lastOrNull
|
||||
?.toString() ??
|
||||
"",
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8),
|
||||
child: Text(
|
||||
searchArtist.errors.lastOrNull?.toString() ?? "",
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
if (albums.isNotEmpty)
|
||||
Text(
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8),
|
||||
child: Text(
|
||||
context.l10n.albums,
|
||||
style: theme.textTheme.titleMedium!,
|
||||
style: theme.textTheme.titleLarge!,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
ScrollConfiguration(
|
||||
behavior: ScrollConfiguration.of(context)
|
||||
.copyWith(
|
||||
behavior: ScrollConfiguration.of(context).copyWith(
|
||||
dragDevices: {
|
||||
PointerDeviceKind.touch,
|
||||
PointerDeviceKind.mouse,
|
||||
@ -338,12 +313,10 @@ class SearchPage extends HookConsumerWidget {
|
||||
...albums.mapIndexed((i, album) {
|
||||
if (i == albums.length - 1 &&
|
||||
searchAlbum.hasNextPage) {
|
||||
return const ShimmerPlaybuttonCard(
|
||||
count: 1);
|
||||
return const ShimmerPlaybuttonCard(count: 1);
|
||||
}
|
||||
return AlbumCard(
|
||||
TypeConversionUtils
|
||||
.simpleAlbum_X_Album(
|
||||
TypeConversionUtils.simpleAlbum_X_Album(
|
||||
album,
|
||||
),
|
||||
);
|
||||
@ -357,19 +330,109 @@ class SearchPage extends HookConsumerWidget {
|
||||
if (searchAlbum.isLoadingPage)
|
||||
const CircularProgressIndicator(),
|
||||
if (searchAlbum.hasPageError)
|
||||
Text(
|
||||
searchAlbum.errors.lastOrNull
|
||||
?.toString() ??
|
||||
"",
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8),
|
||||
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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
@ -1,56 +1,78 @@
|
||||
{
|
||||
"bn": [
|
||||
"update_playlist",
|
||||
"update"
|
||||
"update",
|
||||
"crunching_results",
|
||||
"search_to_get_results"
|
||||
],
|
||||
|
||||
"ca": [
|
||||
"update_playlist",
|
||||
"update"
|
||||
"update",
|
||||
"crunching_results",
|
||||
"search_to_get_results"
|
||||
],
|
||||
|
||||
"de": [
|
||||
"update_playlist",
|
||||
"update"
|
||||
"update",
|
||||
"crunching_results",
|
||||
"search_to_get_results"
|
||||
],
|
||||
|
||||
"es": [
|
||||
"update_playlist",
|
||||
"update"
|
||||
"update",
|
||||
"crunching_results",
|
||||
"search_to_get_results"
|
||||
],
|
||||
|
||||
"fr": [
|
||||
"update_playlist",
|
||||
"update"
|
||||
"update",
|
||||
"crunching_results",
|
||||
"search_to_get_results"
|
||||
],
|
||||
|
||||
"hi": [
|
||||
"update_playlist",
|
||||
"update"
|
||||
"update",
|
||||
"crunching_results",
|
||||
"search_to_get_results"
|
||||
],
|
||||
|
||||
"ja": [
|
||||
"update_playlist",
|
||||
"update"
|
||||
"update",
|
||||
"crunching_results",
|
||||
"search_to_get_results"
|
||||
],
|
||||
|
||||
"pl": [
|
||||
"update_playlist",
|
||||
"update"
|
||||
"update",
|
||||
"crunching_results",
|
||||
"search_to_get_results"
|
||||
],
|
||||
|
||||
"pt": [
|
||||
"update_playlist",
|
||||
"update"
|
||||
"update",
|
||||
"crunching_results",
|
||||
"search_to_get_results"
|
||||
],
|
||||
|
||||
"ru": [
|
||||
"update_playlist",
|
||||
"update"
|
||||
"update",
|
||||
"crunching_results",
|
||||
"search_to_get_results"
|
||||
],
|
||||
|
||||
"zh": [
|
||||
"update_playlist",
|
||||
"update"
|
||||
"update",
|
||||
"crunching_results",
|
||||
"search_to_get_results"
|
||||
]
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user