285 lines
11 KiB
Dart
285 lines
11 KiB
Dart
import 'dart:math' as math;
|
|
|
|
import 'package:easy_localization/easy_localization.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
|
import 'package:freezed_annotation/freezed_annotation.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
import 'package:gap/gap.dart';
|
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
|
import 'package:island/models/sticker.dart';
|
|
import 'package:island/pods/network.dart';
|
|
import 'package:island/pods/paging.dart';
|
|
import 'package:island/widgets/app_scaffold.dart';
|
|
import 'package:island/widgets/content/cloud_files.dart';
|
|
import 'package:island/widgets/paging/pagination_list.dart';
|
|
import 'package:material_symbols_icons/symbols.dart';
|
|
import 'dart:async';
|
|
|
|
import 'package:styled_widget/styled_widget.dart';
|
|
|
|
part 'sticker_marketplace.freezed.dart';
|
|
|
|
@freezed
|
|
sealed class MarketplaceStickerQuery with _$MarketplaceStickerQuery {
|
|
const factory MarketplaceStickerQuery({
|
|
required bool byUsage,
|
|
required String? query,
|
|
}) = _MarketplaceStickerQuery;
|
|
}
|
|
|
|
final marketplaceStickerPacksNotifierProvider =
|
|
AsyncNotifierProvider.autoDispose(MarketplaceStickerPacksNotifier.new);
|
|
|
|
class MarketplaceStickerPacksNotifier extends AsyncNotifier<List<SnStickerPack>>
|
|
with
|
|
AsyncPaginationController<SnStickerPack>,
|
|
AsyncPaginationFilter<MarketplaceStickerQuery, SnStickerPack> {
|
|
static const int pageSize = 20;
|
|
|
|
@override
|
|
MarketplaceStickerQuery currentFilter = MarketplaceStickerQuery(
|
|
byUsage: true,
|
|
query: null,
|
|
);
|
|
|
|
@override
|
|
Future<List<SnStickerPack>> fetch() async {
|
|
final client = ref.read(apiClientProvider);
|
|
|
|
final response = await client.get(
|
|
'/sphere/stickers',
|
|
queryParameters: {
|
|
'offset': fetchedCount.toString(),
|
|
'take': pageSize,
|
|
'order': currentFilter.byUsage ? 'usage' : 'date',
|
|
if (currentFilter.query != null && currentFilter.query!.isNotEmpty)
|
|
'query': currentFilter.query,
|
|
},
|
|
);
|
|
|
|
totalCount = int.parse(response.headers.value('X-Total') ?? '0');
|
|
final stickers = response.data
|
|
.map((e) => SnStickerPack.fromJson(e))
|
|
.cast<SnStickerPack>()
|
|
.toList();
|
|
|
|
return stickers;
|
|
}
|
|
}
|
|
|
|
/// User-facing marketplace screen for browsing sticker packs.
|
|
/// This version does NOT rely on publisher name (no pubName).
|
|
class MarketplaceStickersScreen extends HookConsumerWidget {
|
|
const MarketplaceStickersScreen({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final query = useState<MarketplaceStickerQuery>(
|
|
MarketplaceStickerQuery(byUsage: true, query: null),
|
|
);
|
|
final searchController = useTextEditingController();
|
|
final focusNode = useFocusNode();
|
|
final debounceTimer = useState<Timer?>(null);
|
|
|
|
final notifier = ref.watch(
|
|
marketplaceStickerPacksNotifierProvider.notifier,
|
|
);
|
|
|
|
// Clear search when query is cleared
|
|
useEffect(() {
|
|
if (query.value.query == null || query.value.query!.isEmpty) {
|
|
searchController.clear();
|
|
}
|
|
notifier.applyFilter(query.value);
|
|
return null;
|
|
}, [query]);
|
|
|
|
// Clean up timer on dispose
|
|
useEffect(() {
|
|
return () {
|
|
debounceTimer.value?.cancel();
|
|
};
|
|
}, []);
|
|
|
|
return AppScaffold(
|
|
appBar: AppBar(
|
|
title: const Text('stickers').tr(),
|
|
actions: [
|
|
IconButton(
|
|
onPressed: () {
|
|
query.value = query.value.copyWith(byUsage: !query.value.byUsage);
|
|
},
|
|
icon: query.value.byUsage
|
|
? const Icon(Symbols.local_fire_department)
|
|
: const Icon(Symbols.access_time),
|
|
tooltip: query.value.byUsage
|
|
? 'orderByPopularity'.tr()
|
|
: 'orderByReleaseDate'.tr(),
|
|
),
|
|
const Gap(8),
|
|
],
|
|
),
|
|
body: Column(
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
|
|
child: SearchBar(
|
|
elevation: WidgetStateProperty.all(4),
|
|
controller: searchController,
|
|
focusNode: focusNode,
|
|
hintText: 'search'.tr(),
|
|
leading: const Icon(Symbols.search),
|
|
padding: WidgetStateProperty.all(
|
|
const EdgeInsets.symmetric(horizontal: 24),
|
|
),
|
|
onTapOutside: (_) =>
|
|
FocusManager.instance.primaryFocus?.unfocus(),
|
|
trailing: [
|
|
if (query.value.query != null && query.value.query!.isNotEmpty)
|
|
IconButton(
|
|
icon: const Icon(Symbols.close),
|
|
onPressed: () {
|
|
query.value = query.value.copyWith(query: null);
|
|
searchController.clear();
|
|
focusNode.unfocus();
|
|
},
|
|
),
|
|
],
|
|
onChanged: (value) {
|
|
// Debounce search to avoid excessive API calls
|
|
debounceTimer.value?.cancel();
|
|
debounceTimer.value = Timer(
|
|
const Duration(milliseconds: 500),
|
|
() {
|
|
query.value = query.value.copyWith(query: value);
|
|
},
|
|
);
|
|
},
|
|
onSubmitted: (value) {
|
|
query.value = query.value.copyWith(query: value);
|
|
focusNode.unfocus();
|
|
},
|
|
),
|
|
),
|
|
Expanded(
|
|
child: PaginationList(
|
|
padding: EdgeInsets.only(top: 8),
|
|
provider: marketplaceStickerPacksNotifierProvider,
|
|
notifier: marketplaceStickerPacksNotifierProvider.notifier,
|
|
itemBuilder: (context, idx, pack) => Card(
|
|
margin: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
|
|
child: Column(
|
|
children: [
|
|
if (pack.stickers.isNotEmpty)
|
|
Container(
|
|
color: Theme.of(context).colorScheme.secondaryContainer,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 20,
|
|
vertical: 20,
|
|
),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: List.generate(
|
|
math.min(pack.stickers.length, 4),
|
|
(index) => Padding(
|
|
padding: EdgeInsets.only(
|
|
right: index < 3 ? 8 : 0,
|
|
),
|
|
child: Container(
|
|
constraints: const BoxConstraints(
|
|
maxWidth: 80,
|
|
),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(8),
|
|
color: Theme.of(
|
|
context,
|
|
).colorScheme.tertiaryContainer,
|
|
),
|
|
child: CloudImageWidget(
|
|
file: pack.stickers[index].image,
|
|
),
|
|
).clipRRect(all: 8),
|
|
),
|
|
),
|
|
),
|
|
if (pack.stickers.length > 4)
|
|
const SizedBox(height: 8),
|
|
if (pack.stickers.length > 4)
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: List.generate(
|
|
math.min(pack.stickers.length - 4, 4),
|
|
(index) => Padding(
|
|
padding: EdgeInsets.only(
|
|
right: index < 3 ? 8 : 0,
|
|
),
|
|
child: Container(
|
|
constraints: const BoxConstraints(
|
|
maxWidth: 80,
|
|
),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(
|
|
8,
|
|
),
|
|
color: Theme.of(
|
|
context,
|
|
).colorScheme.tertiaryContainer,
|
|
),
|
|
child: CloudImageWidget(
|
|
file: pack.stickers[index + 4].image,
|
|
),
|
|
).clipRRect(all: 8),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
).clipRRect(topLeft: 8, topRight: 8),
|
|
ListTile(
|
|
leading: Container(
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(
|
|
context,
|
|
).colorScheme.tertiaryContainer,
|
|
borderRadius: const BorderRadius.all(
|
|
Radius.circular(8),
|
|
),
|
|
),
|
|
child: CloudImageWidget(
|
|
file: pack.icon ?? pack.stickers.firstOrNull?.image,
|
|
),
|
|
).width(40).height(40).clipRRect(all: 8),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: const BorderRadius.all(
|
|
Radius.circular(8),
|
|
),
|
|
),
|
|
title: Text(pack.name),
|
|
subtitle: Text(pack.description),
|
|
trailing: const Icon(Symbols.chevron_right),
|
|
onTap: () {
|
|
// Navigate to user-facing sticker pack detail page.
|
|
// Adjust the route name/parameters if your app uses different ones.
|
|
context.pushNamed(
|
|
'stickerPackDetail',
|
|
pathParameters: {'packId': pack.id},
|
|
);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|