jianghaifeng/ReelShort
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(recommend): 稳定进度拖动与清屏状态

Browse Source
This commit is contained in:
Zhou Weidong committed 2026-10-22 20:01:54 +08:00
1 parent 76c4f1d411
commit 30b55afdd4
9 files changed
+339 -96
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/pages/player/widgets/home_feed_overlay.dart
+36 -12
View File
@@ -13,13 +13,12 @@ import '../../../core/theme/app_colors.dart';
import '../../../l10n/app_localizations.dart';
import 'home_feed_recommend_panel.dart';
import 'loading_progress_track.dart';
import 'scrub_preview_card.dart';
import 'seek_progress_bar.dart';
part 'home_feed_overlay_parts.dart';
const double _progressHeight = 2;
const double _progressHitHeight = 24;
const double _progressHitHeight = 28;
const double _pageHorizontal = 14;
const double _railRight = 8;
const double _railGap = 12;
@@ -60,6 +59,7 @@ class HomeFeedOverlay extends StatefulWidget {
this.onScrubEnd,
this.onScrubVisibilityChanged,
this.onSeek,
this.cancelScrubRequest = 0,
this.thumbnailService,
this.spriteAxisService,
});
@@ -92,6 +92,7 @@ class HomeFeedOverlay extends StatefulWidget {
final VoidCallback? onScrubEnd;
final ValueChanged<bool>? onScrubVisibilityChanged;
final ValueChanged<Duration>? onSeek;
final int cancelScrubRequest;
final PlaybackThumbnailService? thumbnailService;
final SpriteThumbnailAxisService? spriteAxisService;
@@ -101,6 +102,16 @@ class HomeFeedOverlay extends StatefulWidget {
class _HomeFeedOverlayState extends State<HomeFeedOverlay> {
bool _scrubbing = false;
bool _clearAfterScrub = false;
@override
void didUpdateWidget(covariant HomeFeedOverlay oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.cancelScrubRequest != widget.cancelScrubRequest) {
_scrubbing = false;
_clearAfterScrub = false;
}
}
@override
Widget build(BuildContext context) {
@@ -116,7 +127,7 @@ class _HomeFeedOverlayState extends State<HomeFeedOverlay> {
child: GestureDetector(
key: const Key('home-feed-gesture'),
behavior: HitTestBehavior.opaque,
onTap: widget.onTogglePlay,
onTap: _handleSurfaceTap,
onLongPressStart: (details) =>
_handleLongPressStart(details, constraints.maxWidth),
onLongPressEnd: (_) => widget.onBoostEnd(),
@@ -127,7 +138,7 @@ class _HomeFeedOverlayState extends State<HomeFeedOverlay> {
),
if (widget.boosting)
Positioned(left: 0, right: 0, bottom: 20, child: _boostHint())
else if (widget.visible && !_scrubbing)
else if (widget.visible && !_scrubbing && !_clearAfterScrub)
Positioned(
left: _pageHorizontal,
right: _railRight,
@@ -153,14 +164,10 @@ class _HomeFeedOverlayState extends State<HomeFeedOverlay> {
locked: widget.locked,
height: _progressHeight,
hitHeight: _progressHitHeight,
cancelScrubRequest: widget.cancelScrubRequest,
onScrubStart: _startScrub,
onScrubEnd: _endScrub,
onSeek: widget.onSeek,
thumbnailService: widget.thumbnailService,
spriteAxisService: widget.spriteAxisService,
thumbnailsUrl: widget.episode.thumbnailsUrl,
episodeId: widget.episode.id,
posterUrl: widget.drama.posterUrl,
),
),
],
@@ -169,17 +176,34 @@ class _HomeFeedOverlayState extends State<HomeFeedOverlay> {
}
void _startScrub() {
if (!_scrubbing) setState(() => _scrubbing = true);
if (!_scrubbing || _clearAfterScrub) {
setState(() {
_scrubbing = true;
_clearAfterScrub = false;
});
}
widget.onScrubVisibilityChanged?.call(true);
widget.onScrubStart?.call();
}
void _endScrub() {
if (_scrubbing) setState(() => _scrubbing = false);
widget.onScrubVisibilityChanged?.call(false);
if (_scrubbing || !_clearAfterScrub) {
setState(() {
_scrubbing = false;
_clearAfterScrub = true;
});
}
widget.onScrubEnd?.call();
}
void _handleSurfaceTap() {
if (_clearAfterScrub) {
setState(() => _clearAfterScrub = false);
widget.onScrubVisibilityChanged?.call(false);
}
widget.onTogglePlay();
}
void _handleLongPressStart(LongPressStartDetails details, double width) {
final third = width / 3;
final dx = details.localPosition.dx;
lib/pages/player/widgets/home_feed_overlay_parts.dart
+112 -56
View File
@@ -6,6 +6,9 @@ const double _thumbSize = 6;
const double _thumbActiveSize = 14;
const double _trackActiveHeight = 6;
const double _lineCenterFromBottom = 8;
const Duration _trackResizeDuration = Duration(milliseconds: 120);
const double _timeBubbleWidth = 96;
const double _timeBubbleMargin = 12;
const Key _inactiveTrackKey = Key('home-feed-progress-inactive');
/// 整集条底部的进度线：20px 手势区内可点按/拖动 seek。
@@ -15,28 +18,20 @@ class _FeedProgressBar extends StatefulWidget {
required this.locked,
required this.height,
required this.hitHeight,
this.cancelScrubRequest = 0,
this.onScrubStart,
this.onScrubEnd,
this.onSeek,
this.thumbnailService,
this.spriteAxisService,
this.thumbnailsUrl,
required this.episodeId,
required this.posterUrl,
});
final ValueListenable<VideoPlayerValue>? controller;
final bool locked;
final double height;
final double hitHeight;
final int cancelScrubRequest;
final VoidCallback? onScrubStart;
final VoidCallback? onScrubEnd;
final ValueChanged<Duration>? onSeek;
final PlaybackThumbnailService? thumbnailService;
final SpriteThumbnailAxisService? spriteAxisService;
final String? thumbnailsUrl;
final String episodeId;
final String posterUrl;
@override
State<_FeedProgressBar> createState() => _FeedProgressBarState();
@@ -63,15 +58,16 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
_bufferTimer?.cancel();
_bufferTimer = null;
_buffering = false;
widget.thumbnailService?.cancelPending();
_attachSource();
}
if (oldWidget.cancelScrubRequest != widget.cancelScrubRequest) {
_preview = null;
}
if (oldWidget.locked != widget.locked) {
_bufferTimer?.cancel();
_bufferTimer = null;
_buffering = false;
if (widget.locked) {
widget.thumbnailService?.cancelPending();
_preview = null;
} else {
_syncBufferState(notify: false);
@@ -83,7 +79,6 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
void dispose() {
_detachSource(widget.controller);
_bufferTimer?.cancel();
if (_preview != null) widget.thumbnailService?.cancelPending();
super.dispose();
}
@@ -123,10 +118,7 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
final previewPosition = _preview == null || video == null
? null
: seekPositionForFraction(_preview!, video.duration);
final showPreview =
previewPosition != null &&
widget.thumbnailService != null &&
widget.episodeId.isNotEmpty;
final showPreview = previewPosition != null;
return GestureDetector(
key: const Key('home-feed-progress'),
behavior: HitTestBehavior.opaque,
@@ -157,17 +149,10 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
track,
if (showPreview)
Positioned(
left: scrubPreviewLeft(
trackWidth: width,
fraction: _preview!,
),
left: _timeBubbleLeft(width, _preview!),
bottom: widget.hitHeight + 8,
child: ScrubPreviewCard(
service: widget.thumbnailService!,
spriteAxisService: widget.spriteAxisService,
thumbnailsUrl: widget.thumbnailsUrl,
episodeId: widget.episodeId,
posterUrl: widget.posterUrl,
child: _ScrubTimeBubble(
key: const Key('scrub-preview-time-bubble'),
position: previewPosition,
duration: video!.duration,
),
@@ -286,12 +271,10 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
Duration(milliseconds: (total * fraction.clamp(0.0, 1.0)).round()),
);
}
widget.thumbnailService?.cancelPending();
setState(() => _preview = null);
}
void _cancelPreview() {
widget.thumbnailService?.cancelPending();
setState(() => _preview = null);
}
@@ -299,11 +282,11 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
final dragging = _preview != null;
final trackHeight = dragging ? _trackActiveHeight : widget.height;
final size = dragging ? _thumbActiveSize : _thumbSize;
final left = (width * fraction - size / 2)
.clamp(0.0, width - size)
final thumbSlotLeft = (width * fraction - _thumbActiveSize / 2)
.clamp(0.0, width - _thumbActiveSize)
.toDouble();
final lineBottom = _lineCenterFromBottom - trackHeight / 2;
final thumbBottom = _lineCenterFromBottom - size / 2;
final trackSlotBottom = _lineCenterFromBottom - _trackActiveHeight / 2;
final thumbSlotBottom = _lineCenterFromBottom - _thumbActiveSize / 2;
return SizedBox(
height: widget.hitHeight,
child: Stack(
@@ -312,32 +295,53 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
Positioned(
left: 0,
right: 0,
bottom: lineBottom,
child: Container(
key: const Key('home-feed-progress-track'),
height: trackHeight,
color: AppColors.border,
bottom: trackSlotBottom,
child: SizedBox(
height: _trackActiveHeight,
child: Stack(
children: [
Align(
alignment: Alignment.centerLeft,
child: AnimatedContainer(
key: const Key('home-feed-progress-track'),
duration: _trackResizeDuration,
curve: Curves.easeOut,
width: width,
height: trackHeight,
color: AppColors.border,
),
),
Align(
alignment: Alignment.centerLeft,
child: AnimatedContainer(
duration: _trackResizeDuration,
curve: Curves.easeOut,
width: width * fraction,
height: trackHeight,
color: AppColors.blue,
),
),
],
),
),
),
Positioned(
left: 0,
bottom: lineBottom,
child: Container(
width: width * fraction,
height: trackHeight,
color: AppColors.blue,
),
),
Positioned(
left: left,
bottom: thumbBottom,
child: Container(
key: const Key('home-feed-progress-thumb'),
width: size,
height: size,
decoration: const BoxDecoration(
color: AppColors.onPrimary,
shape: BoxShape.circle,
left: thumbSlotLeft,
bottom: thumbSlotBottom,
child: SizedBox.square(
dimension: _thumbActiveSize,
child: Center(
child: AnimatedContainer(
key: const Key('home-feed-progress-thumb'),
duration: _trackResizeDuration,
curve: Curves.easeOut,
width: size,
height: size,
decoration: const BoxDecoration(
color: AppColors.onPrimary,
shape: BoxShape.circle,
),
),
),
),
),
@@ -345,4 +349,56 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
),
);
}
double _timeBubbleLeft(double width, double fraction) {
final maxLeft = width - _timeBubbleWidth - _timeBubbleMargin;
if (maxLeft < _timeBubbleMargin) {
return ((width - _timeBubbleWidth) / 2)
.clamp(0.0, width - _timeBubbleWidth)
.toDouble();
}
return (width * fraction - _timeBubbleWidth / 2)
.clamp(_timeBubbleMargin, maxLeft)
.toDouble();
}
}
class _ScrubTimeBubble extends StatelessWidget {
const _ScrubTimeBubble({
super.key,
required this.position,
required this.duration,
});
final Duration position;
final Duration duration;
@override
Widget build(BuildContext context) {
return Container(
width: _timeBubbleWidth,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
decoration: BoxDecoration(
color: AppColors.overlayMedium,
borderRadius: BorderRadius.circular(6),
),
child: Text(
'${_formatTime(position)} / ${_formatTime(duration)}',
key: const Key('scrub-preview-time'),
textAlign: TextAlign.center,
maxLines: 1,
style: const TextStyle(
color: AppColors.textPrimary,
fontSize: 12,
fontWeight: FontWeight.w600,
),
),
);
}
String _formatTime(Duration value) {
final minutes = value.inMinutes.remainder(60).toString().padLeft(2, '0');
final seconds = value.inSeconds.remainder(60).toString().padLeft(2, '0');
return '$minutes:$seconds';
}
}