531 lines
16 KiB
Dart
531 lines
16 KiB
Dart
// Author: fruit.com.cn
|
|
|
|
import 'dart:async';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:provider/provider.dart';
|
|
|
|
import '../../core/data/models/drama.dart';
|
|
import '../../core/data/repositories/search_repository.dart';
|
|
import '../../core/data/services/category_controller.dart';
|
|
import '../../core/formatting/error_text.dart';
|
|
import '../../core/theme/app_colors.dart';
|
|
import '../../core/theme/app_dimens.dart';
|
|
import '../../core/theme/app_theme.dart';
|
|
import '../../core/widgets/app_bottom_nav.dart';
|
|
import '../../core/widgets/empty_state.dart';
|
|
import '../../l10n/app_localizations.dart';
|
|
import '../new_releases/new_releases_page.dart';
|
|
import '../player/open_player.dart';
|
|
import '../ranking/ranking_page.dart';
|
|
import '../reserve/reserve_page.dart';
|
|
import 'discover_binding.dart';
|
|
import 'discover_logic.dart';
|
|
import 'discover_types.dart';
|
|
import 'widgets/discover_header.dart';
|
|
import 'widgets/discover_search_results.dart';
|
|
import 'widgets/drama_grid.dart';
|
|
|
|
const Color _filterIconColor = Color(0xFF7B61FF);
|
|
const Color _newIconColor = Color(0xFF14B8A6);
|
|
const double _toolbarHeight = 36;
|
|
const double _toolbarGap = 10;
|
|
const double _toolbarRadius = 10;
|
|
const double _categoryTabHeight = 44;
|
|
const double _categoryTabGap = 20;
|
|
const double _categorySelectedFontSize = 16;
|
|
const double _categoryFontSize = 15;
|
|
const double _stickyHeaderHeight = 44;
|
|
const Duration _stickyHeaderTransition = Duration(milliseconds: 200);
|
|
|
|
/// K28-A2 剧场页：搜索、分类/语言 chips 与双列剧库。
|
|
class DiscoverPage extends StatefulWidget {
|
|
const DiscoverPage({
|
|
super.key,
|
|
this.active = true,
|
|
this.searchRequest = 0,
|
|
this.focusSearch = false,
|
|
this.callbacks = const DiscoverPageCallbacks(),
|
|
});
|
|
|
|
final bool active;
|
|
final int searchRequest;
|
|
final bool focusSearch;
|
|
final DiscoverPageCallbacks callbacks;
|
|
|
|
@override
|
|
State<DiscoverPage> createState() => _DiscoverPageState();
|
|
}
|
|
|
|
class _DiscoverPageState extends State<DiscoverPage> {
|
|
late final DiscoverLogic logic;
|
|
bool _headerScrolled = false;
|
|
|
|
bool get embedded => widget.callbacks.embedded;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
logic = DiscoverBinding().create(search: context.read<SearchRepository>());
|
|
logic.scroll.addListener(_onScroll);
|
|
if (widget.focusSearch) _focusOnFirstFrame();
|
|
}
|
|
|
|
void _onScroll() {
|
|
final scrolled = logic.scroll.hasClients && logic.scroll.offset > 0;
|
|
if (scrolled != _headerScrolled) {
|
|
setState(() => _headerScrolled = scrolled);
|
|
}
|
|
}
|
|
|
|
void _focusOnFirstFrame() {
|
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
if (mounted && widget.active) logic.openSearch();
|
|
});
|
|
}
|
|
|
|
@override
|
|
void didUpdateWidget(covariant DiscoverPage oldWidget) {
|
|
super.didUpdateWidget(oldWidget);
|
|
logic.syncSearch(
|
|
active: widget.active,
|
|
request: widget.searchRequest,
|
|
previousRequest: oldWidget.searchRequest,
|
|
isActive: () => mounted && widget.active,
|
|
);
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
logic.scroll.removeListener(_onScroll);
|
|
logic.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return ListenableBuilder(
|
|
listenable: logic,
|
|
builder: (context, _) => _page(context),
|
|
);
|
|
}
|
|
|
|
Widget _page(BuildContext context) {
|
|
final l10n = AppLocalizations.of(context)!;
|
|
final categories = context.watch<CategoryController>();
|
|
final content = SafeArea(
|
|
bottom: !embedded,
|
|
child: Column(
|
|
children: [
|
|
DiscoverHeader(
|
|
controller: logic.search,
|
|
focusNode: logic.searchFocus,
|
|
onChanged: (_) => logic.onSearchChanged(),
|
|
loading: logic.searchLoading,
|
|
),
|
|
Expanded(child: _feed(l10n, categories)),
|
|
if (!embedded) _bottomNav(l10n),
|
|
],
|
|
),
|
|
);
|
|
return AnnotatedRegion<SystemUiOverlayStyle>(
|
|
value: SystemUiOverlayStyle.dark,
|
|
child: Theme(
|
|
data: AppTheme.light(),
|
|
child: embedded
|
|
? content
|
|
: Scaffold(backgroundColor: AppColors.ink, body: content),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _feed(AppLocalizations l10n, CategoryController categories) {
|
|
final showHeader = _showStickyHeader(categories);
|
|
return GestureDetector(
|
|
behavior: HitTestBehavior.translucent,
|
|
onTap: logic.searchFocus.unfocus,
|
|
child: Stack(
|
|
children: [
|
|
Positioned.fill(
|
|
child: RefreshIndicator(
|
|
key: const Key('discover-refresh'),
|
|
color: AppColors.blue,
|
|
backgroundColor: AppColors.card,
|
|
strokeWidth: 2,
|
|
edgeOffset: _stickyHeaderHeight + 8,
|
|
onRefresh: categories.load,
|
|
child: ListView(
|
|
controller: logic.scroll,
|
|
physics: const AlwaysScrollableScrollPhysics(),
|
|
padding: EdgeInsets.only(
|
|
top: showHeader ? _stickyHeaderHeight : 0,
|
|
bottom: AppDimens.spaceXl,
|
|
),
|
|
children: _content(l10n, categories),
|
|
),
|
|
),
|
|
),
|
|
if (showHeader)
|
|
Positioned(
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
child: _stickyHeader(l10n, categories),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
bool _showStickyHeader(CategoryController categories) {
|
|
if (logic.hasSearchQuery || categories.error != null) return false;
|
|
return !(categories.loading && categories.feed.sections.isEmpty);
|
|
}
|
|
|
|
Widget _stickyHeader(AppLocalizations l10n, CategoryController categories) {
|
|
return AnimatedContainer(
|
|
key: const Key('theater-sticky-header'),
|
|
duration: _stickyHeaderTransition,
|
|
curve: Curves.easeOut,
|
|
decoration: BoxDecoration(
|
|
color: _headerScrolled ? AppColors.ink : Colors.transparent,
|
|
border: Border(
|
|
bottom: BorderSide(
|
|
color: _headerScrolled ? AppColors.border : Colors.transparent,
|
|
),
|
|
),
|
|
boxShadow: _headerScrolled
|
|
? const [
|
|
BoxShadow(
|
|
color: Color(0x14000000),
|
|
blurRadius: 8,
|
|
offset: Offset(0, 2),
|
|
),
|
|
]
|
|
: const [],
|
|
),
|
|
child: _categoryTabs(l10n, categories),
|
|
);
|
|
}
|
|
|
|
List<Widget> _content(AppLocalizations l10n, CategoryController categories) {
|
|
if (logic.hasSearchQuery) {
|
|
return [
|
|
DiscoverSearchResults(
|
|
loading: logic.searchLoading,
|
|
error: logic.searchError,
|
|
results: logic.searchResults,
|
|
onRetry: logic.retrySearch,
|
|
onOpen: _openDrama,
|
|
),
|
|
];
|
|
}
|
|
if (categories.loading && categories.feed.sections.isEmpty) {
|
|
return [_block(const CircularProgressIndicator(strokeWidth: 2))];
|
|
}
|
|
final error = categories.error;
|
|
if (error != null) {
|
|
return [
|
|
_block(
|
|
EmptyState(
|
|
key: const Key('home-categories-error'),
|
|
icon: Icons.cloud_off_rounded,
|
|
title: errorText(l10n, error, l10n.categoriesError),
|
|
subtitle: l10n.emptyHint,
|
|
actionLabel: l10n.retry,
|
|
onAction: categories.load,
|
|
),
|
|
),
|
|
];
|
|
}
|
|
return _theaterBlocks(l10n, categories);
|
|
}
|
|
|
|
List<Widget> _theaterBlocks(
|
|
AppLocalizations l10n,
|
|
CategoryController categories,
|
|
) {
|
|
final dramas = logic.selectedCategoryId == null
|
|
? categories.feed.dramas
|
|
: categories.dramasOf(logic.selectedCategoryId!);
|
|
return [
|
|
_toolbar(l10n, categories),
|
|
if (dramas.isEmpty)
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 40),
|
|
child: EmptyState(
|
|
key: const Key('discover-empty'),
|
|
icon: Icons.movie_filter_outlined,
|
|
title: l10n.noStories,
|
|
subtitle: l10n.emptyHint,
|
|
),
|
|
)
|
|
else
|
|
DramaGrid(l10n: l10n, dramas: dramas, onOpen: _openDrama),
|
|
];
|
|
}
|
|
|
|
Widget _categoryTabs(AppLocalizations l10n, CategoryController categories) {
|
|
return SizedBox(
|
|
key: const Key('theater-category-chips'),
|
|
height: _categoryTabHeight,
|
|
child: ListView.separated(
|
|
scrollDirection: Axis.horizontal,
|
|
padding: const EdgeInsets.symmetric(horizontal: 14),
|
|
itemCount: categories.categories.length + 1,
|
|
separatorBuilder: (_, _) => const SizedBox(width: _categoryTabGap),
|
|
itemBuilder: (context, index) {
|
|
if (index == 0) {
|
|
return _categoryTab(
|
|
key: const Key('theater-category-all'),
|
|
id: 'all',
|
|
label: l10n.all,
|
|
selected: logic.selectedCategoryId == null,
|
|
onTap: () => logic.selectCategory(null),
|
|
);
|
|
}
|
|
final category = categories.categories[index - 1];
|
|
return _categoryTab(
|
|
key: Key('theater-category-${category.id}'),
|
|
id: category.id,
|
|
label: category.name,
|
|
selected: logic.selectedCategoryId == category.id,
|
|
onTap: () => logic.selectCategory(category.id),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _categoryTab({
|
|
required Key key,
|
|
required String id,
|
|
required String label,
|
|
required bool selected,
|
|
required VoidCallback onTap,
|
|
}) {
|
|
return GestureDetector(
|
|
key: key,
|
|
behavior: HitTestBehavior.opaque,
|
|
onTap: onTap,
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Text(
|
|
label,
|
|
maxLines: 1,
|
|
style: TextStyle(
|
|
color: selected ? AppColors.onSurface : AppColors.muted,
|
|
fontSize: selected
|
|
? _categorySelectedFontSize
|
|
: _categoryFontSize,
|
|
fontWeight: selected ? FontWeight.w800 : FontWeight.w500,
|
|
),
|
|
),
|
|
const SizedBox(height: 4),
|
|
Container(
|
|
key: Key('theater-category-underline-$id'),
|
|
width: 18,
|
|
height: 2,
|
|
decoration: BoxDecoration(
|
|
color: selected ? AppColors.blue : Colors.transparent,
|
|
borderRadius: BorderRadius.circular(1),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _toolbar(AppLocalizations l10n, CategoryController categories) {
|
|
return Padding(
|
|
padding: const EdgeInsets.fromLTRB(14, 10, 14, 12),
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: _toolButton(
|
|
key: const Key('theater-toolbar-filter'),
|
|
icon: Icons.tune_rounded,
|
|
color: _filterIconColor,
|
|
label: l10n.filter,
|
|
onTap: () => _openFilterSheet(l10n, categories),
|
|
),
|
|
),
|
|
const SizedBox(width: _toolbarGap),
|
|
Expanded(
|
|
child: _toolButton(
|
|
key: const Key('theater-toolbar-ranking'),
|
|
icon: Icons.local_fire_department_rounded,
|
|
color: AppColors.blue,
|
|
label: l10n.rankingTab,
|
|
onTap: () => _openPage(context, const RankingPage()),
|
|
),
|
|
),
|
|
const SizedBox(width: _toolbarGap),
|
|
Expanded(
|
|
child: _toolButton(
|
|
key: const Key('theater-toolbar-new'),
|
|
icon: Icons.play_circle_fill_rounded,
|
|
color: _newIconColor,
|
|
label: l10n.newDramas,
|
|
onTap: () => _openPage(context, const NewReleasesPage()),
|
|
),
|
|
),
|
|
const SizedBox(width: _toolbarGap),
|
|
Expanded(
|
|
child: _toolButton(
|
|
key: const Key('theater-toolbar-reserve'),
|
|
icon: Icons.calendar_month_rounded,
|
|
color: AppColors.blue,
|
|
label: l10n.reserve,
|
|
onTap: () => _openPage(context, const ReservePage()),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _toolButton({
|
|
required Key key,
|
|
required IconData icon,
|
|
required Color color,
|
|
required String label,
|
|
required VoidCallback onTap,
|
|
}) {
|
|
return Material(
|
|
color: AppColors.card,
|
|
borderRadius: BorderRadius.circular(_toolbarRadius),
|
|
child: InkWell(
|
|
key: key,
|
|
onTap: onTap,
|
|
borderRadius: BorderRadius.circular(_toolbarRadius),
|
|
child: Container(
|
|
height: _toolbarHeight,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(_toolbarRadius),
|
|
border: Border.all(color: AppColors.border),
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(icon, size: 16, color: color),
|
|
const SizedBox(width: 4),
|
|
Flexible(
|
|
child: Text(
|
|
label,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: const TextStyle(
|
|
color: AppColors.onSurface,
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Future<void> _openFilterSheet(
|
|
AppLocalizations l10n,
|
|
CategoryController categories,
|
|
) async {
|
|
await showModalBottomSheet<void>(
|
|
context: context,
|
|
backgroundColor: AppColors.card,
|
|
showDragHandle: true,
|
|
builder: (sheetContext) => SafeArea(
|
|
child: ListView(
|
|
key: const Key('theater-filter-sheet'),
|
|
shrinkWrap: true,
|
|
padding: const EdgeInsets.only(bottom: 12),
|
|
children: [
|
|
ListTile(
|
|
key: const Key('theater-filter-option-all'),
|
|
title: Text(l10n.all),
|
|
onTap: () {
|
|
Navigator.pop(sheetContext);
|
|
logic.selectCategory(null);
|
|
},
|
|
),
|
|
for (final category in categories.categories)
|
|
ListTile(
|
|
key: Key('theater-filter-option-${category.id}'),
|
|
title: Text(category.name),
|
|
onTap: () {
|
|
Navigator.pop(sheetContext);
|
|
logic.selectCategory(category.id);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
void _openPage(BuildContext context, Widget page) {
|
|
Navigator.of(context).push<void>(MaterialPageRoute(builder: (_) => page));
|
|
}
|
|
|
|
Widget _block(Widget child) =>
|
|
SizedBox(height: 280, child: Center(child: child));
|
|
|
|
void _act(DiscoverPageAction action) {
|
|
logic.act(
|
|
context,
|
|
action,
|
|
embedded: embedded,
|
|
onAction: widget.callbacks.onAction,
|
|
);
|
|
}
|
|
|
|
void _openDrama(Drama drama) {
|
|
final callback = widget.callbacks.onDramaSelected;
|
|
if (callback != null) {
|
|
callback(drama);
|
|
return;
|
|
}
|
|
unawaited(playDramaFromCatalog(context, drama));
|
|
}
|
|
|
|
Widget _bottomNav(AppLocalizations l10n) => AppBottomNav(
|
|
items: [
|
|
AppBottomNavItem(
|
|
tabKey: const Key('discover-nav-home'),
|
|
icon: Icons.home_outlined,
|
|
selectedIcon: Icons.home_rounded,
|
|
label: l10n.homeTab,
|
|
onTap: () => _act(DiscoverPageAction.home),
|
|
),
|
|
AppBottomNavItem(
|
|
tabKey: const Key('discover-nav-current'),
|
|
icon: Icons.explore_outlined,
|
|
selectedIcon: Icons.explore_rounded,
|
|
label: l10n.theaterTab,
|
|
selected: true,
|
|
onTap: () {},
|
|
),
|
|
AppBottomNavItem(
|
|
tabKey: const Key('discover-nav-create'),
|
|
icon: Icons.add_box_outlined,
|
|
selectedIcon: Icons.add_box_rounded,
|
|
label: l10n.createTab,
|
|
onTap: () => _act(DiscoverPageAction.create),
|
|
),
|
|
AppBottomNavItem(
|
|
tabKey: const Key('discover-nav-my'),
|
|
icon: Icons.person_outline_rounded,
|
|
selectedIcon: Icons.person_rounded,
|
|
label: l10n.myTab,
|
|
onTap: () => _act(DiscoverPageAction.my),
|
|
),
|
|
],
|
|
);
|
|
}
|