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-26 17:56:40 +08:00
1 parent ee4e573f4f
commit b291044acc
7 files changed
+164 -90
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/pages/player/player_view.dart
+55 -24
View File
@@ -142,11 +142,11 @@ class _PlayerPageState extends State<PlayerPage>
bool _presentationActive = false;
bool _leavingHandoff = false;
bool _preparingFullPlayer = false;
int? _loadingIndex;
int? _videoReadyIndex;
bool _loadingVisible = false;
bool _loadingRemoved = true;
bool _loadingFadeScheduled = false;
bool _loggedLoadingUiVisible = false;
final Set<String> _precachedPosterUrls = {};
/// 收藏切换后的本地增量：基准是详情快照，切换成功按服务端状态 ±1。
@@ -179,10 +179,16 @@ class _PlayerPageState extends State<PlayerPage>
initialUserWantsPlay: handoff?.sourceUserWantsPlay ?? true,
);
_pageController = logic.pages;
if (!widget.embedded) {
_loadingIndex = logic.session.currentIndex;
if (!widget.embedded &&
!logic.isEpisodeLocked(logic.session.currentEpisode)) {
_loadingVisible = true;
_loadingRemoved = false;
if (kDebugMode) {
debugPrint(
'[player-entry] phase=loading-shown-once '
'index=${logic.session.currentIndex}',
);
}
}
}
@@ -352,6 +358,15 @@ class _PlayerPageState extends State<PlayerPage>
notification.dragDetails != null) {
_swipeStartedAt = DateTime.now();
_swipePrewarmCaptured = false;
if (!widget.embedded && !_loadingRemoved) {
setState(() {
_loadingVisible = false;
_loadingRemoved = true;
});
if (kDebugMode) {
debugPrint('[player-entry] phase=loading-dismissed-on-swipe');
}
}
} else if (notification is ScrollUpdateNotification &&
!_swipePrewarmCaptured &&
notification.dragDetails != null) {
@@ -544,14 +559,12 @@ class _PlayerPageState extends State<PlayerPage>
final interactions = context.watch<InteractionController>();
final l10n = AppLocalizations.of(context)!;
final indices = logic.visibleIndices;
final currentIndex = logic.session.currentIndex;
if (!widget.embedded && _loadingIndex != currentIndex) {
_loadingIndex = currentIndex;
_videoReadyIndex = null;
_loadingVisible = true;
_loadingRemoved = false;
_loadingFadeScheduled = false;
}
final activePort = logic.session.active;
final activeVideo = activePort is VideoPlayerPort ? activePort : null;
final canWaitForVideoFrame =
activeVideo != null &&
activeVideo.controller.value.isInitialized &&
!activeVideo.controller.value.hasError;
final entryUnavailable =
logic.ticketError != null ||
logic.blockedEpisodeId != null ||
@@ -560,10 +573,10 @@ class _PlayerPageState extends State<PlayerPage>
if (!widget.embedded &&
!_loadingRemoved &&
!_loadingFadeScheduled &&
entryUnavailable) {
entryUnavailable &&
!canWaitForVideoFrame) {
_scheduleLoadingFade('entry-unavailable');
}
final activePort = logic.session.active;
if (!widget.embedded &&
!_loadingRemoved &&
!_loadingFadeScheduled &&
@@ -631,8 +644,17 @@ class _PlayerPageState extends State<PlayerPage>
pageController: _pageController,
slots: _renderSlots(indices),
onCurrentVideoVisible: _handleCurrentVideoVisible,
showNeighbors: widget.embedded || _loadingRemoved,
),
if (!widget.embedded && !_loadingRemoved)
Center(
child: IgnorePointer(
key: const Key('player-entry-loading-overlay'),
child: PlayerLoadingOverlay(
opacity: _loadingVisible ? 1 : 0,
onFadeEnd: _handleLoadingFadeEnd,
),
),
),
pageLayer,
],
);
@@ -675,14 +697,6 @@ class _PlayerPageState extends State<PlayerPage>
),
),
),
if (!widget.embedded && !_loadingRemoved)
Positioned.fill(
child: PlayerLoadingOverlay(
key: ValueKey('player-loading-${_loadingIndex ?? currentIndex}'),
opacity: _loadingVisible ? 1 : 0,
onFadeEnd: _handleLoadingFadeEnd,
),
),
],
);
final player = AnnotatedRegion<SystemUiOverlayStyle>(
@@ -717,7 +731,7 @@ class _PlayerPageState extends State<PlayerPage>
}
void _handleCurrentVideoVisible(int? index) {
if (!mounted) return;
if (!mounted || _loadingRemoved) return;
final currentIndex = logic.session.currentIndex;
if (index == null ||
index != currentIndex ||
@@ -733,6 +747,14 @@ class _PlayerPageState extends State<PlayerPage>
}
WidgetsBinding.instance.addPostFrameCallback((_) {
WidgetsBinding.instance.addPostFrameCallback((_) {
if (!mounted ||
_loadingRemoved ||
index != logic.session.currentIndex) {
return;
}
if (kDebugMode) {
debugPrint('[player-entry] phase=video-frame-painted index=$index');
}
_startLoadingFade(currentIndex);
});
});
@@ -938,11 +960,20 @@ class _PlayerPageState extends State<PlayerPage>
if (selected && videoReady) _logSwipeReveal();
final ready = !locked && (videoReady || port != null);
final theater = logic.pip || logic.pipPreparing;
final entryLoading = !widget.embedded && !_loadingRemoved;
if (kDebugMode && entryLoading && selected && !_loggedLoadingUiVisible) {
_loggedLoadingUiVisible = true;
debugPrint(
'[player-entry] phase=loading-ui-visible '
'index=$index top=1 rail=1 progress=1',
);
}
return Stack(
fit: StackFit.expand,
children: [
if (selected &&
!entryLoading &&
!locked &&
!theater &&
!ready &&
@@ -962,7 +993,7 @@ class _PlayerPageState extends State<PlayerPage>
),
),
// 票据三态之一：起播前正在向后端要签名地址
if (selected && !theater && logic.ticketLoading)
if (selected && !entryLoading && !theater && logic.ticketLoading)
const Center(
child: SizedBox.square(
dimension: _playerLoadingSize,
lib/pages/player/widgets/player_loading_overlay.dart
+20 -30
View File
@@ -17,36 +17,26 @@ class PlayerLoadingOverlay extends StatelessWidget {
@override
Widget build(BuildContext context) {
return IgnorePointer(
key: const Key('player-entry-loading-overlay'),
child: AnimatedOpacity(
opacity: opacity,
duration: const Duration(milliseconds: 140),
curve: Curves.easeOut,
onEnd: onFadeEnd,
child: ColoredBox(
color: AppColors.mediaBlack,
child: Center(
child: Container(
key: const Key('player-loading-surface'),
width: AppDimens.refreshIndicatorSize,
height: AppDimens.refreshIndicatorSize,
decoration: BoxDecoration(
color: AppColors.refreshIndicatorSurface,
borderRadius: BorderRadius.circular(
AppDimens.refreshIndicatorRadius,
),
),
alignment: Alignment.center,
child: const SizedBox.square(
dimension: AppDimens.refreshSpinnerSize,
child: CircularProgressIndicator(
key: Key('player-entry-loading'),
color: Colors.white,
strokeWidth: AppDimens.refreshSpinnerStroke,
),
),
),
return AnimatedOpacity(
opacity: opacity,
duration: const Duration(milliseconds: 140),
curve: Curves.easeOut,
onEnd: onFadeEnd,
child: Container(
key: const Key('player-loading-surface'),
width: AppDimens.refreshIndicatorSize,
height: AppDimens.refreshIndicatorSize,
decoration: BoxDecoration(
color: AppColors.refreshIndicatorSurface,
borderRadius: BorderRadius.circular(AppDimens.refreshIndicatorRadius),
),
alignment: Alignment.center,
child: const SizedBox.square(
dimension: AppDimens.refreshSpinnerSize,
child: CircularProgressIndicator(
key: Key('player-entry-loading'),
color: Colors.white,
strokeWidth: AppDimens.refreshSpinnerStroke,
),
),
),
lib/pages/player/widgets/player_overlay.dart
+1
View File
@@ -304,6 +304,7 @@ class PlayerPlaybackOverlay extends StatelessWidget {
thumbnailsUrl: data.episode.thumbnailsUrl,
episodeId: data.episode.id,
inactiveTrackColor: AppColors.inactiveTrack,
fallbackDuration: Duration(seconds: data.episode.durationSec),
onScrubStart: actions.onScrubStart,
onScrubEnd: actions.onScrubEnd,
onSeek: actions.onSeek,
lib/pages/player/widgets/player_render_stack.dart
+5 -9
View File
@@ -53,13 +53,11 @@ class PlayerRenderStack extends StatefulWidget {
required this.pageController,
required this.slots,
this.onCurrentVideoVisible,
this.showNeighbors = true,
});
final PageController pageController;
final Map<PlayerRenderSlotRole, PlayerRenderSlotData> slots;
final ValueChanged<int?>? onCurrentVideoVisible;
final bool showNeighbors;
@override
State<PlayerRenderStack> createState() => _PlayerRenderStackState();
@@ -117,13 +115,11 @@ class _PlayerRenderStackState extends State<PlayerRenderStack> {
: MediaQuery.sizeOf(context).height;
final pageOffset = _pageOffset();
final currentPage = _currentSlot.pagePosition ?? pageOffset;
final slots = widget.showNeighbors
? [
_slotData(PlayerRenderSlotRole.previous),
_slotData(PlayerRenderSlotRole.current),
_slotData(PlayerRenderSlotRole.next),
]
: [_slotData(PlayerRenderSlotRole.current)];
final slots = [
_slotData(PlayerRenderSlotRole.previous),
_slotData(PlayerRenderSlotRole.current),
_slotData(PlayerRenderSlotRole.next),
];
return Stack(
key: const Key('player-render-stack'),
fit: StackFit.expand,
lib/pages/player/widgets/seek_progress_bar.dart
+24 -4
View File
@@ -42,6 +42,7 @@ class SeekProgressBar extends StatefulWidget {
this.spriteAxisService,
this.episodeId,
this.thumbnailsUrl,
this.fallbackDuration = Duration.zero,
});
final ValueListenable<VideoPlayerValue>? valueListenable;
@@ -57,6 +58,7 @@ class SeekProgressBar extends StatefulWidget {
final SpriteThumbnailAxisService? spriteAxisService;
final String? episodeId;
final String? thumbnailsUrl;
final Duration fallbackDuration;
@override
State<SeekProgressBar> createState() => _SeekProgressBarState();
@@ -220,7 +222,10 @@ class _SeekProgressBarState extends State<SeekProgressBar> {
}
Widget _buildTrack(BuildContext context, VideoPlayerValue video) {
final total = video.duration.inMilliseconds;
final duration = video.duration > Duration.zero
? video.duration
: widget.fallbackDuration;
final total = duration.inMilliseconds;
final scrubbing = _dragging;
final loading = !widget.locked && !scrubbing && _buffering;
final enabled =
@@ -234,7 +239,7 @@ class _SeekProgressBarState extends State<SeekProgressBar> {
final fraction = _previewFraction.value ?? played;
final previewPosition = _previewFraction.value == null
? video.position
: seekPositionForFraction(fraction, video.duration);
: seekPositionForFraction(fraction, duration);
final showPreview =
scrubbing &&
widget.showTimes &&
@@ -248,11 +253,26 @@ class _SeekProgressBarState extends State<SeekProgressBar> {
final track = Column(
mainAxisSize: MainAxisSize.min,
children: [
if (widget.showTimes && !video.isInitialized)
Padding(
padding: const EdgeInsets.only(bottom: 2),
child: Text(
'00:00 / ${_format(duration)}',
key: const Key('player-progress-uninitialized-time'),
textAlign: TextAlign.center,
style: const TextStyle(
color: AppColors.onPrimary,
fontSize: 12,
fontWeight: FontWeight.w600,
height: 1.2,
),
),
),
if (widget.showTimes && scrubbing && !showPreview)
Padding(
padding: const EdgeInsets.only(bottom: 2),
child: Text(
'${_format(previewPosition)} / ${_format(video.duration)}',
'${_format(previewPosition)} / ${_format(duration)}',
textAlign: TextAlign.center,
style: const TextStyle(
color: AppColors.onPrimary,
@@ -350,7 +370,7 @@ class _SeekProgressBarState extends State<SeekProgressBar> {
thumbnailsUrl: widget.thumbnailsUrl,
episodeId: widget.episodeId!,
position: previewPosition,
duration: video.duration,
duration: duration,
),
),
],