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

feat: re-designed playlist/album page

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2023-06-17 13:08:33 +06:00
parent a0767f4664
commit 0cedc7a418
6 changed files with 295 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/collections/routes.dart
View File

@ -79,8 +79,8 @@ final router = GoRouter(
routes: [ routes: [
GoRoute( GoRoute(
path: "blacklist", path: "blacklist",
pageBuilder: (context, state) => const SpotubePage( pageBuilder: (context, state) => SpotubeSlidePage(
child: BlackListPage(), child: const BlackListPage(),
), ),
), ),
GoRoute( GoRoute(

20
lib/components/shared/spotube_page_route.dart
View File

@ -1,5 +1,25 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
class SpotubePage<T> extends MaterialPage<T> { class SpotubePage<T> extends MaterialPage<T> {
const SpotubePage({required super.child}); const SpotubePage({required super.child});
} }
class SpotubeSlidePage extends CustomTransitionPage {
SpotubeSlidePage({
required super.child,
super.key,
}) : super(
reverseTransitionDuration: const Duration(milliseconds: 150),
transitionDuration: const Duration(milliseconds: 150),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(1, 0),
end: Offset.zero,
).animate(animation),
child: child,
);
},
);
}

338
lib/components/shared/track_table/track_collection_view.dart
View File

@ -1,14 +1,13 @@
import 'dart:ui';
import 'package:fl_query/fl_query.dart'; import 'package:fl_query/fl_query.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:collection/collection.dart';
import 'package:fuzzywuzzy/fuzzywuzzy.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: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/album/album_card.dart'; import 'package:spotube/components/album/album_card.dart';
import 'package:spotube/components/shared/compact_search.dart';
import 'package:spotube/components/shared/shimmers/shimmer_track_tile.dart'; import 'package:spotube/components/shared/shimmers/shimmer_track_tile.dart';
import 'package:spotube/components/shared/page_window_title_bar.dart'; import 'package:spotube/components/shared/page_window_title_bar.dart';
import 'package:spotube/components/shared/image/universal_image.dart'; import 'package:spotube/components/shared/image/universal_image.dart';
@ -66,68 +65,33 @@ class TrackCollectionView<T> 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 mediaQuery = MediaQuery.of(context);
final auth = ref.watch(AuthenticationNotifier.provider); final auth = ref.watch(AuthenticationNotifier.provider);
final color = usePaletteGenerator(titleImage).dominantColor; final color = usePaletteGenerator(titleImage).dominantColor;
final List<Widget> buttons = [ final List<Widget> buttons = [
if (showShare) if (showShare)
IconButton( IconButton(
icon: Icon( icon: const Icon(SpotubeIcons.share),
SpotubeIcons.share,
color: color?.titleTextColor,
),
onPressed: onShare, onPressed: onShare,
), ),
if (heartBtn != null && auth != null) heartBtn!, if (heartBtn != null && auth != null) heartBtn!,
IconButton( IconButton(
tooltip: context.l10n.shuffle, onPressed: isPlaying
icon: Icon( ? null
SpotubeIcons.shuffle, : tracksSnapshot.data != null
color: color?.titleTextColor, ? onAddToQueue
: null,
icon: const Icon(
SpotubeIcons.queueAdd,
), ),
onPressed: onShuffledPlay,
), ),
const SizedBox(width: 5),
// add to queue playlist
if (!isPlaying)
IconButton(
onPressed: tracksSnapshot.data != null ? onAddToQueue : null,
icon: Icon(
SpotubeIcons.queueAdd,
color: color?.titleTextColor,
),
),
// play playlist
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: const CircleBorder(),
backgroundColor: theme.colorScheme.inversePrimary,
),
onPressed: tracksSnapshot.data != null ? onPlay : null,
child: Icon(isPlaying ? SpotubeIcons.stop : SpotubeIcons.play),
),
const SizedBox(width: 10),
]; ];
final controller = useScrollController(); final controller = useScrollController();
final collapsed = useState(false); final collapsed = useState(false);
final searchText = useState("");
final searchController = useTextEditingController();
final filteredTracks = useMemoized(() {
if (searchText.value.isEmpty) {
return tracksSnapshot.data;
}
return tracksSnapshot.data
?.map((e) => (weightedRatio(e.name!, searchText.value), e))
.sorted((a, b) => b.$1.compareTo(a.$1))
.where((e) => e.$1 > 50)
.map((e) => e.$2)
.toList();
}, [tracksSnapshot.data, searchText.value]);
useCustomStatusBarColor( useCustomStatusBarColor(
color?.color ?? theme.scaffoldBackgroundColor, color?.color ?? theme.scaffoldBackgroundColor,
GoRouter.of(context).location == routePath, GoRouter.of(context).location == routePath,
@ -147,48 +111,21 @@ class TrackCollectionView<T> extends HookConsumerWidget {
return () => controller.removeListener(listener); return () => controller.removeListener(listener);
}, [collapsed.value]); }, [collapsed.value]);
final searchbar = ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 300,
maxHeight: 50,
),
child: TextField(
controller: searchController,
onChanged: (value) => searchText.value = value,
style: TextStyle(color: color?.titleTextColor),
decoration: InputDecoration(
hintText: context.l10n.search_tracks,
hintStyle: TextStyle(color: color?.titleTextColor),
border: theme.inputDecorationTheme.border?.copyWith(
borderSide: BorderSide(
color: color?.titleTextColor ?? Colors.white,
),
),
isDense: true,
prefixIconColor: color?.titleTextColor,
prefixIcon: const Icon(SpotubeIcons.search),
),
),
);
return SafeArea( return SafeArea(
bottom: false, bottom: false,
child: Scaffold( child: Scaffold(
appBar: kIsDesktop appBar: kIsDesktop
? PageWindowTitleBar( ? const PageWindowTitleBar(
backgroundColor: color?.color, backgroundColor: Colors.transparent,
foregroundColor: color?.titleTextColor, foregroundColor: Colors.white,
leadingWidth: 400, leadingWidth: 400,
leading: Row( leading: Align(
mainAxisSize: MainAxisSize.min, alignment: Alignment.centerLeft,
children: [ child: BackButton(color: Colors.white),
BackButton(color: color?.titleTextColor),
const SizedBox(width: 10),
searchbar,
],
), ),
) )
: null, : null,
extendBodyBehindAppBar: kIsDesktop,
body: RefreshIndicator( body: RefreshIndicator(
onRefresh: () async { onRefresh: () async {
await tracksSnapshot.refresh(); await tracksSnapshot.refresh();
@ -199,13 +136,36 @@ class TrackCollectionView<T> extends HookConsumerWidget {
slivers: [ slivers: [
SliverAppBar( SliverAppBar(
actions: [ actions: [
if (kIsMobile) AnimatedScale(
CompactSearch( duration: const Duration(milliseconds: 200),
onChanged: (value) => searchText.value = value, scale: collapsed.value ? 1 : 0,
placeholder: context.l10n.search_tracks, child: Row(
iconColor: color?.titleTextColor, mainAxisSize: MainAxisSize.min,
children: buttons,
), ),
if (collapsed.value) ...buttons, ),
AnimatedScale(
duration: const Duration(milliseconds: 200),
scale: collapsed.value ? 1 : 0,
child: IconButton(
tooltip: context.l10n.shuffle,
icon: const Icon(SpotubeIcons.shuffle),
onPressed: isPlaying ? null : onShuffledPlay,
),
),
AnimatedScale(
duration: const Duration(milliseconds: 200),
scale: collapsed.value ? 1 : 0,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
shape: const CircleBorder(),
backgroundColor: theme.colorScheme.inversePrimary,
),
onPressed: tracksSnapshot.data != null ? onPlay : null,
child: Icon(
isPlaying ? SpotubeIcons.stop : SpotubeIcons.play),
),
),
], ],
floating: false, floating: false,
pinned: true, pinned: true,
@ -220,7 +180,7 @@ class TrackCollectionView<T> extends HookConsumerWidget {
title: collapsed.value title: collapsed.value
? Text( ? Text(
title, title,
style: theme.textTheme.titleLarge!.copyWith( style: theme.textTheme.titleMedium!.copyWith(
color: color?.titleTextColor, color: color?.titleTextColor,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
), ),
@ -230,80 +190,140 @@ class TrackCollectionView<T> extends HookConsumerWidget {
flexibleSpace: FlexibleSpaceBar( flexibleSpace: FlexibleSpaceBar(
background: DecoratedBox( background: DecoratedBox(
decoration: BoxDecoration( decoration: BoxDecoration(
gradient: LinearGradient( image: DecorationImage(
colors: [ image: UniversalImage.imageProvider(titleImage),
color?.color ?? Colors.transparent, fit: BoxFit.cover,
theme.canvasColor,
],
begin: const FractionalOffset(0, 0),
end: const FractionalOffset(0, 1),
tileMode: TileMode.clamp,
), ),
), ),
child: Material( child: BackdropFilter(
type: MaterialType.transparency, filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Padding( child: DecoratedBox(
padding: const EdgeInsets.symmetric( decoration: BoxDecoration(
horizontal: 20, gradient: LinearGradient(
colors: [
Colors.black45,
theme.colorScheme.surface,
],
begin: const FractionalOffset(0, 0),
end: const FractionalOffset(0, 1),
tileMode: TileMode.clamp,
),
), ),
child: Wrap( child: Material(
spacing: 20, type: MaterialType.transparency,
runSpacing: 20, child: Padding(
crossAxisAlignment: WrapCrossAlignment.center, padding: const EdgeInsets.symmetric(
alignment: WrapAlignment.center, horizontal: 20,
runAlignment: WrapAlignment.center,
children: [
Container(
constraints:
const BoxConstraints(maxHeight: 200),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: UniversalImage(
path: titleImage,
placeholder: Assets.albumPlaceholder.path,
),
),
), ),
Column( child: Wrap(
crossAxisAlignment: CrossAxisAlignment.start, spacing: 20,
mainAxisAlignment: runSpacing: 20,
MainAxisAlignment.spaceBetween, crossAxisAlignment: WrapCrossAlignment.center,
alignment: WrapAlignment.center,
runAlignment: WrapAlignment.center,
children: [ children: [
Text( Container(
title, constraints:
style: theme.textTheme.titleLarge!.copyWith( const BoxConstraints(maxHeight: 200),
color: color?.titleTextColor, child: ClipRRect(
fontWeight: FontWeight.w600, borderRadius: BorderRadius.circular(10),
), child: UniversalImage(
), path: titleImage,
if (album != null) placeholder:
Text( Assets.albumPlaceholder.path,
"${AlbumType.from(album?.albumType).formatted} • ${context.l10n.released} • ${DateTime.tryParse(
album?.releaseDate ?? "",
)?.year}",
style:
theme.textTheme.titleMedium!.copyWith(
color: color?.titleTextColor,
fontWeight: FontWeight.normal,
), ),
), ),
if (description != null)
Text(
description!,
style: TextStyle(
color: color?.bodyTextColor,
),
maxLines: 2,
overflow: TextOverflow.fade,
),
const SizedBox(height: 10),
Row(
mainAxisSize: MainAxisSize.min,
children: buttons,
), ),
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
title,
style: theme.textTheme.titleLarge!
.copyWith(
color: Colors.white,
fontWeight: FontWeight.w600,
),
),
if (album != null)
Text(
"${AlbumType.from(album?.albumType).formatted} • ${context.l10n.released} • ${DateTime.tryParse(
album?.releaseDate ?? "",
)?.year}",
style: theme.textTheme.titleMedium!
.copyWith(
color: Colors.white,
fontWeight: FontWeight.normal,
),
),
if (description != null)
Text(
description!,
style: const TextStyle(
color: Colors.white),
maxLines: 2,
overflow: TextOverflow.fade,
),
const SizedBox(height: 10),
IconTheme(
data: theme.iconTheme.copyWith(
color: Colors.white,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: buttons,
),
),
const SizedBox(height: 10),
Row(
mainAxisSize: MainAxisSize.min,
children: [
FilledButton.icon(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
foregroundColor: color?.color,
),
label: Text(context.l10n.shuffle),
icon: const Icon(
SpotubeIcons.shuffle),
onPressed:
tracksSnapshot.data == null ||
isPlaying
? null
: onShuffledPlay,
),
const SizedBox(width: 10),
FilledButton.icon(
style: ElevatedButton.styleFrom(
backgroundColor: color?.color,
foregroundColor:
color?.bodyTextColor,
),
onPressed:
tracksSnapshot.data != null
? onPlay
: null,
icon: Icon(
isPlaying
? SpotubeIcons.stop
: SpotubeIcons.play,
),
label: Text(
isPlaying
? context.l10n.stop
: context.l10n.play,
),
),
],
),
],
)
], ],
) ),
], ),
), ),
), ),
), ),
@ -324,13 +344,15 @@ class TrackCollectionView<T> extends HookConsumerWidget {
return TracksTableView( return TracksTableView(
List.from( List.from(
(filteredTracks ?? []).map( (tracksSnapshot.data ?? []).map(
(e) { (track) {
if (e is Track) { if (track is Track) {
return e; return track;
} else { } else {
return TypeConversionUtils.simpleTrack_X_Track( return TypeConversionUtils.simpleTrack_X_Track(
e, album!); track,
album!,
);
} }
}, },
), ),

12
lib/components/shared/track_table/track_tile.dart
View File

@ -100,10 +100,14 @@ class TrackTile extends HookConsumerWidget {
children: [ children: [
ClipRRect( ClipRRect(
borderRadius: BorderRadius.circular(4), borderRadius: BorderRadius.circular(4),
child: UniversalImage( child: AspectRatio(
path: TypeConversionUtils.image_X_UrlString( aspectRatio: 1,
track.album?.images, child: UniversalImage(
placeholder: ImagePlaceholder.albumArt, path: TypeConversionUtils.image_X_UrlString(
track.album?.images,
placeholder: ImagePlaceholder.albumArt,
),
fit: BoxFit.cover,
), ),
), ),
), ),

88
lib/components/shared/track_table/tracks_table_view.dart
View File

@ -1,6 +1,8 @@
import 'package:collection/collection.dart'; import 'package:collection/collection.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:fuzzywuzzy/fuzzywuzzy.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotify/spotify.dart'; import 'package:spotify/spotify.dart';
@ -43,7 +45,9 @@ class TracksTableView extends HookConsumerWidget {
@override @override
Widget build(context, ref) { Widget build(context, ref) {
final playlist = ref.watch(ProxyPlaylistNotifier.provider); final theme = Theme.of(context);
ref.watch(ProxyPlaylistNotifier.provider);
final playback = ref.watch(ProxyPlaylistNotifier.notifier); final playback = ref.watch(ProxyPlaylistNotifier.notifier);
ref.watch(downloadManagerProvider); ref.watch(downloadManagerProvider);
final downloader = ref.watch(downloadManagerProvider.notifier); final downloader = ref.watch(downloadManagerProvider.notifier);
@ -54,11 +58,31 @@ class TracksTableView extends HookConsumerWidget {
final showCheck = useState<bool>(false); final showCheck = useState<bool>(false);
final sortBy = ref.watch(trackCollectionSortState(playlistId ?? '')); final sortBy = ref.watch(trackCollectionSortState(playlistId ?? ''));
final isFiltering = useState<bool>(false);
final searchController = useTextEditingController();
final searchFocus = useFocusNode();
// this will trigger update on each change in searchController
useValueListenable(searchController);
final filteredTracks = useMemoized(() {
if (searchController.text.isEmpty) {
return tracks;
}
return tracks
.map((e) => (weightedRatio(e.name!, searchController.text), e))
.sorted((a, b) => b.$1.compareTo(a.$1))
.where((e) => e.$1 > 50)
.map((e) => e.$2)
.toList();
}, [tracks, searchController.text]);
final sortedTracks = useMemoized( final sortedTracks = useMemoized(
() { () {
return ServiceUtils.sortTracks(tracks, sortBy); return ServiceUtils.sortTracks(filteredTracks, sortBy);
}, },
[tracks, sortBy], [filteredTracks, sortBy],
); );
final selectedTracks = useMemoized( final selectedTracks = useMemoized(
@ -68,7 +92,7 @@ class TracksTableView extends HookConsumerWidget {
[sortedTracks], [sortedTracks],
); );
final children = sortedTracks.isEmpty final children = tracks.isEmpty
? [const NotFound(vertical: true)] ? [const NotFound(vertical: true)]
: [ : [
if (heading != null) heading!, if (heading != null) heading!,
@ -105,7 +129,7 @@ class TracksTableView extends HookConsumerWidget {
: const SizedBox(width: 16), : const SizedBox(width: 16),
), ),
Expanded( Expanded(
flex: 5, flex: 7,
child: Row( child: Row(
children: [ children: [
Text( Text(
@ -139,6 +163,28 @@ class TracksTableView extends HookConsumerWidget {
.state = value; .state = value;
}, },
), ),
IconButton(
tooltip: context.l10n.filter_playlists,
icon: const Icon(SpotubeIcons.filter),
style: IconButton.styleFrom(
foregroundColor: isFiltering.value
? theme.colorScheme.secondary
: null,
backgroundColor: isFiltering.value
? theme.colorScheme.secondaryContainer
: null,
minimumSize: const Size(22, 22),
),
onPressed: () {
isFiltering.value = !isFiltering.value;
if (isFiltering.value) {
searchFocus.requestFocus();
} else {
searchController.clear();
searchFocus.unfocus();
}
},
),
AdaptivePopSheetList( AdaptivePopSheetList(
tooltip: context.l10n.more_actions, tooltip: context.l10n.more_actions,
headings: [ headings: [
@ -250,6 +296,38 @@ class TracksTableView extends HookConsumerWidget {
], ],
); );
}), }),
AnimatedOpacity(
duration: const Duration(milliseconds: 200),
opacity: isFiltering.value ? 1 : 0,
child: AnimatedSize(
duration: const Duration(milliseconds: 200),
child: SizedBox(
height: isFiltering.value ? 50 : 0,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: CallbackShortcuts(
bindings: {
LogicalKeySet(LogicalKeyboardKey.escape): () {
isFiltering.value = false;
searchController.clear();
searchFocus.unfocus();
}
},
child: TextField(
autofocus: true,
focusNode: searchFocus,
controller: searchController,
decoration: InputDecoration(
hintText: context.l10n.search_tracks,
isDense: true,
prefixIcon: const Icon(SpotubeIcons.search),
),
),
),
),
),
),
),
...sortedTracks.mapIndexed((i, track) { ...sortedTracks.mapIndexed((i, track) {
return TrackTile( return TrackTile(
index: i, index: i,

3
lib/l10n/app_en.arb
View File

@ -237,5 +237,6 @@
"likes": "Likes", "likes": "Likes",
"dislikes": "Dislikes", "dislikes": "Dislikes",
"views": "Views", "views": "Views",
"streamUrl": "Stream URL" "streamUrl": "Stream URL",
"stop": "Stop"
} }