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

fix: mobile keyboard overflow

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2024-12-28 21:18:35 +06:00
parent 2ee0ca44c7
commit d845180e60
13 changed files with 213 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ios/Runner.xcodeproj/project.pbxproj
View File

@ -3,7 +3,7 @@
archiveVersion = 1; archiveVersion = 1;
classes = { classes = {
}; };
objectVersion = 70; objectVersion = 54;
objects = { objects = {
/* Begin PBXBuildFile section */ /* Begin PBXBuildFile section */

1
ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
View File

@ -48,6 +48,7 @@
ignoresPersistentStateOnLaunch = "NO" ignoresPersistentStateOnLaunch = "NO"
debugDocumentVersioning = "YES" debugDocumentVersioning = "YES"
debugServiceExtension = "internal" debugServiceExtension = "internal"
enableGPUValidationMode = "1"
allowLocationSimulation = "YES"> allowLocationSimulation = "YES">
<BuildableProductRunnable <BuildableProductRunnable
runnableDebuggingMode = "0"> runnableDebuggingMode = "0">

3
lib/components/horizontal_playbutton_card_view/horizontal_playbutton_card_view.dart
View File

@ -38,6 +38,7 @@ class HorizontalPlaybuttonCardView<T> extends HookWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
final scrollController = useScrollController(); final scrollController = useScrollController();
final isArtist = items.every((s) => s is Artist); final isArtist = items.every((s) => s is Artist);
final scale = context.theme.scaling;
return Padding( return Padding(
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
@ -92,7 +93,7 @@ class HorizontalPlaybuttonCardView<T> extends HookWidget {
), ),
isLoading: isLoadingNextPage, isLoading: isLoadingNextPage,
hasReachedMax: !hasNextPage, hasReachedMax: !hasNextPage,
separatorBuilder: (context, index) => const Gap(8.0), separatorBuilder: (context, index) => Gap(12 * scale),
itemBuilder: (context, index) { itemBuilder: (context, index) {
final item = items[index]; final item = items[index];

8
lib/components/playbutton_view/playbutton_tile.dart
View File

@ -35,7 +35,7 @@ class PlaybuttonTile extends StatelessWidget {
final cleanDescription = description?.unescapeHtml().cleanHtml() ?? ""; final cleanDescription = description?.unescapeHtml().cleanHtml() ?? "";
final scale = context.theme.scaling; final scale = context.theme.scaling;
return Button.ghost( return Button(
leading: Container( leading: Container(
width: 50 * scale, width: 50 * scale,
height: 50 * scale, height: 50 * scale,
@ -47,6 +47,12 @@ class PlaybuttonTile extends StatelessWidget {
), ),
), ),
), ),
style: ButtonVariance.ghost.copyWith(
padding: (context, states, value) {
return (ButtonVariance.ghost.padding(context, states) as EdgeInsets)
.copyWith(right: 0, left: 0);
},
),
trailing: Row( trailing: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [

15
lib/components/track_presentation/presentation_modifiers.dart
View File

@ -11,7 +11,11 @@ import 'package:spotube/extensions/constrains.dart';
import 'package:spotube/extensions/context.dart'; import 'package:spotube/extensions/context.dart';
class TrackPresentationModifiersSection extends HookConsumerWidget { class TrackPresentationModifiersSection extends HookConsumerWidget {
const TrackPresentationModifiersSection({super.key}); final FocusNode? focusNode;
const TrackPresentationModifiersSection({
super.key,
this.focusNode,
});
@override @override
Widget build(BuildContext context, ref) { Widget build(BuildContext context, ref) {
@ -22,11 +26,12 @@ class TrackPresentationModifiersSection extends HookConsumerWidget {
); );
final controller = useTextEditingController(); final controller = useTextEditingController();
final scale = context.theme.scaling;
return LayoutBuilder(builder: (context, constrains) { return LayoutBuilder(builder: (context, constrains) {
return Padding( return Padding(
padding: EdgeInsets.symmetric( padding: EdgeInsets.symmetric(
horizontal: constrains.mdAndUp ? 16 : 8, horizontal: (constrains.mdAndUp ? 16 : 8) * scale,
), ),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
@ -55,11 +60,13 @@ class TrackPresentationModifiersSection extends HookConsumerWidget {
children: [ children: [
Flexible( Flexible(
child: ConstrainedBox( child: ConstrainedBox(
constraints: const BoxConstraints( constraints: BoxConstraints(
maxWidth: 320, maxWidth: 320 * scale,
maxHeight: 38 * scale,
), ),
child: TextField( child: TextField(
controller: controller, controller: controller,
focusNode: focusNode,
leading: Icon( leading: Icon(
SpotubeIcons.search, SpotubeIcons.search,
color: context.theme.colorScheme.mutedForeground, color: context.theme.colorScheme.mutedForeground,

30
lib/components/track_presentation/track_presentation.dart
View File

@ -1,4 +1,5 @@
import 'package:flutter/material.dart' show ListTile; import 'package:flutter/material.dart' show ListTile;
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart'; import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:shadcn_flutter/shadcn_flutter_extension.dart'; import 'package:shadcn_flutter/shadcn_flutter_extension.dart';
@ -9,6 +10,7 @@ import 'package:spotube/components/track_presentation/presentation_top.dart';
import 'package:spotube/components/track_presentation/presentation_modifiers.dart'; import 'package:spotube/components/track_presentation/presentation_modifiers.dart';
import 'package:spotube/extensions/constrains.dart'; import 'package:spotube/extensions/constrains.dart';
import 'package:spotube/extensions/context.dart'; import 'package:spotube/extensions/context.dart';
import 'package:spotube/utils/platform.dart';
class TrackPresentation extends HookConsumerWidget { class TrackPresentation extends HookConsumerWidget {
final TrackPresentationOptions options; final TrackPresentationOptions options;
@ -22,6 +24,29 @@ class TrackPresentation extends HookConsumerWidget {
final headerTextStyle = context.theme.typography.small.copyWith( final headerTextStyle = context.theme.typography.small.copyWith(
color: context.theme.colorScheme.mutedForeground, color: context.theme.colorScheme.mutedForeground,
); );
final scrollController = useScrollController();
final focusNode = useFocusNode();
final scale = context.theme.scaling;
useEffect(() {
if (!kIsMobile) return null;
void listener() {
if (!scrollController.hasClients) return;
if (focusNode.hasFocus) {
scrollController.animateTo(
300 * scale,
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
);
}
}
focusNode.addListener(listener);
return () {
focusNode.removeListener(listener);
};
}, [focusNode, scrollController, scale]);
return Data<TrackPresentationOptions>.inherit( return Data<TrackPresentationOptions>.inherit(
data: options, data: options,
@ -29,6 +54,7 @@ class TrackPresentation extends HookConsumerWidget {
child: Scaffold( child: Scaffold(
headers: const [TitleBar()], headers: const [TitleBar()],
child: CustomScrollView( child: CustomScrollView(
controller: scrollController,
slivers: [ slivers: [
const TrackPresentationTopSection(), const TrackPresentationTopSection(),
const SliverGap(16), const SliverGap(16),
@ -36,7 +62,9 @@ class TrackPresentation extends HookConsumerWidget {
builder: (context, constrains) { builder: (context, constrains) {
return SliverList.list( return SliverList.list(
children: [ children: [
const TrackPresentationModifiersSection(), TrackPresentationModifiersSection(
focusNode: focusNode,
),
ListTile( ListTile(
titleTextStyle: headerTextStyle, titleTextStyle: headerTextStyle,
subtitleTextStyle: headerTextStyle, subtitleTextStyle: headerTextStyle,

6
lib/main.dart
View File

@ -228,6 +228,12 @@ class Spotube extends HookConsumerWidget {
), ),
materialTheme: material.ThemeData( materialTheme: material.ThemeData(
splashFactory: material.NoSplash.splashFactory, splashFactory: material.NoSplash.splashFactory,
appBarTheme: const material.AppBarTheme(
surfaceTintColor: Colors.transparent,
scrolledUnderElevation: 0,
shadowColor: Colors.transparent,
elevation: 0,
),
), ),
themeMode: themeMode, themeMode: themeMode,
shortcuts: { shortcuts: {

6
lib/modules/library/user_albums.dart
View File

@ -50,9 +50,9 @@ class UserAlbums extends HookConsumerWidget {
return SafeArea( return SafeArea(
child: Scaffold( child: Scaffold(
child: RefreshTrigger( child: RefreshTrigger(
onRefresh: () async { // onRefresh: () async {
ref.invalidate(favoriteAlbumsProvider); // ref.invalidate(favoriteAlbumsProvider);
}, // },
child: InterScrollbar( child: InterScrollbar(
controller: controller, controller: controller,
child: CustomScrollView( child: CustomScrollView(

6
lib/modules/library/user_artists.dart
View File

@ -55,9 +55,9 @@ class UserArtists extends HookConsumerWidget {
return SafeArea( return SafeArea(
child: Scaffold( child: Scaffold(
child: RefreshTrigger( child: RefreshTrigger(
onRefresh: () async { // onRefresh: () async {
ref.invalidate(followedArtistsProvider); // ref.invalidate(followedArtistsProvider);
}, // },
child: InterScrollbar( child: InterScrollbar(
controller: controller, controller: controller,
child: Padding( child: Padding(

6
lib/modules/library/user_playlists.dart
View File

@ -78,9 +78,9 @@ class UserPlaylists extends HookConsumerWidget {
} }
return RefreshTrigger( return RefreshTrigger(
onRefresh: () async { // onRefresh: () async {
ref.invalidate(favoritePlaylistsProvider); // ref.invalidate(favoritePlaylistsProvider);
}, // },
child: SafeArea( child: SafeArea(
child: InterScrollbar( child: InterScrollbar(
controller: controller, controller: controller,

140
lib/pages/lastfm_login/lastfm_login.dart
View File

@ -1,9 +1,10 @@
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:form_validator/form_validator.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:spotube/collections/spotube_icons.dart'; import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/components/button/back_button.dart';
import 'package:spotube/components/dialogs/prompt_dialog.dart'; import 'package:spotube/components/dialogs/prompt_dialog.dart';
import 'package:spotube/components/titlebar/titlebar.dart'; import 'package:spotube/components/titlebar/titlebar.dart';
import 'package:spotube/extensions/context.dart'; import 'package:spotube/extensions/context.dart';
@ -15,31 +16,59 @@ class LastFMLoginPage extends HookConsumerWidget {
@override @override
Widget build(BuildContext context, ref) { Widget build(BuildContext context, ref) {
final theme = Theme.of(context);
final router = GoRouter.of(context); final router = GoRouter.of(context);
final scrobblerNotifier = ref.read(scrobblerProvider.notifier); final scrobblerNotifier = ref.read(scrobblerProvider.notifier);
final formKey = useMemoized(() => GlobalKey<FormState>(), []); final usernameKey =
final username = useTextEditingController(); useMemoized(() => const FormKey<String>("username"), []);
final password = useTextEditingController(); final passwordKey =
useMemoized(() => const FormKey<String>("password"), []);
final passwordVisible = useState(false); final passwordVisible = useState(false);
final isLoading = useState(false); final isLoading = useState(false);
return Scaffold( return Scaffold(
appBar: const TitleBar(leading: [BackButton()]), headers: const [
body: Center( SafeArea(
child: ConstrainedBox( child: TitleBar(
leading: [BackButton()],
),
),
],
child: SingleChildScrollView(
child: Container(
constraints: const BoxConstraints(maxWidth: 400), constraints: const BoxConstraints(maxWidth: 400),
alignment: Alignment.center,
padding: const EdgeInsets.all(16),
child: Card( child: Card(
margin: const EdgeInsets.all(8.0),
child: Padding( child: Padding(
padding: const EdgeInsets.all(16.0).copyWith(top: 8), padding: const EdgeInsets.all(16.0).copyWith(top: 8),
child: Form( child: Form(
key: formKey, onSubmit: (context, values) async {
autovalidateMode: AutovalidateMode.onUserInteraction, try {
isLoading.value = true;
await scrobblerNotifier.login(
values[usernameKey].trim(),
values[passwordKey],
);
router.pop();
} catch (e) {
if (context.mounted) {
showPromptDialog(
context: context,
title: context.l10n.error("Authentication failed"),
message: e.toString(),
cancelText: null,
);
}
} finally {
isLoading.value = false;
}
},
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
spacing: 10,
children: [ children: [
Container( Container(
decoration: BoxDecoration( decoration: BoxDecoration(
@ -53,38 +82,35 @@ class LastFMLoginPage extends HookConsumerWidget {
size: 60, size: 60,
), ),
), ),
Text( const Text("last.fm").h3(),
"last.fm",
style: theme.textTheme.titleLarge,
),
const SizedBox(height: 10),
Text(context.l10n.login_with_your_lastfm), Text(context.l10n.login_with_your_lastfm),
const SizedBox(height: 10),
AutofillGroup( AutofillGroup(
child: Column( child: Column(
spacing: 10,
children: [ children: [
TextFormField( FormField(
autofillHints: const [ label: Text(context.l10n.username),
AutofillHints.username, key: usernameKey,
AutofillHints.email, validator: const NotEmptyValidator(),
], child: TextField(
controller: username, autofillHints: const [
validator: ValidationBuilder().required().build(), AutofillHints.username,
decoration: InputDecoration( AutofillHints.email,
labelText: context.l10n.username, ],
placeholder: Text(context.l10n.username),
), ),
), ),
const SizedBox(height: 10), FormField(
TextFormField( key: passwordKey,
autofillHints: const [ validator: const NotEmptyValidator(),
AutofillHints.password, label: Text(context.l10n.password),
], child: TextField(
controller: password, autofillHints: const [
validator: ValidationBuilder().required().build(), AutofillHints.password,
obscureText: !passwordVisible.value, ],
decoration: InputDecoration( obscureText: !passwordVisible.value,
labelText: context.l10n.password, placeholder: Text(context.l10n.password),
suffixIcon: IconButton( trailing: IconButton.ghost(
icon: Icon( icon: Icon(
passwordVisible.value passwordVisible.value
? SpotubeIcons.eye ? SpotubeIcons.eye
@ -98,37 +124,13 @@ class LastFMLoginPage extends HookConsumerWidget {
], ],
), ),
), ),
const SizedBox(height: 10), FormErrorBuilder(builder: (context, errors, child) {
FilledButton( return Button.primary(
onPressed: isLoading.value onPressed: () => context.submitForm(),
? null enabled: errors.isEmpty && !isLoading.value,
: () async { child: Text(context.l10n.login),
try { );
isLoading.value = true; }),
if (formKey.currentState?.validate() != true) {
return;
}
await scrobblerNotifier.login(
username.text.trim(),
password.text,
);
router.pop();
} catch (e) {
if (context.mounted) {
showPromptDialog(
context: context,
title: context.l10n
.error("Authentication failed"),
message: e.toString(),
cancelText: null,
);
}
} finally {
isLoading.value = false;
}
},
child: Text(context.l10n.login),
),
], ],
), ),
), ),

18
lib/pages/root/root_app.dart
View File

@ -179,13 +179,17 @@ class RootApp extends HookConsumerWidget {
return getSidebarTileList(context.l10n).map((s) => s.name).toList(); return getSidebarTileList(context.l10n).map((s) => s.name).toList();
}, []); }, []);
final scaffold = Scaffold( final scaffold = MediaQuery.removeViewInsets(
footers: const [ context: context,
BottomPlayer(), removeBottom: true,
SpotubeNavigationBar(), child: Scaffold(
], footers: const [
floatingFooter: true, BottomPlayer(),
child: Sidebar(child: child), SpotubeNavigationBar(),
],
floatingFooter: true,
child: Sidebar(child: child),
),
); );
if (!kIsAndroid) { if (!kIsAndroid) {

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

@ -29,13 +29,15 @@ class SearchPage extends HookConsumerWidget {
@override @override
Widget build(BuildContext context, ref) { Widget build(BuildContext context, ref) {
final theme = Theme.of(context); final theme = Theme.of(context);
final searchTerm = ref.watch(searchTermStateProvider); final mediaQuery = MediaQuery.sizeOf(context);
final scrollController = useScrollController();
final controller = useSearchController(); final controller = useSearchController();
final focusNode = useFocusNode(); final focusNode = useFocusNode();
final auth = ref.watch(authenticationProvider); final auth = ref.watch(authenticationProvider);
final mediaQuery = MediaQuery.of(context);
final searchTerm = ref.watch(searchTermStateProvider);
final searchTrack = ref.watch(searchProvider(SearchType.track)); final searchTrack = ref.watch(searchProvider(SearchType.track));
final searchAlbum = ref.watch(searchProvider(SearchType.album)); final searchAlbum = ref.watch(searchProvider(SearchType.album));
final searchPlaylist = ref.watch(searchProvider(SearchType.playlist)); final searchPlaylist = ref.watch(searchProvider(SearchType.playlist));
@ -51,35 +53,6 @@ class SearchPage extends HookConsumerWidget {
return null; return null;
}, []); }, []);
final resultWidget = HookBuilder(
builder: (context) {
final controller = useScrollController();
return InterScrollbar(
controller: controller,
child: SingleChildScrollView(
controller: controller,
child: const Padding(
padding: EdgeInsets.symmetric(vertical: 8),
child: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SearchTracksSection(),
SearchPlaylistsSection(),
Gap(20),
SearchArtistsSection(),
Gap(20),
SearchAlbumsSection(),
],
),
),
),
),
);
},
);
void onSubmitted(String value) { void onSubmitted(String value) {
ref.read(searchTermStateProvider.notifier).state = value; ref.read(searchTermStateProvider.notifier).state = value;
if (value.trim().isEmpty) { if (value.trim().isEmpty) {
@ -182,59 +155,80 @@ class SearchPage extends HookConsumerWidget {
Expanded( Expanded(
child: AnimatedSwitcher( child: AnimatedSwitcher(
duration: const Duration(milliseconds: 300), duration: const Duration(milliseconds: 300),
child: searchTerm.isEmpty child: switch ((searchTerm.isEmpty, isFetching)) {
? Column( (true, false) => Column(
children: [ children: [
SizedBox( SizedBox(
height: mediaQuery.size.height * 0.2, height: mediaQuery.height * 0.2,
), ),
Icon( Icon(
SpotubeIcons.web, SpotubeIcons.web,
size: 120, size: 120,
color: theme.colorScheme.foreground
.withOpacity(0.7),
),
const SizedBox(height: 20),
Text(
context.l10n.search_to_get_results,
style: theme.typography.h3.copyWith(
fontWeight: FontWeight.w900,
color: theme.colorScheme.foreground color: theme.colorScheme.foreground
.withOpacity(0.7), .withOpacity(0.5),
), ),
const SizedBox(height: 20), ),
],
),
(false, true) => Container(
constraints: BoxConstraints(
maxWidth: mediaQuery.lgAndUp
? mediaQuery.width * 0.5
: mediaQuery.width,
),
padding: const EdgeInsets.symmetric(
horizontal: 20,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text( Text(
context.l10n.search_to_get_results, context.l10n.crunching_results,
style: theme.typography.h3.copyWith( style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w900, fontWeight: FontWeight.w900,
color: theme.colorScheme.foreground color: theme.colorScheme.foreground
.withOpacity(0.5), .withOpacity(0.7),
), ),
), ),
const SizedBox(height: 20),
const LinearProgressIndicator(),
], ],
) ),
: isFetching ),
? Container( _ => InterScrollbar(
constraints: BoxConstraints( controller: scrollController,
maxWidth: mediaQuery.lgAndUp child: SingleChildScrollView(
? mediaQuery.size.width * 0.5 controller: scrollController,
: mediaQuery.size.width, child: const Padding(
), padding: EdgeInsets.symmetric(vertical: 8),
padding: const EdgeInsets.symmetric( child: SafeArea(
horizontal: 20,
),
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: crossAxisAlignment:
CrossAxisAlignment.center, CrossAxisAlignment.start,
children: [ children: [
Text( SearchTracksSection(),
context.l10n.crunching_results, SearchPlaylistsSection(),
style: TextStyle( Gap(20),
fontSize: 20, SearchArtistsSection(),
fontWeight: FontWeight.w900, Gap(20),
color: theme.colorScheme.foreground SearchAlbumsSection(),
.withOpacity(0.7),
),
),
const SizedBox(height: 20),
const LinearProgressIndicator(),
], ],
), ),
) ),
: resultWidget, ),
),
),
},
), ),
), ),
], ],