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

refactor: use DropdownMenu for adaptive pop sheet list, shadcn widgets for bottom player and player controls and actions

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2024-12-21 12:42:51 +06:00
parent fe2f0a373f
commit 04190f2dda
9 changed files with 438 additions and 480 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

278
lib/components/adaptive/adaptive_pop_sheet_list.dart
View File

@ -1,56 +1,34 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart' show ListTile, showModalBottomSheet;
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/collections/spotube_icons.dart';
import 'package:spotube/extensions/constrains.dart'; import 'package:spotube/extensions/constrains.dart';
_emptyCB() {} class AdaptiveMenuButton<T> extends MenuButton {
class PopSheetEntry<T> extends ListTile {
final T? value; final T? value;
const PopSheetEntry({ const AdaptiveMenuButton({
this.value,
super.key, super.key,
super.leading, this.value,
super.title, required super.child,
super.subtitle, super.subMenu,
super.onPressed,
super.trailing, super.trailing,
super.isThreeLine = false, super.leading,
super.dense,
super.visualDensity,
super.shape,
super.style,
super.selectedColor,
super.iconColor,
super.textColor,
super.titleTextStyle,
super.subtitleTextStyle,
super.leadingAndTrailingTextStyle,
super.contentPadding,
super.enabled = true, super.enabled = true,
super.onTap = _emptyCB,
super.onLongPress,
super.onFocusChange,
super.mouseCursor,
super.selected = false,
super.focusColor,
super.hoverColor,
super.splashColor,
super.focusNode, super.focusNode,
super.autofocus = false, super.autoClose = true,
super.tileColor, super.popoverController,
super.selectedTileColor, }) : assert(
super.enableFeedback, value != null || onPressed != null,
super.horizontalTitleGap, 'Either value or onPressed must be provided',
super.minVerticalPadding, );
super.minLeadingWidth,
super.titleAlignment,
});
} }
/// An adaptive widget that shows a [PopupMenuButton] when screen size is above /// An adaptive widget that shows a [PopupMenuButton] when screen size is above
/// or equal to 640px /// or equal to 640px
/// In smaller screen, a [IconButton] with a [showModalBottomSheet] is shown /// In smaller screen, a [IconButton] with a [showModalBottomSheet] is shown
class AdaptivePopSheetList<T> extends StatelessWidget { class AdaptivePopSheetList<T> extends StatelessWidget {
final List<PopSheetEntry<T>> children; final List<AdaptiveMenuButton<T>> children;
final Widget? icon; final Widget? icon;
final Widget? child; final Widget? child;
final bool useRootNavigator; final bool useRootNavigator;
@ -59,7 +37,6 @@ class AdaptivePopSheetList<T> extends StatelessWidget {
final String? tooltip; final String? tooltip;
final ValueChanged<T>? onSelected; final ValueChanged<T>? onSelected;
final BorderRadius borderRadius;
final Offset offset; final Offset offset;
const AdaptivePopSheetList({ const AdaptivePopSheetList({
@ -70,7 +47,6 @@ class AdaptivePopSheetList<T> extends StatelessWidget {
this.useRootNavigator = true, this.useRootNavigator = true,
this.headings, this.headings,
this.onSelected, this.onSelected,
this.borderRadius = const BorderRadius.all(Radius.circular(999)),
this.tooltip, this.tooltip,
this.offset = Offset.zero, this.offset = Offset.zero,
}) : assert( }) : assert(
@ -78,158 +54,128 @@ class AdaptivePopSheetList<T> extends StatelessWidget {
'Either icon or child must be provided', 'Either icon or child must be provided',
); );
Future<T?> showPopupMenu(BuildContext context, RelativeRect position) { Future<void> showDropdownMenu(BuildContext context, Offset position) async {
final mediaQuery = MediaQuery.of(context); final mediaQuery = MediaQuery.of(context);
final childrenModified = children.map((s) {
if (s.onPressed == null) {
return MenuButton(
key: s.key,
autoClose: s.autoClose,
enabled: s.enabled,
leading: s.leading,
focusNode: s.focusNode,
onPressed: (context) {
if (s.value != null) {
onSelected?.call(s.value as T);
}
},
popoverController: s.popoverController,
subMenu: s.subMenu,
trailing: s.trailing,
child: s.child,
);
}
return s;
}).toList();
return showMenu<T>( if (mediaQuery.mdAndUp) {
await showDropdown<T>(
context: context, context: context,
useRootNavigator: useRootNavigator, rootOverlay: useRootNavigator,
constraints: BoxConstraints( // heightConstraint: PopoverConstraint.anchorFixedSize,
maxHeight: mediaQuery.size.height * 0.6, // constraints: BoxConstraints(
), // maxHeight: mediaQuery.size.height * 0.6,
// ),
position: position, position: position,
items: children builder: (context) {
.map( return DropdownMenu(
(item) => PopupMenuItem<T>( children: childrenModified,
padding: EdgeInsets.zero, );
enabled: false, },
child: _AdaptivePopSheetListItem<T>( ).future;
item: item, return;
onSelected: onSelected, }
showModalBottomSheet(
context: context,
enableDrag: true,
showDragHandle: true,
useRootNavigator: true,
shape: RoundedRectangleBorder(
borderRadius: context.theme.borderRadiusMd,
), ),
), backgroundColor: context.theme.colorScheme.card,
) builder: (context) {
.toList(), return ListView.builder(
physics: const NeverScrollableScrollPhysics(),
itemCount: childrenModified.length,
shrinkWrap: true,
itemBuilder: (context, index) {
final data = childrenModified[index];
return ListTile(
dense: true,
leading: data.leading,
title: data.child,
enabled: data.enabled,
trailing: data.trailing,
focusNode: data.focusNode,
onTap: () {
data.onPressed?.call(context);
if (data.autoClose) {
Navigator.of(context).pop();
}
},
);
},
);
},
); );
} }
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context); final mediaQuery = MediaQuery.of(context);
final theme = Theme.of(context);
if (mediaQuery.mdAndUp) { if (mediaQuery.mdAndUp) {
return PopupMenuButton( return Tooltip(
icon: icon, tooltip: Text(tooltip ?? ''),
tooltip: tooltip, child: IconButton.ghost(
offset: offset, icon: icon ?? const Icon(SpotubeIcons.moreVertical),
child: child == null ? null : IgnorePointer(child: child), onPressed: () {
itemBuilder: (context) => children final renderBox = context.findRenderObject() as RenderBox;
.map( final position = RelativeRect.fromRect(
(item) => PopupMenuItem( Rect.fromPoints(
padding: EdgeInsets.zero, renderBox.localToGlobal(Offset.zero,
enabled: false, ancestor: context.findRenderObject()),
child: _AdaptivePopSheetListItem( renderBox.localToGlobal(renderBox.size.bottomRight(Offset.zero),
item: item, ancestor: context.findRenderObject()),
onSelected: onSelected,
),
),
)
.toList(),
);
}
void showSheet() {
showModalBottomSheet(
context: context,
useRootNavigator: useRootNavigator,
isScrollControlled: true,
showDragHandle: true,
constraints: BoxConstraints(
maxHeight: mediaQuery.size.height * 0.6,
),
builder: (context) {
return Padding(
padding: const EdgeInsets.all(8.0).copyWith(top: 0),
child: DefaultTextStyle(
style: theme.textTheme.titleMedium!,
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
if (headings != null) ...[
...headings!,
const SizedBox(height: 8),
Divider(
color: theme.colorScheme.primary,
thickness: 0.3,
endIndent: 16,
indent: 16,
),
],
...children.map(
(item) => _AdaptivePopSheetListItem(
item: item,
onSelected: onSelected,
),
)
],
),
),
), ),
Offset.zero & mediaQuery.size,
); );
final offset = Offset(position.left, position.top);
showDropdownMenu(context, offset);
}, },
),
); );
} }
if (child != null) { if (child != null) {
return Tooltip( return Tooltip(
message: tooltip ?? '', tooltip: Text(tooltip ?? ''),
child: InkWell( child: Button(
onTap: showSheet, onPressed: () => showDropdownMenu(context, Offset.zero),
borderRadius: borderRadius, style: const ButtonStyle.ghost(),
child: IgnorePointer(child: child), child: IgnorePointer(child: child),
), ),
); );
} }
return IconButton( return Tooltip(
tooltip: Text(tooltip ?? ''),
child: IconButton.ghost(
icon: icon ?? const Icon(SpotubeIcons.moreVertical), icon: icon ?? const Icon(SpotubeIcons.moreVertical),
tooltip: tooltip, onPressed: () => showDropdownMenu(context, Offset.zero),
style: theme.iconButtonTheme.style?.copyWith(
shape: WidgetStatePropertyAll(
RoundedRectangleBorder(
borderRadius: borderRadius,
),
),
),
onPressed: showSheet,
);
}
}
class _AdaptivePopSheetListItem<T> extends StatelessWidget {
final PopSheetEntry<T> item;
final ValueChanged<T>? onSelected;
const _AdaptivePopSheetListItem({
super.key,
required this.item,
this.onSelected,
});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return InkWell(
borderRadius: (theme.listTileTheme.shape as RoundedRectangleBorder?)
?.borderRadius as BorderRadius? ??
const BorderRadius.all(Radius.circular(10)),
onTap: !item.enabled
? null
: () {
item.onTap?.call();
if (item.value != null) {
Navigator.pop(context);
onSelected?.call(item.value as T);
}
},
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: IconTheme.merge(
data: const IconThemeData(opacity: 1),
child: IgnorePointer(child: item),
),
), ),
); );
} }

32
lib/components/sort_tracks_dropdown.dart
View File

@ -23,45 +23,45 @@ class SortTracksDropdown extends StatelessWidget {
), ),
child: AdaptivePopSheetList<SortBy>( child: AdaptivePopSheetList<SortBy>(
children: [ children: [
PopSheetEntry( AdaptiveMenuButton(
value: SortBy.none, value: SortBy.none,
enabled: value != SortBy.none, enabled: value != SortBy.none,
title: Text(context.l10n.none), child: Text(context.l10n.none),
), ),
PopSheetEntry( AdaptiveMenuButton(
value: SortBy.ascending, value: SortBy.ascending,
enabled: value != SortBy.ascending, enabled: value != SortBy.ascending,
title: Text(context.l10n.sort_a_z), child: Text(context.l10n.sort_a_z),
), ),
PopSheetEntry( AdaptiveMenuButton(
value: SortBy.descending, value: SortBy.descending,
enabled: value != SortBy.descending, enabled: value != SortBy.descending,
title: Text(context.l10n.sort_z_a), child: Text(context.l10n.sort_z_a),
), ),
PopSheetEntry( AdaptiveMenuButton(
value: SortBy.newest, value: SortBy.newest,
enabled: value != SortBy.newest, enabled: value != SortBy.newest,
title: Text(context.l10n.sort_newest), child: Text(context.l10n.sort_newest),
), ),
PopSheetEntry( AdaptiveMenuButton(
value: SortBy.oldest, value: SortBy.oldest,
enabled: value != SortBy.oldest, enabled: value != SortBy.oldest,
title: Text(context.l10n.sort_oldest), child: Text(context.l10n.sort_oldest),
), ),
PopSheetEntry( AdaptiveMenuButton(
value: SortBy.duration, value: SortBy.duration,
enabled: value != SortBy.duration, enabled: value != SortBy.duration,
title: Text(context.l10n.sort_duration), child: Text(context.l10n.sort_duration),
), ),
PopSheetEntry( AdaptiveMenuButton(
value: SortBy.artist, value: SortBy.artist,
enabled: value != SortBy.artist, enabled: value != SortBy.artist,
title: Text(context.l10n.sort_artist), child: Text(context.l10n.sort_artist),
), ),
PopSheetEntry( AdaptiveMenuButton(
value: SortBy.album, value: SortBy.album,
enabled: value != SortBy.album, enabled: value != SortBy.album,
title: Text(context.l10n.sort_album), child: Text(context.l10n.sort_album),
), ),
], ],
headings: [ headings: [

85
lib/components/track_tile/track_options.dart
View File

@ -5,7 +5,8 @@ import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.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:spotify/spotify.dart'; import 'package:shadcn_flutter/shadcn_flutter_extension.dart';
import 'package:spotify/spotify.dart' hide Offset;
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/adaptive/adaptive_pop_sheet_list.dart'; import 'package:spotube/components/adaptive/adaptive_pop_sheet_list.dart';
@ -332,38 +333,46 @@ class TrackOptions extends HookConsumerWidget {
], ],
children: [ children: [
if (isLocalTrack) if (isLocalTrack)
PopSheetEntry( AdaptiveMenuButton(
value: TrackOptionValue.delete, value: TrackOptionValue.delete,
leading: const Icon(SpotubeIcons.trash), leading: const Icon(SpotubeIcons.trash),
title: Text(context.l10n.delete), child: Text(context.l10n.delete),
), ),
if (mediaQuery.smAndDown && !isLocalTrack) if (mediaQuery.smAndDown && !isLocalTrack)
PopSheetEntry( AdaptiveMenuButton(
value: TrackOptionValue.album, value: TrackOptionValue.album,
leading: const Icon(SpotubeIcons.album), leading: const Icon(SpotubeIcons.album),
title: Text(context.l10n.go_to_album), child: Column(
subtitle: Text(track.album!.name!), mainAxisSize: MainAxisSize.min,
children: [
Text(context.l10n.go_to_album),
Text(
track.album!.name!,
style: context.theme.typography.xSmall,
),
],
),
), ),
if (!playlist.containsTrack(track)) ...[ if (!playlist.containsTrack(track)) ...[
PopSheetEntry( AdaptiveMenuButton(
value: TrackOptionValue.addToQueue, value: TrackOptionValue.addToQueue,
leading: const Icon(SpotubeIcons.queueAdd), leading: const Icon(SpotubeIcons.queueAdd),
title: Text(context.l10n.add_to_queue), child: Text(context.l10n.add_to_queue),
), ),
PopSheetEntry( AdaptiveMenuButton(
value: TrackOptionValue.playNext, value: TrackOptionValue.playNext,
leading: const Icon(SpotubeIcons.lightning), leading: const Icon(SpotubeIcons.lightning),
title: Text(context.l10n.play_next), child: Text(context.l10n.play_next),
), ),
] else ] else
PopSheetEntry( AdaptiveMenuButton(
value: TrackOptionValue.removeFromQueue, value: TrackOptionValue.removeFromQueue,
enabled: playlist.activeTrack?.id != track.id, enabled: playlist.activeTrack?.id != track.id,
leading: const Icon(SpotubeIcons.queueRemove), leading: const Icon(SpotubeIcons.queueRemove),
title: Text(context.l10n.remove_from_queue), child: Text(context.l10n.remove_from_queue),
), ),
if (me.asData?.value != null && !isLocalTrack) if (me.asData?.value != null && !isLocalTrack)
PopSheetEntry( AdaptiveMenuButton(
value: TrackOptionValue.favorite, value: TrackOptionValue.favorite,
leading: favorites.isLiked leading: favorites.isLiked
? const Icon( ? const Icon(
@ -371,32 +380,32 @@ class TrackOptions extends HookConsumerWidget {
color: Colors.pink, color: Colors.pink,
) )
: const Icon(SpotubeIcons.heart), : const Icon(SpotubeIcons.heart),
title: Text( child: Text(
favorites.isLiked favorites.isLiked
? context.l10n.remove_from_favorites ? context.l10n.remove_from_favorites
: context.l10n.save_as_favorite, : context.l10n.save_as_favorite,
), ),
), ),
if (auth.asData?.value != null && !isLocalTrack) ...[ if (auth.asData?.value != null && !isLocalTrack) ...[
PopSheetEntry( AdaptiveMenuButton(
value: TrackOptionValue.startRadio, value: TrackOptionValue.startRadio,
leading: const Icon(SpotubeIcons.radio), leading: const Icon(SpotubeIcons.radio),
title: Text(context.l10n.start_a_radio), child: Text(context.l10n.start_a_radio),
), ),
PopSheetEntry( AdaptiveMenuButton(
value: TrackOptionValue.addToPlaylist, value: TrackOptionValue.addToPlaylist,
leading: const Icon(SpotubeIcons.playlistAdd), leading: const Icon(SpotubeIcons.playlistAdd),
title: Text(context.l10n.add_to_playlist), child: Text(context.l10n.add_to_playlist),
), ),
], ],
if (userPlaylist && auth.asData?.value != null && !isLocalTrack) if (userPlaylist && auth.asData?.value != null && !isLocalTrack)
PopSheetEntry( AdaptiveMenuButton(
value: TrackOptionValue.removeFromPlaylist, value: TrackOptionValue.removeFromPlaylist,
leading: const Icon(SpotubeIcons.removeFilled), leading: const Icon(SpotubeIcons.removeFilled),
title: Text(context.l10n.remove_from_playlist), child: Text(context.l10n.remove_from_playlist),
), ),
if (!isLocalTrack) if (!isLocalTrack)
PopSheetEntry( AdaptiveMenuButton(
value: TrackOptionValue.download, value: TrackOptionValue.download,
enabled: !isInQueue, enabled: !isInQueue,
leading: isInQueue leading: isInQueue
@ -407,48 +416,56 @@ class TrackOptions extends HookConsumerWidget {
); );
}) })
: const Icon(SpotubeIcons.download), : const Icon(SpotubeIcons.download),
title: Text(context.l10n.download_track), child: Text(context.l10n.download_track),
), ),
if (!isLocalTrack) if (!isLocalTrack)
PopSheetEntry( AdaptiveMenuButton(
value: TrackOptionValue.blacklist, value: TrackOptionValue.blacklist,
leading: const Icon(SpotubeIcons.playlistRemove), leading: Icon(
iconColor: isBlackListed != true ? Colors.red[400] : null, SpotubeIcons.playlistRemove,
textColor: isBlackListed != true ? Colors.red[400] : null, color: isBlackListed != true ? Colors.red[400] : null,
title: Text( ),
child: Text(
isBlackListed == true isBlackListed == true
? context.l10n.remove_from_blacklist ? context.l10n.remove_from_blacklist
: context.l10n.add_to_blacklist, : context.l10n.add_to_blacklist,
style: TextStyle(
color: isBlackListed != true ? Colors.red[400] : null,
),
), ),
), ),
if (!isLocalTrack) if (!isLocalTrack)
PopSheetEntry( AdaptiveMenuButton(
value: TrackOptionValue.share, value: TrackOptionValue.share,
leading: const Icon(SpotubeIcons.share), leading: const Icon(SpotubeIcons.share),
title: Text(context.l10n.share), child: Text(context.l10n.share),
), ),
if (!isLocalTrack) if (!isLocalTrack)
PopSheetEntry( AdaptiveMenuButton(
value: TrackOptionValue.songlink, value: TrackOptionValue.songlink,
leading: Assets.logos.songlinkTransparent.image( leading: Assets.logos.songlinkTransparent.image(
width: 22, width: 22,
height: 22, height: 22,
color: colorScheme.onSurface.withOpacity(0.5), color: colorScheme.onSurface.withOpacity(0.5),
), ),
title: Text(context.l10n.song_link), child: Text(context.l10n.song_link),
), ),
if (!isLocalTrack) if (!isLocalTrack)
PopSheetEntry( AdaptiveMenuButton(
value: TrackOptionValue.details, value: TrackOptionValue.details,
leading: const Icon(SpotubeIcons.info), leading: const Icon(SpotubeIcons.info),
title: Text(context.l10n.details), child: Text(context.l10n.details),
), ),
], ],
); );
//! This is the most ANTI pattern I've ever done, but it works //! This is the most ANTI pattern I've ever done, but it works
showMenuCbRef?.value = (relativeRect) { showMenuCbRef?.value = (relativeRect) {
adaptivePopSheetList.showPopupMenu(context, relativeRect); final offsetFromRect = Offset(
relativeRect.left,
relativeRect.top,
);
adaptivePopSheetList.showDropdownMenu(context, offsetFromRect);
}; };
return ListTileTheme( return ListTileTheme(

16
lib/components/tracks_view/sections/body/track_view_options.dart
View File

@ -102,35 +102,35 @@ class TrackViewBodyOptions extends HookConsumerWidget {
}, },
icon: const Icon(SpotubeIcons.moreVertical), icon: const Icon(SpotubeIcons.moreVertical),
children: [ children: [
PopSheetEntry( AdaptiveMenuButton(
value: "download", value: "download",
leading: const Icon(SpotubeIcons.download), leading: const Icon(SpotubeIcons.download),
enabled: selectedTracks.isNotEmpty, enabled: selectedTracks.isNotEmpty,
title: Text( child: Text(
context.l10n.download_count(selectedTracks.length), context.l10n.download_count(selectedTracks.length),
), ),
), ),
PopSheetEntry( AdaptiveMenuButton(
value: "add-to-playlist", value: "add-to-playlist",
leading: const Icon(SpotubeIcons.playlistAdd), leading: const Icon(SpotubeIcons.playlistAdd),
enabled: selectedTracks.isNotEmpty, enabled: selectedTracks.isNotEmpty,
title: Text( child: Text(
context.l10n.add_count_to_playlist(selectedTracks.length), context.l10n.add_count_to_playlist(selectedTracks.length),
), ),
), ),
PopSheetEntry( AdaptiveMenuButton(
enabled: selectedTracks.isNotEmpty, enabled: selectedTracks.isNotEmpty,
value: "add-to-queue", value: "add-to-queue",
leading: const Icon(SpotubeIcons.queueAdd), leading: const Icon(SpotubeIcons.queueAdd),
title: Text( child: Text(
context.l10n.add_count_to_queue(selectedTracks.length), context.l10n.add_count_to_queue(selectedTracks.length),
), ),
), ),
PopSheetEntry( AdaptiveMenuButton(
enabled: selectedTracks.isNotEmpty, enabled: selectedTracks.isNotEmpty,
value: "play-next", value: "play-next",
leading: const Icon(SpotubeIcons.lightning), leading: const Icon(SpotubeIcons.lightning),
title: Text( child: Text(
context.l10n.play_count_next(selectedTracks.length), context.l10n.play_count_next(selectedTracks.length),
), ),
), ),

6
lib/main.dart
View File

@ -219,12 +219,16 @@ class Spotube extends HookConsumerWidget {
theme: ThemeData( theme: ThemeData(
radius: .5, radius: .5,
iconTheme: const IconThemeProperties(), iconTheme: const IconThemeProperties(),
colorScheme: ColorSchemes.lightNeutral(), colorScheme: ColorSchemes.lightBlue(),
surfaceOpacity: .9,
surfaceBlur: 10,
), ),
darkTheme: ThemeData( darkTheme: ThemeData(
radius: .5, radius: .5,
iconTheme: const IconThemeProperties(), iconTheme: const IconThemeProperties(),
colorScheme: ColorSchemes.darkNeutral(), colorScheme: ColorSchemes.darkNeutral(),
surfaceOpacity: .9,
surfaceBlur: 10,
), ),
themeMode: themeMode, themeMode: themeMode,
shortcuts: { shortcuts: {

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

@ -1,7 +1,7 @@
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; 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:spotube/collections/spotube_icons.dart'; import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/modules/player/sibling_tracks_sheet.dart'; import 'package:spotube/modules/player/sibling_tracks_sheet.dart';
@ -76,32 +76,30 @@ class PlayerActions extends HookConsumerWidget {
mainAxisAlignment: mainAxisAlignment, mainAxisAlignment: mainAxisAlignment,
children: [ children: [
if (showQueue) if (showQueue)
IconButton( Tooltip(
tooltip: Text(context.l10n.queue),
child: IconButton.ghost(
icon: const Icon(SpotubeIcons.queue), icon: const Icon(SpotubeIcons.queue),
tooltip: context.l10n.queue, enabled: playlist.activeTrack != null,
onPressed: playlist.activeTrack != null onPressed: () {
? () { // Scaffold.of(context).openEndDrawer();
Scaffold.of(context).openEndDrawer(); },
} ),
: null,
), ),
if (!isLocalTrack) if (!isLocalTrack)
IconButton( Tooltip(
tooltip: Text(context.l10n.alternative_track_sources),
child: IconButton.ghost(
icon: const Icon(SpotubeIcons.alternativeRoute), icon: const Icon(SpotubeIcons.alternativeRoute),
tooltip: context.l10n.alternative_track_sources,
onPressed: playlist.activeTrack != null onPressed: playlist.activeTrack != null
? () { ? () {
showModalBottomSheet( openDrawer(
context: context, context: context,
isDismissible: true, position: OverlayPosition.bottom,
enableDrag: true, barrierDismissible: true,
isScrollControlled: true, draggable: true,
backgroundColor: Colors.black12, barrierColor: Colors.black.withValues(alpha: .2),
barrierColor: Colors.black12,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
),
builder: (context) { builder: (context) {
return SiblingTracksSheet(floating: floatingQueue); return SiblingTracksSheet(floating: floatingQueue);
}, },
@ -109,18 +107,20 @@ class PlayerActions extends HookConsumerWidget {
} }
: null, : null,
), ),
),
if (!kIsWeb && !isLocalTrack) if (!kIsWeb && !isLocalTrack)
if (isInQueue) if (isInQueue)
const SizedBox( const SizedBox(
height: 20, height: 20,
width: 20, width: 20,
child: CircularProgressIndicator( child: CircularProgressIndicator(
strokeWidth: 2, size: 2,
), ),
) )
else else
IconButton( Tooltip(
tooltip: context.l10n.download_track, tooltip: Text(context.l10n.download_track),
child: IconButton.ghost(
icon: Icon( icon: Icon(
isDownloaded ? SpotubeIcons.done : SpotubeIcons.download, isDownloaded ? SpotubeIcons.done : SpotubeIcons.download,
), ),
@ -128,11 +128,12 @@ class PlayerActions extends HookConsumerWidget {
? () => downloader.addToQueue(playlist.activeTrack!) ? () => downloader.addToQueue(playlist.activeTrack!)
: null, : null,
), ),
),
if (playlist.activeTrack != null && if (playlist.activeTrack != null &&
!isLocalTrack && !isLocalTrack &&
auth.asData?.value != null) auth.asData?.value != null)
TrackHeartButton(track: playlist.activeTrack!), TrackHeartButton(track: playlist.activeTrack!),
AdaptivePopSheetList( AdaptivePopSheetList<Duration>(
offset: Offset(0, -50 * (sleepTimerEntries.values.length + 2)), offset: Offset(0, -50 * (sleepTimerEntries.values.length + 2)),
headings: [ headings: [
Text(context.l10n.sleep_timer), Text(context.l10n.sleep_timer),
@ -150,24 +151,40 @@ class PlayerActions extends HookConsumerWidget {
}, },
children: [ children: [
for (final entry in sleepTimerEntries.entries) for (final entry in sleepTimerEntries.entries)
PopSheetEntry( AdaptiveMenuButton(
value: entry.value, value: entry.value,
enabled: sleepTimer != entry.value, enabled: sleepTimer != entry.value,
title: Text(entry.key), child: Text(entry.key),
), ),
PopSheetEntry( AdaptiveMenuButton(
title: Text(
customHoursEnabled
? context.l10n.custom_hours
: sleepTimer.format(abbreviated: true),
),
// only enabled when there's no preset timers selected
enabled: customHoursEnabled, enabled: customHoursEnabled,
onTap: () async { onPressed: (context) async {
final currentTime = TimeOfDay.now(); final currentTime = TimeOfDay.now();
final time = await showTimePicker( final time = await showDialog<TimeOfDay>(
context: context, context: context,
initialTime: currentTime, builder: (context) => HookBuilder(builder: (context) {
final timeRef = useRef<TimeOfDay?>(null);
return AlertDialog(
title: Text(
ShadcnLocalizations.of(context).placeholderTimePicker,
),
content: TimePickerDialog(
use24HourFormat: false,
initialValue: TimeOfDay.fromDateTime(
DateTime.now().add(sleepTimer ?? Duration.zero),
),
onChanged: (value) => timeRef.value = value,
),
actions: [
Button.primary(
onPressed: () {
Navigator.of(context).pop(timeRef.value);
},
child: Text(context.l10n.save),
),
],
);
}),
); );
if (time != null) { if (time != null) {
@ -179,12 +196,19 @@ class PlayerActions extends HookConsumerWidget {
); );
} }
}, },
child: Text(
customHoursEnabled
? context.l10n.custom_hours
: sleepTimer.format(abbreviated: true),
), ),
PopSheetEntry( ),
AdaptiveMenuButton(
value: Duration.zero, value: Duration.zero,
enabled: sleepTimer != Duration.zero && sleepTimer != null, enabled: sleepTimer != Duration.zero && sleepTimer != null,
textColor: Colors.green, child: Text(
title: Text(context.l10n.cancel), context.l10n.cancel,
style: const TextStyle(color: Colors.green),
),
), ),
], ],
), ),

136
lib/modules/player/player_controls.dart
View File

@ -1,9 +1,9 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:media_kit/media_kit.dart'; import 'package:media_kit/media_kit.dart';
import 'package:palette_generator/palette_generator.dart'; import 'package:palette_generator/palette_generator.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart' hide ThemeData;
import 'package:spotube/collections/spotube_icons.dart'; import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/collections/intents.dart'; import 'package:spotube/collections/intents.dart';
@ -47,44 +47,6 @@ class PlayerControls extends HookConsumerWidget {
useStream(audioPlayer.playingStream).data ?? audioPlayer.isPlaying; useStream(audioPlayer.playingStream).data ?? audioPlayer.isPlaying;
final theme = Theme.of(context); final theme = Theme.of(context);
final isDominantColorDark = ThemeData.estimateBrightnessForColor(
palette?.dominantColor?.color ?? theme.colorScheme.primary,
) ==
Brightness.dark;
final dominantColor = isDominantColorDark
? palette?.mutedColor ?? palette?.dominantColor
: palette?.dominantColor;
final sliderColor =
palette?.dominantColor?.titleTextColor ?? theme.colorScheme.primary;
final buttonStyle = IconButton.styleFrom(
backgroundColor: dominantColor?.color.withOpacity(0.2) ??
theme.colorScheme.surface.withOpacity(0.4),
minimumSize: const Size(28, 28),
);
final activeButtonStyle = IconButton.styleFrom(
backgroundColor:
dominantColor?.titleTextColor ?? theme.colorScheme.primaryContainer,
foregroundColor:
dominantColor?.color ?? theme.colorScheme.onPrimaryContainer,
minimumSize: const Size(28, 28),
);
final accentColor = palette?.lightVibrantColor ??
palette?.darkVibrantColor ??
dominantColor;
final resumePauseStyle = IconButton.styleFrom(
backgroundColor: accentColor?.color ?? theme.colorScheme.primary,
foregroundColor:
accentColor?.titleTextColor ?? theme.colorScheme.onPrimary,
padding: EdgeInsets.all(compact ? 10 : 12),
iconSize: compact ? 18 : 24,
);
return GestureDetector( return GestureDetector(
behavior: HitTestBehavior.translucent, behavior: HitTestBehavior.translucent,
onTap: () { onTap: () {
@ -122,45 +84,41 @@ class PlayerControls extends HookConsumerWidget {
return Column( return Column(
children: [ children: [
Tooltip( Tooltip(
message: context.l10n.slide_to_seek, tooltip: Text(context.l10n.slide_to_seek),
child: Slider( child: Slider(
// cannot divide by zero value:
// there's an edge case for value being bigger SliderValue.single(progress.value.toDouble()),
// than total duration. Keeping it resolved
value: progress.value.toDouble(),
secondaryTrackValue: bufferProgress,
onChanged: isFetchingActiveTrack onChanged: isFetchingActiveTrack
? null ? null
: (v) { : (v) {
progress.value = v; progress.value = v.value;
}, },
onChangeEnd: (value) async { onChangeEnd: (value) async {
await audioPlayer.seek( await audioPlayer.seek(
Duration( Duration(
seconds: (value * duration.inSeconds).toInt(), seconds: (value.value * duration.inSeconds)
.toInt(),
), ),
); );
}, },
activeColor: sliderColor,
secondaryActiveColor: sliderColor.withOpacity(0.2),
inactiveColor: sliderColor.withOpacity(0.15),
), ),
), ),
Padding( Padding(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 8.0, horizontal: 8.0,
), ),
child: DefaultTextStyle(
style: theme.textTheme.bodySmall!.copyWith(
color: palette?.dominantColor?.bodyTextColor,
),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Text(position.toHumanReadableString()), Text(
Text(duration.toHumanReadableString()), position.toHumanReadableString(),
], style: theme.typography.xSmall,
), ),
Text(
duration.toHumanReadableString(),
style: theme.typography.xSmall,
),
],
), ),
), ),
], ],
@ -173,12 +131,17 @@ class PlayerControls extends HookConsumerWidget {
Consumer(builder: (context, ref, _) { Consumer(builder: (context, ref, _) {
final shuffled = ref final shuffled = ref
.watch(audioPlayerProvider.select((s) => s.shuffled)); .watch(audioPlayerProvider.select((s) => s.shuffled));
return IconButton( return Tooltip(
tooltip: shuffled tooltip: Text(
shuffled
? context.l10n.unshuffle_playlist ? context.l10n.unshuffle_playlist
: context.l10n.shuffle_playlist, : context.l10n.shuffle_playlist,
),
child: IconButton(
icon: const Icon(SpotubeIcons.shuffle), icon: const Icon(SpotubeIcons.shuffle),
style: shuffled ? activeButtonStyle : buttonStyle, variance: shuffled
? ButtonVariance.secondary
: ButtonVariance.ghost,
onPressed: isFetchingActiveTrack onPressed: isFetchingActiveTrack
? null ? null
: () { : () {
@ -188,33 +151,34 @@ class PlayerControls extends HookConsumerWidget {
audioPlayer.setShuffle(true); audioPlayer.setShuffle(true);
} }
}, },
),
); );
}), }),
IconButton( Tooltip(
tooltip: context.l10n.previous_track, tooltip: Text(context.l10n.previous_track),
child: IconButton.ghost(
enabled: !isFetchingActiveTrack,
icon: const Icon(SpotubeIcons.skipBack), icon: const Icon(SpotubeIcons.skipBack),
style: buttonStyle, onPressed: audioPlayer.skipToPrevious,
onPressed: isFetchingActiveTrack
? null
: audioPlayer.skipToPrevious,
), ),
IconButton( ),
tooltip: playing Tooltip(
tooltip: Text(
playing
? context.l10n.pause_playback ? context.l10n.pause_playback
: context.l10n.resume_playback, : context.l10n.resume_playback,
),
child: IconButton.primary(
shape: ButtonShape.circle,
icon: isFetchingActiveTrack icon: isFetchingActiveTrack
? SizedBox( ? const SizedBox(
height: 20, height: 20,
width: 20, width: 20,
child: CircularProgressIndicator( child: CircularProgressIndicator(),
color: accentColor?.titleTextColor ??
theme.colorScheme.onPrimary,
),
) )
: Icon( : Icon(
playing ? SpotubeIcons.pause : SpotubeIcons.play, playing ? SpotubeIcons.pause : SpotubeIcons.play,
), ),
style: resumePauseStyle,
onPressed: isFetchingActiveTrack onPressed: isFetchingActiveTrack
? null ? null
: Actions.handler<PlayPauseIntent>( : Actions.handler<PlayPauseIntent>(
@ -222,32 +186,37 @@ class PlayerControls extends HookConsumerWidget {
PlayPauseIntent(ref), PlayPauseIntent(ref),
), ),
), ),
IconButton( ),
tooltip: context.l10n.next_track, Tooltip(
tooltip: Text(context.l10n.next_track),
child: IconButton.ghost(
icon: const Icon(SpotubeIcons.skipForward), icon: const Icon(SpotubeIcons.skipForward),
style: buttonStyle,
onPressed: onPressed:
isFetchingActiveTrack ? null : audioPlayer.skipToNext, isFetchingActiveTrack ? null : audioPlayer.skipToNext,
), ),
),
Consumer(builder: (context, ref, _) { Consumer(builder: (context, ref, _) {
final loopMode = ref final loopMode = ref
.watch(audioPlayerProvider.select((s) => s.loopMode)); .watch(audioPlayerProvider.select((s) => s.loopMode));
return IconButton( return Tooltip(
tooltip: loopMode == PlaylistMode.single tooltip: Text(
loopMode == PlaylistMode.single
? context.l10n.loop_track ? context.l10n.loop_track
: loopMode == PlaylistMode.loop : loopMode == PlaylistMode.loop
? context.l10n.repeat_playlist ? context.l10n.repeat_playlist
: null, : "",
),
child: IconButton(
icon: Icon( icon: Icon(
loopMode == PlaylistMode.single loopMode == PlaylistMode.single
? SpotubeIcons.repeatOne ? SpotubeIcons.repeatOne
: SpotubeIcons.repeat, : SpotubeIcons.repeat,
), ),
style: loopMode == PlaylistMode.single || variance: loopMode == PlaylistMode.single ||
loopMode == PlaylistMode.loop loopMode == PlaylistMode.loop
? activeButtonStyle ? ButtonVariance.secondary
: buttonStyle, : ButtonVariance.ghost,
onPressed: isFetchingActiveTrack onPressed: isFetchingActiveTrack
? null ? null
: () async { : () async {
@ -259,6 +228,7 @@ class PlayerControls extends HookConsumerWidget {
}, },
); );
}, },
),
); );
}), }),
], ],

14
lib/modules/player/volume_slider.dart
View File

@ -1,6 +1,7 @@
import 'package:flutter/gestures.dart'; import 'package:flutter/gestures.dart';
import 'package:flutter/material.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';
class VolumeSlider extends HookConsumerWidget { class VolumeSlider extends HookConsumerWidget {
@ -30,17 +31,11 @@ class VolumeSlider extends HookConsumerWidget {
} }
} }
}, },
child: SliderTheme(
data: const SliderThemeData(
showValueIndicator: ShowValueIndicator.always,
),
child: Slider( child: Slider(
min: 0, min: 0,
max: 1, max: 1,
label: (value * 100).toStringAsFixed(0), value: SliderValue.single(value),
value: value, onChanged: (v) => onChanged(v.value),
onChanged: onChanged,
),
), ),
); );
return Row( return Row(
@ -48,6 +43,7 @@ class VolumeSlider extends HookConsumerWidget {
!fullWidth ? MainAxisAlignment.center : MainAxisAlignment.start, !fullWidth ? MainAxisAlignment.center : MainAxisAlignment.start,
children: [ children: [
IconButton( IconButton(
variance: ButtonVariance.ghost,
icon: Icon( icon: Icon(
value == 0 value == 0
? SpotubeIcons.volumeMute ? SpotubeIcons.volumeMute

21
lib/modules/root/bottom_player.dart
View File

@ -3,6 +3,7 @@ import 'dart:ui';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.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/assets.gen.dart'; import 'package:spotube/collections/assets.gen.dart';
import 'package:spotube/collections/spotube_icons.dart'; import 'package:spotube/collections/spotube_icons.dart';
@ -16,7 +17,6 @@ import 'package:spotube/extensions/constrains.dart';
import 'package:spotube/extensions/context.dart'; import 'package:spotube/extensions/context.dart';
import 'package:spotube/extensions/image.dart'; import 'package:spotube/extensions/image.dart';
import 'package:spotube/hooks/utils/use_brightness_value.dart'; import 'package:spotube/hooks/utils/use_brightness_value.dart';
import 'package:flutter/material.dart';
import 'package:spotube/provider/audio_player/audio_player.dart'; import 'package:spotube/provider/audio_player/audio_player.dart';
import 'package:spotube/provider/user_preferences/user_preferences_provider.dart'; import 'package:spotube/provider/user_preferences/user_preferences_provider.dart';
@ -46,7 +46,7 @@ class BottomPlayer extends HookConsumerWidget {
); );
final theme = Theme.of(context); final theme = Theme.of(context);
final bg = theme.colorScheme.surfaceContainerHighest; final bg = theme.colorScheme.background;
final bgColor = useBrightnessValue( final bgColor = useBrightnessValue(
Color.lerp(bg, Colors.white, 0.7), Color.lerp(bg, Colors.white, 0.7),
@ -64,10 +64,7 @@ class BottomPlayer extends HookConsumerWidget {
child: BackdropFilter( child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15), filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
child: DecoratedBox( child: DecoratedBox(
decoration: BoxDecoration(color: bgColor?.withOpacity(0.8)), decoration: BoxDecoration(color: bgColor?.withValues(alpha: .8)),
child: Material(
type: MaterialType.transparency,
textStyle: theme.textTheme.bodyMedium!,
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
@ -87,8 +84,10 @@ class BottomPlayer extends HookConsumerWidget {
children: [ children: [
PlayerActions( PlayerActions(
extraActions: [ extraActions: [
IconButton( Tooltip(
tooltip: context.l10n.mini_player, tooltip: Text(context.l10n.mini_player),
child: IconButton(
variance: ButtonVariance.ghost,
icon: const Icon(SpotubeIcons.miniPlayer), icon: const Icon(SpotubeIcons.miniPlayer),
onPressed: () async { onPressed: () async {
if (!kIsDesktop) return; if (!kIsDesktop) return;
@ -107,14 +106,17 @@ class BottomPlayer extends HookConsumerWidget {
await Future.delayed( await Future.delayed(
const Duration(milliseconds: 100), const Duration(milliseconds: 100),
() async { () async {
GoRouter.of(context).go( if (context.mounted) {
context.go(
'/mini-player', '/mini-player',
extra: prevSize, extra: prevSize,
); );
}
}, },
); );
}, },
), ),
),
], ],
), ),
Container( Container(
@ -138,7 +140,6 @@ class BottomPlayer extends HookConsumerWidget {
), ),
), ),
), ),
),
); );
} }
} }