fix(player): 优化加载指示器与锁定进度条
This commit is contained in:
1 parent
7b068e8eb4
commit
623c184243
13 files changed
+393
-33
No files matched your search
@@ -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');
|
||||
|
||||
Reference in new issue
Block a user