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

fix(player): 修复拖动进度条时加载态闪烁

Browse Source
This commit is contained in:
Zhou Weidong committed 2026-10-21 10:24:34 +08:00
1 parent 72708630ba
commit 1993ff1102
5 files changed
+350 -13
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
+2
View File
@@ -1,5 +1,7 @@
// Author: fruit.com.cn
import 'dart:async';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
lib/pages/player/widgets/home_feed_overlay_parts.dart
+102 -9
View File
@@ -28,7 +28,36 @@ class _FeedProgressBar extends StatefulWidget {
}
class _FeedProgressBarState extends State<_FeedProgressBar> {
static const _bufferDebounce = Duration(milliseconds: 350);
double? _preview;
Timer? _bufferTimer;
bool _buffering = false;
@override
void initState() {
super.initState();
_attachSource();
}
@override
void didUpdateWidget(covariant _FeedProgressBar oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.controller != widget.controller) {
_detachSource(oldWidget.controller);
_bufferTimer?.cancel();
_bufferTimer = null;
_buffering = false;
_attachSource();
}
}
@override
void dispose() {
_detachSource(widget.controller);
_bufferTimer?.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
@@ -36,12 +65,16 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
builder: (context, constraints) {
final width = constraints.maxWidth;
final source = widget.controller;
final scrubbing = _preview != null;
final loading =
source == null ||
(!scrubbing && (!source.value.isInitialized || _buffering));
final track = source == null
? _loadingTrack()
: ValueListenableBuilder<VideoPlayerValue>(
valueListenable: source,
builder: (context, value, _) {
if (!value.isInitialized || value.isBuffering) {
if (!scrubbing && (!value.isInitialized || _buffering)) {
return _loadingTrack();
}
final total = value.duration.inMilliseconds;
@@ -56,20 +89,80 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
return GestureDetector(
key: const Key('home-feed-progress'),
behavior: HitTestBehavior.opaque,
onHorizontalDragStart: (details) {
widget.onScrubStart?.call();
_update(details.localPosition.dx / width);
},
onHorizontalDragUpdate: (details) =>
_update(details.localPosition.dx / width),
onHorizontalDragEnd: (_) => _commit(_preview),
onHorizontalDragCancel: () => setState(() => _preview = null),
onHorizontalDragStart: loading
? null
: (details) {
widget.onScrubStart?.call();
_update(details.localPosition.dx / width);
},
onHorizontalDragUpdate: loading
? null
: (details) => _update(details.localPosition.dx / width),
onHorizontalDragEnd: loading ? null : (_) => _commit(_preview),
onHorizontalDragCancel: loading
? null
: () => setState(() => _preview = null),
child: track,
);
},
);
}
void _attachSource() {
widget.controller?.addListener(_handleSourceChanged);
_syncBufferState(notify: false);
}
void _detachSource(ValueListenable<VideoPlayerValue>? source) {
source?.removeListener(_handleSourceChanged);
}
void _handleSourceChanged() => _syncBufferState();
void _syncBufferState({bool notify = true}) {
final source = widget.controller;
if (source == null) {
_bufferTimer?.cancel();
_bufferTimer = null;
_setBuffering(false, notify: notify);
return;
}
final value = source.value;
if (!value.isInitialized) {
_bufferTimer?.cancel();
_bufferTimer = null;
_setBuffering(true, notify: notify);
return;
}
if (!value.isBuffering) {
_bufferTimer?.cancel();
_bufferTimer = null;
_setBuffering(false, notify: notify);
return;
}
if (_buffering || _bufferTimer != null) return;
_bufferTimer = Timer(_bufferDebounce, () {
_bufferTimer = null;
final current = widget.controller;
if (!mounted ||
current != source ||
!current!.value.isInitialized ||
!current.value.isBuffering) {
return;
}
_setBuffering(true);
});
}
void _setBuffering(bool buffering, {bool notify = true}) {
if (_buffering == buffering) return;
if (!notify || !mounted) {
_buffering = buffering;
return;
}
setState(() => _buffering = buffering);
}
Widget _loadingTrack() {
final bottom = _lineCenterFromBottom - widget.height / 2;
return SizedBox(
lib/pages/player/widgets/seek_progress_bar.dart
+74 -2
View File
@@ -44,22 +44,94 @@ class SeekProgressBar extends StatefulWidget {
}
class _SeekProgressBarState extends State<SeekProgressBar> {
static const _bufferDebounce = Duration(milliseconds: 350);
final _previewFraction = ValueNotifier<double?>(null);
Timer? _bufferTimer;
bool _buffering = false;
@override
void initState() {
super.initState();
_attachSource();
}
@override
void didUpdateWidget(covariant SeekProgressBar oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.valueListenable != widget.valueListenable) {
_detachSource(oldWidget.valueListenable);
_previewFraction.value = null;
_bufferTimer?.cancel();
_bufferTimer = null;
_buffering = false;
_attachSource();
}
}
@override
void dispose() {
_detachSource(widget.valueListenable);
_bufferTimer?.cancel();
_previewFraction.dispose();
super.dispose();
}
void _attachSource() {
widget.valueListenable?.addListener(_handleSourceChanged);
_syncBufferState(notify: false);
}
void _detachSource(ValueListenable<VideoPlayerValue>? source) {
source?.removeListener(_handleSourceChanged);
}
void _handleSourceChanged() => _syncBufferState();
void _syncBufferState({bool notify = true}) {
final source = widget.valueListenable;
if (source == null) {
_bufferTimer?.cancel();
_bufferTimer = null;
_setBuffering(false, notify: notify);
return;
}
final value = source.value;
if (!value.isInitialized) {
_bufferTimer?.cancel();
_bufferTimer = null;
_setBuffering(true, notify: notify);
return;
}
if (!value.isBuffering) {
_bufferTimer?.cancel();
_bufferTimer = null;
_setBuffering(false, notify: notify);
return;
}
if (_buffering || _bufferTimer != null) return;
_bufferTimer = Timer(_bufferDebounce, () {
_bufferTimer = null;
final current = widget.valueListenable;
if (!mounted ||
current != source ||
!current!.value.isInitialized ||
!current.value.isBuffering) {
return;
}
_setBuffering(true);
});
}
void _setBuffering(bool buffering, {bool notify = true}) {
if (_buffering == buffering) return;
if (!notify || !mounted) {
_buffering = buffering;
return;
}
setState(() => _buffering = buffering);
}
Future<void> _finish(double fraction, Duration duration) async {
final source = widget.valueListenable;
_previewFraction.value = fraction;
@@ -93,7 +165,8 @@ class _SeekProgressBarState extends State<SeekProgressBar> {
Widget _buildTrack(BuildContext context, VideoPlayerValue video) {
final total = video.duration.inMilliseconds;
final loading = !video.isInitialized || video.isBuffering;
final scrubbing = _previewFraction.value != null;
final loading = !scrubbing && (!video.isInitialized || _buffering);
final enabled = video.isInitialized && total > 0 && widget.onSeek != null;
final played = total > 0
? (video.position.inMilliseconds / total).clamp(0.0, 1.0)
@@ -102,7 +175,6 @@ class _SeekProgressBarState extends State<SeekProgressBar> {
final previewPosition = _previewFraction.value == null
? video.position
: seekPositionForFraction(fraction, video.duration);
final scrubbing = !loading && _previewFraction.value != null;
final trackHeight = widget.compact
? (scrubbing ? 3.0 : 1.5)
: (scrubbing ? 4.0 : 3.0);
test/home/home_preview_layout_test.dart
+105
View File
@@ -291,6 +291,111 @@ void main() {
expect(opened, 1);
});
testWidgets('should_debounce_feed_loading_and_keep_track_while_scrubbing', (
tester,
) async {
final controller = ValueNotifier<VideoPlayerValue>(
const VideoPlayerValue(
duration: Duration(seconds: 100),
position: Duration(seconds: 10),
isInitialized: true,
),
);
addTearDown(controller.dispose);
await tester.pumpWidget(
MaterialApp(
theme: AppTheme.light(),
locale: const Locale('en'),
supportedLocales: AppLocalizations.supportedLocales,
localizationsDelegates: AppLocalizations.localizationsDelegates,
home: Builder(
builder: (context) => Scaffold(
body: HomeFeedOverlay(
l10n: AppLocalizations.of(context)!,
drama: const Drama(
id: 'debounce-drama',
title: 'Debounce Drama',
synopsis: 'synopsis',
posterUrl: '',
totalEpisodes: 8,
),
episode: const Episode(
id: 'debounce-episode',
number: 1,
title: 'Episode 1',
isFree: true,
),
controller: controller,
liked: false,
saved: false,
visible: true,
boosting: false,
onTogglePlay: () {},
onBoostStart: () {},
onBoostEnd: () {},
onLike: () {},
onSave: () {},
onComments: () {},
onShare: () {},
onDetail: () {},
onOpenFullPlayer: () {},
onMore: () {},
onSeek: (_) {},
),
),
),
),
);
await tester.pumpAndSettle();
controller.value = const VideoPlayerValue(
duration: Duration(seconds: 100),
position: Duration(seconds: 10),
isInitialized: true,
isBuffering: true,
);
await tester.pump(const Duration(milliseconds: 200));
expect(find.byKey(const Key('home-feed-progress-thumb')), findsOneWidget);
expect(find.byKey(const Key('progress-loading')), findsNothing);
await tester.pump(const Duration(milliseconds: 200));
expect(find.byKey(const Key('home-feed-progress-thumb')), findsNothing);
expect(find.byKey(const Key('progress-loading')), findsOneWidget);
controller.value = const VideoPlayerValue(
duration: Duration(seconds: 100),
position: Duration(seconds: 10),
isInitialized: true,
);
await tester.pump();
expect(find.byKey(const Key('home-feed-progress-thumb')), findsOneWidget);
final gesture = await tester.startGesture(
tester.getCenter(find.byKey(const Key('home-feed-progress'))),
);
await gesture.moveBy(const Offset(60, 0));
await tester.pump();
controller.value = const VideoPlayerValue(
duration: Duration(seconds: 100),
position: Duration(seconds: 10),
isInitialized: true,
isBuffering: true,
);
await tester.pump(const Duration(milliseconds: 400));
expect(find.byKey(const Key('home-feed-progress-thumb')), findsOneWidget);
expect(find.byKey(const Key('progress-loading')), findsNothing);
controller.value = const VideoPlayerValue(
duration: Duration(seconds: 100),
position: Duration(seconds: 10),
isInitialized: true,
);
await tester.pump();
await gesture.up();
await tester.pumpAndSettle();
});
testWidgets('should_show_refresh_spinner_until_refresh_finishes', (
tester,
) async {
test/playback/seek_progress_bar_test.dart
+67 -2
View File
@@ -34,7 +34,9 @@ void main() {
expect(find.byType(Slider), findsNothing);
});
testWidgets('should_switch_between_loading_track_and_slider', (tester) async {
testWidgets('should_debounce_buffering_before_showing_loading_track', (
tester,
) async {
final video = ValueNotifier<VideoPlayerValue>(
const VideoPlayerValue(
duration: Duration(seconds: 12),
@@ -56,9 +58,17 @@ void main() {
),
);
expect(find.byKey(const Key('progress-loading')), findsNothing);
expect(find.byType(Slider), findsOneWidget);
expect(find.textContaining('00:12'), findsNothing);
await tester.pump(const Duration(milliseconds: 200));
expect(find.byKey(const Key('progress-loading')), findsNothing);
expect(find.byType(Slider), findsOneWidget);
await tester.pump(const Duration(milliseconds: 200));
expect(find.byKey(const Key('progress-loading')), findsOneWidget);
expect(find.byType(Slider), findsNothing);
expect(find.textContaining('00:12'), findsNothing);
video.value = const VideoPlayerValue(
duration: Duration(seconds: 12),
@@ -71,6 +81,61 @@ void main() {
expect(find.byType(Slider), findsOneWidget);
});
testWidgets('should_keep_slider_while_scrubbing_during_buffering', (
tester,
) async {
final video = ValueNotifier<VideoPlayerValue>(
const VideoPlayerValue(
duration: Duration(seconds: 12),
position: Duration(seconds: 3),
isInitialized: true,
),
);
addTearDown(video.dispose);
await tester.pumpWidget(
MaterialApp(
home: Scaffold(
body: Center(
child: SizedBox(
width: 300,
child: SeekProgressBar(
valueListenable: video,
semanticsLabel: 'Seek video',
onSeek: (_) async {},
),
),
),
),
),
);
final gesture = await tester.startGesture(
tester.getCenter(find.byType(Slider)),
);
await gesture.moveBy(const Offset(60, 0));
await tester.pump();
video.value = const VideoPlayerValue(
duration: Duration(seconds: 12),
position: Duration(seconds: 5),
isInitialized: true,
isBuffering: true,
);
await tester.pump(const Duration(milliseconds: 400));
expect(find.byKey(const Key('progress-loading')), findsNothing);
expect(find.byType(Slider), findsOneWidget);
video.value = const VideoPlayerValue(
duration: Duration(seconds: 12),
position: Duration(seconds: 5),
isInitialized: true,
);
await tester.pump();
await gesture.up();
await tester.pumpAndSettle();
});
testWidgets(
'should_preview_while_dragging_and_seek_on_release_when_slider_is_horizontal',
(tester) async {