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

fix(playbutton_card): annoying animation

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2023-11-08 12:11:06 +06:00
parent ac0e2e74d8
commit 574406dd5f
2 changed files with 122 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

245
lib/components/shared/playbutton_card.dart
View File

@ -8,7 +8,6 @@ import 'package:spotube/components/shared/hover_builder.dart';
import 'package:spotube/components/shared/image/universal_image.dart'; import 'package:spotube/components/shared/image/universal_image.dart';
import 'package:spotube/hooks/use_breakpoint_value.dart'; import 'package:spotube/hooks/use_breakpoint_value.dart';
import 'package:spotube/hooks/use_brightness_value.dart'; import 'package:spotube/hooks/use_brightness_value.dart';
import 'package:spotube/utils/platform.dart';
final htmlTagRegexp = RegExp(r"<[^>]*>", caseSensitive: true); final htmlTagRegexp = RegExp(r"<[^>]*>", caseSensitive: true);
@ -59,9 +58,9 @@ class PlaybuttonCard extends HookWidget {
); );
final end = useBreakpointValue<double>( final end = useBreakpointValue<double>(
xs: 15, xs: 10,
sm: 15, sm: 10,
others: 20, others: 15,
); );
final textsHeight = useState( final textsHeight = useState(
@ -84,28 +83,29 @@ class PlaybuttonCard extends HookWidget {
return null; return null;
}, [textsKey]); }, [textsKey]);
return Stack( return Container(
children: [ constraints: BoxConstraints(maxWidth: size),
Container( margin: margin,
constraints: BoxConstraints(maxWidth: size), child: Material(
margin: margin, color: Color.lerp(
child: Material( theme.colorScheme.surfaceVariant,
color: Color.lerp( theme.colorScheme.surface,
theme.colorScheme.surfaceVariant, useBrightnessValue(.9, .7),
theme.colorScheme.surface, ),
useBrightnessValue(.9, .7), borderRadius: radius,
), shadowColor: theme.colorScheme.background,
borderRadius: radius, elevation: 3,
shadowColor: theme.colorScheme.background, child: InkWell(
elevation: 3, mouseCursor: SystemMouseCursors.click,
child: InkWell( onTap: onTap,
mouseCursor: SystemMouseCursors.click, borderRadius: radius,
onTap: onTap, splashFactory: theme.splashFactory,
borderRadius: radius, child: Column(
splashFactory: theme.splashFactory, mainAxisSize: MainAxisSize.min,
child: Column( crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, children: [
crossAxisAlignment: CrossAxisAlignment.start, Stack(
clipBehavior: Clip.none,
children: [ children: [
Padding( Padding(
padding: const EdgeInsets.only( padding: const EdgeInsets.only(
@ -121,115 +121,114 @@ class PlaybuttonCard extends HookWidget {
), ),
), ),
), ),
Column( if (isOwner)
key: textsKey, Positioned(
crossAxisAlignment: CrossAxisAlignment.start, top: 15,
children: [ left: 15,
const SizedBox(height: 15), child: AnimatedSize(
Padding( duration: const Duration(milliseconds: 150),
padding: const EdgeInsets.symmetric(horizontal: 12.0), alignment: Alignment.centerLeft,
child: AutoSizeText( curve: Curves.easeInExpo,
title, child: HoverBuilder(builder: (context, isHovered) {
maxLines: 1, return Container(
minFontSize: theme.textTheme.bodyMedium!.fontSize!, padding: const EdgeInsets.all(4),
overflow: TextOverflow.ellipsis, decoration: BoxDecoration(
), color: Colors.blueAccent,
), borderRadius: BorderRadius.circular(20),
if (cleanDescription != null)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: AutoSizeText(
cleanDescription,
maxLines: 2,
style: theme.textTheme.bodySmall?.copyWith(
color:
theme.colorScheme.onSurface.withOpacity(.5),
), ),
overflow: TextOverflow.ellipsis, child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
SpotubeIcons.user,
color: Colors.white,
size: 16,
),
if (isHovered)
Text(
"Owned by you",
style: theme.textTheme.bodySmall?.copyWith(
color: Colors.white,
),
),
],
),
);
}),
),
),
Positioned(
right: end,
bottom: -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),
),
icon: const Icon(SpotubeIcons.queueAdd),
onPressed: isLoading ? null : onAddToQueuePressed,
), ),
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), ],
], ),
), ),
], ],
), ),
), Column(
), key: textsKey,
), crossAxisAlignment: CrossAxisAlignment.start,
if (isOwner) children: [
Positioned( const SizedBox(height: 15),
top: 15, Padding(
left: 25, padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: AnimatedSize( child: AutoSizeText(
duration: const Duration(milliseconds: 150), title,
alignment: Alignment.centerLeft, maxLines: 1,
curve: Curves.easeInExpo, minFontSize: theme.textTheme.bodyMedium!.fontSize!,
child: HoverBuilder(builder: (context, isHovered) { overflow: TextOverflow.ellipsis,
return Container( ),
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.circular(20),
), ),
child: Row( if (cleanDescription != null)
mainAxisSize: MainAxisSize.min, Padding(
children: [ padding: const EdgeInsets.symmetric(horizontal: 12.0),
const Icon( child: AutoSizeText(
SpotubeIcons.user, cleanDescription,
color: Colors.white, maxLines: 2,
size: 16, style: theme.textTheme.bodySmall?.copyWith(
), color: theme.colorScheme.onSurface.withOpacity(.5),
if (isHovered)
Text(
"Owned by you",
style: theme.textTheme.bodySmall?.copyWith(
color: Colors.white,
),
), ),
], overflow: TextOverflow.ellipsis,
), ),
); ),
}), const SizedBox(height: 10),
), ],
),
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,
),
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,
), ),
], ],
), ),
), ),
], ),
); );
} }
} }

1
lib/provider/proxy_playlist/next_fetcher_mixin.dart
View File

@ -1,5 +1,4 @@
import 'package:collection/collection.dart'; import 'package:collection/collection.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:spotify/spotify.dart'; import 'package:spotify/spotify.dart';
import 'package:spotube/models/local_track.dart'; import 'package:spotube/models/local_track.dart';