Skip to content

Commit

Permalink
feat: artist card redesign
Browse files Browse the repository at this point in the history
chore: add license as asset for about
  • Loading branch information
KRTirtho committed Mar 12, 2023
1 parent dcdb166 commit 92a418c
Show file tree
Hide file tree
Showing 27 changed files with 247 additions and 261 deletions.
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
BSD-4-Clause License

Copyright (c) 2022 Kingkor Roy Tirtho. All rights reserved.
Copyright (c) 2023 Kingkor Roy Tirtho. All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

Expand Down
95 changes: 52 additions & 43 deletions lib/components/artist/artist_card.dart
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

import 'package:spotify/spotify.dart';
import 'package:spotube/components/shared/hover_builder.dart';
import 'package:spotube/components/shared/image/universal_image.dart';
import 'package:spotube/hooks/use_breakpoint_value.dart';
import 'package:spotube/hooks/use_brightness_value.dart';
import 'package:spotube/provider/blacklist_provider.dart';
import 'package:spotube/utils/service_utils.dart';
import 'package:spotube/utils/type_conversion_utils.dart';
Expand All @@ -15,6 +16,7 @@ class ArtistCard extends HookConsumerWidget {

@override
Widget build(BuildContext context, ref) {
final theme = Theme.of(context);
final backgroundImage = UniversalImage.imageProvider(
TypeConversionUtils.image_X_UrlString(
artist.images,
Expand All @@ -29,46 +31,53 @@ class ArtistCard extends HookConsumerWidget {
),
);

return SizedBox(
height: 240,
width: 200,
child: InkWell(
onTap: () {
ServiceUtils.navigate(context, "/artist/${artist.id}");
},
borderRadius: BorderRadius.circular(8),
child: HoverBuilder(builder: (context, isHovering) {
return Ink(
width: 200,
decoration: BoxDecoration(
color: Theme.of(context).cardColor,
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
blurRadius: 10,
offset: const Offset(0, 3),
spreadRadius: 5,
color: Theme.of(context).colorScheme.shadow,
),
],
border: isBlackListed
? Border.all(
color: Colors.red[400]!,
width: 2,
)
: null,
),
final radius = BorderRadius.circular(15);

final double size = useBreakpointValue<double>(
sm: 130,
md: 150,
others: 170,
);

return Container(
width: size,
margin: const EdgeInsets.symmetric(vertical: 5),
child: Material(
shadowColor: theme.colorScheme.background,
color: Color.lerp(
theme.colorScheme.surfaceVariant,
theme.colorScheme.surface,
useBrightnessValue(.9, .7),
),
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: radius,
side: isBlackListed
? const BorderSide(
color: Colors.red,
width: 2,
)
: BorderSide.none,
),
child: InkWell(
onTap: () {
ServiceUtils.navigate(context, "/artist/${artist.id}");
},
borderRadius: radius,
child: Padding(
padding: const EdgeInsets.all(15),
padding: const EdgeInsets.all(12),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Stack(
children: [
CircleAvatar(
maxRadius: 80,
minRadius: 20,
backgroundImage: backgroundImage,
ConstrainedBox(
constraints: BoxConstraints(
maxHeight: size,
),
child: CircleAvatar(
backgroundImage: backgroundImage,
radius: size / 2,
),
),
Positioned(
right: 0,
Expand All @@ -92,19 +101,19 @@ class ArtistCard extends HookConsumerWidget {
),
],
),
const SizedBox(height: 10),
AutoSizeText(
artist.name!,
maxLines: 2,
maxLines: 1,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
fontWeight: FontWeight.bold,
),
overflow: TextOverflow.ellipsis,
style: theme.textTheme.bodyMedium?.copyWith(
fontWeight: FontWeight.bold,
),
),
],
),
),
);
}),
)),
),
);
}
Expand Down
56 changes: 28 additions & 28 deletions lib/components/library/user_artists.dart
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ class UserArtists extends HookConsumerWidget {

@override
Widget build(BuildContext context, ref) {
final theme = Theme.of(context);
final auth = ref.watch(AuthenticationNotifier.provider);

final artistQuery = useQueries.artist.followedByMe(ref);
Expand Down Expand Up @@ -46,6 +47,8 @@ class UserArtists extends HookConsumerWidget {
.toList();
}, [artistQuery.pages, searchText.value]);

final controller = useScrollController();

if (auth == null) {
return const AnonymousFallback();
}
Expand All @@ -56,7 +59,7 @@ class UserArtists extends HookConsumerWidget {
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: ColoredBox(
color: Theme.of(context).scaffoldBackgroundColor,
color: theme.scaffoldBackgroundColor,
child: TextField(
onChanged: (value) => searchText.value = value,
decoration: const InputDecoration(
Expand All @@ -67,7 +70,7 @@ class UserArtists extends HookConsumerWidget {
),
),
),
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
backgroundColor: theme.scaffoldBackgroundColor,
body: artistQuery.pages.isEmpty
? Padding(
padding: const EdgeInsets.all(20),
Expand All @@ -84,33 +87,30 @@ class UserArtists extends HookConsumerWidget {
onRefresh: () async {
await artistQuery.refreshAll();
},
child: SafeArea(
child: GridView.builder(
itemCount: filteredArtists.length,
physics: const AlwaysScrollableScrollPhysics(),
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
mainAxisExtent: 250,
crossAxisSpacing: 20,
mainAxisSpacing: 20,
child: SingleChildScrollView(
controller: controller,
child: SizedBox(
width: double.infinity,
child: SafeArea(
child: Center(
child: Wrap(
spacing: 15,
runSpacing: 5,
children: filteredArtists.mapIndexed((index, artist) {
if (index == artistQuery.pages.length - 1 &&
hasNextPage) {
return Waypoint(
controller: controller,
isGrid: true,
onTouchEdge: artistQuery.fetchNext,
child: ArtistCard(artist),
);
}
return ArtistCard(artist);
}).toList(),
),
),
),
padding: const EdgeInsets.all(10),
itemBuilder: (context, index) {
return HookBuilder(builder: (context) {
if (index == artistQuery.pages.length - 1 &&
hasNextPage) {
return Waypoint(
controller: useScrollController(),
isGrid: true,
onTouchEdge: () {
artistQuery.fetchNext();
},
child: ArtistCard(filteredArtists[index]),
);
}
return ArtistCard(filteredArtists[index]);
});
},
),
),
),
Expand Down
1 change: 0 additions & 1 deletion lib/components/library/user_playlists.dart
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,6 @@ class UserPlaylists extends HookConsumerWidget {
onRefresh: playlistsQuery.refresh,
child: SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
padding: const EdgeInsets.all(8.0),
child: SafeArea(
child: Column(
children: [
Expand Down
5 changes: 3 additions & 2 deletions lib/components/player/player_controls.dart
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ class PlayerControls extends HookConsumerWidget {
final playlistNotifier = ref.watch(PlaylistQueueNotifier.notifier);
final playing = useStream(PlaylistQueueNotifier.playing).data ??
PlaylistQueueNotifier.isPlaying;
final theme = Theme.of(context);

return GestureDetector(
behavior: HitTestBehavior.translucent,
Expand Down Expand Up @@ -139,7 +140,7 @@ class PlayerControls extends HookConsumerWidget {
icon: Icon(
SpotubeIcons.shuffle,
color: playlist?.isShuffled == true
? Theme.of(context).primaryColor
? theme.colorScheme.primary
: null,
),
onPressed: playlist == null
Expand Down Expand Up @@ -194,7 +195,7 @@ class PlayerControls extends HookConsumerWidget {
? SpotubeIcons.repeatOne
: SpotubeIcons.repeat,
color: playlist?.isLooping == true
? Theme.of(context).primaryColor
? theme.colorScheme.primary
: null,
),
onPressed: playlist == null || playlist.isLoading
Expand Down
10 changes: 4 additions & 6 deletions lib/components/player/player_overlay.dart
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ class PlayerOverlay extends HookConsumerWidget {
final playing = useStream(PlaylistQueueNotifier.playing).data ??
PlaylistQueueNotifier.isPlaying;

final textColor = Theme.of(context).colorScheme.primary;
final theme = Theme.of(context);
final textColor = theme.colorScheme.primary;

const radius = BorderRadius.only(
topLeft: Radius.circular(10),
Expand All @@ -54,10 +55,7 @@ class PlayerOverlay extends HookConsumerWidget {
width: MediaQuery.of(context).size.width,
height: canShow ? 53 : 0,
decoration: BoxDecoration(
color: Theme.of(context)
.colorScheme
.secondaryContainer
.withOpacity(.8),
color: theme.colorScheme.secondaryContainer.withOpacity(.8),
borderRadius: radius,
),
child: AnimatedOpacity(
Expand All @@ -81,7 +79,7 @@ class PlayerOverlay extends HookConsumerWidget {
minHeight: 2,
backgroundColor: Colors.transparent,
valueColor: AlwaysStoppedAnimation(
Theme.of(context).colorScheme.primary,
theme.colorScheme.primary,
),
);
},
Expand Down
13 changes: 6 additions & 7 deletions lib/components/player/player_queue.dart
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ class PlayerQueue extends HookConsumerWidget {
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
);
final headlineColor = Theme.of(context).textTheme.headlineSmall?.color;
final theme = Theme.of(context);
final headlineColor = theme.textTheme.headlineSmall?.color;

useEffect(() {
if (playlist == null) return null;
Expand All @@ -60,7 +61,7 @@ class PlayerQueue extends HookConsumerWidget {
top: 5.0,
),
decoration: BoxDecoration(
color: Theme.of(context).scaffoldBackgroundColor.withOpacity(0.5),
color: theme.scaffoldBackgroundColor.withOpacity(0.5),
borderRadius: borderRadius,
),
child: Column(
Expand Down Expand Up @@ -88,11 +89,9 @@ class PlayerQueue extends HookConsumerWidget {
const Spacer(),
FilledButton(
style: FilledButton.styleFrom(
backgroundColor: Theme.of(context)
.scaffoldBackgroundColor
.withOpacity(0.5),
foregroundColor:
Theme.of(context).textTheme.headlineSmall?.color,
backgroundColor:
theme.scaffoldBackgroundColor.withOpacity(0.5),
foregroundColor: theme.textTheme.headlineSmall?.color,
),
child: Row(
children: const [
Expand Down
12 changes: 5 additions & 7 deletions lib/components/player/player_track_details.dart
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ class PlayerTrackDetails extends HookConsumerWidget {

@override
Widget build(BuildContext context, ref) {
final theme = Theme.of(context);
final breakpoint = useBreakpoints();
final playback = ref.watch(PlaylistQueueNotifier.provider);

Expand Down Expand Up @@ -50,19 +51,16 @@ class PlayerTrackDetails extends HookConsumerWidget {
Text(
playback?.activeTrack.name ?? "",
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: color,
),
style: theme.textTheme.bodyMedium?.copyWith(
color: color,
),
),
Text(
TypeConversionUtils.artists_X_String<Artist>(
playback?.activeTrack.artists ?? [],
),
overflow: TextOverflow.ellipsis,
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(color: color),
style: theme.textTheme.bodySmall!.copyWith(color: color),
)
],
),
Expand Down
Loading

0 comments on commit 92a418c

Please sign in to comment.