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

chore: use pages instead of drawer for queue, lyrics, sources in mobile

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2025-03-04 18:26:59 +06:00
parent 7eb0e69dd7
commit bb71fc0eea
10 changed files with 428 additions and 401 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
lib/collections/routes.dart
View File

@ -190,6 +190,18 @@ class AppRouter extends RootStackRouter {
),
],
),
AutoRoute(
path: "/player/queue",
page: PlayerQueueRoute.page,
),
AutoRoute(
path: "/player/sources",
page: PlayerTrackSourcesRoute.page,
),
AutoRoute(
path: "/player/lyrics",
page: PlayerLyricsRoute.page,
),
AutoRoute(
path: "/mini-player",
page: MiniLyricsRoute.page,

523
lib/collections/routes.gr.dart
View File

File diff suppressed because it is too large Load Diff

6
lib/components/button/back_button.dart
View File

@ -3,18 +3,18 @@ import 'package:spotube/collections/spotube_icons.dart';
class BackButton extends StatelessWidget {
final Color? color;
final IconData icon;
const BackButton({
super.key,
this.color,
this.icon = SpotubeIcons.angleLeft,
});
@override
Widget build(BuildContext context) {
return IconButton.ghost(
size: const ButtonSize(.9),
icon: color != null
? Icon(SpotubeIcons.angleLeft, color: color)
: const Icon(SpotubeIcons.angleLeft),
icon: Icon(icon, color: color),
onPressed: () => Navigator.of(context).pop(),
);
}

55
lib/modules/player/player.dart
View File

@ -1,10 +1,8 @@
import 'package:auto_route/auto_route.dart';
import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart' show showModalBottomSheet;
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:shadcn_flutter/shadcn_flutter_extension.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';
import 'package:spotube/collections/assets.gen.dart';
@ -13,7 +11,6 @@ import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/components/framework/app_pop_scope.dart';
import 'package:spotube/modules/player/player_actions.dart';
import 'package:spotube/modules/player/player_controls.dart';
import 'package:spotube/modules/player/player_queue.dart';
import 'package:spotube/modules/player/volume_slider.dart';
import 'package:spotube/components/dialogs/track_details_dialog.dart';
import 'package:spotube/components/links/artist_link.dart';
@ -25,7 +22,6 @@ import 'package:spotube/extensions/context.dart';
import 'package:spotube/extensions/image.dart';
import 'package:spotube/models/local_track.dart';
import 'package:spotube/modules/root/spotube_navigation_bar.dart';
import 'package:spotube/pages/lyrics/lyrics.dart';
import 'package:spotube/provider/authentication/authentication.dart';
import 'package:spotube/provider/audio_player/audio_player.dart';
import 'package:spotube/provider/server/active_sourced_track.dart';
@ -235,39 +231,7 @@ class PlayerView extends HookConsumerWidget {
leading: const Icon(SpotubeIcons.queue),
child: Text(context.l10n.queue),
onPressed: () {
openDrawer(
context: context,
barrierDismissible: true,
draggable: true,
barrierColor: Colors.black.withAlpha(100),
borderRadius: BorderRadius.circular(10),
transformBackdrop: false,
position: OverlayPosition.bottom,
surfaceBlur: context.theme.surfaceBlur,
surfaceOpacity: 0.7,
expands: true,
builder: (context) => Consumer(
builder: (context, ref, _) {
final playlist = ref.watch(
audioPlayerProvider,
);
final playlistNotifier =
ref.read(audioPlayerProvider.notifier);
return ConstrainedBox(
constraints: BoxConstraints(
maxHeight:
MediaQuery.of(context).size.height *
0.8,
),
child: PlayerQueue.fromAudioPlayerNotifier(
floating: false,
playlist: playlist,
notifier: playlistNotifier,
),
);
},
),
);
context.pushRoute(const PlayerQueueRoute());
},
),
),
@ -278,22 +242,7 @@ class PlayerView extends HookConsumerWidget {
leading: const Icon(SpotubeIcons.music),
child: Text(context.l10n.lyrics),
onPressed: () {
showModalBottomSheet(
context: context,
isDismissible: true,
enableDrag: true,
isScrollControlled: true,
backgroundColor: Colors.black.withAlpha(100),
barrierColor: Colors.black.withAlpha(100),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
builder: (context) =>
const LyricsPage(isModal: true),
);
context.pushRoute(const PlayerLyricsRoute());
},
),
),

27
lib/modules/player/player_actions.dart
View File

@ -1,8 +1,10 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:shadcn_flutter/shadcn_flutter_extension.dart';
import 'package:spotube/collections/routes.gr.dart';
import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/extensions/constrains.dart';
@ -141,30 +143,7 @@ class PlayerActions extends HookConsumerWidget {
},
);
} else {
openDrawer(
context: context,
position: OverlayPosition.bottom,
barrierDismissible: true,
draggable: true,
barrierColor: Colors.black.withValues(alpha: .2),
borderRadius: BorderRadius.circular(10),
transformBackdrop: false,
surfaceBlur: context.theme.surfaceBlur,
surfaceOpacity: context.theme.surfaceOpacity,
builder: (context) {
return Card(
borderWidth: 0,
borderColor: Colors.transparent,
padding: EdgeInsets.zero,
child: ConstrainedBox(
constraints: BoxConstraints(
maxHeight: screenSize.height * .8,
),
child: SiblingTracksSheet(floating: floatingQueue),
),
);
},
);
context.pushRoute(const PlayerTrackSourcesRoute());
}
},
),

8
lib/modules/player/sibling_tracks_sheet.dart
View File

@ -6,6 +6,7 @@ import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:shadcn_flutter/shadcn_flutter_extension.dart';
import 'package:spotube/collections/assets.gen.dart';
import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/components/button/back_button.dart';
import 'package:spotube/components/image/universal_image.dart';
import 'package:spotube/components/inter_scrollbar/inter_scrollbar.dart';
import 'package:spotube/components/ui/button_tile.dart';
@ -244,14 +245,15 @@ class SiblingTracksSheet extends HookConsumerWidget {
),
),
const Spacer(),
if (!isSearching.value)
if (!isSearching.value) ...[
IconButton.outline(
icon: const Icon(SpotubeIcons.search, size: 18),
onPressed: () {
isSearching.value = true;
},
)
else ...[
),
if (!floating) const BackButton(icon: SpotubeIcons.close)
] else ...[
if (preferences.audioSource == AudioSource.piped)
IconButton.outline(
icon: const Icon(SpotubeIcons.filter, size: 18),

83
lib/pages/lyrics/lyrics.dart
View File

@ -3,7 +3,6 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:shadcn_flutter/shadcn_flutter_extension.dart';
import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/components/titlebar/titlebar.dart';
import 'package:spotube/components/image/universal_image.dart';
import 'package:spotube/extensions/context.dart';
@ -20,8 +19,7 @@ import 'package:auto_route/auto_route.dart';
class LyricsPage extends HookConsumerWidget {
static const name = "lyrics";
final bool isModal;
const LyricsPage({super.key, this.isModal = false});
const LyricsPage({super.key});
@override
Widget build(BuildContext context, ref) {
@ -38,27 +36,14 @@ class LyricsPage extends HookConsumerWidget {
Widget tabbar = Padding(
padding: const EdgeInsets.all(10),
child: isModal
? TabList(
index: selectedIndex.value,
onChanged: (index) => selectedIndex.value = index,
children: [
TabItem(
child: Text(context.l10n.synced),
),
TabItem(
child: Text(context.l10n.plain),
),
],
)
: Tabs(
index: selectedIndex.value,
onChanged: (index) => selectedIndex.value = index,
children: [
TabItem(child: Text(context.l10n.synced)),
TabItem(child: Text(context.l10n.plain)),
],
),
child: Tabs(
index: selectedIndex.value,
onChanged: (index) => selectedIndex.value = index,
children: [
TabItem(child: Text(context.l10n.synced)),
TabItem(child: Text(context.l10n.plain)),
],
),
);
tabbar = Row(
@ -85,52 +70,6 @@ class LyricsPage extends HookConsumerWidget {
],
);
if (isModal) {
return SafeArea(
bottom: false,
child: SurfaceCard(
surfaceBlur: context.theme.surfaceBlur,
surfaceOpacity: context.theme.surfaceOpacity,
padding: EdgeInsets.zero,
borderRadius: BorderRadius.zero,
borderWidth: 0,
child: Column(
children: [
const SizedBox(height: 20),
Container(
height: 7,
width: 150,
decoration: BoxDecoration(
color: palette.titleTextColor,
borderRadius: BorderRadius.circular(10),
),
),
Row(
children: [
Expanded(
child: tabbar,
),
IconButton.ghost(
icon: const Icon(SpotubeIcons.minimize),
onPressed: () => Navigator.of(context).pop(),
),
const SizedBox(width: 5),
],
),
Expanded(
child: IndexedStack(
index: selectedIndex.value,
children: [
SyncedLyrics(palette: palette, isModal: isModal),
PlainLyrics(palette: palette, isModal: isModal),
],
),
),
],
),
),
);
}
return SafeArea(
bottom: false,
child: Scaffold(
@ -166,8 +105,8 @@ class LyricsPage extends HookConsumerWidget {
child: IndexedStack(
index: selectedIndex.value,
children: [
SyncedLyrics(palette: palette, isModal: isModal),
PlainLyrics(palette: palette, isModal: isModal),
SyncedLyrics(palette: palette, isModal: false),
PlainLyrics(palette: palette, isModal: false),
],
),
),

64
lib/pages/player/lyrics.dart Normal file
View File

@ -0,0 +1,64 @@
import 'package:auto_route/annotations.dart';
import 'package:flutter_hooks/flutter_hooks.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/components/button/back_button.dart';
import 'package:spotube/extensions/context.dart';
import 'package:spotube/extensions/image.dart';
import 'package:spotube/hooks/utils/use_palette_color.dart';
import 'package:spotube/pages/lyrics/plain_lyrics.dart';
import 'package:spotube/pages/lyrics/synced_lyrics.dart';
import 'package:spotube/provider/audio_player/audio_player.dart';
@RoutePage()
class PlayerLyricsPage extends HookConsumerWidget {
const PlayerLyricsPage({super.key});
@override
Widget build(BuildContext context, ref) {
final playlist = ref.watch(audioPlayerProvider);
String albumArt = useMemoized(
() => (playlist.activeTrack?.album?.images).asUrlString(
index: (playlist.activeTrack?.album?.images?.length ?? 1) - 1,
placeholder: ImagePlaceholder.albumArt,
),
[playlist.activeTrack?.album?.images],
);
final selectedIndex = useState(0);
final palette = usePaletteColor(albumArt, ref);
final tabbar = Padding(
padding: const EdgeInsets.all(10),
child: TabList(
index: selectedIndex.value,
onChanged: (index) => selectedIndex.value = index,
children: [
TabItem(
child: Text(context.l10n.synced),
),
TabItem(
child: Text(context.l10n.plain),
),
],
));
return Scaffold(
headers: [
AppBar(
leading: [tabbar],
trailing: const [
BackButton(icon: SpotubeIcons.close),
],
),
],
child: IndexedStack(
index: selectedIndex.value,
children: [
SyncedLyrics(palette: palette, isModal: false),
PlainLyrics(palette: palette, isModal: false),
],
),
);
}
}

36
lib/pages/player/queue.dart Normal file
View File

@ -0,0 +1,36 @@
import 'package:auto_route/annotations.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/components/button/back_button.dart';
import 'package:spotube/extensions/context.dart';
import 'package:spotube/modules/player/player_queue.dart';
import 'package:spotube/provider/audio_player/audio_player.dart';
@RoutePage()
class PlayerQueuePage extends HookConsumerWidget {
const PlayerQueuePage({super.key});
@override
Widget build(BuildContext context, ref) {
final playlist = ref.watch(
audioPlayerProvider,
);
final playlistNotifier = ref.read(audioPlayerProvider.notifier);
return Scaffold(
headers: [
AppBar(
title: Text(context.l10n.queue),
trailing: const [
BackButton(icon: SpotubeIcons.close),
],
),
],
child: PlayerQueue.fromAudioPlayerNotifier(
floating: false,
playlist: playlist,
notifier: playlistNotifier,
),
);
}
}

15
lib/pages/player/sources.dart Normal file
View File

@ -0,0 +1,15 @@
import 'package:auto_route/auto_route.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:spotube/modules/player/sibling_tracks_sheet.dart';
@RoutePage()
class PlayerTrackSourcesPage extends StatelessWidget {
const PlayerTrackSourcesPage({super.key});
@override
Widget build(BuildContext context) {
return const Scaffold(
child: SiblingTracksSheet(floating: false),
);
}
}