689 lines
21 KiB
Dart
689 lines
21 KiB
Dart
// Author: fruit.com.cn
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:provider/provider.dart';
|
|
|
|
import '../../core/formatting/localized_content.dart';
|
|
import '../../core/data/models/drama.dart';
|
|
import '../../core/data/repositories/watch_history_repository.dart';
|
|
import '../../core/data/services/engagement_controller.dart';
|
|
import '../../l10n/app_localizations.dart';
|
|
import 'mine_binding.dart';
|
|
import 'mine_logic.dart';
|
|
|
|
class MyPage extends StatefulWidget {
|
|
const MyPage({
|
|
super.key,
|
|
required this.drama,
|
|
required this.duration,
|
|
this.initialSection = 0,
|
|
this.history,
|
|
this.embedded = false,
|
|
this.active = true,
|
|
this.sectionRequest = 0,
|
|
this.onAction,
|
|
this.dramas,
|
|
this.onDramaSelected,
|
|
});
|
|
|
|
final Drama drama;
|
|
final Duration duration;
|
|
final int initialSection;
|
|
final WatchHistoryRepository? history;
|
|
final bool embedded;
|
|
final bool active;
|
|
final int sectionRequest;
|
|
final ValueChanged<MyPageAction>? onAction;
|
|
final List<Drama>? dramas;
|
|
final ValueChanged<Drama>? onDramaSelected;
|
|
|
|
@override
|
|
State<MyPage> createState() => _MyPageState();
|
|
}
|
|
|
|
class _MyPageState extends State<MyPage> {
|
|
late final MineLogic logic;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
logic = MineBinding().create(
|
|
drama: widget.drama,
|
|
initialSection: widget.initialSection,
|
|
history: widget.history,
|
|
);
|
|
}
|
|
|
|
@override
|
|
void didUpdateWidget(covariant MyPage oldWidget) {
|
|
super.didUpdateWidget(oldWidget);
|
|
logic.syncPage(
|
|
active: widget.active,
|
|
wasActive: oldWidget.active,
|
|
nextDrama: widget.drama,
|
|
dramaChanged: oldWidget.drama.id != widget.drama.id,
|
|
sectionRequest: widget.sectionRequest,
|
|
previousSectionRequest: oldWidget.sectionRequest,
|
|
initialSection: widget.initialSection,
|
|
);
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
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 content = SafeArea(
|
|
bottom: !widget.embedded,
|
|
child: Column(
|
|
children: [
|
|
_topBar(l10n),
|
|
Expanded(
|
|
child: FutureBuilder<Duration?>(
|
|
future: logic.position,
|
|
builder: (context, snapshot) {
|
|
final position = snapshot.data ?? Duration.zero;
|
|
final total = widget.duration > Duration.zero
|
|
? widget.duration
|
|
: const Duration(seconds: 12);
|
|
final fraction =
|
|
(position.inMilliseconds / total.inMilliseconds).clamp(
|
|
0.0,
|
|
1.0,
|
|
);
|
|
return ListView(
|
|
padding: const EdgeInsets.fromLTRB(16, 12, 16, 20),
|
|
children: [
|
|
_profile(l10n),
|
|
const SizedBox(height: 22),
|
|
_continueCard(l10n, fraction, position, total),
|
|
const SizedBox(height: 26),
|
|
_library(l10n, position, total, fraction),
|
|
const SizedBox(height: 26),
|
|
_preferences(l10n),
|
|
const SizedBox(height: 24),
|
|
Center(
|
|
child: Text(
|
|
l10n.brandMark,
|
|
style: TextStyle(
|
|
color: Color(0xFFD2CDD0),
|
|
fontSize: 10,
|
|
letterSpacing: 1.3,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
),
|
|
if (!widget.embedded) _bottomNav(l10n),
|
|
],
|
|
),
|
|
);
|
|
return Theme(
|
|
data: ThemeData.dark(useMaterial3: true),
|
|
child: widget.embedded
|
|
? content
|
|
: Scaffold(backgroundColor: const Color(0xFF0B0C10), body: content),
|
|
);
|
|
}
|
|
|
|
Widget _topBar(AppLocalizations l10n) => SizedBox(
|
|
height: 54,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
|
child: Row(
|
|
children: [
|
|
const Icon(Icons.play_circle_fill_rounded, color: _orange, size: 27),
|
|
const SizedBox(width: 7),
|
|
Text(
|
|
l10n.myTab,
|
|
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w800),
|
|
),
|
|
const Spacer(),
|
|
IconButton(
|
|
tooltip: l10n.search,
|
|
onPressed: () => logic.act(
|
|
context,
|
|
MyPageAction.discover,
|
|
embedded: widget.embedded,
|
|
onAction: widget.onAction,
|
|
),
|
|
icon: const Icon(Icons.search_rounded, size: 23),
|
|
),
|
|
const SizedBox(width: 6),
|
|
const CircleAvatar(
|
|
radius: 14,
|
|
backgroundColor: Color(0xFF2C2D33),
|
|
child: Icon(Icons.person_rounded, color: Colors.white, size: 19),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
|
|
Widget _profile(AppLocalizations l10n) => Row(
|
|
children: [
|
|
const CircleAvatar(
|
|
radius: 30,
|
|
backgroundColor: Color(0xFF32343A),
|
|
child: Icon(Icons.person_rounded, color: Colors.white, size: 34),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
l10n.localViewer,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: const TextStyle(fontSize: 19, fontWeight: FontWeight.w800),
|
|
),
|
|
const SizedBox(height: 4),
|
|
Text(
|
|
l10n.localDemoProfile,
|
|
style: const TextStyle(color: Color(0xFFE6E1E3), fontSize: 12),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 11, vertical: 6),
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFF24252A),
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
child: Text(l10n.demo, style: const TextStyle(fontSize: 11)),
|
|
),
|
|
],
|
|
);
|
|
|
|
Widget _continueCard(
|
|
AppLocalizations l10n,
|
|
double fraction,
|
|
Duration position,
|
|
Duration total,
|
|
) => Container(
|
|
padding: const EdgeInsets.all(13),
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFF201B1E),
|
|
borderRadius: BorderRadius.circular(13),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
const Icon(Icons.history_rounded, color: _orange, size: 17),
|
|
const SizedBox(width: 6),
|
|
Expanded(
|
|
child: Text(
|
|
l10n.continueWatching,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: const TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w800,
|
|
),
|
|
),
|
|
),
|
|
Text(
|
|
l10n.episodeProgress(1, widget.drama.episodes.length),
|
|
style: const TextStyle(color: Color(0xFFFFA38F), fontSize: 10),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 12),
|
|
Row(
|
|
children: [
|
|
_poster(width: 75, height: 96),
|
|
const SizedBox(width: 11),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
localizedDramaTitle(l10n, widget.drama),
|
|
style: const TextStyle(
|
|
fontSize: 17,
|
|
fontWeight: FontWeight.w800,
|
|
),
|
|
),
|
|
const SizedBox(height: 3),
|
|
Text(
|
|
l10n.dramaTag,
|
|
style: const TextStyle(
|
|
color: Color(0xFFE6E1E3),
|
|
fontSize: 12,
|
|
),
|
|
),
|
|
const SizedBox(height: 10),
|
|
Text(
|
|
l10n.watchedPercent((fraction * 100).round()),
|
|
style: const TextStyle(
|
|
color: Color(0xFFE7DEDD),
|
|
fontSize: 11,
|
|
),
|
|
),
|
|
const SizedBox(height: 5),
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(3),
|
|
child: LinearProgressIndicator(
|
|
value: fraction,
|
|
minHeight: 4,
|
|
backgroundColor: const Color(0xFF444046),
|
|
color: _orange,
|
|
),
|
|
),
|
|
const SizedBox(height: 6),
|
|
Text(
|
|
'${_clock(position)} / ${_clock(total)}',
|
|
style: const TextStyle(
|
|
color: Color(0xFFE6E1E3),
|
|
fontSize: 12,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 12),
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: FilledButton.icon(
|
|
onPressed: () => logic.act(
|
|
context,
|
|
MyPageAction.resume,
|
|
embedded: widget.embedded,
|
|
onAction: widget.onAction,
|
|
),
|
|
style: FilledButton.styleFrom(
|
|
backgroundColor: _orange,
|
|
foregroundColor: Colors.white,
|
|
minimumSize: const Size.fromHeight(37),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(9),
|
|
),
|
|
),
|
|
icon: const Icon(Icons.play_arrow_rounded, size: 18),
|
|
label: Text(l10n.resume),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
|
|
Widget _library(
|
|
AppLocalizations l10n,
|
|
Duration position,
|
|
Duration total,
|
|
double fraction,
|
|
) {
|
|
final tabs = [l10n.history, l10n.watchlist, l10n.likedTab];
|
|
final filters = [l10n.all, l10n.inProgress, l10n.completed];
|
|
final hasHistory =
|
|
logic.filter == 0 ||
|
|
(logic.filter == 1 && fraction < 0.99) ||
|
|
(logic.filter == 2 && fraction >= 0.99);
|
|
final engagement = context.watch<EngagementController>();
|
|
final markedDramas = (widget.dramas ?? [widget.drama]).where((drama) {
|
|
return logic.section == 1
|
|
? engagement.isSaved(drama.id)
|
|
: engagement.isLiked(drama.id);
|
|
}).toList();
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: Row(
|
|
children: [
|
|
for (var index = 0; index < tabs.length; index++) ...[
|
|
InkWell(
|
|
onTap: () => logic.selectSection(index),
|
|
child: Text(
|
|
tabs[index],
|
|
style: TextStyle(
|
|
color: logic.section == index
|
|
? _orange
|
|
: const Color(0xFFE4DBDD),
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.w800,
|
|
),
|
|
),
|
|
),
|
|
if (index < tabs.length - 1) const SizedBox(width: 18),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(height: 17),
|
|
if (logic.section == 0)
|
|
SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: Row(
|
|
children: [
|
|
for (var index = 0; index < filters.length; index++)
|
|
Padding(
|
|
padding: const EdgeInsets.only(right: 7),
|
|
child: ChoiceChip(
|
|
label: Text(filters[index]),
|
|
selected: logic.filter == index,
|
|
onSelected: (_) => logic.selectFilter(index),
|
|
showCheckmark: false,
|
|
visualDensity: VisualDensity.compact,
|
|
backgroundColor: const Color(0xFF242328),
|
|
selectedColor: _orange,
|
|
labelStyle: TextStyle(
|
|
color: logic.filter == index
|
|
? Colors.white
|
|
: const Color(0xFFD5CED0),
|
|
fontSize: 11,
|
|
fontWeight: FontWeight.w700,
|
|
),
|
|
side: BorderSide.none,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
if (logic.section == 0) const SizedBox(height: 11),
|
|
if (logic.section == 0 && hasHistory)
|
|
InkWell(
|
|
onTap: () => logic.act(
|
|
context,
|
|
MyPageAction.resume,
|
|
embedded: widget.embedded,
|
|
onAction: widget.onAction,
|
|
),
|
|
borderRadius: BorderRadius.circular(12),
|
|
child: Container(
|
|
padding: const EdgeInsets.all(9),
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFF1B1C21),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
_poster(width: 74, height: 103),
|
|
const SizedBox(width: 11),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
localizedDramaTitle(l10n, widget.drama),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: const TextStyle(
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w700,
|
|
),
|
|
),
|
|
const SizedBox(height: 5),
|
|
Text(
|
|
l10n.dramaTag,
|
|
style: const TextStyle(
|
|
color: Color(0xFFE6E1E3),
|
|
fontSize: 12,
|
|
),
|
|
),
|
|
const SizedBox(height: 32),
|
|
Text(
|
|
'${l10n.episodeLabel(1)} · ${_clock(position)} / ${_clock(total)}',
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: const TextStyle(
|
|
color: Color(0xFFFFA18D),
|
|
fontSize: 10,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const CircleAvatar(
|
|
radius: 15,
|
|
backgroundColor: Color(0xFF313137),
|
|
child: Icon(
|
|
Icons.play_arrow_rounded,
|
|
color: _orange,
|
|
size: 20,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
)
|
|
else if (logic.section != 0 && markedDramas.isNotEmpty)
|
|
for (final drama in markedDramas) ...[
|
|
_markedDramaCard(drama, l10n),
|
|
const SizedBox(height: 9),
|
|
]
|
|
else
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 22),
|
|
child: Text(
|
|
l10n.noSavedShows,
|
|
style: const TextStyle(color: Color(0xFFE6E1E3)),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _markedDramaCard(Drama drama, AppLocalizations l10n) => InkWell(
|
|
onTap: () {
|
|
if (widget.onDramaSelected != null) {
|
|
widget.onDramaSelected!(drama);
|
|
} else if (drama.id == widget.drama.id) {
|
|
logic.act(
|
|
context,
|
|
MyPageAction.resume,
|
|
embedded: widget.embedded,
|
|
onAction: widget.onAction,
|
|
);
|
|
}
|
|
},
|
|
borderRadius: BorderRadius.circular(12),
|
|
child: Container(
|
|
padding: const EdgeInsets.all(9),
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFF1B1C21),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(8),
|
|
child: Image.asset(
|
|
drama.posterAsset,
|
|
width: 74,
|
|
height: 103,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
const SizedBox(width: 11),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
localizedDramaTitle(l10n, drama),
|
|
maxLines: 2,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: const TextStyle(
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w700,
|
|
),
|
|
),
|
|
const SizedBox(height: 7),
|
|
Text(
|
|
l10n.episodeCount(drama.episodes.length),
|
|
style: const TextStyle(
|
|
color: Color(0xFFE6E1E3),
|
|
fontSize: 12,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const Icon(Icons.chevron_right_rounded, color: Color(0xFFF2EEEF)),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
|
|
Widget _preferences(AppLocalizations l10n) => Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
l10n.preferencesHeading,
|
|
style: const TextStyle(
|
|
color: Color(0xFFCEBBB9),
|
|
fontSize: 11,
|
|
fontWeight: FontWeight.w800,
|
|
letterSpacing: 0.5,
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
Material(
|
|
color: const Color(0xFF1B1C21),
|
|
borderRadius: BorderRadius.circular(12),
|
|
clipBehavior: Clip.antiAlias,
|
|
child: ListTile(
|
|
leading: const Icon(
|
|
Icons.translate_rounded,
|
|
color: Color(0xFFFFBC65),
|
|
),
|
|
title: Text(l10n.appLanguage),
|
|
subtitle: Text(l10n.language),
|
|
trailing: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
Localizations.localeOf(context).languageCode == 'zh'
|
|
? l10n.simplifiedChinese
|
|
: l10n.english,
|
|
style: const TextStyle(color: Color(0xFFFFB2A1), fontSize: 11),
|
|
),
|
|
const SizedBox(width: 4),
|
|
const Icon(Icons.chevron_right_rounded, size: 18),
|
|
],
|
|
),
|
|
onTap: () => logic.showLanguage(context),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
|
|
Widget _bottomNav(AppLocalizations l10n) => Container(
|
|
height: 63,
|
|
decoration: const BoxDecoration(
|
|
color: Color(0xFF0D0D11),
|
|
border: Border(top: BorderSide(color: Color(0xFF242329))),
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
children: [
|
|
_NavItem(
|
|
icon: Icons.play_circle_outline_rounded,
|
|
label: l10n.homeTab,
|
|
onTap: () => logic.act(
|
|
context,
|
|
MyPageAction.home,
|
|
embedded: widget.embedded,
|
|
onAction: widget.onAction,
|
|
),
|
|
),
|
|
_NavItem(
|
|
icon: Icons.explore_outlined,
|
|
label: l10n.discoverTab,
|
|
onTap: () => logic.act(
|
|
context,
|
|
MyPageAction.discover,
|
|
embedded: widget.embedded,
|
|
onAction: widget.onAction,
|
|
),
|
|
),
|
|
_NavItem(
|
|
icon: Icons.video_library_outlined,
|
|
label: l10n.myTab,
|
|
selected: true,
|
|
onTap: () {},
|
|
),
|
|
],
|
|
),
|
|
);
|
|
|
|
Widget _poster({required double width, required double height}) => ClipRRect(
|
|
borderRadius: BorderRadius.circular(7),
|
|
child: Image.asset(
|
|
widget.drama.posterAsset,
|
|
width: width,
|
|
height: height,
|
|
fit: BoxFit.cover,
|
|
),
|
|
);
|
|
}
|
|
|
|
class _NavItem extends StatelessWidget {
|
|
const _NavItem({
|
|
required this.icon,
|
|
required this.label,
|
|
required this.onTap,
|
|
this.selected = false,
|
|
});
|
|
|
|
final IconData icon;
|
|
final String label;
|
|
final VoidCallback onTap;
|
|
final bool selected;
|
|
|
|
@override
|
|
Widget build(BuildContext context) => InkWell(
|
|
onTap: onTap,
|
|
child: SizedBox(
|
|
width: 72,
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(
|
|
icon,
|
|
size: 21,
|
|
color: selected ? _orange : const Color(0xFFCAC4C7),
|
|
),
|
|
Text(
|
|
label,
|
|
style: TextStyle(
|
|
color: selected ? _orange : const Color(0xFFCAC4C7),
|
|
fontSize: 10,
|
|
fontWeight: FontWeight.w700,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
String _clock(Duration duration) {
|
|
final seconds = duration.inSeconds;
|
|
return '${(seconds ~/ 60).toString().padLeft(2, '0')}:${(seconds % 60).toString().padLeft(2, '0')}';
|
|
}
|
|
|
|
const _orange = Color(0xFFFF5B3D);
|