fix: track_tile active and blacklist color, playbutton card action po…

…sitioning
KRTirtho · Mar 23, 2023 · 3f5a1b9 · 3f5a1b9
1 parent 20c424c
commit 3f5a1b9
Show file tree

Hide file tree

Showing 8 changed files with 252 additions and 183 deletions.
diff --git a/lib/components/library/user_albums.dart b/lib/components/library/user_albums.dart
@@ -50,7 +50,11 @@ class UserAlbums extends HookConsumerWidget {
  return const AnonymousFallback();
  }
  if (albumsQuery.isLoading || !albumsQuery.hasData) {
- return const Center(child: ShimmerPlaybuttonCard(count: 7));
+ return Container(
+ alignment: Alignment.topLeft,
+ padding: const EdgeInsets.all(16.0),
+ child: const ShimmerPlaybuttonCard(count: 7),
+ );
  }
 
  return RefreshIndicator(
@@ -63,6 +67,7 @@ class UserAlbums extends HookConsumerWidget {
  padding: const EdgeInsets.all(8.0),
  child: SafeArea(
  child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
  children: [
  TextField(
  onChanged: (value) => searchText.value = value,

diff --git a/lib/components/shared/playbutton_card.dart b/lib/components/shared/playbutton_card.dart
@@ -7,6 +7,7 @@ import 'package:spotube/collections/spotube_icons.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/utils/platform.dart';
 
 class PlaybuttonCard extends HookWidget {
  final void Function()? onTap;
@@ -34,52 +35,70 @@ class PlaybuttonCard extends HookWidget {
 
  @override
  Widget build(BuildContext context) {
+ final textsKey = useMemoized(() => GlobalKey(), []);
  final theme = Theme.of(context);
  final radius = BorderRadius.circular(15);
 
  final double size = useBreakpointValue<double>(
- sm: 130,
- md: 150,
- others: 170,
- );
+ sm: 130,
+ md: 150,
+ others: 170,
+ ) ??
+ 170;
 
  final end = useBreakpointValue<double>(
- sm: 5,
- md: 7,
- others: 10,
+ sm: 15,
+ others: 20,
+ ) ??
+ 20;
+
+ final textsHeight = useState(
+ (textsKey.currentContext?.findRenderObject() as RenderBox?)
+ ?.size
+ .height ??
+ 110.00,
  );
 
- return Container(
- constraints: BoxConstraints(maxWidth: size),
- margin: margin,
- child: Material(
- color: Color.lerp(
- theme.colorScheme.surfaceVariant,
- theme.colorScheme.surface,
- useBrightnessValue(.9, .7),
- ),
- borderRadius: radius,
- shadowColor: theme.colorScheme.background,
- elevation: 3,
- child: InkWell(
- mouseCursor: SystemMouseCursors.click,
- onTap: onTap,
- borderRadius: radius,
- splashFactory: theme.splashFactory,
- child: Column(
- mainAxisSize: MainAxisSize.min,
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- Stack(
- clipBehavior: Clip.none,
+ useEffect(() {
+ WidgetsBinding.instance.addPostFrameCallback((_) {
+ textsHeight.value =
+ (textsKey.currentContext?.findRenderObject() as RenderBox?)
+ ?.size
+ .height ??
+ textsHeight.value;
+ });
+ return null;
+ }, [textsKey]);
+
+ return Stack(
+ children: [
+ Container(
+ constraints: BoxConstraints(maxWidth: size),
+ margin: margin,
+ child: Material(
+ color: Color.lerp(
+ theme.colorScheme.surfaceVariant,
+ theme.colorScheme.surface,
+ useBrightnessValue(.9, .7),
+ ),
+ borderRadius: radius,
+ shadowColor: theme.colorScheme.background,
+ elevation: 3,
+ child: InkWell(
+ mouseCursor: SystemMouseCursors.click,
+ onTap: onTap,
+ borderRadius: radius,
+ splashFactory: theme.splashFactory,
+ child: Column(
+ mainAxisSize: MainAxisSize.min,
+ crossAxisAlignment: CrossAxisAlignment.start,
  children: [
- Container(
- margin: const EdgeInsets.only(
+ Padding(
+ padding: const EdgeInsets.only(
  left: 8,
  right: 8,
  top: 8,
  ),
- constraints: BoxConstraints(maxHeight: size),
  child: ClipRRect(
  borderRadius: radius,
  child: UniversalImage(
@@ -88,77 +107,79 @@ class PlaybuttonCard extends HookWidget {
  ),
  ),
  ),
- Positioned.directional(
- textDirection: TextDirection.ltr,
- end: end,
- bottom: -size * .15,
- child: Column(
- mainAxisSize: MainAxisSize.min,
- children: [
- if (!isPlaying)
- IconButton(
- style: IconButton.styleFrom(
- backgroundColor: theme.colorScheme.background,
- foregroundColor: theme.colorScheme.primary,
- minimumSize: const Size.square(10),
+ Column(
+ key: textsKey,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ const SizedBox(height: 15),
+ Padding(
+ padding: const EdgeInsets.symmetric(horizontal: 12.0),
+ child: AutoSizeText(
+ title,
+ maxLines: 1,
+ minFontSize: theme.textTheme.bodyMedium!.fontSize!,
+ overflow: TextOverflow.ellipsis,
+ ),
+ ),
+ if (description != null)
+ Padding(
+ padding: const EdgeInsets.symmetric(horizontal: 12.0),
+ child: AutoSizeText(
+ description!,
+ maxLines: 2,
+ style: theme.textTheme.bodySmall?.copyWith(
+ color:
+ theme.colorScheme.onSurface.withOpacity(.5),
  ),
- icon: const Icon(SpotubeIcons.queueAdd),
- onPressed: isLoading ? null : onAddToQueuePressed,
+ overflow: TextOverflow.ellipsis,
  ),
- const SizedBox(height: 5),
- IconButton(
- style: IconButton.styleFrom(
- backgroundColor: theme.colorScheme.primaryContainer,
- foregroundColor: theme.colorScheme.primary,
- minimumSize: const Size.square(10),
- ),
- icon: isLoading
- ? SizedBox.fromSize(
- size: const Size.square(15),
- child: const CircularProgressIndicator(
- strokeWidth: 2),
- )
- : isPlaying
- ? const Icon(SpotubeIcons.pause)
- : const Icon(SpotubeIcons.play),
- onPressed: isLoading ? null : onPlaybuttonPressed,
  ),
- ],
- ),
+ const SizedBox(height: 10),
+ ],
  ),
  ],
  ),
- const SizedBox(height: 15),
- Flexible(
- child: Padding(
- padding: const EdgeInsets.symmetric(horizontal: 12.0),
- child: AutoSizeText(
- title,
- maxLines: 1,
- minFontSize: theme.textTheme.bodyMedium!.fontSize!,
- overflow: TextOverflow.ellipsis,
+ ),
+ ),
+ ),
+ AnimatedPositioned(
+ duration: const Duration(milliseconds: 300),
+ right: end,
+ bottom: textsHeight.value - (kIsMobile ? 5 : 10),
+ child: Column(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ if (!isPlaying)
+ IconButton(
+ style: IconButton.styleFrom(
+ backgroundColor: theme.colorScheme.background,
+ foregroundColor: theme.colorScheme.primary,
+ minimumSize: const Size.square(10),
  ),
+ icon: const Icon(SpotubeIcons.queueAdd),
+ onPressed: isLoading ? null : onAddToQueuePressed,
  ),
- ),
- if (description != null)
- Flexible(
- child: Padding(
- padding: const EdgeInsets.symmetric(horizontal: 12.0),
- child: AutoSizeText(
- description!,
- maxLines: 2,
- style: theme.textTheme.bodySmall?.copyWith(
- color: theme.colorScheme.onSurface.withOpacity(.5),
- ),
- overflow: TextOverflow.ellipsis,
- ),
- ),
+ const SizedBox(height: 5),
+ IconButton(
+ style: IconButton.styleFrom(
+ backgroundColor: theme.colorScheme.primaryContainer,
+ foregroundColor: theme.colorScheme.primary,
+ minimumSize: const Size.square(10),
  ),
- const SizedBox(height: 10),
+ icon: isLoading
+ ? SizedBox.fromSize(
+ size: const Size.square(15),
+ child: const CircularProgressIndicator(strokeWidth: 2),
+ )
+ : isPlaying
+ ? const Icon(SpotubeIcons.pause)
+ : const Icon(SpotubeIcons.play),
+ onPressed: isLoading ? null : onPlaybuttonPressed,
+ ),
  ],
  ),
  ),
- ),
+ ],
  );
  }
 }
diff --git a/lib/components/shared/shimmers/shimmer_artist_profile.dart b/lib/components/shared/shimmers/shimmer_artist_profile.dart
@@ -21,12 +21,13 @@ class ShimmerArtistProfile extends HookWidget {
  shimmerTheme.shimmerBackgroundColor ?? Colors.grey;
 
  final avatarWidth = useBreakpointValue(
- sm: MediaQuery.of(context).size.width * 0.80,
- md: MediaQuery.of(context).size.width * 0.50,
- lg: MediaQuery.of(context).size.width * 0.30,
- xl: MediaQuery.of(context).size.width * 0.30,
- xxl: MediaQuery.of(context).size.width * 0.30,
- );
+ sm: MediaQuery.of(context).size.width * 0.80,
+ md: MediaQuery.of(context).size.width * 0.50,
+ lg: MediaQuery.of(context).size.width * 0.30,
+ xl: MediaQuery.of(context).size.width * 0.30,
+ xxl: MediaQuery.of(context).size.width * 0.30,
+ ) ??
+ 0;
 
  return Column(
  crossAxisAlignment: CrossAxisAlignment.start,

diff --git a/lib/components/shared/sort_tracks_dropdown.dart b/lib/components/shared/sort_tracks_dropdown.dart
@@ -51,7 +51,7 @@ class SortTracksDropdown extends StatelessWidget {
  },
  onSelected: onChanged,
  tooltip: "Sort tracks",
- child: const Icon(SpotubeIcons.sort),
+ icon: const Icon(SpotubeIcons.sort),
  );
  }
 }
diff --git a/lib/components/shared/track_table/track_collection_view.dart b/lib/components/shared/track_table/track_collection_view.dart
@@ -100,12 +100,13 @@ class TrackCollectionView<T> extends HookConsumerWidget {
  ),
  ),
  // play playlist
- IconButton(
- style: IconButton.styleFrom(
- backgroundColor: theme.colorScheme.primary,
+ ElevatedButton(
+ style: ElevatedButton.styleFrom(
+ shape: const CircleBorder(),
+ backgroundColor: theme.colorScheme.inversePrimary,
  ),
  onPressed: tracksSnapshot.data != null ? onPlay : null,
- icon: Icon(isPlaying ? SpotubeIcons.stop : SpotubeIcons.play),
+ child: Icon(isPlaying ? SpotubeIcons.stop : SpotubeIcons.play),
  ),
  const SizedBox(width: 10),
  ];

diff --git a/lib/components/shared/track_table/track_tile.dart b/lib/components/shared/track_table/track_tile.dart
@@ -179,18 +179,16 @@ class TrackTile extends HookConsumerWidget {
  return AnimatedContainer(
  duration: const Duration(milliseconds: 500),
  decoration: BoxDecoration(
- color: isBlackListed
- ? Colors.red[100]
- : isActive
- ? theme.popupMenuTheme.color
- : Colors.transparent,
- borderRadius: BorderRadius.circular(isActive ? 10 : 0),
+ color: isActive
+ ? theme.colorScheme.surfaceVariant.withOpacity(0.5)
+ : Colors.transparent,
+ borderRadius: BorderRadius.circular(10),
  ),
  child: Material(
  type: MaterialType.transparency,
  child: Row(
  children: [
- if (showCheck)
+ if (showCheck && !isBlackListed)
  Checkbox(
  value: isChecked,
  onChanged: (s) => onCheckChange?.call(s),
@@ -222,22 +220,21 @@ class TrackTile extends HookConsumerWidget {
  ),
  Padding(
  padding: const EdgeInsets.all(8.0),
- child: IconButton(
- icon: Icon(
- playlist?.activeTrack.id == track.value.id
- ? SpotubeIcons.pause
- : SpotubeIcons.play,
- color: Colors.white,
- ),
- style: IconButton.styleFrom(
- backgroundColor: theme.colorScheme.primary,
- hoverColor: theme.colorScheme.primary.withOpacity(0.5),
+ child: ElevatedButton(
+ style: ElevatedButton.styleFrom(
+ backgroundColor: theme.colorScheme.inversePrimary,
+ shape: const CircleBorder(),
  ),
  onPressed: !isBlackListed
  ? () => onTrackPlayButtonPressed?.call(
  track.value,
  )
  : null,
+ child: Icon(
+ playlist?.activeTrack.id == track.value.id
+ ? SpotubeIcons.pause
+ : SpotubeIcons.play,
+ ),
  ),
  ),
  Expanded(