refactor(tracktile): use popup menu instead of adaptive list tile

This commit is contained in:
Kingkor Roy Tirtho 2023-04-28 10:08:31 +06:00
parent c85ae85002
commit c1d67153ce

View File

@ -7,7 +7,6 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotify/spotify.dart' hide Image; import 'package:spotify/spotify.dart' hide Image;
import 'package:spotube/collections/assets.gen.dart'; import 'package:spotube/collections/assets.gen.dart';
import 'package:spotube/collections/spotube_icons.dart'; import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/components/shared/adaptive/adaptive_popup_menu_button.dart';
import 'package:spotube/components/shared/heart_button.dart'; import 'package:spotube/components/shared/heart_button.dart';
import 'package:spotube/components/shared/links/link_text.dart'; import 'package:spotube/components/shared/links/link_text.dart';
import 'package:spotube/components/shared/image/universal_image.dart'; import 'package:spotube/components/shared/image/universal_image.dart';
@ -62,6 +61,7 @@ class TrackTile extends HookConsumerWidget {
@override @override
Widget build(BuildContext context, ref) { Widget build(BuildContext context, ref) {
final theme = Theme.of(context);
final breakpoint = useBreakpoints(); final breakpoint = useBreakpoints();
final isBlackListed = ref.watch( final isBlackListed = ref.watch(
BlackListNotifier.provider.select( BlackListNotifier.provider.select(
@ -177,7 +177,6 @@ class TrackTile extends HookConsumerWidget {
); );
final toggler = useTrackToggleLike(track.value, ref); final toggler = useTrackToggleLike(track.value, ref);
final theme = Theme.of(context);
return AnimatedContainer( return AnimatedContainer(
duration: const Duration(milliseconds: 500), duration: const Duration(milliseconds: 500),
@ -301,14 +300,17 @@ class TrackTile extends HookConsumerWidget {
Text(duration), Text(duration),
], ],
const SizedBox(width: 10), const SizedBox(width: 10),
if (!isLocal) PopupMenuButton(
AdaptiveActions( icon: const Icon(SpotubeIcons.moreHorizontal),
actions: [ elevation: 4,
position: PopupMenuPosition.under,
tooltip: "More options",
itemBuilder: (context) {
return [
if (!playlistQueueNotifier.isTrackOnQueue(track.value)) if (!playlistQueueNotifier.isTrackOnQueue(track.value))
Action( PopupMenuItem(
icon: const Icon(SpotubeIcons.queueAdd), padding: EdgeInsets.zero,
text: const Text("Add to queue"), onTap: () {
onPressed: () {
playlistQueueNotifier.add([track.value]); playlistQueueNotifier.add([track.value]);
ScaffoldMessenger.of(context).showSnackBar( ScaffoldMessenger.of(context).showSnackBar(
SnackBar( SnackBar(
@ -316,12 +318,15 @@ class TrackTile extends HookConsumerWidget {
), ),
); );
}, },
child: const ListTile(
leading: Icon(SpotubeIcons.queueAdd),
title: Text("Add to queue"),
),
) )
else else
Action( PopupMenuItem(
icon: const Icon(SpotubeIcons.queueRemove), padding: EdgeInsets.zero,
text: const Text("Remove from queue"), onTap: () {
onPressed: () {
playlistQueueNotifier.remove([track.value]); playlistQueueNotifier.remove([track.value]);
ScaffoldMessenger.of(context).showSnackBar( ScaffoldMessenger.of(context).showSnackBar(
SnackBar( SnackBar(
@ -330,60 +335,67 @@ class TrackTile extends HookConsumerWidget {
), ),
); );
}, },
child: const ListTile(
leading: Icon(SpotubeIcons.queueRemove),
title: Text("Remove from queue"),
),
), ),
if (toggler.item3.hasData) if (toggler.item3.hasData)
Action( PopupMenuItem(
icon: toggler.item1 padding: EdgeInsets.zero,
onTap: () {
toggler.item2.mutate(toggler.item1);
},
child: ListTile(
leading: toggler.item1
? const Icon( ? const Icon(
SpotubeIcons.heartFilled, SpotubeIcons.heartFilled,
color: Colors.pink, color: Colors.pink,
) )
: const Icon(SpotubeIcons.heart), : const Icon(SpotubeIcons.heart),
text: const Text("Save as favorite"), title: const Text("Save as favorite"),
onPressed: () { ),
toggler.item2.mutate(toggler.item1);
},
), ),
if (auth != null) if (auth != null)
Action( PopupMenuItem(
icon: const Icon(SpotubeIcons.playlistAdd), padding: EdgeInsets.zero,
text: const Text("Add To playlist"), onTap: actionAddToPlaylist,
onPressed: actionAddToPlaylist, child: const ListTile(
leading: Icon(SpotubeIcons.playlistAdd),
title: Text("Add To playlist"),
),
), ),
if (userPlaylist && auth != null) if (userPlaylist && auth != null)
Action( PopupMenuItem(
icon: (removeTrack.isMutating || !removeTrack.hasData) && padding: EdgeInsets.zero,
onTap: () {
removingTrack.value = track.value.uri;
removeTrack.mutate(track.value.uri!);
},
child: ListTile(
leading:
(removeTrack.isMutating || !removeTrack.hasData) &&
removingTrack.value == track.value.uri removingTrack.value == track.value.uri
? const Center( ? const Center(
child: CircularProgressIndicator(), child: CircularProgressIndicator(),
) )
: const Icon(SpotubeIcons.removeFilled), : const Icon(SpotubeIcons.removeFilled),
text: const Text("Remove from playlist"), title: const Text("Remove from playlist"),
onPressed: () {
removingTrack.value = track.value.uri;
removeTrack.mutate(track.value.uri!);
},
), ),
Action( ),
icon: const Icon(SpotubeIcons.share), PopupMenuItem(
text: const Text("Share"), padding: EdgeInsets.zero,
onPressed: () { onTap: () {
actionShare(track.value); actionShare(track.value);
}, },
), child: const ListTile(
Action( leading: Icon(SpotubeIcons.share),
icon: Icon( title: Text("Share"),
SpotubeIcons.playlistRemove,
color: isBlackListed ? Colors.white : Colors.red[400],
),
backgroundColor: isBlackListed ? Colors.red[400] : null,
text: Text(
"${isBlackListed ? "Remove from" : "Add to"} blacklist",
style: TextStyle(
color: isBlackListed ? Colors.white : Colors.red[400],
), ),
), ),
onPressed: () { PopupMenuItem(
padding: EdgeInsets.zero,
onTap: () {
if (isBlackListed) { if (isBlackListed) {
ref.read(BlackListNotifier.provider.notifier).remove( ref.read(BlackListNotifier.provider.notifier).remove(
BlacklistedElement.track( BlacklistedElement.track(
@ -396,8 +408,23 @@ class TrackTile extends HookConsumerWidget {
); );
} }
}, },
child: ListTile(
leading: Icon(
SpotubeIcons.playlistRemove,
color: isBlackListed ? Colors.white : Colors.red[400],
),
iconColor: isBlackListed ? Colors.red[400] : null,
textColor: isBlackListed ? Colors.red[400] : null,
title: Text(
"${isBlackListed ? "Remove from" : "Add to"} blacklist",
style: TextStyle(
color: isBlackListed ? Colors.white : Colors.red[400],
),
),
),
) )
], ];
},
), ),
...?actions, ...?actions,
], ],