mirror of
https://github.com/zarzet/SpotiFLAC-Mobile.git
synced 2026-09-29 21:02:09 +02:00
feat(player): animate artwork transitions and immersive lyrics
Enlarge player artwork and transport controls, morph the cover into the lyrics and queue header, and minimize the player back into the mini player. Keep the larger header actions in lyrics and queue only. Use larger lyrics with upper focus and progressive blur. Hide idle lyric controls after three seconds, restore them on interaction, and keep the normal player as the landscape entry page.
This commit is contained in:
zarzet
@@ -27,6 +27,22 @@ class MiniPlayer extends ConsumerStatefulWidget {
|
||||
}
|
||||
|
||||
class _MiniPlayerState extends ConsumerState<MiniPlayer> {
|
||||
final _surfaceKey = GlobalKey();
|
||||
final _artworkKey = GlobalKey();
|
||||
|
||||
Rect? _bounds(GlobalKey key) {
|
||||
final box = key.currentContext?.findRenderObject();
|
||||
if (box is! RenderBox || !box.attached || !box.hasSize) return null;
|
||||
final overlay = Navigator.of(
|
||||
context,
|
||||
rootNavigator: true,
|
||||
).overlay?.context.findRenderObject();
|
||||
return MatrixUtils.transformRect(
|
||||
box.getTransformTo(overlay),
|
||||
Offset.zero & box.size,
|
||||
);
|
||||
}
|
||||
|
||||
// Hides the bar in the frames between a swipe-dismiss and the stopped
|
||||
// service clearing the media item (a dismissed Dismissible must leave the
|
||||
// tree immediately). Playing the same track again shows the bar normally.
|
||||
@@ -69,6 +85,7 @@ class _MiniPlayerState extends ConsumerState<MiniPlayer> {
|
||||
controller.stop();
|
||||
},
|
||||
child: DecoratedBox(
|
||||
key: _surfaceKey,
|
||||
position: DecorationPosition.foreground,
|
||||
decoration: BoxDecoration(
|
||||
border: mornye
|
||||
@@ -85,10 +102,19 @@ class _MiniPlayerState extends ConsumerState<MiniPlayer> {
|
||||
: settingsGroupColor(context).withValues(alpha: 0.72),
|
||||
child: InkWell(
|
||||
onTap: () {
|
||||
Navigator.of(
|
||||
context,
|
||||
rootNavigator: true,
|
||||
).push(NowPlayingRoute());
|
||||
Navigator.of(context, rootNavigator: true).push(
|
||||
NowPlayingRoute(
|
||||
miniPlayerGeometry: mornye
|
||||
? () {
|
||||
if (!mounted) return null;
|
||||
final surface = _bounds(_surfaceKey);
|
||||
final artwork = _bounds(_artworkKey);
|
||||
if (surface == null || artwork == null) return null;
|
||||
return (surface: surface, artwork: artwork);
|
||||
}
|
||||
: null,
|
||||
),
|
||||
);
|
||||
},
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
@@ -108,6 +134,7 @@ class _MiniPlayerState extends ConsumerState<MiniPlayer> {
|
||||
Hero(
|
||||
tag: kNowPlayingArtworkHeroTag,
|
||||
child: ClipRRect(
|
||||
key: _artworkKey,
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
child: SizedBox(
|
||||
width: context.tokens.coverMini,
|
||||
|
||||
@@ -4,8 +4,8 @@ import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:spotiflac_android/l10n/l10n.dart';
|
||||
|
||||
/// Landscape keeps the cover in place while the right pane switches between
|
||||
/// lyrics, the queue, and controls revealed by a tap.
|
||||
/// Landscape opens on the player. Lyrics can hide their bottom actions until
|
||||
/// the user touches the player, while the cover and header stay in place.
|
||||
class MornyeLandscapePlayer extends StatefulWidget {
|
||||
const MornyeLandscapePlayer({
|
||||
super.key,
|
||||
@@ -15,6 +15,8 @@ class MornyeLandscapePlayer extends StatefulWidget {
|
||||
required this.queue,
|
||||
required this.controls,
|
||||
required this.volume,
|
||||
required this.page,
|
||||
required this.onPageChanged,
|
||||
});
|
||||
|
||||
final Widget artwork;
|
||||
@@ -23,6 +25,8 @@ class MornyeLandscapePlayer extends StatefulWidget {
|
||||
final Widget queue;
|
||||
final Widget controls;
|
||||
final Widget volume;
|
||||
final int page;
|
||||
final ValueChanged<int> onPageChanged;
|
||||
|
||||
@override
|
||||
State<MornyeLandscapePlayer> createState() => _MornyeLandscapePlayerState();
|
||||
@@ -30,44 +34,50 @@ class MornyeLandscapePlayer extends StatefulWidget {
|
||||
|
||||
class _MornyeLandscapePlayerState extends State<MornyeLandscapePlayer> {
|
||||
Timer? _hideTimer;
|
||||
bool _controlsVisible = false;
|
||||
bool _queueVisible = false;
|
||||
bool _actionsVisible = true;
|
||||
|
||||
@override
|
||||
void didChangeDependencies() {
|
||||
super.didChangeDependencies();
|
||||
if (MediaQuery.accessibleNavigationOf(context)) {
|
||||
_controlsVisible = true;
|
||||
_actionsVisible = true;
|
||||
_hideTimer?.cancel();
|
||||
} else {
|
||||
_scheduleHide();
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void didUpdateWidget(MornyeLandscapePlayer oldWidget) {
|
||||
super.didUpdateWidget(oldWidget);
|
||||
if (oldWidget.page != widget.page) {
|
||||
_actionsVisible = true;
|
||||
_scheduleHide();
|
||||
}
|
||||
}
|
||||
|
||||
void _scheduleHide() {
|
||||
_hideTimer?.cancel();
|
||||
if (!_controlsVisible || MediaQuery.accessibleNavigationOf(context)) return;
|
||||
_hideTimer = Timer(const Duration(seconds: 4), () {
|
||||
if (widget.page != 1 ||
|
||||
!_actionsVisible ||
|
||||
MediaQuery.accessibleNavigationOf(context)) {
|
||||
return;
|
||||
}
|
||||
_hideTimer = Timer(const Duration(seconds: 3), () {
|
||||
if (!mounted) return;
|
||||
if (ModalRoute.of(context)?.isCurrent == false) {
|
||||
_scheduleHide();
|
||||
return;
|
||||
}
|
||||
setState(() => _controlsVisible = false);
|
||||
setState(() => _actionsVisible = false);
|
||||
});
|
||||
}
|
||||
|
||||
void _reveal() {
|
||||
if (!_controlsVisible) setState(() => _controlsVisible = true);
|
||||
if (!_actionsVisible) setState(() => _actionsVisible = true);
|
||||
_scheduleHide();
|
||||
}
|
||||
|
||||
void _showPanel({required bool queue}) {
|
||||
_hideTimer?.cancel();
|
||||
setState(() {
|
||||
_queueVisible = queue;
|
||||
_controlsVisible = false;
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_hideTimer?.cancel();
|
||||
@@ -76,102 +86,140 @@ class _MornyeLandscapePlayerState extends State<MornyeLandscapePlayer> {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Listener(
|
||||
onPointerDown: (_) => _hideTimer?.cancel(),
|
||||
onPointerDown: (_) {
|
||||
_hideTimer?.cancel();
|
||||
if (!_actionsVisible) setState(() => _actionsVisible = true);
|
||||
},
|
||||
onPointerUp: (_) => _scheduleHide(),
|
||||
onPointerCancel: (_) => _scheduleHide(),
|
||||
child: GestureDetector(
|
||||
behavior: HitTestBehavior.translucent,
|
||||
onTap: _reveal,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(child: widget.artwork),
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(20, 12, 20, 0),
|
||||
child: widget.header,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Expanded(
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) => AnimatedSwitcher(
|
||||
duration: MediaQuery.disableAnimationsOf(context)
|
||||
? Duration.zero
|
||||
: const Duration(milliseconds: 180),
|
||||
layoutBuilder: (current, previous) => Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
for (final child in previous)
|
||||
IgnorePointer(
|
||||
child: ExcludeSemantics(child: child),
|
||||
),
|
||||
?current,
|
||||
],
|
||||
),
|
||||
child: _controlsVisible
|
||||
? SingleChildScrollView(
|
||||
key: const ValueKey('landscape-controls'),
|
||||
child: ConstrainedBox(
|
||||
constraints: BoxConstraints(
|
||||
minHeight: constraints.maxHeight,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(child: widget.artwork),
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(20, 12, 20, 0),
|
||||
child: widget.header,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Expanded(
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) => Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
AnimatedSwitcher(
|
||||
duration: MediaQuery.disableAnimationsOf(context)
|
||||
? Duration.zero
|
||||
: const Duration(milliseconds: 180),
|
||||
layoutBuilder: (current, previous) => Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
for (final child in previous)
|
||||
IgnorePointer(
|
||||
child: ExcludeSemantics(child: child),
|
||||
),
|
||||
?current,
|
||||
],
|
||||
),
|
||||
child: widget.page == 0
|
||||
? SingleChildScrollView(
|
||||
key: const ValueKey('landscape-controls'),
|
||||
child: ConstrainedBox(
|
||||
constraints: BoxConstraints(
|
||||
minHeight: constraints.maxHeight,
|
||||
),
|
||||
child: Column(
|
||||
mainAxisAlignment:
|
||||
MainAxisAlignment.spaceEvenly,
|
||||
children: [
|
||||
widget.controls,
|
||||
widget.volume,
|
||||
const SizedBox(height: 48),
|
||||
],
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisAlignment:
|
||||
MainAxisAlignment.spaceEvenly,
|
||||
children: [
|
||||
widget.controls,
|
||||
widget.volume,
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 20,
|
||||
)
|
||||
: Padding(
|
||||
key: ValueKey(widget.page),
|
||||
padding: EdgeInsets.only(
|
||||
bottom: widget.page == 2 ? 48 : 0,
|
||||
),
|
||||
child: widget.page == 2
|
||||
? widget.queue
|
||||
: widget.lyrics,
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
height: 48,
|
||||
child: GestureDetector(
|
||||
key: const ValueKey('landscape-actions-reveal'),
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: _reveal,
|
||||
child: IgnorePointer(
|
||||
ignoring: !_actionsVisible,
|
||||
child: ExcludeSemantics(
|
||||
excluding: !_actionsVisible,
|
||||
child: AnimatedOpacity(
|
||||
opacity: _actionsVisible ? 1 : 0,
|
||||
duration:
|
||||
MediaQuery.disableAnimationsOf(context)
|
||||
? Duration.zero
|
||||
: const Duration(milliseconds: 180),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 20,
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment:
|
||||
MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
IconButton(
|
||||
tooltip: widget.page == 1
|
||||
? context.l10n.nowPlayingTabPlayer
|
||||
: context
|
||||
.l10n
|
||||
.nowPlayingTabLyrics,
|
||||
isSelected: widget.page == 1,
|
||||
icon: const Icon(
|
||||
CupertinoIcons.quote_bubble,
|
||||
),
|
||||
onPressed: () => widget.onPageChanged(
|
||||
widget.page == 1 ? 0 : 1,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment:
|
||||
MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
IconButton(
|
||||
tooltip: context
|
||||
.l10n
|
||||
.nowPlayingTabLyrics,
|
||||
icon: const Icon(
|
||||
CupertinoIcons.quote_bubble,
|
||||
),
|
||||
onPressed: () =>
|
||||
_showPanel(queue: false),
|
||||
),
|
||||
IconButton(
|
||||
tooltip:
|
||||
context.l10n.nowPlayingUpNext,
|
||||
icon: const Icon(
|
||||
CupertinoIcons.list_bullet,
|
||||
),
|
||||
onPressed: () =>
|
||||
_showPanel(queue: true),
|
||||
),
|
||||
],
|
||||
IconButton(
|
||||
tooltip:
|
||||
context.l10n.nowPlayingUpNext,
|
||||
icon: const Icon(
|
||||
CupertinoIcons.list_bullet,
|
||||
),
|
||||
isSelected: widget.page == 2,
|
||||
onPressed: () => widget.onPageChanged(
|
||||
widget.page == 2 ? 0 : 2,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
: KeyedSubtree(
|
||||
key: ValueKey(_queueVisible),
|
||||
child: _queueVisible
|
||||
? widget.queue
|
||||
: widget.lyrics,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
@@ -69,7 +69,7 @@ class _MornyePlayerFavoriteButtonState
|
||||
? context.l10n.trackOptionRemoveFromLoved
|
||||
: context.l10n.trackOptionAddToLoved,
|
||||
color: widget.color ?? Theme.of(context).colorScheme.onSurface,
|
||||
iconSize: widget.compact ? 20 : 24,
|
||||
iconSize: widget.compact ? 28 : 24,
|
||||
onPressed: _saving ? null : _toggle,
|
||||
),
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user