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

refactor: add genre carousel buttons and indicators

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2025-01-06 21:33:26 +06:00
parent bf94a490bb
commit 46852545a9
2 changed files with 274 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
lib/modules/home/sections/genres.dart
View File

@ -1,3 +1,5 @@
import 'dart:async';
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';
@ -36,11 +38,31 @@ class HomeGenresSection extends HookConsumerWidget {
], ],
[mediaQuery.mdAndDown, categoriesQuery.asData?.value], [mediaQuery.mdAndDown, categoriesQuery.asData?.value],
); );
final controller = useMemoized(() => CarouselController(), []);
final interactedRef = useRef(false);
return SliverMainAxisGroup( useEffect(() {
slivers: [ int times = 0;
SliverToBoxAdapter( Timer.periodic(
child: Padding( const Duration(seconds: 5),
(timer) {
if (times > 5 || interactedRef.value) {
timer.cancel();
return;
}
controller.animateNext(
const Duration(seconds: 2),
);
times++;
},
);
return controller.dispose;
}, []);
return SliverList.list(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8), padding: const EdgeInsets.symmetric(horizontal: 8),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
@ -64,12 +86,13 @@ class HomeGenresSection extends HookConsumerWidget {
], ],
), ),
), ),
), const Gap(8),
const SliverGap(8), Stack(
SliverToBoxAdapter( children: [
child: SizedBox( SizedBox(
height: 280 * theme.scaling, height: 280 * theme.scaling,
child: Carousel( child: Carousel(
controller: controller,
transition: const CarouselTransition.sliding(gap: 24), transition: const CarouselTransition.sliding(gap: 24),
sizeConstraint: CarouselSizeConstraint.fixed( sizeConstraint: CarouselSizeConstraint.fixed(
mediaQuery.mdAndUp mediaQuery.mdAndUp
@ -77,8 +100,6 @@ class HomeGenresSection extends HookConsumerWidget {
: mediaQuery.width * .95, : mediaQuery.width * .95,
), ),
itemCount: categories.length, itemCount: categories.length,
autoplaySpeed: const Duration(seconds: 2),
duration: const Duration(seconds: 5),
pauseOnHover: true, pauseOnHover: true,
direction: Axis.horizontal, direction: Axis.horizontal,
itemBuilder: (context, index) { itemBuilder: (context, index) {
@ -156,14 +177,15 @@ class HomeGenresSection extends HookConsumerWidget {
borderRadius: theme.borderRadiusMd, borderRadius: theme.borderRadiusMd,
surfaceBlur: theme.surfaceBlur, surfaceBlur: theme.surfaceBlur,
child: Button( child: Button(
style: style: ButtonVariance.secondary
ButtonVariance.secondary.copyWith( .copyWith(
padding: (context, states, value) => padding:
(context, states, value) =>
const EdgeInsets.all(8), const EdgeInsets.all(8),
decoration: decoration:
(context, states, value) { (context, states, value) {
final decoration = ButtonVariance final decoration =
.secondary ButtonVariance.secondary
.decoration( .decoration(
context, states) context, states)
as BoxDecoration; as BoxDecoration;
@ -211,9 +233,11 @@ class HomeGenresSection extends HookConsumerWidget {
Text( Text(
playlist.name!, playlist.name!,
maxLines: 2, maxLines: 2,
overflow: TextOverflow.ellipsis, overflow:
TextOverflow.ellipsis,
).semiBold().small(), ).semiBold().small(),
if (playlist.description != null) if (playlist.description !=
null)
Text( Text(
playlist.description playlist.description
?.unescapeHtml() ?.unescapeHtml()
@ -240,6 +264,72 @@ class HomeGenresSection extends HookConsumerWidget {
}, },
), ),
), ),
Positioned(
left: 0,
child: Container(
height: 280 * theme.scaling,
width: (mediaQuery.mdAndUp ? 80 : 50) * theme.scaling,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
theme.colorScheme.background.withAlpha(255),
theme.colorScheme.background.withAlpha(0),
],
),
),
alignment: Alignment.center,
child: IconButton.ghost(
size:
mediaQuery.mdAndUp ? ButtonSize.normal : ButtonSize.small,
icon: const Icon(SpotubeIcons.angleLeft),
onPressed: () {
controller.animatePrevious(
const Duration(seconds: 1),
);
interactedRef.value = true;
},
),
),
),
Positioned(
right: 0,
child: Container(
height: 280 * theme.scaling,
width: (mediaQuery.mdAndUp ? 80 : 50) * theme.scaling,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
theme.colorScheme.background.withAlpha(0),
theme.colorScheme.background.withAlpha(255),
],
),
),
alignment: Alignment.center,
child: IconButton.ghost(
size:
mediaQuery.mdAndUp ? ButtonSize.normal : ButtonSize.small,
icon: const Icon(SpotubeIcons.angleRight),
onPressed: () {
controller.animateNext(
const Duration(seconds: 1),
);
interactedRef.value = true;
},
),
),
),
],
),
const Gap(8),
Center(
child: CarouselDotIndicator(
itemCount: categories.length,
controller: controller,
),
), ),
], ],
); );

19
lib/modules/library/local_folder/cache_export_dialog.dart
View File

@ -1,10 +1,9 @@
import 'dart:io'; import 'dart:io';
import 'package:flutter/material.dart'; import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:gap/gap.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:path/path.dart'; import 'package:path/path.dart' as path;
import 'package:spotube/extensions/context.dart'; import 'package:spotube/extensions/context.dart';
import 'package:spotube/services/logger/logger.dart'; import 'package:spotube/services/logger/logger.dart';
import 'package:spotube/services/sourced_track/enums.dart'; import 'package:spotube/services/sourced_track/enums.dart';
@ -22,7 +21,7 @@ class LocalFolderCacheExportDialog extends HookConsumerWidget {
@override @override
Widget build(BuildContext context, ref) { Widget build(BuildContext context, ref) {
final ThemeData(:textTheme, :colorScheme) = Theme.of(context); final ThemeData(:typography, :colorScheme) = Theme.of(context);
final files = useState<List<File>>([]); final files = useState<List<File>>([]);
final filesExported = useState<int>(0); final filesExported = useState<int>(0);
@ -31,7 +30,7 @@ class LocalFolderCacheExportDialog extends HookConsumerWidget {
final stream = cacheDir.list().where( final stream = cacheDir.list().where(
(event) => (event) =>
event is File && event is File &&
codecs.contains(extension(event.path).replaceAll(".", "")), codecs.contains(path.extension(event.path).replaceAll(".", "")),
); );
stream.listen( stream.listen(
@ -76,8 +75,8 @@ class LocalFolderCacheExportDialog extends HookConsumerWidget {
), ),
TextSpan( TextSpan(
text: "\n${exportDir.path}?", text: "\n${exportDir.path}?",
style: textTheme.labelMedium!.copyWith( style: typography.small.copyWith(
color: colorScheme.secondary, color: colorScheme.mutedForeground,
), ),
), ),
], ],
@ -102,7 +101,7 @@ class LocalFolderCacheExportDialog extends HookConsumerWidget {
), ),
), ),
actions: [ actions: [
TextButton( Button.outline(
onPressed: isExportInProgress onPressed: isExportInProgress
? null ? null
: () { : () {
@ -110,14 +109,14 @@ class LocalFolderCacheExportDialog extends HookConsumerWidget {
}, },
child: Text(context.l10n.cancel), child: Text(context.l10n.cancel),
), ),
TextButton( Button.primary(
onPressed: isExportInProgress onPressed: isExportInProgress
? null ? null
: () async { : () async {
for (final file in files.value) { for (final file in files.value) {
try { try {
final destinationFile = File( final destinationFile = File(
join(exportDir.path, basename(file.path)), path.join(exportDir.path, path.basename(file.path)),
); );
if (await destinationFile.exists()) { if (await destinationFile.exists()) {