fix(player): 优化加载指示器与锁定进度条

This commit is contained in:
Zhou Weidong committed 2026-10-22 10:09:33 +08:00
1 parent 7b068e8eb4
commit 623c184243
13 files changed
+393 -33

No files matched your search

+19 -6
View File
@@ -42,6 +42,8 @@ import '../../core/data/repositories/playback_repository.dart';
part 'player_view_actions.dart';
const double _boostPlaybackSpeed = 2.0;
const double _playerLoadingSize = 24;
const double _playerLoadingStrokeWidth = 2;
class PlayerPage extends StatefulWidget {
const PlayerPage({
@@ -372,6 +374,7 @@ class _PlayerPageState extends State<PlayerPage>
final videoPort = port is VideoPlayerPort ? port : null;
final ready = videoPort?.controller.value.isInitialized ?? false;
final theater = logic.pip || logic.pipPreparing;
final locked = logic.session.isLocked || episode.locked;
return Stack(
fit: StackFit.expand,
@@ -400,9 +403,13 @@ class _PlayerPageState extends State<PlayerPage>
// 票据三态之一:起播前正在向后端要签名地址
if (selected && logic.ticketLoading)
const Center(
child: CircularProgressIndicator(
key: Key('player-ticket-loading'),
color: AppColors.blue,
child: SizedBox.square(
dimension: _playerLoadingSize,
child: CircularProgressIndicator(
key: Key('player-ticket-loading'),
color: AppColors.blue,
strokeWidth: _playerLoadingStrokeWidth,
),
),
),
// 票据三态之二:拿票失败(断网/服务异常)→ 可重试,不假装在加载
@@ -435,9 +442,13 @@ class _PlayerPageState extends State<PlayerPage>
),
if (selected && logic.session.loading)
const Center(
child: CircularProgressIndicator(
key: Key('player-session-loading'),
color: AppColors.blue,
child: SizedBox.square(
dimension: _playerLoadingSize,
child: CircularProgressIndicator(
key: Key('player-session-loading'),
color: AppColors.blue,
strokeWidth: _playerLoadingStrokeWidth,
),
),
),
if (selected && !ready && logic.session.error != null)
@@ -499,6 +510,7 @@ class _PlayerPageState extends State<PlayerPage>
drama: drama,
episode: episode,
controller: ready ? videoPort!.controller : null,
locked: locked,
visible: _chromeVisible,
boosting: _boosting,
onBoostStart: _startBoost,
@@ -552,6 +564,7 @@ class _PlayerPageState extends State<PlayerPage>
drama: drama,
episode: episode,
controller: ready ? videoPort!.controller : null,
locked: locked,
liked: interactions.isEpisodeLiked(episode.id),
likeCount:
interactions.episodeLikeCount(episode.id) ??
@@ -38,6 +38,7 @@ class HomeFeedOverlay extends StatefulWidget {
required this.drama,
required this.episode,
required this.controller,
required this.locked,
required this.liked,
required this.saved,
required this.visible,
@@ -64,6 +65,7 @@ class HomeFeedOverlay extends StatefulWidget {
final Drama drama;
final Episode episode;
final ValueListenable<VideoPlayerValue>? controller;
final bool locked;
final bool liked;
final int? likeCount;
final int? favoriteCount;
@@ -387,6 +389,7 @@ class _HomeFeedOverlayState extends State<HomeFeedOverlay> {
bottom: 0,
child: _FeedProgressBar(
controller: widget.controller,
locked: widget.locked,
height: _progressHeight,
hitHeight: _progressHitHeight,
onScrubStart: widget.onScrubStart,
@@ -6,11 +6,13 @@ const double _thumbSize = 6;
const double _thumbActiveSize = 14;
const double _trackActiveHeight = 6;
const double _lineCenterFromBottom = 8;
const Key _inactiveTrackKey = Key('home-feed-progress-inactive');
/// 整集条底部的进度线:20px 手势区内可点按/拖动 seek。
class _FeedProgressBar extends StatefulWidget {
const _FeedProgressBar({
required this.controller,
required this.locked,
required this.height,
required this.hitHeight,
this.onScrubStart,
@@ -18,6 +20,7 @@ class _FeedProgressBar extends StatefulWidget {
});
final ValueListenable<VideoPlayerValue>? controller;
final bool locked;
final double height;
final double hitHeight;
final VoidCallback? onScrubStart;
@@ -50,6 +53,16 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
_buffering = false;
_attachSource();
}
if (oldWidget.locked != widget.locked) {
_bufferTimer?.cancel();
_bufferTimer = null;
_buffering = false;
if (widget.locked) {
_preview = null;
} else {
_syncBufferState(notify: false);
}
}
}
@override
@@ -67,9 +80,12 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
final source = widget.controller;
final scrubbing = _preview != null;
final loading =
source == null ||
(!scrubbing && (!source.value.isInitialized || _buffering));
final track = source == null
!widget.locked &&
(source == null ||
(!scrubbing && (!source.value.isInitialized || _buffering)));
final track = widget.locked
? _inactiveTrack()
: source == null
? _loadingTrack()
: ValueListenableBuilder<VideoPlayerValue>(
valueListenable: source,
@@ -86,22 +102,23 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
return _track(_preview ?? played, width);
},
);
final interactive = !widget.locked && !loading;
return GestureDetector(
key: const Key('home-feed-progress'),
behavior: HitTestBehavior.opaque,
onHorizontalDragStart: loading
? null
: (details) {
onHorizontalDragStart: interactive
? (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),
}
: null,
onHorizontalDragUpdate: interactive
? (details) => _update(details.localPosition.dx / width)
: null,
onHorizontalDragEnd: interactive ? (_) => _commit(_preview) : null,
onHorizontalDragCancel: interactive
? () => setState(() => _preview = null)
: null,
child: track,
);
},
@@ -121,7 +138,7 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
void _syncBufferState({bool notify = true}) {
final source = widget.controller;
if (source == null) {
if (widget.locked || source == null) {
_bufferTimer?.cancel();
_bufferTimer = null;
_setBuffering(false, notify: notify);
@@ -180,12 +197,32 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
);
}
Widget _inactiveTrack() {
final bottom = _lineCenterFromBottom - widget.height / 2;
return SizedBox(
height: widget.hitHeight,
child: Stack(
children: [
Positioned(
left: 0,
right: 0,
bottom: bottom,
child: SizedBox(
height: widget.height,
child: ColoredBox(key: _inactiveTrackKey, color: Colors.white24),
),
),
],
),
);
}
void _update(double fraction) {
setState(() => _preview = fraction.clamp(0.0, 1.0).toDouble());
}
void _commit(double? fraction) {
if (fraction == null) return;
if (widget.locked || fraction == null) return;
final total = widget.controller?.value.duration.inMilliseconds ?? 0;
if (total > 0) {
widget.onSeek?.call(
@@ -2,15 +2,13 @@
import 'package:flutter/material.dart';
import '../../../core/theme/app_colors.dart';
/// 播放未就绪时沿进度轨道循环移动的加载高光。
class LoadingProgressTrack extends StatefulWidget {
const LoadingProgressTrack({
super.key = const Key('progress-loading'),
required this.height,
this.trackColor = Colors.white24,
this.highlightColor = AppColors.blue,
this.highlightColor = Colors.white,
});
final double height;
@@ -263,6 +263,7 @@ class PlayerPlaybackOverlay extends StatelessWidget {
semanticsLabel: data.l10n.seekVideo,
showTimes: true,
compact: true,
locked: data.locked,
inactiveTrackColor: Colors.white24,
onScrubStart: actions.onScrubStart,
onSeek: actions.onSeek,
@@ -23,6 +23,7 @@ class PlayerOverlayData {
required this.playbackSpeed,
required this.totalEpisodes,
required this.boosting,
required this.locked,
this.authorNote = '',
});
@@ -65,6 +66,9 @@ class PlayerOverlayData {
/// 是否处于长按加速态。
final bool boosting;
/// 当前剧集是否锁定。
final bool locked;
/// 作者声明;没有后端字段时为空。
final String authorNote;
}
@@ -9,6 +9,8 @@ import 'package:video_player/video_player.dart';
import '../../../core/theme/app_colors.dart';
import 'loading_progress_track.dart';
const Key _inactiveTrackKey = Key('progress-inactive');
/// Keeps seeks within the playable range so dragging to the edge does not
/// trigger the player's completion callback before playback resumes.
Duration seekPositionForFraction(double fraction, Duration duration) {
@@ -29,6 +31,7 @@ class SeekProgressBar extends StatefulWidget {
this.showTimes = true,
this.compact = false,
this.inactiveTrackColor = AppColors.border,
this.locked = false,
});
final ValueListenable<VideoPlayerValue>? valueListenable;
@@ -38,6 +41,7 @@ class SeekProgressBar extends StatefulWidget {
final bool showTimes;
final bool compact;
final Color inactiveTrackColor;
final bool locked;
@override
State<SeekProgressBar> createState() => _SeekProgressBarState();
@@ -67,6 +71,16 @@ class _SeekProgressBarState extends State<SeekProgressBar> {
_buffering = false;
_attachSource();
}
if (oldWidget.locked != widget.locked) {
_bufferTimer?.cancel();
_bufferTimer = null;
_buffering = false;
if (widget.locked) {
_previewFraction.value = null;
} else {
_syncBufferState(notify: false);
}
}
}
@override
@@ -90,7 +104,7 @@ class _SeekProgressBarState extends State<SeekProgressBar> {
void _syncBufferState({bool notify = true}) {
final source = widget.valueListenable;
if (source == null) {
if (widget.locked || source == null) {
_bufferTimer?.cancel();
_bufferTimer = null;
_setBuffering(false, notify: notify);
@@ -133,6 +147,7 @@ class _SeekProgressBarState extends State<SeekProgressBar> {
}
Future<void> _finish(double fraction, Duration duration) async {
if (widget.locked) return;
final source = widget.valueListenable;
_previewFraction.value = fraction;
try {
@@ -166,8 +181,13 @@ class _SeekProgressBarState extends State<SeekProgressBar> {
Widget _buildTrack(BuildContext context, VideoPlayerValue video) {
final total = video.duration.inMilliseconds;
final scrubbing = _previewFraction.value != null;
final loading = !scrubbing && (!video.isInitialized || _buffering);
final enabled = video.isInitialized && total > 0 && widget.onSeek != null;
final loading =
!widget.locked && !scrubbing && (!video.isInitialized || _buffering);
final enabled =
!widget.locked &&
video.isInitialized &&
total > 0 &&
widget.onSeek != null;
final played = total > 0
? (video.position.inMilliseconds / total).clamp(0.0, 1.0)
: 0.0;
@@ -203,7 +223,9 @@ class _SeekProgressBarState extends State<SeekProgressBar> {
),
SizedBox(
height: trackAreaHeight,
child: loading
child: widget.locked
? _inactiveTrack(trackHeight)
: loading
? Center(
child: LoadingProgressTrack(
height: trackHeight,
@@ -251,6 +273,19 @@ class _SeekProgressBarState extends State<SeekProgressBar> {
);
}
Widget _inactiveTrack(double height) {
return Center(
child: SizedBox(
width: double.infinity,
height: height,
child: ColoredBox(
key: _inactiveTrackKey,
color: widget.inactiveTrackColor,
),
),
);
}
String _format(Duration value) {
final minutes = value.inMinutes.remainder(60).toString().padLeft(2, '0');
final seconds = value.inSeconds.remainder(60).toString().padLeft(2, '0');