From fd2ba0bf43ec7d1942139c9d450a87b362451353 Mon Sep 17 00:00:00 2001 From: Vicky <10212746+haifeng-jiang@user.noreply.gitee.com> Date: Fri, 30 Oct 2026 22:53:18 +0800 Subject: [PATCH] =?UTF-8?q?feat(player):=20=E9=87=8D=E5=81=9A=E6=92=AD?= =?UTF-8?q?=E6=94=BE=E9=A1=B5=E4=BF=A1=E6=81=AF=E5=B1=82=E7=BA=A7=E4=B8=8E?= =?UTF-8?q?=E4=BA=92=E5=8A=A8=E6=A0=8F=E7=82=B9=E5=87=BB=E5=8A=A8=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../player/widgets/expandable_synopsis.dart | 166 ++++++ .../player/widgets/home_feed_info_tags.dart | 110 ++++ .../player/widgets/home_feed_overlay.dart | 21 +- .../widgets/home_feed_recommend_panel.dart | 479 ++++++------------ .../player/widgets/interaction_rail.dart | 192 +++++-- .../widgets/interaction_rail_burst.dart | 88 ++++ lib/pages/player/widgets/player_overlay.dart | 8 +- .../player/widgets/player_overlay_parts.dart | 151 +----- test/home/feed_info_hierarchy_test.dart | 467 +++++++++++++++++ test/home/feed_types_alignment_test.dart | 254 ++++++++++ test/home/feed_watch_all_gradient_test.dart | 78 +++ test/player/expandable_synopsis_test.dart | 118 +++++ .../interaction_rail_asset_motion_test.dart | 171 +++++++ test/player/interaction_rail_motion_test.dart | 233 +++++++++ test/player/player_fullscreen_test.dart | 89 ++-- 15 files changed, 2074 insertions(+), 551 deletions(-) create mode 100644 lib/pages/player/widgets/expandable_synopsis.dart create mode 100644 lib/pages/player/widgets/home_feed_info_tags.dart create mode 100644 lib/pages/player/widgets/interaction_rail_burst.dart create mode 100644 test/home/feed_info_hierarchy_test.dart create mode 100644 test/home/feed_types_alignment_test.dart create mode 100644 test/home/feed_watch_all_gradient_test.dart create mode 100644 test/player/expandable_synopsis_test.dart create mode 100644 test/player/interaction_rail_asset_motion_test.dart create mode 100644 test/player/interaction_rail_motion_test.dart diff --git a/lib/pages/player/widgets/expandable_synopsis.dart b/lib/pages/player/widgets/expandable_synopsis.dart new file mode 100644 index 0000000..6936288 --- /dev/null +++ b/lib/pages/player/widgets/expandable_synopsis.dart @@ -0,0 +1,166 @@ +// Author: fruit.com.cn +// 职责：推荐流与播放页共用的简介样式、固定切换入口与高度过渡。 +import 'package:flutter/material.dart'; + +import '../../../core/theme/app_colors.dart'; +import '../../../l10n/app_localizations.dart'; + +const double _synopsisFont = 15; +const double _synopsisLineHeight = 1.4; +const int _collapsedSynopsisLines = 2; +const double _synopsisToggleWidthFraction = 0.55; +const double _synopsisToggleGap = 6; +const _synopsisMotion = Duration(milliseconds: 240); +const _synopsisStyle = TextStyle( + color: AppColors.overlaySecondary, + fontSize: _synopsisFont, + fontWeight: FontWeight.w400, + height: _synopsisLineHeight, +); +const _synopsisToggleStyle = TextStyle( + color: AppColors.textPrimary, + fontSize: _synopsisFont, + fontWeight: FontWeight.w400, + height: _synopsisLineHeight, +); + +/// 两行折叠的简介，展开与收起入口在右下共用同一占位。 +class ExpandableSynopsis extends StatefulWidget { + /// [keyPrefix] 区分页内标识，[expandedFooter] 仅在展开时展示。 + const ExpandableSynopsis({ + super.key, + required this.synopsis, + this.keyPrefix = 'home-feed', + this.expandedFooter, + }); + + /// 按当前语言获取的简介正文。 + final String synopsis; + + /// 当前页面的组件标识前缀。 + final String keyPrefix; + + /// 展开后附加的声明等内容。 + final Widget? expandedFooter; + + @override + State createState() => _ExpandableSynopsisState(); +} + +class _ExpandableSynopsisState extends State { + bool _expanded = false; + + @override + void didUpdateWidget(covariant ExpandableSynopsis oldWidget) { + super.didUpdateWidget(oldWidget); + if (oldWidget.synopsis != widget.synopsis) _expanded = false; + } + + @override + Widget build(BuildContext context) { + if (widget.synopsis.trim().isEmpty) return const SizedBox.shrink(); + final l10n = AppLocalizations.of(context)!; + return LayoutBuilder( + builder: (context, constraints) { + if (!_needsToggle(constraints.maxWidth)) return _body(); + return Row( + key: _key('layout'), + crossAxisAlignment: CrossAxisAlignment.end, + children: [ + Expanded( + child: GestureDetector( + behavior: HitTestBehavior.opaque, + onTap: _toggle, + child: _animatedBody(), + ), + ), + const SizedBox(width: _synopsisToggleGap), + ConstrainedBox( + constraints: BoxConstraints( + maxWidth: constraints.maxWidth * _synopsisToggleWidthFraction, + ), + child: IntrinsicWidth(child: _toggleButton(l10n)), + ), + ], + ); + }, + ); + } + + bool _needsToggle(double maxWidth) { + final painter = _painter(widget.synopsis, _synopsisStyle); + painter.layout(maxWidth: maxWidth); + final overflows = painter.didExceedMaxLines; + painter.dispose(); + return overflows; + } + + TextPainter _painter(String text, TextStyle style) => TextPainter( + text: TextSpan( + text: text, + style: DefaultTextStyle.of(context).style.merge(style), + ), + maxLines: _collapsedSynopsisLines, + textDirection: Directionality.of(context), + textScaler: MediaQuery.textScalerOf(context), + locale: Localizations.localeOf(context), + textHeightBehavior: DefaultTextStyle.of(context).textHeightBehavior, + ); + + Widget _animatedBody() { + if (MediaQuery.disableAnimationsOf(context)) return _body(); + return AnimatedSize( + key: _key('size'), + duration: _synopsisMotion, + curve: Curves.easeInOutCubic, + alignment: Alignment.topLeft, + child: _body(), + ); + } + + Key _key(String suffix) => Key('${widget.keyPrefix}-synopsis-$suffix'); + + Widget _body() { + final text = Text.rich( + TextSpan(text: widget.synopsis, style: _synopsisStyle), + key: _expanded ? _key('expanded') : Key('${widget.keyPrefix}-synopsis'), + style: _synopsisStyle, + maxLines: _expanded ? null : _collapsedSynopsisLines, + overflow: _expanded ? TextOverflow.clip : TextOverflow.ellipsis, + ); + if (!_expanded || widget.expandedFooter == null) return text; + return Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [text, widget.expandedFooter!], + ); + } + + Widget _toggleButton(AppLocalizations l10n) => Semantics( + button: true, + expanded: _expanded, + child: GestureDetector( + key: _key('more'), + behavior: HitTestBehavior.opaque, + onTap: _toggle, + child: IndexedStack( + index: _expanded ? 1 : 0, + alignment: Alignment.bottomRight, + children: [ + _toggleLabel(l10n.expandSynopsis), + _toggleLabel(l10n.showLess), + ], + ), + ), + ); + + Widget _toggleLabel(String label) => Text( + label, + maxLines: _collapsedSynopsisLines, + overflow: TextOverflow.ellipsis, + textAlign: TextAlign.right, + style: _synopsisToggleStyle, + ); + + void _toggle() => setState(() => _expanded = !_expanded); +} diff --git a/lib/pages/player/widgets/home_feed_info_tags.dart b/lib/pages/player/widgets/home_feed_info_tags.dart new file mode 100644 index 0000000..36cffb1 --- /dev/null +++ b/lib/pages/player/widgets/home_feed_info_tags.dart @@ -0,0 +1,110 @@ +// Author: fruit.com.cn +// 职责：推荐流纯文字标签与热搜入口，处理横向滚动和长文案。 +part of 'home_feed_recommend_panel.dart'; + +const double _tagGap = 6; +const double _searchFillAlpha = 0.1; +const double _searchInset = 10; +const double _searchVertical = 4; +const double _searchIcon = 14; +const double _searchIconGap = 4; +const double _searchRadius = 6; + +class _TagStrip extends StatelessWidget { + const _TagStrip({required this.chips}); + + final List chips; + + @override + Widget build(BuildContext context) { + return SingleChildScrollView( + key: const Key('home-feed-tags'), + scrollDirection: Axis.horizontal, + physics: const BouncingScrollPhysics(), + child: Row( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.baseline, + textBaseline: TextBaseline.alphabetic, + children: [ + for (var index = 0; index < chips.length; index++) ...[ + if (index > 0) const SizedBox(width: _tagGap), + chips[index], + ], + ], + ), + ); + } +} + +/// 热搜入口保留点击搜索，长语言文案省略而不挤占信息区。 +class _HotSearchPill extends StatelessWidget { + const _HotSearchPill({required this.label, required this.onTap}); + + final String label; + final VoidCallback onTap; + + @override + Widget build(BuildContext context) => GestureDetector( + key: const Key('home-feed-hot-search-pill'), + behavior: HitTestBehavior.opaque, + onTap: onTap, + child: Container( + padding: const EdgeInsets.symmetric( + horizontal: _searchInset, + vertical: _searchVertical, + ), + decoration: BoxDecoration( + color: AppColors.textPrimary.withValues(alpha: _searchFillAlpha), + borderRadius: BorderRadius.circular(_searchRadius), + ), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + const Icon( + Icons.search_rounded, + size: _searchIcon, + color: AppColors.textSecondary, + ), + const SizedBox(width: _searchIconGap), + Flexible( + child: Text( + label, + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: const TextStyle( + color: AppColors.textSecondary, + fontSize: _tagFont, + fontWeight: FontWeight.w500, + ), + ), + ), + const SizedBox(width: _searchIconGap), + const Icon( + Icons.chevron_right_rounded, + size: _searchIcon, + color: AppColors.textSecondary, + ), + ], + ), + ), + ); +} + +class _TagChip extends StatelessWidget { + const _TagChip({super.key, required this.label}); + + final String label; + + @override + Widget build(BuildContext context) => Text( + label, + maxLines: 1, + strutStyle: _metadataStrutStyle, + style: const TextStyle( + color: AppColors.overlaySecondary, + fontSize: _tagFont, + fontWeight: FontWeight.w500, + height: _metadataLineHeight, + ), + ); +} diff --git a/lib/pages/player/widgets/home_feed_overlay.dart b/lib/pages/player/widgets/home_feed_overlay.dart index 40fecd0..4331df2 100644 --- a/lib/pages/player/widgets/home_feed_overlay.dart +++ b/lib/pages/player/widgets/home_feed_overlay.dart @@ -1,4 +1,5 @@ // Author: fruit.com.cn +// 职责：推荐视频浮层的底部信息、互动栏、进度条与手势协调。 import 'dart:async'; @@ -27,10 +28,13 @@ const double _progressHitHeight = 16; const double _pageHorizontal = 20; const double _railRight = 14; const double _railGap = 12; +const double _railWidth = 56; +const double _infoWatchAllGap = 2; // 进度线贴着屏幕底部（线心距底 4pt），观看条底边只留 8pt，视觉上就是线上一根条。 const double _watchAllBottomInset = 8; -// 信息面板底边直接贴住观看条顶沿，中间不留缝。 -const double _bottomInfoInset = _watchAllBottomInset + homeFeedWatchAllHeight; +// 简介与观看条留出明确间距，展开后仍保留相同的底部留白。 +const double _bottomInfoInset = + _watchAllBottomInset + homeFeedWatchAllHeight + _infoWatchAllGap; const double _railBottomOffset = 40; const Duration _overlayFadeDuration = Duration(milliseconds: 120); const List _boostTextShadows = [ @@ -169,7 +173,7 @@ class _HomeFeedOverlayState extends State { // 否则拖拽 seek 的起点会被观看条吞掉。两块的可见区域（文字/进度线）互不遮挡。 Positioned( left: _pageHorizontal, - right: _pageHorizontal, + right: _railRight + _railGap + _railWidth, bottom: _watchAllBottomInset, child: AnimatedOpacity( duration: _overlayFadeDuration, @@ -224,9 +228,14 @@ class _HomeFeedOverlayState extends State { children: [ Expanded(child: _bottomInfo()), const SizedBox(width: _railGap), - Padding( - padding: const EdgeInsets.only(bottom: _railBottomOffset), - child: _rail(), + SizedBox( + width: _railWidth, + child: Padding( + padding: const EdgeInsets.only( + bottom: _railBottomOffset, + ), + child: _rail(), + ), ), ], ), diff --git a/lib/pages/player/widgets/home_feed_recommend_panel.dart b/lib/pages/player/widgets/home_feed_recommend_panel.dart index c42ffa0..9fdd14c 100644 --- a/lib/pages/player/widgets/home_feed_recommend_panel.dart +++ b/lib/pages/player/widgets/home_feed_recommend_panel.dart @@ -1,32 +1,47 @@ // Author: fruit.com.cn +// 职责：推荐视频底部标题、标签、集数、简介与观看全集入口。 import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; import '../../../core/data/models/drama.dart'; +import '../../../core/data/models/locale_text.dart'; import '../../../core/formatting/localized_content.dart'; import '../../../core/theme/app_colors.dart'; import '../../../l10n/app_localizations.dart'; -import '../../home/widgets/home_drama_classification.dart'; +import 'expandable_synopsis.dart'; import 'interaction_rail.dart'; -const double _seriesFont = 17; -const double _tagFont = 12; -const double _synopsisFont = 14; +part 'home_feed_info_tags.dart'; + +const double _seriesFont = 18; +const double _tagFont = 13; const double _watchAllHeight = 38; +const double _titleMetadataGap = 2; +const double _metadataSynopsisGap = 2; +const double _hotSearchBottomGap = 2; +const double _metadataGap = 8; +const int _maximumTags = 2; +const double _episodeFont = 14; +const double _episodeWidthFraction = 0.55; +const double _metadataLineHeight = 1.4; +const _metadataStrutStyle = StrutStyle( + fontSize: _episodeFont, + height: _metadataLineHeight, + forceStrutHeight: true, +); /// 观看条内部左右留白与圆角：外沿由 overlay 按页面边距对齐，内部不再重复内缩。 const double _watchAllInset = 12; -const double _watchAllRadius = 12; +const double _watchAllRadius = 6; +const double _watchAllFont = 16; +const _watchAllGradient = LinearGradient( + begin: Alignment.centerLeft, + end: Alignment.centerRight, + colors: [AppColors.mineStatShade, AppColors.brandRed, AppColors.vipButtonEnd], +); -/// 标题、标签、简介之间的行间距：底部信息本来就挤，留 4pt 够分层。 -const double _blockGap = 4; -const List _textShadows = [ - Shadow(color: AppColors.shadow, blurRadius: 6, offset: Offset(0, 1)), -]; -final RegExp _tagSplitter = RegExp(r'[,/、·]'); - -/// 通栏「观看完整剧集」半透明白底条高度，overlay 用它安排底部避让。 +/// 「观看完整剧集」渐变按钮高度，overlay 用它安排底部避让。 const double homeFeedWatchAllHeight = _watchAllHeight; /// 播放量紧凑展示（跟随语言）：zh 20万 / en 200K / id 200 rb。 @@ -56,15 +71,13 @@ class HomeFeedInfoPanel extends StatefulWidget { } class _HomeFeedInfoPanelState extends State { - bool _synopsisExpanded = false; - @override Widget build(BuildContext context) { final l10n = AppLocalizations.of(context)!; final dramaTitle = localizedDramaTitle(l10n, widget.drama); final synopsis = localizedDramaSynopsis(l10n, widget.drama).trim(); - final genres = _genreValues(Localizations.localeOf(context).languageCode); - final tags = _tagChips(l10n, genres); + final types = _typeLabels(Localizations.localeOf(context).languageCode); + final tags = _tagChips(types); return Column( key: const Key('home-feed-info-panel'), mainAxisSize: MainAxisSize.min, @@ -80,306 +93,108 @@ class _HomeFeedInfoPanelState extends State { ), onTap: widget.onOpenSearch!, ), - const SizedBox(height: 8), - ], - GestureDetector( - key: const Key('home-feed-series-name'), - behavior: HitTestBehavior.opaque, - onTap: widget.onOpenFullPlayer, - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - Flexible( - child: Text( - dramaTitle, - key: const Key('home-feed-series-title'), - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: const TextStyle( - color: AppColors.textPrimary, - fontSize: _seriesFont, - fontWeight: FontWeight.w400, - shadows: _textShadows, - ), - ), - ), - const SizedBox(width: 2), - const Icon( - Icons.chevron_right_rounded, - size: 18, - color: AppColors.textPrimary, - ), - ], - ), - ), - // 没有标签就整行跳过，不给标题和简介之间留空档。 - if (tags.isNotEmpty) ...[ - const SizedBox(height: _blockGap), - _tagRow(tags), + const SizedBox(height: _hotSearchBottomGap), ], + _title(dramaTitle), + const SizedBox(height: _titleMetadataGap), + _metadata(l10n, tags), if (synopsis.isNotEmpty) ...[ - const SizedBox(height: _blockGap), - _synopsis(l10n, synopsis), + const SizedBox(height: _metadataSynopsisGap), + ExpandableSynopsis( + key: ValueKey(widget.drama.id), + synopsis: synopsis, + ), ], ], ); } - List _tagChips(AppLocalizations l10n, List genres) { - return [ - if (isHotDrama(widget.drama)) - _TagChip( - key: const Key('home-feed-hot-badge'), - label: l10n.homeBadgeHot, - filled: true, + Widget _title(String dramaTitle) => GestureDetector( + key: const Key('home-feed-series-name'), + behavior: HitTestBehavior.opaque, + onTap: widget.onOpenFullPlayer, + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Flexible( + child: Text( + dramaTitle, + key: const Key('home-feed-series-title'), + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: const TextStyle( + color: AppColors.textPrimary, + fontSize: _seriesFont, + fontWeight: FontWeight.w400, + ), + ), ), - for (final genre in genres) - _TagChip(key: Key('home-feed-tag-$genre'), label: genre), + const SizedBox(width: 2), + const Icon( + Icons.chevron_right_rounded, + size: 18, + color: AppColors.textPrimary, + ), + ], + ), + ); + + List _tagChips(List types) { + return [ + for (final type in types) + _TagChip(key: Key('home-feed-tag-$type'), label: type), ]; } - Widget _tagRow(List chips) { - return SizedBox( - key: const Key('home-feed-tags'), - height: 22, - child: ListView.separated( - scrollDirection: Axis.horizontal, - physics: const BouncingScrollPhysics(), - shrinkWrap: true, - itemCount: chips.length, - separatorBuilder: (_, _) => const SizedBox(width: 6), - itemBuilder: (_, index) => chips[index], - ), - ); - } - - Widget _synopsis(AppLocalizations l10n, String synopsis) { - final prefix = l10n.feedEpisodePrefix(widget.episode.number); - final baseStyle = const TextStyle( - color: AppColors.textPrimary, - fontSize: _synopsisFont, - height: 1.3, - shadows: _textShadows, - ); - final span = TextSpan( - children: [ - TextSpan(text: prefix, style: baseStyle), - TextSpan( - text: ' | ', - style: baseStyle.copyWith( - color: AppColors.textPrimary.withValues(alpha: 0.45), - fontSize: _synopsisFont - 2, - fontWeight: FontWeight.w400, - ), - ), - TextSpan(text: synopsis, style: baseStyle), - ], - ); - if (_synopsisExpanded) { - return _expandedSynopsis(span, baseStyle, l10n); - } + Widget _metadata(AppLocalizations l10n, List tags) { return LayoutBuilder( builder: (context, constraints) { - final toggle = _synopsisToggle( - key: const Key('home-feed-synopsis-more'), - label: l10n.expandSynopsis, - padding: const EdgeInsets.only(left: 6), - ); - final painter = TextPainter( - text: span, + final episode = Text( + widget.drama.episodeCount > 0 + ? l10n.episodeOfTotal( + widget.episode.number, + widget.drama.episodeCount, + ) + : l10n.feedEpisodePrefix(widget.episode.number), + key: const Key('home-feed-episode-meta'), maxLines: 1, - textDirection: Directionality.of(context), - textScaler: MediaQuery.textScalerOf(context), - )..layout(maxWidth: constraints.maxWidth); - if (!painter.didExceedMaxLines) { - return Text.rich( - span, - key: const Key('home-feed-synopsis'), - maxLines: 1, - style: baseStyle, - ); - } - // 设计稿：单行省略号 + 行内固定「展开」。 - // 整行可点：真机上不必精确命中两个小字，点简介任意位置都能展开。 - return GestureDetector( - behavior: HitTestBehavior.opaque, - onTap: () => setState(() => _synopsisExpanded = true), - child: Row( - key: const Key('home-feed-synopsis-collapsed'), - // 顶对齐：文字位置不变，toggle 的 bottom 留白把触控区向下扩到空白处。 - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Expanded( - child: Text.rich( - span, - key: const Key('home-feed-synopsis'), - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: baseStyle, - ), - ), - const SizedBox(width: 2), - toggle, - ], + overflow: TextOverflow.ellipsis, + strutStyle: _metadataStrutStyle, + style: const TextStyle( + color: AppColors.textPrimary, + fontSize: _episodeFont, + height: _metadataLineHeight, ), ); + return Row( + key: const Key('home-feed-metadata'), + children: [ + if (tags.isNotEmpty) ...[ + Flexible(child: _TagStrip(chips: tags)), + const SizedBox(width: _metadataGap), + ], + ConstrainedBox( + constraints: BoxConstraints( + maxWidth: tags.isEmpty + ? constraints.maxWidth + : constraints.maxWidth * _episodeWidthFraction, + ), + child: episode, + ), + ], + ); }, ); } - Widget _expandedSynopsis( - InlineSpan span, - TextStyle style, - AppLocalizations l10n, - ) { - // 「收起」内联在简介最后一行末尾，避免独占一行导致多行简介与进度条间 - // 出现大片空白；垂直方向只留少量触控留白（仅撑高最后一行）。 - final expandedSpan = TextSpan( - style: style, - children: [ - span, - WidgetSpan( - alignment: PlaceholderAlignment.baseline, - baseline: TextBaseline.alphabetic, - child: _synopsisToggle( - key: const Key('home-feed-synopsis-more'), - label: l10n.showLess, - padding: const EdgeInsets.only(left: 8), - ), - ), - ], - ); - return Text.rich( - expandedSpan, - key: const Key('home-feed-synopsis-expanded'), - ); - } - - Widget _synopsisToggle({ - required Key key, - required String label, - required EdgeInsets padding, - }) { - return GestureDetector( - key: key, - // opaque + 留白扩大命中区；留白方向由调用方决定， - // 展开态不能加 top padding，否则「收起」距简介正文过远。 - behavior: HitTestBehavior.opaque, - onTap: () => setState(() => _synopsisExpanded = !_synopsisExpanded), - child: Padding( - padding: padding, - child: Text( - label, - style: const TextStyle( - color: AppColors.textPrimary, - fontSize: _synopsisFont, - fontWeight: FontWeight.w600, - shadows: _textShadows, - ), - ), - ), - ); - } - - List _genreValues(String languageCode) { - final localized = widget.drama.localizedTypeLabels(languageCode); - if (localized.isNotEmpty) return localized.take(3).toList(growable: false); - final result = []; - for (final value in [widget.drama.genre, widget.drama.category]) { - for (final part in value.split(_tagSplitter)) { - final tag = part.trim(); - if (tag.isEmpty || result.contains(tag)) continue; - result.add(tag); - } - } - return result.take(3).toList(growable: false); - } + List _typeLabels(String languageCode) => widget.drama.types + .take(_maximumTags) + .map((type) => localizedText(languageCode, '', type).trim()) + .where((label) => label.isNotEmpty) + .toList(growable: false); } -/// 热搜榜降级胶囊：🔍 共 xxx 人在看 ›（暂无榜单接口，点击跳搜索页）。 -class _HotSearchPill extends StatelessWidget { - const _HotSearchPill({required this.label, required this.onTap}); - - final String label; - final VoidCallback onTap; - - @override - Widget build(BuildContext context) { - return GestureDetector( - key: const Key('home-feed-hot-search-pill'), - behavior: HitTestBehavior.opaque, - onTap: onTap, - child: Container( - padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4), - decoration: BoxDecoration( - color: AppColors.textPrimary.withValues(alpha: 0.14), - borderRadius: BorderRadius.circular(6), - ), - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - const Icon( - Icons.search_rounded, - size: 15, - color: AppColors.textPrimary, - ), - const SizedBox(width: 5), - Text( - label, - maxLines: 1, - style: const TextStyle( - color: AppColors.textPrimary, - fontSize: 14, - fontWeight: FontWeight.w500, - ), - ), - const SizedBox(width: 2), - const Icon( - Icons.chevron_right_rounded, - size: 16, - color: AppColors.textPrimary, - ), - ], - ), - ), - ); - } -} - -/// 热剧红胶囊 / 类型深色半透明填充胶囊。 -class _TagChip extends StatelessWidget { - const _TagChip({super.key, required this.label, this.filled = false}); - - final String label; - final bool filled; - - @override - Widget build(BuildContext context) { - return Container( - padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2), - alignment: Alignment.center, - decoration: BoxDecoration( - color: filled - ? AppColors.brandRed - : AppColors.textPrimary.withValues(alpha: 0.2), - borderRadius: BorderRadius.circular(4), - ), - child: Text( - label, - maxLines: 1, - style: const TextStyle( - color: AppColors.textPrimary, - fontSize: _tagFont, - fontWeight: FontWeight.w500, - height: 1.2, - shadows: _textShadows, - ), - ), - ); - } -} - -/// 底部「观看完整剧集」条：浮在底部，不再铺满整屏宽度。 +/// 左侧「观看全集」条：与信息区等宽，居中文字避免与右侧互动栏争抢。 class HomeFeedWatchAllBar extends StatelessWidget { const HomeFeedWatchAllBar({ super.key, @@ -395,49 +210,43 @@ class HomeFeedWatchAllBar extends StatelessWidget { final l10n = AppLocalizations.of(context)!; return ClipRRect( borderRadius: BorderRadius.circular(_watchAllRadius), - child: Material( - key: const Key('home-feed-full-series-bg'), - color: AppColors.textPrimary.withValues(alpha: 0.15), - child: InkWell( - key: const Key('home-feed-full-series'), - onTap: onTap, - child: SizedBox( - height: _watchAllHeight, - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: _watchAllInset), - child: Row( - children: [ - const Icon( - Icons.movie_rounded, - size: 22, - color: AppColors.onPrimary, - ), - const SizedBox(width: 10), - Expanded( - child: Text( - l10n.watchFullSeries('${drama.episodeCount}'), - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: const TextStyle( - color: AppColors.textPrimary, - fontSize: 15, - fontWeight: FontWeight.w500, - ), - ), - ), - const Icon( - Icons.chevron_right_rounded, - size: 22, - color: AppColors.textPrimary, - ), - ], - ), - ), + child: DecoratedBox( + key: const Key('home-feed-full-series-gradient'), + decoration: const BoxDecoration(gradient: _watchAllGradient), + child: Material( + key: const Key('home-feed-full-series-bg'), + color: AppColors.transparent, + child: InkWell( + key: const Key('home-feed-full-series'), + onTap: onTap, + child: _content(l10n), ), ), ), ); } + + Widget _content(AppLocalizations l10n) => SizedBox( + width: double.infinity, + height: _watchAllHeight, + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: _watchAllInset), + child: Center( + child: Text( + l10n.homeWatchAll, + semanticsLabel: l10n.watchFullSeries('${drama.episodeCount}'), + textAlign: TextAlign.center, + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: const TextStyle( + color: AppColors.textPrimary, + fontSize: _watchAllFont, + fontWeight: FontWeight.w400, + ), + ), + ), + ), + ); } class HomeFeedActionRail extends StatelessWidget { @@ -468,7 +277,7 @@ class HomeFeedActionRail extends StatelessWidget { Widget build(BuildContext context) { final l10n = AppLocalizations.of(context)!; return InteractionRail( - itemGap: 12, + itemGap: interactionRailCompactGap, buttonSize: 48, iconSize: 36, countFontSize: 15, @@ -481,6 +290,7 @@ class HomeFeedActionRail extends StatelessWidget { count: favoriteCount, countKey: const Key('rail-save-count'), selected: saved, + animateTap: true, selectedColor: AppColors.brandRed, onTap: onSave, ), @@ -499,6 +309,7 @@ class HomeFeedActionRail extends StatelessWidget { count: likeCount, countKey: const Key('rail-like-count'), selected: liked, + animateTap: true, selectedColor: AppColors.brandRed, onTap: onLike, ), diff --git a/lib/pages/player/widgets/interaction_rail.dart b/lib/pages/player/widgets/interaction_rail.dart index 1b3f3ba..c3e9fcd 100644 --- a/lib/pages/player/widgets/interaction_rail.dart +++ b/lib/pages/player/widgets/interaction_rail.dart @@ -1,15 +1,44 @@ // Author: fruit.com.cn +// 职责：播放互动栏的图标、计数与不影响触控区域的点击反馈。 import 'package:flutter/material.dart'; import '../../../core/formatting/count_format.dart'; import '../../../core/theme/app_colors.dart'; +import 'interaction_rail_burst.dart'; const double _defaultButtonSize = 44; const double _defaultIconSize = 32; const double _defaultCountFont = 12; const double _defaultIconCountGap = 2; const double _defaultItemGap = 24; +const _tapDuration = Duration(milliseconds: 360); +const double _popScale = 1.34; +const double _cancelScale = 0.68; +const double _popWeight = 40; +const double _settleWeight = 60; +final _growTween = _tapTween(_popScale); +final _shrinkTween = _tapTween(_cancelScale); + +TweenSequence _tapTween(double target) => TweenSequence([ + TweenSequenceItem( + tween: Tween( + begin: 1.0, + end: target, + ).chain(CurveTween(curve: Curves.easeOutCubic)), + weight: _popWeight, + ), + TweenSequenceItem( + tween: Tween( + begin: target, + end: 1.0, + ).chain(CurveTween(curve: Curves.easeOutCubic)), + weight: _settleWeight, + ), +]); + +/// 首页与完整播放器互动项之间的紧凑间距。 +const double interactionRailCompactGap = 6; /// 互动栏单项：图标、计数与点击。 class InteractionRailItem { @@ -24,6 +53,7 @@ class InteractionRailItem { this.selected = false, this.selectedColor = AppColors.blue, this.mirrorIcon = false, + this.animateTap = false, }) : assert((asset == null) != (icon == null)); final Key key; @@ -38,6 +68,9 @@ class InteractionRailItem { /// 水平镜像图标（分享弯箭头用 reply 镜像得到）。 final bool mirrorIcon; + + /// 选中放大、取消缩小并显示周围纹路，计数和触控范围不参与缩放。 + final bool animateTap; } /// 播放页与首页 feed 共用的右侧互动栏：收藏/评论/喜欢/分享。 @@ -79,7 +112,7 @@ class InteractionRail extends StatelessWidget { } } -class _RailButton extends StatelessWidget { +class _RailButton extends StatefulWidget { const _RailButton({ required this.item, required this.buttonSize, @@ -94,50 +127,135 @@ class _RailButton extends StatelessWidget { final double countFontSize; final double iconCountGap; + @override + State<_RailButton> createState() => _RailButtonState(); +} + +class _RailButtonState extends State<_RailButton> + with SingleTickerProviderStateMixin { + late final AnimationController _motion; + Color _burstColor = AppColors.onPrimary; + bool _contracting = false; + + @override + void initState() { + super.initState(); + _motion = AnimationController(vsync: this, duration: _tapDuration); + } + + @override + void didChangeDependencies() { + super.didChangeDependencies(); + if (MediaQuery.disableAnimationsOf(context)) _motion.reset(); + } + + @override + void dispose() { + _motion.dispose(); + super.dispose(); + } + @override Widget build(BuildContext context) { - final tint = item.selected ? item.selectedColor : AppColors.onPrimary; return Column( - key: item.key, + key: widget.item.key, mainAxisSize: MainAxisSize.min, children: [ SizedBox.square( - dimension: buttonSize, - child: IconButton( - onPressed: item.onTap, - padding: EdgeInsets.zero, - icon: item.asset != null - ? Image.asset( - item.asset!, - width: iconSize, - height: iconSize, - fit: BoxFit.contain, - color: tint, - colorBlendMode: BlendMode.srcIn, - ) - : Transform.flip( - flipX: item.mirrorIcon, - child: Icon(item.icon, size: iconSize, color: tint), - ), - ), - ), - SizedBox(height: iconCountGap), - Text( - item.count == null ? item.label : formatInteractionCount(item.count!), - key: item.countKey, - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: TextStyle( - color: AppColors.onPrimary, - height: 1, - fontSize: countFontSize, - fontWeight: FontWeight.w600, - shadows: const [ - Shadow(blurRadius: 6, color: AppColors.mediaBlack), - ], - ), + dimension: widget.buttonSize, + child: widget.item.animateTap ? _animatedButton() : _button(_icon()), ), + SizedBox(height: widget.iconCountGap), + _count(), ], ); } + + void _onTap() { + if (widget.item.animateTap && !MediaQuery.disableAnimationsOf(context)) { + _contracting = widget.item.selected; + _burstColor = _contracting + ? AppColors.onPrimary + : widget.item.selectedColor; + _motion.forward(from: 0); + } + widget.item.onTap(); + } + + Widget _button(Widget icon) => IconButton( + onPressed: _onTap, + iconSize: widget.iconSize, + padding: EdgeInsets.zero, + style: IconButton.styleFrom( + overlayColor: AppColors.transparent, + shadowColor: AppColors.transparent, + elevation: 0, + splashFactory: NoSplash.splashFactory, + ), + icon: icon, + ); + + Widget _animatedButton() => AnimatedBuilder( + animation: _motion, + child: _icon(), + builder: (context, child) => Stack( + fit: StackFit.expand, + alignment: Alignment.center, + clipBehavior: Clip.none, + children: [ + _button( + Transform.scale( + scale: (_contracting ? _shrinkTween : _growTween).transform( + _motion.value, + ), + child: child, + ), + ), + if (_motion.isAnimating) + Positioned.fill( + child: RailTapBurst( + key: const Key('rail-tap-burst'), + progress: _motion.value, + color: _burstColor, + contracting: _contracting, + ), + ), + ], + ), + ); + + Widget _icon() { + final item = widget.item; + final tint = item.selected ? item.selectedColor : AppColors.onPrimary; + return item.asset != null + ? Image.asset( + item.asset!, + width: widget.iconSize, + height: widget.iconSize, + fit: BoxFit.contain, + color: tint, + colorBlendMode: BlendMode.srcIn, + ) + : Transform.flip( + flipX: item.mirrorIcon, + child: Icon(item.icon, size: widget.iconSize, color: tint), + ); + } + + Widget _count() { + final item = widget.item; + return Text( + item.count == null ? item.label : formatInteractionCount(item.count!), + key: item.countKey, + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: TextStyle( + color: AppColors.onPrimary, + height: 1, + fontSize: widget.countFontSize, + fontWeight: FontWeight.w600, + shadows: const [Shadow(blurRadius: 6, color: AppColors.mediaBlack)], + ), + ); + } } diff --git a/lib/pages/player/widgets/interaction_rail_burst.dart b/lib/pages/player/widgets/interaction_rail_burst.dart new file mode 100644 index 0000000..0f28a72 --- /dev/null +++ b/lib/pages/player/widgets/interaction_rail_burst.dart @@ -0,0 +1,88 @@ +// Author: fruit.com.cn +// 职责：绘制收藏点赞周围的紧凑双向短线，无圆环或阴影，不参与手势。 +import 'dart:math' as math; + +import 'package:flutter/material.dart'; + +const int _rayCount = 8; +const double _startProgress = 0.1; +const double _radiusStart = 0.34; +const double _radiusTravel = 0.14; +const double _rayLength = 0.07; +const double _strokeFraction = 0.025; +const double _rayAlpha = 0.65; +const double _fullCircle = math.pi * 2; +const double _rayRotation = math.pi / _rayCount; + +/// 收藏/点赞的装饰反馈：选中外扩，取消收束。 +class RailTapBurst extends StatelessWidget { + /// [progress] 来自按钮的点击动画，不创建独立计时器。 + const RailTapBurst({ + super.key, + required this.progress, + required this.color, + required this.contracting, + }); + + final double progress; + final Color color; + final bool contracting; + + @override + Widget build(BuildContext context) => IgnorePointer( + child: CustomPaint( + painter: _RailBurstPainter( + progress: progress, + color: color, + contracting: contracting, + ), + ), + ); +} + +class _RailBurstPainter extends CustomPainter { + const _RailBurstPainter({ + required this.progress, + required this.color, + required this.contracting, + }); + + final double progress; + final Color color; + final bool contracting; + + @override + void paint(Canvas canvas, Size size) { + final phase = ((progress - _startProgress) / (1 - _startProgress)).clamp( + 0.0, + 1.0, + ); + if (phase == 0 || phase == 1) return; + final eased = Curves.easeOutCubic.transform(phase); + final travel = contracting ? 1 - eased : eased; + final base = size.shortestSide; + final radius = base * (_radiusStart + _radiusTravel * travel); + final alpha = math.sin(math.pi * phase); + final paint = Paint() + ..style = PaintingStyle.stroke + ..strokeCap = StrokeCap.round + ..strokeWidth = base * _strokeFraction + ..color = color.withValues(alpha: alpha * _rayAlpha); + final center = size.center(Offset.zero); + final length = base * _rayLength * (1 - phase); + for (var index = 0; index < _rayCount; index++) { + final angle = _fullCircle * index / _rayCount + _rayRotation; + canvas.drawLine( + center + Offset.fromDirection(angle, radius), + center + Offset.fromDirection(angle, radius + length), + paint, + ); + } + } + + @override + bool shouldRepaint(covariant _RailBurstPainter oldDelegate) => + oldDelegate.progress != progress || + oldDelegate.color != color || + oldDelegate.contracting != contracting; +} diff --git a/lib/pages/player/widgets/player_overlay.dart b/lib/pages/player/widgets/player_overlay.dart index 55ea07c..3f23148 100644 --- a/lib/pages/player/widgets/player_overlay.dart +++ b/lib/pages/player/widgets/player_overlay.dart @@ -11,6 +11,7 @@ import '../../../core/formatting/localized_content.dart'; import '../../../core/theme/app_colors.dart'; import '../../../core/theme/app_dimens.dart'; import '../../../l10n/app_localizations.dart'; +import 'expandable_synopsis.dart'; import 'player_center_toggle.dart'; import 'interaction_rail.dart'; import 'player_overlay_models.dart'; @@ -178,7 +179,7 @@ class PlayerPlaybackOverlay extends StatelessWidget { opacity: scrubbing ? 0 : 1, child: InteractionRail( key: const Key('player-interaction-rail'), - itemGap: 12, + itemGap: interactionRailCompactGap, buttonSize: 48, iconSize: 36, countFontSize: 15, @@ -190,6 +191,7 @@ class PlayerPlaybackOverlay extends StatelessWidget { count: data.favoriteCount, countKey: const Key('player-rail-save-count'), selected: data.saved, + animateTap: true, onTap: actions.onSave, ), InteractionRailItem( @@ -199,6 +201,7 @@ class PlayerPlaybackOverlay extends StatelessWidget { count: data.likeCount, countKey: const Key('player-rail-like-count'), selected: data.liked, + animateTap: true, selectedColor: AppColors.brandRed, onTap: actions.onLike, ), @@ -300,7 +303,6 @@ class PlayerPlaybackOverlay extends StatelessWidget { key: const Key('player-episode-synopsis'), l10n: data.l10n, drama: data.drama, - episodeNumber: data.episode.number, synopsis: synopsis, authorNote: data.authorNote, ), @@ -412,7 +414,7 @@ class PlayerPlaybackOverlay extends StatelessWidget { style: const TextStyle( color: AppColors.onPrimary, fontSize: 13.5, - fontWeight: FontWeight.w800, + fontWeight: FontWeight.w400, shadows: _playerTextShadows, ), ), diff --git a/lib/pages/player/widgets/player_overlay_parts.dart b/lib/pages/player/widgets/player_overlay_parts.dart index 2e01950..f06ffd7 100644 --- a/lib/pages/player/widgets/player_overlay_parts.dart +++ b/lib/pages/player/widgets/player_overlay_parts.dart @@ -118,14 +118,12 @@ class _EpisodeSynopsis extends StatefulWidget { super.key, required this.l10n, required this.drama, - required this.episodeNumber, required this.synopsis, required this.authorNote, }); final AppLocalizations l10n; final Drama drama; - final int episodeNumber; final String synopsis; final String authorNote; @@ -134,26 +132,13 @@ class _EpisodeSynopsis extends StatefulWidget { } class _EpisodeSynopsisState extends State<_EpisodeSynopsis> { - bool _expanded = false; String? _fullSynopsis; int _detailRequest = 0; bool _detailRequested = false; - /// 「第 n 集」、分隔符与简介正文共用同一套白字规格。 - static const TextStyle _lineStyle = TextStyle( - color: AppColors.onPrimary, - fontSize: 12, - fontWeight: FontWeight.w500, - height: 1.35, - shadows: _playerTextShadows, - ); - static const TextStyle _linkStyle = TextStyle( - color: AppColors.textPrimary, - fontSize: 12, - fontWeight: FontWeight.w600, - shadows: _playerTextShadows, - ); - static const int _collapsedMaxLines = 2; + static const int _authorNoteLines = 2; + static const double _authorNoteGap = 4; + static const double _authorNoteFont = 10; String get _synopsis => _fullSynopsis ?? widget.synopsis; @@ -173,7 +158,6 @@ class _EpisodeSynopsisState extends State<_EpisodeSynopsis> { return; } _fullSynopsis = null; - _expanded = false; _detailRequested = !widget.drama.detailLoaded; if (_detailRequested) unawaited(_loadFullSynopsis()); } @@ -200,123 +184,26 @@ class _EpisodeSynopsisState extends State<_EpisodeSynopsis> { @override Widget build(BuildContext context) { - return LayoutBuilder( - builder: (context, constraints) => _block(constraints.maxWidth), + return ExpandableSynopsis( + key: ValueKey(widget.drama.id), + keyPrefix: 'player', + synopsis: _synopsis, + expandedFooter: widget.authorNote.isEmpty ? null : _authorNote(), ); } - /// 与首页推荐 feed 的简介展开/收起保持一致： - /// 折叠单行省略 + 行尾「展开」（整行可点）；展开后内联「收起」。 - Widget _block(double maxWidth) { - final label = widget.l10n.episodeLabel(widget.episodeNumber); - final span = TextSpan( - style: _lineStyle, - children: [ - TextSpan(text: label, style: _lineStyle), - _separatorSpan(), - TextSpan(text: _synopsis, style: _lineStyle), - ], - ); - if (_expanded) return _expandedBlock(span); - - final painter = TextPainter( - text: span, - maxLines: 1, - textDirection: Directionality.of(context), - textScaler: MediaQuery.textScalerOf(context), - )..layout(maxWidth: maxWidth); - if (!painter.didExceedMaxLines) { - return Text.rich( - span, - key: const Key('player-synopsis'), - maxLines: 1, - style: _lineStyle, - ); - } - return GestureDetector( - behavior: HitTestBehavior.opaque, - onTap: () => setState(() => _expanded = true), - child: Row( - key: const Key('player-synopsis-collapsed'), - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Expanded( - child: Text.rich( - span, - key: const Key('player-synopsis'), - maxLines: 1, - overflow: TextOverflow.ellipsis, - style: _lineStyle, - ), - ), - const SizedBox(width: 2), - _toggle( - widget.l10n.expandSynopsis, - padding: const EdgeInsets.only(left: 6), - ), - ], + Widget _authorNote() => Padding( + padding: const EdgeInsets.only(top: _authorNoteGap), + child: Text( + widget.authorNote, + key: const Key('player-author-note'), + maxLines: _authorNoteLines, + overflow: TextOverflow.ellipsis, + style: const TextStyle( + color: AppColors.playerMuted, + fontSize: _authorNoteFont, + shadows: _playerTextShadows, ), - ); - } - - Widget _expandedBlock(InlineSpan span) { - final expandedSpan = TextSpan( - style: _lineStyle, - children: [ - span, - WidgetSpan( - alignment: PlaceholderAlignment.baseline, - baseline: TextBaseline.alphabetic, - child: _toggle( - widget.l10n.showLess, - padding: const EdgeInsets.only(left: 8), - ), - ), - ], - ); - return Column( - key: const Key('player-synopsis-expanded'), - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text.rich(expandedSpan, key: const Key('player-synopsis')), - if (widget.authorNote.isNotEmpty) ...[ - const SizedBox(height: 4), - Text( - widget.authorNote, - key: const Key('player-author-note'), - maxLines: _collapsedMaxLines, - overflow: TextOverflow.ellipsis, - style: const TextStyle( - color: AppColors.playerMuted, - fontSize: 10, - shadows: _playerTextShadows, - ), - ), - ], - ], - ); - } - - /// 分隔竖线：同字号 w400 + 45% 透明白，靠两侧空格留白。 - /// 必须用 TextSpan：WidgetSpan 占位盒的基线对齐会让第n集与简介错位。 - TextSpan _separatorSpan() => TextSpan( - text: ' | ', - style: _lineStyle.copyWith( - color: AppColors.onPrimary.withValues(alpha: 0.45), - fontWeight: FontWeight.w400, ), ); - - Widget _toggle(String label, {required EdgeInsets padding}) { - return GestureDetector( - key: const Key('player-synopsis-toggle'), - behavior: HitTestBehavior.opaque, - onTap: () => setState(() => _expanded = !_expanded), - child: Padding( - padding: padding, - child: Text(label, maxLines: 1, style: _linkStyle), - ), - ); - } } diff --git a/test/home/feed_info_hierarchy_test.dart b/test/home/feed_info_hierarchy_test.dart new file mode 100644 index 0000000..04140e1 --- /dev/null +++ b/test/home/feed_info_hierarchy_test.dart @@ -0,0 +1,467 @@ +// Author: fruit.com.cn +// 职责：验证推荐视频底部信息的无阴影、视觉层级与观看条留白。 +import 'package:flutter/material.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:fruitshorts/core/data/models/drama.dart'; +import 'package:fruitshorts/core/theme/app_colors.dart'; +import 'package:fruitshorts/core/theme/app_theme.dart'; +import 'package:fruitshorts/l10n/app_localizations.dart'; +import 'package:fruitshorts/pages/player/widgets/home_feed_overlay.dart'; + +const _drama = Drama( + id: 'info-hierarchy', + title: 'The Last Promise', + synopsis: + 'A hidden promise brings two families together after years apart. ' + 'Every secret leads them closer to an unexpected truth.', + titleLocales: {'id': 'Janji Terakhir'}, + synopsisLocales: { + 'id': + 'Sebuah janji tersembunyi mempertemukan kembali dua keluarga yang ' + 'telah lama terpisah. Setiap rahasia membawa mereka semakin dekat ' + 'pada kebenaran yang tidak pernah mereka bayangkan sebelumnya.', + }, + posterUrl: '', + genre: 'Romance', + category: 'Urban', + types: [ + {'zh': '甜宠', 'en': 'Romance', 'id': 'Romantis'}, + {'zh': '都市', 'en': 'Urban', 'id': 'Perkotaan'}, + ], + viewCount: 120000, + totalEpisodes: 24, +); +const _episode = Episode(id: 'info-2', number: 2, title: '', isFree: true); +const _gap = 2.0; +const _metadataGap = 8.0; +const _epsilon = 0.1; +const _wideWidth = 500.0; +const _maximumTags = 2; +const _shortTag = 'A'; +const _secondTag = 'B'; +const _extraTag = 'C'; +const _motionSample = Duration(milliseconds: 80); +const _watchRadius = 6.0; + +Future _pump( + WidgetTester tester, { + String language = 'en', + double width = 390, + double scale = 1, + Drama drama = _drama, +}) async { + tester.view.physicalSize = Size(width, 844); + tester.view.devicePixelRatio = 1; + addTearDown(tester.view.resetPhysicalSize); + addTearDown(tester.view.resetDevicePixelRatio); + await tester.pumpWidget( + MaterialApp( + theme: AppTheme.dark(), + locale: Locale(language), + localizationsDelegates: AppLocalizations.localizationsDelegates, + supportedLocales: AppLocalizations.supportedLocales, + home: Builder( + builder: (context) => MediaQuery( + data: MediaQuery.of( + context, + ).copyWith(textScaler: TextScaler.linear(scale)), + child: Scaffold( + body: HomeFeedOverlay( + l10n: AppLocalizations.of(context)!, + drama: drama, + episode: _episode, + controller: null, + locked: false, + liked: false, + saved: false, + visible: true, + boosting: false, + onLike: () {}, + onSave: () {}, + onComments: () {}, + onShare: () {}, + onDetail: () {}, + onOpenFullPlayer: () {}, + onOpenSearch: () {}, + onTogglePlay: () {}, + onBoostStart: () {}, + onBoostEnd: () {}, + onMore: () {}, + ), + ), + ), + ), + ), + ); +} + +Iterable _spanStyles(InlineSpan? span) sync* { + if (span is! TextSpan) return; + if (span.style != null) yield span.style!; + for (final child in span.children ?? const []) { + yield* _spanStyles(child); + } +} + +void _expectNoShadows(WidgetTester tester) { + final panel = find.byKey(const Key('home-feed-info-panel')); + for (final text in tester.widgetList( + find.descendant(of: panel, matching: find.byType(Text)), + )) { + final styles = [ + if (text.style != null) text.style!, + ..._spanStyles(text.textSpan), + ]; + for (final style in styles) { + expect(style.shadows ?? const [], isEmpty); + } + } +} + +void _expectWatchGap(WidgetTester tester) { + final panel = tester.getRect(find.byKey(const Key('home-feed-info-panel'))); + final watch = tester.getRect(find.byKey(const Key('home-feed-full-series'))); + expect(watch.top - panel.bottom, closeTo(_gap, _epsilon)); +} + +void _expectSynopsisTopGap(WidgetTester tester, Finder synopsis) { + final metadata = tester.getRect(find.byKey(const Key('home-feed-metadata'))); + expect( + tester.getRect(synopsis).top - metadata.bottom, + closeTo(_gap, _epsilon), + ); +} + +void _expectExpandedSynopsis(WidgetTester tester) { + final expanded = find.byKey(const Key('home-feed-synopsis-expanded')); + expect( + tester.widget(expanded).textSpan?.style?.color, + AppColors.overlaySecondary, + ); + _expectNoShadows(tester); + _expectWatchGap(tester); + _expectSynopsisTopGap(tester, expanded); +} + +void main() { + testWidgets('should_render_complete_chinese_toggle_when_theme_font_applies', ( + tester, + ) async { + await _pump(tester, language: 'zh', width: 320, scale: 1.3); + final toggle = find.byKey(const Key('home-feed-synopsis-more')); + final rect = tester.getRect(toggle); + for (final label in ['展开', '收起']) { + final rich = find.descendant(of: toggle, matching: find.byType(RichText)); + final paragraph = tester.widget(rich); + expect(paragraph.text.toPlainText(), label); + final painter = TextPainter( + text: paragraph.text, + textDirection: paragraph.textDirection ?? TextDirection.ltr, + textScaler: paragraph.textScaler, + locale: paragraph.locale, + maxLines: 1, + )..layout(); + expect( + tester.getSize(rich).width + _epsilon, + greaterThanOrEqualTo(painter.width), + ); + expect( + tester.getSize(rich).height + _epsilon, + greaterThanOrEqualTo(painter.height), + ); + painter.dispose(); + expect(tester.getRect(toggle), rect); + await tester.tap(toggle); + await tester.pumpAndSettle(); + } + expect(tester.takeException(), isNull); + }); + + testWidgets('should_use_neutral_text_when_rendering_type_tag', ( + tester, + ) async { + await _pump(tester); + final tag = tester.widget( + find.descendant( + of: find.byKey(const Key('home-feed-tag-Romance')), + matching: find.byType(Text), + ), + ); + expect(tag.style?.color, AppColors.overlaySecondary); + }); + + testWidgets('should_skip_motion_when_system_disables_animations', ( + tester, + ) async { + tester.platformDispatcher.accessibilityFeaturesTestValue = + const FakeAccessibilityFeatures(disableAnimations: true); + addTearDown(tester.platformDispatcher.clearAccessibilityFeaturesTestValue); + await _pump(tester); + expect(find.byKey(const Key('home-feed-synopsis-size')), findsNothing); + await tester.tap(find.byKey(const Key('home-feed-synopsis-more'))); + await tester.pumpAndSettle(); + _expectExpandedSynopsis(tester); + expect(tester.takeException(), isNull); + }); + + testWidgets('should_reverse_cleanly_when_toggling_during_motion', ( + tester, + ) async { + await _pump(tester); + final panel = find.byKey(const Key('home-feed-info-panel')); + final height = tester.getSize(panel).height; + final toggle = find.byKey(const Key('home-feed-synopsis-more')); + final position = tester.getRect(toggle); + for (final _ in [false, true]) { + await tester.tap(toggle); + await tester.pump(); + await tester.pump(_motionSample); + expect(tester.getRect(toggle), position); + } + await tester.pumpAndSettle(); + expect(find.byKey(const Key('home-feed-synopsis-expanded')), findsNothing); + expect(tester.getSize(panel).height, closeTo(height, _epsilon)); + _expectWatchGap(tester); + expect(tester.takeException(), isNull); + }); + + testWidgets('should_omit_toggle_when_synopsis_fits_two_lines', ( + tester, + ) async { + await _pump( + tester, + drama: const Drama( + id: 'short-synopsis', + title: 'Short', + synopsis: 'A short story.', + posterUrl: '', + ), + ); + expect(find.byKey(const Key('home-feed-synopsis')), findsOneWidget); + expect(find.byKey(const Key('home-feed-synopsis-more')), findsNothing); + _expectWatchGap(tester); + expect(tester.takeException(), isNull); + }); + + testWidgets('should_remove_tag_surfaces_when_rendering_types', ( + tester, + ) async { + await _pump(tester); + for (final key in ['home-feed-tag-Urban', 'home-feed-tag-Romance']) { + expect(find.byKey(Key(key)), findsOneWidget); + expect( + find.descendant( + of: find.byKey(Key(key)), + matching: find.byType(DecoratedBox), + ), + findsNothing, + ); + } + _expectNoShadows(tester); + }); + + testWidgets('should_use_small_radius_and_brand_gradient_when_watching_all', ( + tester, + ) async { + await _pump(tester); + final background = find.byKey(const Key('home-feed-full-series-bg')); + final decorated = tester.widget( + find.byKey(const Key('home-feed-full-series-gradient')), + ); + final decoration = decorated.decoration as BoxDecoration; + expect((decoration.gradient! as LinearGradient).colors, [ + AppColors.mineStatShade, + AppColors.brandRed, + AppColors.vipButtonEnd, + ]); + final gradient = decoration.gradient! as LinearGradient; + expect(gradient.begin, Alignment.centerLeft); + expect(gradient.end, Alignment.centerRight); + expect(tester.widget(find.text('Watch all')).style?.fontSize, 16); + expect( + tester.widget(find.text('Watch all')).style?.fontWeight, + FontWeight.w400, + ); + final clip = tester.widget( + find.ancestor(of: background, matching: find.byType(ClipRRect)).first, + ); + expect(clip.borderRadius, BorderRadius.circular(_watchRadius)); + }); + + for (final hot in [false, true]) { + testWidgets( + 'should_limit_tags_and_follow_them_with_episode_when_hot_is_$hot', + (tester) async { + await _pump( + tester, + width: _wideWidth, + drama: Drama( + id: 'compact-tags', + title: 'Compact', + synopsis: '', + posterUrl: '', + types: const [ + {'en': _shortTag}, + {'en': _secondTag}, + {'en': _extraTag}, + ], + isHot: hot, + totalEpisodes: _drama.totalEpisodes, + ), + ); + final strip = find.byKey(const Key('home-feed-tags')); + final row = tester.widget( + find.descendant(of: strip, matching: find.byType(Row)), + ); + expect(row.children.length, _maximumTags * 2 - 1); + final lastTag = find.byKey(const Key('home-feed-tag-$_secondTag')); + expect(lastTag, findsOneWidget); + expect(find.byKey(const Key('home-feed-tag-$_extraTag')), findsNothing); + expect(find.byKey(const Key('home-feed-hot-badge')), findsNothing); + final episode = find.byKey(const Key('home-feed-episode-meta')); + expect( + tester.getRect(episode).left - tester.getRect(lastTag).right, + closeTo(_metadataGap, _epsilon), + ); + _expectNoShadows(tester); + expect(tester.takeException(), isNull); + }, + ); + } + + testWidgets( + 'should_remove_text_shadows_and_quieten_metadata_when_collapsed', + (tester) async { + await _pump(tester); + _expectNoShadows(tester); + final title = tester.widget( + find.byKey(const Key('home-feed-series-title')), + ); + expect(title.style?.fontWeight, FontWeight.w400); + expect(title.style?.fontSize, 18); + expect(title.style?.color, AppColors.textPrimary); + final synopsis = tester.widget( + find.byKey(const Key('home-feed-synopsis')), + ); + expect(synopsis.style?.color, AppColors.overlaySecondary); + expect(synopsis.style?.fontSize, 15); + expect(synopsis.maxLines, 2); + final episode = tester.widget( + find.byKey(const Key('home-feed-episode-meta')), + ); + expect(episode.style?.color, AppColors.textPrimary); + expect(episode.style?.fontSize, 14); + expect(episode.data, 'Episode 2 / 24'); + final tag = tester.widget(find.text('Romance')); + expect(tag.style?.color, AppColors.overlaySecondary); + expect(tag.style?.color, synopsis.style?.color); + expect(tag.style?.fontSize, 13); + final hotSearch = tester.widget( + find.descendant( + of: find.byKey(const Key('home-feed-hot-search-pill')), + matching: find.byType(Text), + ), + ); + expect(hotSearch.style?.fontSize, 13); + _expectWatchGap(tester); + final titleRect = tester.getRect( + find.byKey(const Key('home-feed-series-name')), + ); + final metadata = tester.getRect( + find.byKey(const Key('home-feed-metadata')), + ); + final tags = tester.getRect(find.byKey(const Key('home-feed-tags'))); + final episodeRect = tester.getRect( + find.byKey(const Key('home-feed-episode-meta')), + ); + final description = tester.getRect( + find.byKey(const Key('home-feed-synopsis')), + ); + expect(metadata.top - titleRect.bottom, closeTo(_gap, _epsilon)); + expect(tags.center.dy, closeTo(episodeRect.center.dy, _epsilon)); + expect(description.top - metadata.bottom, closeTo(_gap, _epsilon)); + final panel = tester.getRect( + find.byKey(const Key('home-feed-info-panel')), + ); + final watch = tester.getRect( + find.byKey(const Key('home-feed-full-series')), + ); + final rail = tester.getRect( + find.byKey(const Key('home-feed-action-rail')), + ); + expect(watch.left, panel.left); + expect(watch.right, panel.right); + expect(watch.right, lessThan(rail.left)); + expect( + tester.getCenter(find.text('Watch all')).dx, + closeTo(watch.center.dx, _epsilon), + ); + }, + ); + + for (final language in ['zh', 'en', 'id']) { + testWidgets('should_keep_clear_gap_when_expanded_in_$language', ( + tester, + ) async { + await _pump(tester, language: language, width: 320, scale: 1.3); + final toggle = find.byKey(const Key('home-feed-synopsis-more')); + final toggleRect = tester.getRect(toggle); + final panel = find.byKey(const Key('home-feed-info-panel')); + final collapsedHeight = tester.getSize(panel).height; + final label = tester.widget( + find.descendant(of: toggle, matching: find.byType(Text)), + ); + expect(label.style?.fontWeight, FontWeight.w400); + expect(label.style?.fontSize, 15); + _expectWatchGap(tester); + _expectSynopsisTopGap( + tester, + find.byKey(const Key('home-feed-synopsis-layout')), + ); + await tester.tap(toggle); + await tester.pump(); + await tester.pump(_motionSample); + final growingHeight = tester.getSize(panel).height; + expect(tester.getRect(toggle), toggleRect); + await tester.pumpAndSettle(); + final expandedHeight = tester.getSize(panel).height; + expect(growingHeight, greaterThan(collapsedHeight)); + expect(growingHeight, lessThan(expandedHeight)); + _expectExpandedSynopsis(tester); + expect(tester.getRect(toggle), toggleRect); + await tester.tap(toggle); + await tester.pump(); + await tester.pump(_motionSample); + final shrinkingHeight = tester.getSize(panel).height; + expect(shrinkingHeight, greaterThan(collapsedHeight)); + expect(shrinkingHeight, lessThan(expandedHeight)); + expect(tester.getRect(toggle), toggleRect); + await tester.pumpAndSettle(); + expect(tester.getSize(panel).height, closeTo(collapsedHeight, _epsilon)); + _expectWatchGap(tester); + expect(tester.takeException(), isNull); + }); + } + + testWidgets('should_keep_episode_without_empty_tags_or_unknown_total', ( + tester, + ) async { + await _pump( + tester, + drama: const Drama( + id: 'minimal', + title: 'Minimal', + synopsis: '', + posterUrl: '', + ), + ); + final episode = tester.widget( + find.byKey(const Key('home-feed-episode-meta')), + ); + expect(episode.data, 'EP2'); + expect(find.byKey(const Key('home-feed-tags')), findsNothing); + expect(find.byKey(const Key('home-feed-synopsis')), findsNothing); + _expectWatchGap(tester); + expect(tester.takeException(), isNull); + }); +} diff --git a/test/home/feed_types_alignment_test.dart b/test/home/feed_types_alignment_test.dart new file mode 100644 index 0000000..5844d38 --- /dev/null +++ b/test/home/feed_types_alignment_test.dart @@ -0,0 +1,254 @@ +// Author: fruit.com.cn +// 职责：验证首页标签仅取 types 前两项，以及多语言/字号下与集数的文字基线对齐。 +import 'package:flutter/material.dart'; +import 'package:flutter/rendering.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:fruitshorts/core/data/models/drama.dart'; +import 'package:fruitshorts/core/theme/app_theme.dart'; +import 'package:fruitshorts/l10n/app_localizations.dart'; +import 'package:fruitshorts/pages/player/widgets/home_feed_recommend_panel.dart'; + +const _types = [ + {'zh': '都市', 'en': 'Urban', 'id': 'Perkotaan'}, + {'zh': '甜宠', 'en': 'Romance', 'id': 'Romantis'}, + {'zh': '复仇', 'en': 'Revenge', 'id': 'Balas Dendam'}, +]; +const _typedDrama = Drama( + id: 'types-alignment', + title: 'Types', + synopsis: '', + posterUrl: '', + types: _types, + genre: 'Legacy genre', + category: 'Legacy category', + isHot: true, + totalEpisodes: 24, +); +const _episode = Episode(id: 'types-2', number: 2, title: '', isFree: true); +const _tolerance = 0.1; +const _narrowWidth = 320.0; +const _regularWidth = 390.0; +const _largeScale = 1.3; +const _tagCount = 2; +const _longType = 'A very long urban romance type description'; +const _scrollDelta = Offset(-180, 0); + +Future _pump( + WidgetTester tester, { + Drama drama = _typedDrama, + String language = 'en', + double scale = 1, + double width = _narrowWidth, +}) async { + await tester.pumpWidget( + MaterialApp( + theme: AppTheme.dark(), + locale: Locale(language), + localizationsDelegates: AppLocalizations.localizationsDelegates, + supportedLocales: AppLocalizations.supportedLocales, + home: Builder( + builder: (context) => MediaQuery( + data: MediaQuery.of( + context, + ).copyWith(textScaler: TextScaler.linear(scale)), + child: Scaffold( + body: Align( + alignment: Alignment.bottomLeft, + child: SizedBox( + width: width, + child: HomeFeedInfoPanel( + drama: drama, + episode: _episode, + onDetail: () {}, + onOpenFullPlayer: () {}, + ), + ), + ), + ), + ), + ), + ), + ); +} + +double _baseline(WidgetTester tester, Finder text) { + final rich = find.descendant(of: text, matching: find.byType(RichText)); + final paragraph = tester.renderObject(rich); + final widget = tester.widget(rich); + final painter = + TextPainter( + text: widget.text, + textDirection: widget.textDirection ?? TextDirection.ltr, + textScaler: widget.textScaler, + strutStyle: widget.strutStyle, + textWidthBasis: widget.textWidthBasis, + textHeightBehavior: widget.textHeightBehavior, + locale: widget.locale, + maxLines: widget.maxLines, + )..layout( + minWidth: paragraph.constraints.minWidth, + maxWidth: paragraph.constraints.maxWidth, + ); + final distance = painter.computeLineMetrics().first.baseline; + painter.dispose(); + return tester.getTopLeft(rich).dy + distance; +} + +Finder _tag(String label) => find.byKey(Key('home-feed-tag-$label')); + +void main() { + testWidgets('should_use_first_two_types_when_drama_is_hot', (tester) async { + await _pump(tester); + final first = _tag('Urban'); + final second = _tag('Romance'); + expect(first, findsOneWidget); + expect(second, findsOneWidget); + expect(_tag('Revenge'), findsNothing); + expect(find.byKey(const Key('home-feed-hot-badge')), findsNothing); + expect(_tag(_typedDrama.genre), findsNothing); + expect(_tag(_typedDrama.category), findsNothing); + expect(tester.getRect(first).left, lessThan(tester.getRect(second).left)); + }); + + testWidgets('should_omit_legacy_fallback_when_types_are_empty', ( + tester, + ) async { + await _pump( + tester, + drama: const Drama( + id: 'empty-types', + title: '', + synopsis: '', + posterUrl: '', + genre: 'Legacy genre', + category: 'Legacy category', + categoryLocales: {'zh': '旧分类', 'en': 'Old category'}, + isHot: true, + ), + ); + expect(find.byKey(const Key('home-feed-tags')), findsNothing); + expect(find.byKey(const Key('home-feed-episode-meta')), findsOneWidget); + expect(find.byKey(const Key('home-feed-hot-badge')), findsNothing); + expect(tester.takeException(), isNull); + }); + + testWidgets('should_keep_only_existing_type_when_types_have_one_item', ( + tester, + ) async { + await _pump( + tester, + drama: const Drama( + id: 'one-type', + title: '', + synopsis: '', + posterUrl: '', + types: [ + {'zh': '都市', 'en': 'Urban'}, + ], + genre: 'Legacy genre', + isHot: true, + ), + ); + expect(_tag('Urban'), findsOneWidget); + expect(find.byKey(const Key('home-feed-hot-badge')), findsNothing); + expect(_tag('Legacy genre'), findsNothing); + }); + + testWidgets('should_not_fill_from_third_type_when_first_type_is_empty', ( + tester, + ) async { + await _pump( + tester, + drama: const Drama( + id: 'blank-type', + title: '', + synopsis: '', + posterUrl: '', + types: [ + {'zh': '', 'en': ''}, + {'zh': '都市', 'en': 'Urban'}, + {'zh': '甜宠', 'en': 'Romance'}, + ], + ), + ); + expect(_tag('Urban'), findsOneWidget); + expect(_tag('Romance'), findsNothing); + }); + + testWidgets('should_use_chinese_fallback_when_type_translation_is_absent', ( + tester, + ) async { + await _pump( + tester, + language: 'id', + drama: const Drama( + id: 'type-fallback', + title: '', + synopsis: '', + posterUrl: '', + types: [ + {'zh': '都市', 'en': 'Urban'}, + {'zh': '甜宠', 'id': 'Romantis'}, + ], + ), + ); + expect(_tag('都市'), findsOneWidget); + expect(_tag('Romantis'), findsOneWidget); + }); + + testWidgets('should_keep_episode_aligned_when_long_types_scroll', ( + tester, + ) async { + await _pump( + tester, + scale: _largeScale, + drama: const Drama( + id: 'long-types', + title: '', + synopsis: '', + posterUrl: '', + totalEpisodes: 24, + types: [ + {'en': _longType}, + {'en': 'Romance'}, + ], + ), + ); + final strip = find.byKey(const Key('home-feed-tags')); + final episode = find.byKey(const Key('home-feed-episode-meta')); + final episodeRect = tester.getRect(episode); + final tagRect = tester.getRect(_tag(_longType)); + expect(tagRect.right, greaterThan(tester.getRect(strip).right)); + await tester.drag(strip, _scrollDelta); + await tester.pumpAndSettle(); + expect(tester.getRect(_tag(_longType)).left, lessThan(tagRect.left)); + expect(tester.getRect(episode), episodeRect); + expect( + _baseline(tester, _tag(_longType)), + closeTo(_baseline(tester, episode), _tolerance), + ); + expect(tester.takeException(), isNull); + }); + + for (final language in ['zh', 'en', 'id']) { + for (final scale in [1.0, _largeScale]) { + for (final width in [_narrowWidth, _regularWidth]) { + testWidgets( + 'should_align_type_baselines_when_${language}_${scale}_$width', + (tester) async { + await _pump(tester, language: language, scale: scale, width: width); + final episode = find.byKey(const Key('home-feed-episode-meta')); + final expected = _baseline(tester, episode); + for (final type in _types.take(_tagCount)) { + expect( + _baseline(tester, _tag(type[language]!)), + closeTo(expected, _tolerance), + ); + } + expect(tester.takeException(), isNull); + }, + ); + } + } + } +} diff --git a/test/home/feed_watch_all_gradient_test.dart b/test/home/feed_watch_all_gradient_test.dart new file mode 100644 index 0000000..3343822 --- /dev/null +++ b/test/home/feed_watch_all_gradient_test.dart @@ -0,0 +1,78 @@ +// Author: fruit.com.cn +// 职责：检查观看全集按钮实际绘制像素，防止渐变只配置而不可见。 +import 'dart:typed_data'; +import 'dart:ui' as ui; + +import 'package:flutter/material.dart'; +import 'package:flutter/rendering.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:fruitshorts/core/data/models/drama.dart'; +import 'package:fruitshorts/l10n/app_localizations.dart'; +import 'package:fruitshorts/pages/player/widgets/home_feed_recommend_panel.dart'; + +const _boundaryKey = Key('watch-gradient-boundary'); +const _width = 280.0; +const _sampleInset = 16; +const _sampleY = 4; +const _rgbaChannels = 4; +const _minimumRedDelta = 50; +const _drama = Drama( + id: 'gradient', + title: 'Gradient', + synopsis: '', + posterUrl: '', +); + +Future _pumpButton(WidgetTester tester) => tester.pumpWidget( + MaterialApp( + localizationsDelegates: AppLocalizations.localizationsDelegates, + supportedLocales: AppLocalizations.supportedLocales, + home: Scaffold( + body: Center( + child: RepaintBoundary( + key: _boundaryKey, + child: SizedBox( + width: _width, + child: HomeFeedWatchAllBar(drama: _drama, onTap: () {}), + ), + ), + ), + ), + ), +); + +Color _sample(ByteData bytes, int width, int x) { + final offset = (_sampleY * width + x) * _rgbaChannels; + return Color.fromARGB( + bytes.getUint8(offset + 3), + bytes.getUint8(offset), + bytes.getUint8(offset + 1), + bytes.getUint8(offset + 2), + ); +} + +void main() { + testWidgets('should_paint_visible_red_gradient_instead_of_flat_fill', ( + tester, + ) async { + await _pumpButton(tester); + final boundary = tester.renderObject( + find.byKey(_boundaryKey), + ); + await tester.runAsync(() async { + final image = await boundary.toImage(); + final bytes = (await image.toByteData( + format: ui.ImageByteFormat.rawRgba, + ))!; + final left = _sample(bytes, image.width, _sampleInset); + final middle = _sample(bytes, image.width, image.width ~/ 2); + final right = _sample(bytes, image.width, image.width - _sampleInset); + image.dispose(); + expect(left.a, 1); + expect(right.a, 1); + expect((right.r - left.r) * 255, greaterThan(_minimumRedDelta)); + expect(left.g, lessThan(middle.g)); + expect(middle.g, lessThan(right.g)); + }); + }); +} diff --git a/test/player/expandable_synopsis_test.dart b/test/player/expandable_synopsis_test.dart new file mode 100644 index 0000000..f307808 --- /dev/null +++ b/test/player/expandable_synopsis_test.dart @@ -0,0 +1,118 @@ +// Author: fruit.com.cn +// 职责：验证共用简介的短文案、展开声明、内容更新与减少动画行为。 +import 'package:flutter/material.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:fruitshorts/core/theme/app_theme.dart'; +import 'package:fruitshorts/l10n/app_localizations.dart'; +import 'package:fruitshorts/pages/player/widgets/expandable_synopsis.dart'; + +const _width = 300.0; +const _shortCopy = 'A short story.'; +const _longCopy = + 'A hidden promise brings two families together after years apart. ' + 'Every secret leads them closer to an unexpected truth. ' + 'Their journey through the city changes everything they once believed.'; +const _toggle = Key('player-synopsis-more'); +const _expanded = Key('player-synopsis-expanded'); +const _collapsed = Key('player-synopsis'); +const _footer = Text('Author declaration', key: Key('test-author-note')); +const _motionSample = Duration(milliseconds: 80); + +Future _pump( + WidgetTester tester, { + String synopsis = _longCopy, + bool disableAnimations = false, +}) async { + await tester.pumpWidget( + MaterialApp( + theme: AppTheme.dark(), + locale: const Locale('en'), + localizationsDelegates: AppLocalizations.localizationsDelegates, + supportedLocales: AppLocalizations.supportedLocales, + home: Builder( + builder: (context) => MediaQuery( + data: MediaQuery.of( + context, + ).copyWith(disableAnimations: disableAnimations), + child: Scaffold( + body: Align( + alignment: Alignment.bottomLeft, + child: SizedBox( + width: _width, + child: ExpandableSynopsis( + synopsis: synopsis, + keyPrefix: 'player', + expandedFooter: _footer, + ), + ), + ), + ), + ), + ), + ), + ); +} + +void main() { + testWidgets('should_hide_toggle_when_synopsis_fits_two_lines', ( + tester, + ) async { + await _pump(tester, synopsis: _shortCopy); + expect(find.byKey(_toggle), findsNothing); + expect(tester.widget(find.byKey(_collapsed)).maxLines, 2); + expect(find.byKey(_footer.key!), findsNothing); + }); + + testWidgets('should_render_no_copy_when_synopsis_is_empty', (tester) async { + await _pump(tester, synopsis: ''); + expect(find.byKey(_collapsed), findsNothing); + expect(find.byKey(_toggle), findsNothing); + expect(find.byKey(_footer.key!), findsNothing); + }); + + testWidgets('should_only_show_author_note_when_synopsis_is_expanded', ( + tester, + ) async { + await _pump(tester); + final toggle = find.byKey(_toggle); + final toggleRect = tester.getRect(toggle); + expect(find.byKey(_footer.key!), findsNothing); + await tester.tap(toggle); + await tester.pumpAndSettle(); + expect(find.byKey(_expanded), findsOneWidget); + expect(find.byKey(_footer.key!), findsOneWidget); + expect(tester.getRect(toggle), toggleRect); + await tester.tap(toggle); + await tester.pumpAndSettle(); + expect(find.byKey(_collapsed), findsOneWidget); + expect(find.byKey(_footer.key!), findsNothing); + expect(tester.getRect(toggle), toggleRect); + }); + + testWidgets('should_collapse_again_when_synopsis_changes', (tester) async { + await _pump(tester); + await tester.tap(find.byKey(_toggle)); + await tester.pumpAndSettle(); + expect(find.byKey(_expanded), findsOneWidget); + await _pump(tester, synopsis: '$_longCopy $_shortCopy'); + await tester.pumpAndSettle(); + expect(find.byKey(_expanded), findsNothing); + expect(find.byKey(_collapsed), findsOneWidget); + expect(find.byKey(_footer.key!), findsNothing); + }); + + testWidgets('should_toggle_immediately_when_animations_are_disabled', ( + tester, + ) async { + await _pump(tester, disableAnimations: true); + await tester.pumpAndSettle(); + expect(find.byKey(const Key('player-synopsis-size')), findsNothing); + await tester.tap(find.byKey(_toggle)); + await tester.pump(); + expect(find.byKey(_expanded), findsOneWidget); + expect(find.byKey(_footer.key!), findsOneWidget); + final expandedRect = tester.getRect(find.byKey(_expanded)); + await tester.pump(_motionSample); + expect(tester.getRect(find.byKey(_expanded)), expandedRect); + }); +} diff --git a/test/player/interaction_rail_asset_motion_test.dart b/test/player/interaction_rail_asset_motion_test.dart new file mode 100644 index 0000000..db53462 --- /dev/null +++ b/test/player/interaction_rail_asset_motion_test.dart @@ -0,0 +1,171 @@ +// Author: fruit.com.cn +// 职责：验证真实主题及素材在同步状态刷新和保留状态重组后的点击绘制。 +import 'dart:async'; + +import 'package:flutter/material.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:fruitshorts/core/theme/app_colors.dart'; +import 'package:fruitshorts/core/theme/app_theme.dart'; +import 'package:fruitshorts/pages/player/widgets/interaction_rail.dart'; +import 'package:fruitshorts/pages/player/widgets/interaction_rail_burst.dart'; + +const _itemKey = Key('asset-like'); +const _burstKey = Key('rail-tap-burst'); +const _buttonSize = 48.0; +const _iconSize = 36.0; +const _motionFrame = Duration(milliseconds: 130); +const _asset = 'assets/icon/rail/rail_like.png'; +const _epsilon = 0.01; +const _rayLimit = 26.4; +const _rayLengthLimit = 3.5; +const _burstPhases = [0.2, 0.5, 0.8]; + +Finder get _button => find.descendant( + of: find.byKey(_itemKey), + matching: find.byType(IconButton), +); + +Finder get _image => + find.descendant(of: find.byKey(_itemKey), matching: find.byType(Image)); + +double _paintedWidth(WidgetTester tester) { + final icon = tester.renderObject(_image); + final rail = tester.renderObject(find.byKey(_itemKey)); + return MatrixUtils.transformRect( + icon.getTransformTo(rail), + Offset.zero & icon.size, + ).width; +} + +Future _pumpAssetRail( + WidgetTester tester, + ValueNotifier selected, +) => tester.pumpWidget( + MaterialApp( + theme: AppTheme.dark(), + home: Scaffold( + body: Center( + child: ValueListenableBuilder( + valueListenable: selected, + builder: (context, value, _) => InteractionRail( + buttonSize: _buttonSize, + iconSize: _iconSize, + items: [ + InteractionRailItem( + key: _itemKey, + label: 'Like', + asset: _asset, + selected: value, + selectedColor: AppColors.brandRed, + animateTap: true, + onTap: () => selected.value = !selected.value, + ), + ], + ), + ), + ), + ), + ), +); + +void main() { + testWidgets('should_not_show_ink_or_shadow_when_button_is_pressed', ( + tester, + ) async { + final selected = ValueNotifier(false); + addTearDown(selected.dispose); + await _pumpAssetRail(tester, selected); + final button = tester.widget(_button); + const pressed = {WidgetState.pressed}; + expect(button.style?.overlayColor?.resolve(pressed), AppColors.transparent); + expect(button.style?.shadowColor?.resolve(pressed), AppColors.transparent); + expect(button.style?.splashFactory, NoSplash.splashFactory); + expect(button.style?.elevation?.resolve(pressed), 0); + }); + + for (final contracting in [false, true]) { + testWidgets('should_keep_rays_compact_when_contracting_$contracting', ( + tester, + ) async { + for (final progress in _burstPhases) { + await tester.pumpWidget( + Directionality( + textDirection: TextDirection.ltr, + child: Center( + child: SizedBox.square( + dimension: _buttonSize, + child: RailTapBurst( + progress: progress, + color: AppColors.brandRed, + contracting: contracting, + ), + ), + ), + ), + ); + final paint = tester.renderObject(find.byType(CustomPaint)); + expect(paint, paintsExactlyCountTimes(#drawCircle, 0)); + expect(paint, paintsExactlyCountTimes(#drawLine, 8)); + expect(paint, paints..everything(_isCompactRay)); + } + }); + } + + testWidgets('should_paint_feedback_at_button_size_when_asset_is_tapped', ( + tester, + ) async { + final selected = ValueNotifier(false); + addTearDown(selected.dispose); + await _pumpAssetRail(tester, selected); + final touchRect = tester.getRect(_button); + await tester.tap(_button); + await tester.pump(); + await tester.pump(_motionFrame); + expect(selected.value, isTrue); + expect(_paintedWidth(tester), greaterThan(_iconSize)); + expect( + tester.getSize(find.byKey(_burstKey)), + const Size.square(_buttonSize), + ); + expect(tester.getRect(_button), touchRect); + await tester.pumpAndSettle(); + expect(_paintedWidth(tester), closeTo(_iconSize, _epsilon)); + expect(tester.takeException(), isNull); + }); + + testWidgets( + 'should_paint_opposite_directions_after_preserved_state_reassembly', + (tester) async { + final selected = ValueNotifier(false); + addTearDown(selected.dispose); + await _pumpAssetRail(tester, selected); + unawaited(tester.binding.reassembleApplication()); + await tester.pump(); + for (final cancelling in [false, true]) { + await tester.tap(_button); + await tester.pump(); + await tester.pump(_motionFrame); + expect( + _paintedWidth(tester), + cancelling ? lessThan(_iconSize) : greaterThan(_iconSize), + ); + final feedback = tester.widget(find.byKey(_burstKey)); + expect(feedback.contracting, cancelling); + expect(selected.value, !cancelling); + await tester.pumpAndSettle(); + expect(_paintedWidth(tester), closeTo(_iconSize, _epsilon)); + } + expect(tester.takeException(), isNull); + }, + ); +} + +bool _isCompactRay(Symbol method, List arguments) { + if (method != #drawLine) return true; + const center = Offset(_buttonSize / 2, _buttonSize / 2); + final start = arguments[0] as Offset; + final end = arguments[1] as Offset; + return (start - center).distance <= _rayLimit && + (end - center).distance <= _rayLimit && + (end - start).distance <= _rayLengthLimit; +} diff --git a/test/player/interaction_rail_motion_test.dart b/test/player/interaction_rail_motion_test.dart new file mode 100644 index 0000000..dc61ae7 --- /dev/null +++ b/test/player/interaction_rail_motion_test.dart @@ -0,0 +1,233 @@ +// Author: fruit.com.cn +// 职责：验证收藏点赞图标点击回弹、固定触控区与减少动画行为。 +import 'package:flutter/material.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:fruitshorts/core/theme/app_colors.dart'; +import 'package:fruitshorts/pages/player/widgets/interaction_rail.dart'; +import 'package:fruitshorts/pages/player/widgets/interaction_rail_burst.dart'; + +const _saveKey = Key('save'); +const _likeKey = Key('like'); +const _commentsKey = Key('comments'); +const _pressFrame = Duration(milliseconds: 30); +const _popFrame = Duration(milliseconds: 100); +const _buttonSize = 48.0; +const _compactGap = 6.0; +const _epsilon = 0.01; +const _cancelledMaximum = 0.8; +const _popMinimum = 1.22; +const _burstKey = Key('rail-tap-burst'); +const _directionFrame = Duration(milliseconds: 60); +const _directionFrames = 4; + +Future _pumpRail( + WidgetTester tester, { + required VoidCallback onTap, + bool selected = false, + bool reduceMotion = false, +}) => tester.pumpWidget( + MaterialApp( + home: MediaQuery( + data: MediaQueryData(disableAnimations: reduceMotion), + child: Scaffold( + body: Center( + child: InteractionRail( + itemGap: interactionRailCompactGap, + buttonSize: _buttonSize, + items: [ + InteractionRailItem( + key: _saveKey, + label: 'Save', + icon: Icons.bookmark_outline, + selected: selected, + animateTap: true, + onTap: onTap, + ), + InteractionRailItem( + key: _likeKey, + label: 'Like', + icon: Icons.favorite_outline, + selected: selected, + animateTap: true, + onTap: onTap, + ), + InteractionRailItem( + key: _commentsKey, + label: 'Comments', + icon: Icons.chat_bubble_outline, + onTap: onTap, + ), + ], + ), + ), + ), + ), + ), +); + +Finder _button(Key key) => + find.descendant(of: find.byKey(key), matching: find.byType(IconButton)); + +double _scale(WidgetTester tester, Key key) => tester + .widget( + find + .descendant(of: find.byKey(key), matching: find.byType(Transform)) + .first, + ) + .transform + .entry(0, 0); + +void _expectBurst(WidgetTester tester, Key key, bool cancelling) { + final burst = find.descendant( + of: find.byKey(key), + matching: find.byKey(_burstKey), + ); + expect(burst, findsOneWidget); + final feedback = tester.widget(burst); + expect(feedback.contracting, cancelling); + expect(feedback.color, cancelling ? AppColors.onPrimary : AppColors.brandRed); + final paint = find.descendant(of: burst, matching: find.byType(CustomPaint)); + expect(tester.renderObject(paint), paints..line()); + expect(tester.renderObject(paint), paintsExactlyCountTimes(#drawCircle, 0)); +} + +void main() { + testWidgets('should_keep_compact_spacing_when_rail_is_idle', (tester) async { + await _pumpRail(tester, onTap: () {}); + final save = tester.getRect(find.byKey(_saveKey)); + final like = tester.getRect(find.byKey(_likeKey)); + expect(like.top - save.bottom, closeTo(_compactGap, _epsilon)); + }); + + for (final key in [_saveKey, _likeKey]) { + for (final selected in [false, true]) { + testWidgets( + 'should_pop_icon_once_when_tapped_${key}_selected_$selected', + (tester) async { + var calls = 0; + await _pumpRail(tester, selected: selected, onTap: () => calls++); + final rect = tester.getRect(_button(key)); + final itemRect = tester.getRect(find.byKey(key)); + await tester.tap(_button(key)); + await tester.pump(); + await tester.pump(_pressFrame); + expect(_scale(tester, key), selected ? lessThan(1) : greaterThan(1)); + await tester.pump(_popFrame); + expect( + _scale(tester, key), + selected ? lessThan(_cancelledMaximum) : greaterThan(_popMinimum), + ); + _expectBurst(tester, key, selected); + expect(tester.getRect(_button(key)), rect); + expect(tester.getRect(find.byKey(key)), itemRect); + expect(rect.size, const Size.square(_buttonSize)); + expect(calls, 1); + for (var frame = 0; frame < _directionFrames; frame++) { + await tester.pump(_directionFrame); + expect( + _scale(tester, key), + selected ? lessThanOrEqualTo(1) : greaterThanOrEqualTo(1), + ); + } + await tester.pumpAndSettle(); + expect(find.byKey(_burstKey), findsNothing); + expect(_scale(tester, key), closeTo(1, _epsilon)); + expect(tester.takeException(), isNull); + }, + ); + } + } + + testWidgets( + 'should_restart_feedback_without_duplicate_callbacks_when_rapid', + (tester) async { + var calls = 0; + await _pumpRail(tester, onTap: () => calls++); + for (final _ in [false, true]) { + await tester.tap(_button(_likeKey)); + await tester.pump(); + await tester.pump(_popFrame); + } + expect(calls, 2); + await tester.pumpAndSettle(); + expect(_scale(tester, _likeKey), closeTo(1, _epsilon)); + expect(tester.takeException(), isNull); + }, + ); + + testWidgets('should_keep_callbacks_without_motion_when_reduced', ( + tester, + ) async { + var calls = 0; + await _pumpRail(tester, reduceMotion: true, onTap: () => calls++); + await tester.tap(_button(_saveKey)); + await tester.pump(_pressFrame); + expect(_scale(tester, _saveKey), 1); + expect(find.byKey(_burstKey), findsNothing); + expect(calls, 1); + expect(tester.takeException(), isNull); + }); + + testWidgets('should_keep_burst_intent_when_selection_updates_during_motion', ( + tester, + ) async { + var calls = 0; + void onTap() => calls++; + await _pumpRail(tester, onTap: onTap); + await tester.tap(_button(_likeKey)); + await tester.pump(); + await tester.pump(_popFrame); + await _pumpRail(tester, selected: true, onTap: onTap); + expect( + tester.widget(find.byKey(_burstKey)).contracting, + isFalse, + ); + await tester.tap(_button(_likeKey)); + await tester.pump(); + await tester.pump(_popFrame); + final feedback = tester.widget(find.byKey(_burstKey)); + expect(feedback.contracting, isTrue); + expect(feedback.color, AppColors.onPrimary); + expect(calls, 2); + await tester.pumpAndSettle(); + expect(find.byKey(_burstKey), findsNothing); + expect(tester.takeException(), isNull); + }); + + testWidgets('should_stop_burst_when_reduced_motion_changes_during_feedback', ( + tester, + ) async { + await _pumpRail(tester, onTap: () {}); + await tester.tap(_button(_saveKey)); + await tester.pump(); + await tester.pump(_popFrame); + expect(find.byKey(_burstKey), findsOneWidget); + await _pumpRail(tester, reduceMotion: true, onTap: () {}); + expect(find.byKey(_burstKey), findsNothing); + expect(_scale(tester, _saveKey), 1); + expect(tester.takeException(), isNull); + }); + + testWidgets('should_not_pop_comments_when_motion_is_not_enabled', ( + tester, + ) async { + var calls = 0; + await _pumpRail(tester, onTap: () => calls++); + await tester.tap(_button(_commentsKey)); + await tester.pump(_pressFrame); + expect(_scale(tester, _commentsKey), 1); + expect(find.byKey(_burstKey), findsNothing); + expect(calls, 1); + }); + + testWidgets('should_dispose_running_motion_when_rail_is_removed', ( + tester, + ) async { + await _pumpRail(tester, onTap: () {}); + await tester.tap(_button(_likeKey)); + await tester.pump(_pressFrame); + await tester.pumpWidget(const SizedBox.shrink()); + await tester.pumpAndSettle(); + expect(tester.takeException(), isNull); + }); +} diff --git a/test/player/player_fullscreen_test.dart b/test/player/player_fullscreen_test.dart index f9222b3..9b950f2 100644 --- a/test/player/player_fullscreen_test.dart +++ b/test/player/player_fullscreen_test.dart @@ -1271,6 +1271,22 @@ void main() { expect(find.byKey(const Key('player-interaction-rail')), findsOneWidget); }); + testWidgets('should_keep_episode_entry_regular_when_player_is_open', ( + tester, + ) async { + await _pumpApp(tester); + await _openSeriesPlayer(tester); + final entry = tester.widget( + find.descendant( + of: find.byKey(const Key('player-episodes-pill')), + matching: find.byType(Text), + ), + ); + expect(entry.style?.fontWeight, FontWeight.w400); + expect(entry.style?.fontSize, 13.5); + expect(entry.data, contains(' · ')); + }); + testWidgets('should_push_episodes_arrow_to_pill_right', (tester) async { // 宽屏下文案不会撑满胶囊，才能验证箭头是否被推到最右侧。 await _pumpApp(tester, size: const Size(900, 844)); @@ -1371,9 +1387,9 @@ void main() { final shareRect = tester.getRect( find.byKey(const Key('player-rail-share')), ); - expect(likeRect.top - saveRect.bottom, closeTo(12, 0.1)); - expect(commentsRect.top - likeRect.bottom, closeTo(12, 0.1)); - expect(shareRect.top - commentsRect.bottom, closeTo(12, 0.1)); + expect(likeRect.top - saveRect.bottom, closeTo(6, 0.1)); + expect(commentsRect.top - likeRect.bottom, closeTo(6, 0.1)); + expect(shareRect.top - commentsRect.bottom, closeTo(6, 0.1)); final saveButton = tester.widget( find.descendant( @@ -1405,7 +1421,9 @@ void main() { ); }); - testWidgets('should_toggle_synopsis_with_inline_text_button', (tester) async { + testWidgets('should_toggle_synopsis_at_fixed_corner_with_feed_motion', ( + tester, + ) async { final longCopy = Drama( id: 'long-copy-demo', title: 'Long Title', @@ -1428,7 +1446,7 @@ void main() { await _pumpApp(tester, catalog: FakeCatalogRepository(dramas: [longCopy])); await _openSeriesPlayer(tester, feedIndex: 0); - final toggle = find.byKey(const Key('player-synopsis-toggle')); + final toggle = find.byKey(const Key('player-synopsis-more')); final synopsis = find.byKey(const Key('player-synopsis')); expect( find.descendant(of: toggle, matching: find.text('More')), @@ -1443,17 +1461,15 @@ void main() { ?.color, AppColors.textPrimary, ); - expect(tester.widget(synopsis).maxLines, 1); + expect(tester.widget(synopsis).maxLines, 2); expect(tester.widget(synopsis).overflow, TextOverflow.ellipsis); - // 行尾「展开」与正文同一行，只留 6 的左边距。 - expect( - tester - .widget( - find.descendant(of: toggle, matching: find.byType(Padding)), - ) - .padding, - const EdgeInsets.only(left: 6), + final motion = tester.widget( + find.byKey(const Key('player-synopsis-size')), ); + expect(motion.duration, const Duration(milliseconds: 240)); + expect(motion.curve, Curves.easeInOutCubic); + final blockFinder = find.byKey(const Key('player-episode-synopsis')); + final collapsedHeight = tester.getSize(blockFinder).height; final synopsisRect = tester.getRect(synopsis); final toggleRect = tester.getRect(toggle); expect(toggleRect.left, greaterThan(synopsisRect.left)); @@ -1463,24 +1479,24 @@ void main() { ); await tester.tap(toggle); + await tester.pump(); + await tester.pump(const Duration(milliseconds: 80)); + final growingHeight = tester.getSize(blockFinder).height; + expect(growingHeight, greaterThan(collapsedHeight)); + expect(tester.getRect(toggle), toggleRect); await tester.pumpAndSettle(); expect( find.descendant(of: toggle, matching: find.text('Less')), findsOneWidget, ); expect( - tester.widget(find.byKey(const Key('player-synopsis'))).maxLines, + tester + .widget(find.byKey(const Key('player-synopsis-expanded'))) + .maxLines, isNull, ); - final lessRect = tester.getRect(toggle); - final textRect = tester.getRect(find.byKey(const Key('player-synopsis'))); - final block = tester.getRect( - find.byKey(const Key('player-episode-synopsis')), - ); - // 展开后「收起」内联在正文最后一行的行尾。 - expect(lessRect.top, greaterThanOrEqualTo(textRect.top)); - expect(lessRect.bottom, lessThanOrEqualTo(textRect.bottom + 1)); - expect(lessRect.right - block.right, lessThanOrEqualTo(2)); + expect(tester.getRect(toggle), toggleRect); + expect(tester.getSize(blockFinder).height, greaterThan(growingHeight)); await tester.tap(toggle); await tester.pumpAndSettle(); @@ -1488,29 +1504,24 @@ void main() { find.descendant(of: toggle, matching: find.text('More')), findsOneWidget, ); - expect(tester.widget(synopsis).maxLines, 1); + expect(tester.widget(synopsis).maxLines, 2); }); - testWidgets('should_share_one_text_style_across_label_and_synopsis', ( + testWidgets('should_match_feed_synopsis_without_episode_prefix', ( tester, ) async { await _pumpApp(tester); await _openSeriesPlayer(tester); - // 新 UI 把「第 n 集」与简介合并进同一个富文本，整行共用一套白字规格。 final line = tester.widget(find.byKey(const Key('player-synopsis'))); final style = line.style ?? const TextStyle(); - expect(style.fontSize, 12); - expect(style.fontWeight, FontWeight.w500); - expect(style.color, AppColors.onPrimary); - - final span = line.textSpan! as TextSpan; - final separator = span.children!.whereType().firstWhere( - (child) => (child.text ?? '').contains('|'), - ); - expect(separator.style?.fontSize, 12); - expect(separator.style?.fontWeight, FontWeight.w400); - expect(separator.style?.color, AppColors.onPrimary.withValues(alpha: 0.45)); + expect(style.fontSize, 15); + expect(style.fontWeight, FontWeight.w400); + expect(style.color, AppColors.overlaySecondary); + expect(style.shadows ?? [], isEmpty); + expect(line.textSpan!.toPlainText(), isNot(startsWith('Episode '))); + expect(line.textSpan!.toPlainText(), isNot(contains(' | '))); + expect(find.byKey(const Key('player-episode-heading')), findsOneWidget); }); testWidgets('should_fit_long_title_and_synopsis_at_320_width', ( @@ -1563,7 +1574,7 @@ void main() { tester.getRect(find.byKey(const Key('player-synopsis'))).right, lessThanOrEqualTo(320 - 14 - 54), ); - expect(synopsis.maxLines, 1); + expect(synopsis.maxLines, 2); expect(synopsis.overflow, TextOverflow.ellipsis); expect( tester.getRect(find.byKey(const Key('player-episodes-pill'))).right,