mirror of
https://github.com/zarzet/SpotiFLAC-Mobile.git
synced 2026-09-30 13:19:44 +02:00
feat(player): swipe track headers and remove individual queue entries
This commit is contained in:
1 parent
ad31299a75
commit
bf7dd5b1c4
9 files changed
+672
-119
No files matched your search
@@ -218,6 +218,8 @@ class MusicPlayerController {
|
|||||||
void moveQueueItem(int oldIndex, int newIndex) {
|
void moveQueueItem(int oldIndex, int newIndex) {
|
||||||
_handler?.moveQueueItem(oldIndex, newIndex);
|
_handler?.moveQueueItem(oldIndex, newIndex);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
void removeQueuedItem(MediaItem item) => _handler?.removeQueuedItem(item);
|
||||||
}
|
}
|
||||||
|
|
||||||
final musicPlayerControllerProvider = Provider<MusicPlayerController>(
|
final musicPlayerControllerProvider = Provider<MusicPlayerController>(
|
||||||
|
|||||||
@@ -39,6 +39,8 @@ import 'package:spotiflac_android/widgets/audio_quality_badges.dart';
|
|||||||
import 'package:spotiflac_android/widgets/audio_output_button.dart';
|
import 'package:spotiflac_android/widgets/audio_output_button.dart';
|
||||||
import 'package:spotiflac_android/widgets/lyric_gap_indicator.dart';
|
import 'package:spotiflac_android/widgets/lyric_gap_indicator.dart';
|
||||||
import 'package:spotiflac_android/widgets/player_artwork.dart';
|
import 'package:spotiflac_android/widgets/player_artwork.dart';
|
||||||
|
import 'package:spotiflac_android/widgets/player_queue_dismissible.dart';
|
||||||
|
import 'package:spotiflac_android/widgets/player_track_swipe.dart';
|
||||||
import 'package:spotiflac_android/widgets/overflow_marquee.dart';
|
import 'package:spotiflac_android/widgets/overflow_marquee.dart';
|
||||||
import 'package:spotiflac_android/widgets/playback_seek_slider.dart';
|
import 'package:spotiflac_android/widgets/playback_seek_slider.dart';
|
||||||
import 'package:spotiflac_android/widgets/playlist_picker_sheet.dart';
|
import 'package:spotiflac_android/widgets/playlist_picker_sheet.dart';
|
||||||
@@ -929,14 +931,17 @@ class _NowPlayingScreenState extends ConsumerState<NowPlayingScreen> {
|
|||||||
/// the route-level drag region — so the artwork hooks the route directly.
|
/// the route-level drag region — so the artwork hooks the route directly.
|
||||||
Widget _artworkDragRegion(BuildContext context, Widget child) {
|
Widget _artworkDragRegion(BuildContext context, Widget child) {
|
||||||
final route = ModalRoute.of(context);
|
final route = ModalRoute.of(context);
|
||||||
if (route is! NowPlayingRoute) return child;
|
if (route is! NowPlayingRoute) return PlayerTrackSwipeRegion(child: child);
|
||||||
final pageHeight = MediaQuery.sizeOf(context).height;
|
final pageHeight = MediaQuery.sizeOf(context).height;
|
||||||
return GestureDetector(
|
return PlayerTrackSwipeRegion(
|
||||||
onVerticalDragStart: (_) => route.startDrag(),
|
child: GestureDetector(
|
||||||
onVerticalDragUpdate: (details) => route.updateDrag(details, pageHeight),
|
onVerticalDragStart: (_) => route.startDrag(),
|
||||||
onVerticalDragEnd: (details) => route.endDrag(details, pageHeight),
|
onVerticalDragUpdate: (details) =>
|
||||||
onVerticalDragCancel: route.cancelDrag,
|
route.updateDrag(details, pageHeight),
|
||||||
child: child,
|
onVerticalDragEnd: (details) => route.endDrag(details, pageHeight),
|
||||||
|
onVerticalDragCancel: route.cancelDrag,
|
||||||
|
child: child,
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1158,7 +1163,18 @@ class _NowPlayingScreenState extends ConsumerState<NowPlayingScreen> {
|
|||||||
final motion = MediaQuery.disableAnimationsOf(context)
|
final motion = MediaQuery.disableAnimationsOf(context)
|
||||||
? Duration.zero
|
? Duration.zero
|
||||||
: const Duration(milliseconds: 380);
|
: const Duration(milliseconds: 380);
|
||||||
return NotificationListener<ScrollUpdateNotification>(
|
final queue = ref.watch(playQueueProvider).value ?? const <MediaItem>[];
|
||||||
|
final reportedIndex = ref.watch(
|
||||||
|
playbackStateProvider.select((state) => state.value?.queueIndex),
|
||||||
|
);
|
||||||
|
final currentIndex =
|
||||||
|
reportedIndex != null &&
|
||||||
|
reportedIndex >= 0 &&
|
||||||
|
reportedIndex < queue.length &&
|
||||||
|
queue[reportedIndex].id == mediaItem.id
|
||||||
|
? reportedIndex
|
||||||
|
: queue.indexWhere((item) => item.id == mediaItem.id);
|
||||||
|
final page = NotificationListener<ScrollUpdateNotification>(
|
||||||
onNotification: (notification) {
|
onNotification: (notification) {
|
||||||
if (!showLyrics ||
|
if (!showLyrics ||
|
||||||
_landscape ||
|
_landscape ||
|
||||||
@@ -1167,7 +1183,9 @@ class _NowPlayingScreenState extends ConsumerState<NowPlayingScreen> {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
final delta = notification.scrollDelta ?? 0;
|
final delta = notification.scrollDelta ?? 0;
|
||||||
if (delta.sign != _lyricsScrollDistance.sign) _lyricsScrollDistance = 0;
|
if (delta.sign != _lyricsScrollDistance.sign) {
|
||||||
|
_lyricsScrollDistance = 0;
|
||||||
|
}
|
||||||
_lyricsScrollDistance += delta;
|
_lyricsScrollDistance += delta;
|
||||||
if (_lyricsScrollDistance.abs() >= 16) {
|
if (_lyricsScrollDistance.abs() >= 16) {
|
||||||
final hidden = _lyricsScrollDistance > 0;
|
final hidden = _lyricsScrollDistance > 0;
|
||||||
@@ -1216,6 +1234,15 @@ class _NowPlayingScreenState extends ConsumerState<NowPlayingScreen> {
|
|||||||
return Stack(
|
return Stack(
|
||||||
clipBehavior: Clip.none,
|
clipBehavior: Clip.none,
|
||||||
children: [
|
children: [
|
||||||
|
Positioned(
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
height: compact ? compactHeaderHeight + 8 : stage.maxHeight,
|
||||||
|
child: const PlayerTrackSwipeRegion(
|
||||||
|
child: SizedBox.expand(),
|
||||||
|
),
|
||||||
|
),
|
||||||
Positioned.fill(
|
Positioned.fill(
|
||||||
top: 8 + compactHeaderHeight + 16,
|
top: 8 + compactHeaderHeight + 16,
|
||||||
child: IgnorePointer(
|
child: IgnorePointer(
|
||||||
@@ -1515,6 +1542,16 @@ class _NowPlayingScreenState extends ConsumerState<NowPlayingScreen> {
|
|||||||
},
|
},
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
return PlayerTrackSwipe(
|
||||||
|
queue: queue,
|
||||||
|
currentIndex: currentIndex,
|
||||||
|
onSelected: (item) async {
|
||||||
|
final latest = ref.read(playQueueProvider).value ?? const <MediaItem>[];
|
||||||
|
final index = latest.indexWhere((entry) => identical(entry, item));
|
||||||
|
if (index >= 0) await controller.jumpTo(index);
|
||||||
|
},
|
||||||
|
child: page,
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Widget _trackHeader(
|
Widget _trackHeader(
|
||||||
@@ -1531,46 +1568,51 @@ class _NowPlayingScreenState extends ConsumerState<NowPlayingScreen> {
|
|||||||
builder: (context) => Row(
|
builder: (context) => Row(
|
||||||
children: [
|
children: [
|
||||||
Expanded(
|
Expanded(
|
||||||
child: Builder(
|
child: PlayerTrackSwipeTitles(
|
||||||
builder: (titleContext) => InkWell(
|
current: mediaItem,
|
||||||
borderRadius: BorderRadius.circular(8),
|
builder: (mediaItem) => Builder(
|
||||||
onTap:
|
builder: (titleContext) => InkWell(
|
||||||
(mediaItem.artist ?? '').trim().isEmpty &&
|
borderRadius: BorderRadius.circular(8),
|
||||||
(mediaItem.album ?? '').trim().isEmpty
|
onTap:
|
||||||
? null
|
(mediaItem.artist ?? '').trim().isEmpty &&
|
||||||
: () => _showTrackNavigationMenu(titleContext, mediaItem),
|
(mediaItem.album ?? '').trim().isEmpty
|
||||||
child: Column(
|
? null
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
: () => _showTrackNavigationMenu(titleContext, mediaItem),
|
||||||
mainAxisSize: MainAxisSize.min,
|
child: Column(
|
||||||
children: [
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
OverflowMarquee(
|
mainAxisSize: MainAxisSize.min,
|
||||||
resetKey: (mediaItem.id, mediaItem.title),
|
children: [
|
||||||
child: ExplicitTrackTitle(
|
OverflowMarquee(
|
||||||
title: mediaItem.title,
|
resetKey: (mediaItem.id, mediaItem.title),
|
||||||
explicit: _isExplicit(mediaItem),
|
child: ExplicitTrackTitle(
|
||||||
maxLines: 1,
|
title: mediaItem.title,
|
||||||
overflow: TextOverflow.ellipsis,
|
explicit: _isExplicit(mediaItem),
|
||||||
style: TextStyle(
|
maxLines: 1,
|
||||||
fontSize: 22 - 4 * progress,
|
overflow: TextOverflow.ellipsis,
|
||||||
fontWeight: FontWeight.w600,
|
style: TextStyle(
|
||||||
color: colorScheme.onSurface,
|
fontSize: 22 - 4 * progress,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
color: colorScheme.onSurface,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
const SizedBox(height: 4),
|
||||||
const SizedBox(height: 4),
|
OverflowMarquee(
|
||||||
OverflowMarquee(
|
resetKey: (mediaItem.id, mediaItem.artist),
|
||||||
resetKey: (mediaItem.id, mediaItem.artist),
|
child: Text(
|
||||||
child: Text(
|
mediaItem.artist ?? '',
|
||||||
mediaItem.artist ?? '',
|
maxLines: 1,
|
||||||
maxLines: 1,
|
overflow: TextOverflow.ellipsis,
|
||||||
overflow: TextOverflow.ellipsis,
|
style: TextStyle(
|
||||||
style: TextStyle(
|
fontSize: 20 - 4 * progress,
|
||||||
fontSize: 20 - 4 * progress,
|
color: colorScheme.onSurface.withValues(
|
||||||
color: colorScheme.onSurface.withValues(alpha: 0.72),
|
alpha: 0.72,
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
],
|
||||||
],
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
@@ -2384,50 +2426,56 @@ class _NowPlayingScreenState extends ConsumerState<NowPlayingScreen> {
|
|||||||
itemBuilder: (context, i) {
|
itemBuilder: (context, i) {
|
||||||
final item = queue[i];
|
final item = queue[i];
|
||||||
final isCurrent = current?.id == item.id;
|
final isCurrent = current?.id == item.id;
|
||||||
return ListTile(
|
return PlayerQueueDismissible(
|
||||||
key: ValueKey('${item.id}_$i'),
|
key: ObjectKey(item),
|
||||||
contentPadding: const EdgeInsets.only(
|
enabled: !isCurrent,
|
||||||
left: 16,
|
onRemove: () => controller.removeQueuedItem(item),
|
||||||
right: 4,
|
child: ListTile(
|
||||||
),
|
contentPadding: const EdgeInsets.only(
|
||||||
leading: Icon(
|
left: 16,
|
||||||
isCurrent ? Icons.equalizer : Icons.music_note,
|
right: 4,
|
||||||
color: isCurrent
|
),
|
||||||
? colorScheme.primary
|
leading: Icon(
|
||||||
: colorScheme.onSurfaceVariant,
|
isCurrent
|
||||||
),
|
? Icons.equalizer
|
||||||
title: Text(
|
: Icons.music_note,
|
||||||
item.title,
|
|
||||||
maxLines: 1,
|
|
||||||
overflow: TextOverflow.ellipsis,
|
|
||||||
style: textTheme.bodyLarge?.copyWith(
|
|
||||||
fontWeight: isCurrent
|
|
||||||
? FontWeight.bold
|
|
||||||
: FontWeight.normal,
|
|
||||||
color: isCurrent
|
color: isCurrent
|
||||||
? colorScheme.primary
|
? colorScheme.primary
|
||||||
: colorScheme.onSurface,
|
: colorScheme.onSurfaceVariant,
|
||||||
),
|
),
|
||||||
),
|
title: Text(
|
||||||
subtitle: Text(
|
item.title,
|
||||||
item.artist ?? '',
|
maxLines: 1,
|
||||||
maxLines: 1,
|
overflow: TextOverflow.ellipsis,
|
||||||
overflow: TextOverflow.ellipsis,
|
style: textTheme.bodyLarge?.copyWith(
|
||||||
style: textTheme.bodySmall?.copyWith(
|
fontWeight: isCurrent
|
||||||
color: colorScheme.onSurfaceVariant,
|
? FontWeight.bold
|
||||||
|
: FontWeight.normal,
|
||||||
|
color: isCurrent
|
||||||
|
? colorScheme.primary
|
||||||
|
: colorScheme.onSurface,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
subtitle: Text(
|
||||||
trailing: ReorderableDragStartListener(
|
item.artist ?? '',
|
||||||
index: i,
|
maxLines: 1,
|
||||||
child: Padding(
|
overflow: TextOverflow.ellipsis,
|
||||||
padding: const EdgeInsets.all(8),
|
style: textTheme.bodySmall?.copyWith(
|
||||||
child: Icon(
|
|
||||||
Icons.drag_handle,
|
|
||||||
color: colorScheme.onSurfaceVariant,
|
color: colorScheme.onSurfaceVariant,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
trailing: ReorderableDragStartListener(
|
||||||
|
index: i,
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.all(8),
|
||||||
|
child: Icon(
|
||||||
|
Icons.drag_handle,
|
||||||
|
color: colorScheme.onSurfaceVariant,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
onTap: () => controller.jumpTo(i),
|
||||||
),
|
),
|
||||||
onTap: () => controller.jumpTo(i),
|
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
|
|||||||
@@ -1222,6 +1222,29 @@ class MusicPlayerHandler extends BaseAudioHandler
|
|||||||
unawaited(_persistSession(position: playbackState.value.position));
|
unawaited(_persistSession(position: playbackState.value.position));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// Removes one queued occurrence, including when the same song is queued
|
||||||
|
/// twice. The current source is protected if playback advances mid-gesture.
|
||||||
|
void removeQueuedItem(MediaItem item) {
|
||||||
|
final at = _queueItems.indexWhere((entry) => identical(entry, item));
|
||||||
|
if (_disposed || at < 0 || at == _index) return;
|
||||||
|
_queueItems.removeAt(at);
|
||||||
|
_media.removeAt(at);
|
||||||
|
_originalQueueOrder?.removeWhere((entry) => identical(entry, item));
|
||||||
|
if (at < _index) _index--;
|
||||||
|
final history = [
|
||||||
|
for (final index in _playHistory)
|
||||||
|
if (index != at) index > at ? index - 1 : index,
|
||||||
|
];
|
||||||
|
_playHistory
|
||||||
|
..clear()
|
||||||
|
..addAll(history);
|
||||||
|
_markSessionQueueChanged();
|
||||||
|
unawaited(_autoMix.cancel());
|
||||||
|
queue.add(List<MediaItem>.unmodifiable(_queueItems));
|
||||||
|
_broadcastState();
|
||||||
|
unawaited(_persistSession(position: playbackState.value.position));
|
||||||
|
}
|
||||||
|
|
||||||
Future<void> _playIndex(
|
Future<void> _playIndex(
|
||||||
int index, {
|
int index, {
|
||||||
bool recordHistory = true,
|
bool recordHistory = true,
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import 'package:spotiflac_android/l10n/l10n.dart';
|
|||||||
import 'package:spotiflac_android/providers/music_player_provider.dart';
|
import 'package:spotiflac_android/providers/music_player_provider.dart';
|
||||||
import 'package:spotiflac_android/providers/settings_provider.dart';
|
import 'package:spotiflac_android/providers/settings_provider.dart';
|
||||||
import 'package:spotiflac_android/widgets/player_artwork.dart';
|
import 'package:spotiflac_android/widgets/player_artwork.dart';
|
||||||
|
import 'package:spotiflac_android/widgets/player_queue_dismissible.dart';
|
||||||
import 'package:spotiflac_android/widgets/mornye_context_menu.dart';
|
import 'package:spotiflac_android/widgets/mornye_context_menu.dart';
|
||||||
|
|
||||||
/// Upcoming tracks share the player's artwork backdrop and transport controls.
|
/// Upcoming tracks share the player's artwork backdrop and transport controls.
|
||||||
@@ -193,48 +194,51 @@ class MornyePlayerQueue extends ConsumerWidget {
|
|||||||
),
|
),
|
||||||
itemBuilder: (context, index) {
|
itemBuilder: (context, index) {
|
||||||
final item = queue[start + index];
|
final item = queue[start + index];
|
||||||
return ListTile(
|
return PlayerQueueDismissible(
|
||||||
key: ValueKey('${item.id}_${start + index}'),
|
key: ObjectKey(item),
|
||||||
contentPadding: const EdgeInsets.only(left: 12),
|
onRemove: () => controller.removeQueuedItem(item),
|
||||||
minVerticalPadding: 6,
|
child: ListTile(
|
||||||
leading: ClipRRect(
|
contentPadding: const EdgeInsets.only(left: 12),
|
||||||
borderRadius: BorderRadius.circular(5),
|
minVerticalPadding: 6,
|
||||||
child: SizedBox.square(
|
leading: ClipRRect(
|
||||||
dimension: 40,
|
borderRadius: BorderRadius.circular(5),
|
||||||
child: PlayerArtwork(
|
|
||||||
artUri: item.artUri?.toString(),
|
|
||||||
colorScheme: colorScheme,
|
|
||||||
cacheWidth: 120,
|
|
||||||
iconSize: 22,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
title: Text(
|
|
||||||
item.title,
|
|
||||||
maxLines: 1,
|
|
||||||
overflow: TextOverflow.ellipsis,
|
|
||||||
style: type.bodyLarge?.copyWith(color: Colors.white),
|
|
||||||
),
|
|
||||||
subtitle: Text(
|
|
||||||
item.artist ?? '',
|
|
||||||
maxLines: 1,
|
|
||||||
overflow: TextOverflow.ellipsis,
|
|
||||||
style: type.bodySmall?.copyWith(color: Colors.white70),
|
|
||||||
),
|
|
||||||
trailing: ReorderableDragStartListener(
|
|
||||||
index: index,
|
|
||||||
child: const ColoredBox(
|
|
||||||
color: Colors.transparent,
|
|
||||||
child: SizedBox.square(
|
child: SizedBox.square(
|
||||||
dimension: 44,
|
dimension: 40,
|
||||||
child: Icon(
|
child: PlayerArtwork(
|
||||||
CupertinoIcons.line_horizontal_3,
|
artUri: item.artUri?.toString(),
|
||||||
color: Colors.white38,
|
colorScheme: colorScheme,
|
||||||
|
cacheWidth: 120,
|
||||||
|
iconSize: 22,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
title: Text(
|
||||||
|
item.title,
|
||||||
|
maxLines: 1,
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
style: type.bodyLarge?.copyWith(color: Colors.white),
|
||||||
|
),
|
||||||
|
subtitle: Text(
|
||||||
|
item.artist ?? '',
|
||||||
|
maxLines: 1,
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
style: type.bodySmall?.copyWith(color: Colors.white70),
|
||||||
|
),
|
||||||
|
trailing: ReorderableDragStartListener(
|
||||||
|
index: index,
|
||||||
|
child: const ColoredBox(
|
||||||
|
color: Colors.transparent,
|
||||||
|
child: SizedBox.square(
|
||||||
|
dimension: 44,
|
||||||
|
child: Icon(
|
||||||
|
CupertinoIcons.line_horizontal_3,
|
||||||
|
color: Colors.white38,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
onTap: () => controller.jumpTo(start + index),
|
||||||
),
|
),
|
||||||
onTap: () => controller.jumpTo(start + index),
|
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
|
|||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
/// Removing a row affects the queue only, never the song on disk.
|
||||||
|
class PlayerQueueDismissible extends StatelessWidget {
|
||||||
|
const PlayerQueueDismissible({
|
||||||
|
super.key,
|
||||||
|
required this.onRemove,
|
||||||
|
required this.child,
|
||||||
|
this.enabled = true,
|
||||||
|
});
|
||||||
|
|
||||||
|
final VoidCallback onRemove;
|
||||||
|
final Widget child;
|
||||||
|
final bool enabled;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) => Dismissible(
|
||||||
|
key: const ValueKey('queue-dismiss'),
|
||||||
|
direction: enabled ? DismissDirection.endToStart : DismissDirection.none,
|
||||||
|
// Remove before collapsing so a concurrently playing row is never left
|
||||||
|
// dismissed in the tree. The service resolves the entry by identity.
|
||||||
|
confirmDismiss: (_) async {
|
||||||
|
onRemove();
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
background: Container(
|
||||||
|
alignment: AlignmentDirectional.centerEnd,
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 20),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Theme.of(context).colorScheme.error,
|
||||||
|
borderRadius: BorderRadius.circular(12),
|
||||||
|
),
|
||||||
|
child: Icon(
|
||||||
|
Icons.delete_outline,
|
||||||
|
color: Theme.of(context).colorScheme.onError,
|
||||||
|
semanticLabel: MaterialLocalizations.of(context).deleteButtonTooltip,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: child,
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,197 @@
|
|||||||
|
import 'package:audio_service/audio_service.dart';
|
||||||
|
import 'package:flutter/foundation.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
/// Shares one horizontal gesture between artwork and metadata. Only the
|
||||||
|
/// titles translate; artwork, menus and the rest of the player stay anchored.
|
||||||
|
class PlayerTrackSwipe extends StatefulWidget {
|
||||||
|
const PlayerTrackSwipe({
|
||||||
|
super.key,
|
||||||
|
required this.queue,
|
||||||
|
required this.currentIndex,
|
||||||
|
required this.onSelected,
|
||||||
|
required this.child,
|
||||||
|
});
|
||||||
|
|
||||||
|
final List<MediaItem> queue;
|
||||||
|
final int currentIndex;
|
||||||
|
final Future<void> Function(MediaItem) onSelected;
|
||||||
|
final Widget child;
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<PlayerTrackSwipe> createState() => _PlayerTrackSwipeState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _PlayerTrackSwipeState extends State<PlayerTrackSwipe>
|
||||||
|
with SingleTickerProviderStateMixin {
|
||||||
|
late final _offset = AnimationController.unbounded(vsync: this);
|
||||||
|
double _width = 240;
|
||||||
|
double _drag = 0;
|
||||||
|
bool _settling = false;
|
||||||
|
int _generation = 0;
|
||||||
|
|
||||||
|
MediaItem? _neighbor(double direction) {
|
||||||
|
if (widget.currentIndex < 0) return null;
|
||||||
|
final at = widget.currentIndex + (direction > 0 ? 1 : -1);
|
||||||
|
return at >= 0 && at < widget.queue.length ? widget.queue[at] : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void didUpdateWidget(PlayerTrackSwipe oldWidget) {
|
||||||
|
super.didUpdateWidget(oldWidget);
|
||||||
|
if (oldWidget.currentIndex != widget.currentIndex ||
|
||||||
|
!listEquals(oldWidget.queue, widget.queue)) {
|
||||||
|
_reset();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
void _reset() {
|
||||||
|
_generation++;
|
||||||
|
_settling = false;
|
||||||
|
_drag = 0;
|
||||||
|
_offset.value = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
void _start(DragStartDetails details) {
|
||||||
|
if (_settling) return;
|
||||||
|
_offset.stop();
|
||||||
|
_drag = _offset.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
void _update(DragUpdateDetails details) {
|
||||||
|
if (_settling) return;
|
||||||
|
_drag += details.primaryDelta ?? 0;
|
||||||
|
_offset.value = _neighbor(_drag) == null
|
||||||
|
? _drag * 0.18 / (1 + _drag.abs() / _width)
|
||||||
|
: _drag.clamp(-_width, _width);
|
||||||
|
}
|
||||||
|
|
||||||
|
Future<void> _finish([DragEndDetails? details]) async {
|
||||||
|
if (_settling) return;
|
||||||
|
final offset = _offset.value;
|
||||||
|
final velocity = details?.primaryVelocity ?? 0;
|
||||||
|
final target = _neighbor(offset);
|
||||||
|
final commit =
|
||||||
|
details != null &&
|
||||||
|
target != null &&
|
||||||
|
(offset.abs() > _width * 0.25 ||
|
||||||
|
(velocity.abs() > 550 && velocity.sign == offset.sign));
|
||||||
|
final generation = ++_generation;
|
||||||
|
_settling = true;
|
||||||
|
try {
|
||||||
|
await _offset
|
||||||
|
.animateTo(
|
||||||
|
commit ? _width * offset.sign : 0,
|
||||||
|
duration: MediaQuery.disableAnimationsOf(context)
|
||||||
|
? Duration.zero
|
||||||
|
: const Duration(milliseconds: 280),
|
||||||
|
curve: Curves.easeOutCubic,
|
||||||
|
)
|
||||||
|
.orCancel;
|
||||||
|
if (!mounted || generation != _generation) return;
|
||||||
|
if (commit) await widget.onSelected(target);
|
||||||
|
} on TickerCanceled {
|
||||||
|
// A new song/queue or closing the player supersedes this gesture.
|
||||||
|
} finally {
|
||||||
|
if (mounted && generation == _generation) _reset();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_generation++;
|
||||||
|
_offset.dispose();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) =>
|
||||||
|
_SwipeScope(state: this, child: widget.child);
|
||||||
|
}
|
||||||
|
|
||||||
|
class _SwipeScope extends InheritedWidget {
|
||||||
|
const _SwipeScope({required this.state, required super.child});
|
||||||
|
|
||||||
|
final _PlayerTrackSwipeState state;
|
||||||
|
|
||||||
|
@override
|
||||||
|
bool updateShouldNotify(_SwipeScope oldWidget) => true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Multiple hit regions can drive the same titles without moving their child.
|
||||||
|
class PlayerTrackSwipeRegion extends StatelessWidget {
|
||||||
|
const PlayerTrackSwipeRegion({super.key, required this.child});
|
||||||
|
|
||||||
|
final Widget child;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final state = context
|
||||||
|
.dependOnInheritedWidgetOfExactType<_SwipeScope>()
|
||||||
|
?.state;
|
||||||
|
if (state == null) return child;
|
||||||
|
return GestureDetector(
|
||||||
|
behavior: HitTestBehavior.translucent,
|
||||||
|
onHorizontalDragStart: state._start,
|
||||||
|
onHorizontalDragUpdate: state._update,
|
||||||
|
onHorizontalDragEnd: state._finish,
|
||||||
|
onHorizontalDragCancel: state._finish,
|
||||||
|
child: child,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class PlayerTrackSwipeTitles extends StatelessWidget {
|
||||||
|
const PlayerTrackSwipeTitles({
|
||||||
|
super.key,
|
||||||
|
required this.current,
|
||||||
|
required this.builder,
|
||||||
|
});
|
||||||
|
|
||||||
|
final MediaItem current;
|
||||||
|
final Widget Function(MediaItem item) builder;
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final state = context
|
||||||
|
.dependOnInheritedWidgetOfExactType<_SwipeScope>()
|
||||||
|
?.state;
|
||||||
|
if (state == null) return builder(current);
|
||||||
|
return PlayerTrackSwipeRegion(
|
||||||
|
child: LayoutBuilder(
|
||||||
|
builder: (context, constraints) {
|
||||||
|
final width = constraints.maxWidth;
|
||||||
|
state._width = width > 0 ? width : 1;
|
||||||
|
return ClipRect(
|
||||||
|
child: AnimatedBuilder(
|
||||||
|
animation: state._offset,
|
||||||
|
child: builder(current),
|
||||||
|
builder: (context, child) {
|
||||||
|
final offset = state._offset.value;
|
||||||
|
final next = state._neighbor(offset);
|
||||||
|
return Stack(
|
||||||
|
clipBehavior: Clip.none,
|
||||||
|
children: [
|
||||||
|
Transform.translate(
|
||||||
|
offset: Offset(offset, 0),
|
||||||
|
child: child,
|
||||||
|
),
|
||||||
|
if (offset != 0 && next != null)
|
||||||
|
Positioned(
|
||||||
|
left: offset - width * offset.sign,
|
||||||
|
top: 0,
|
||||||
|
width: width,
|
||||||
|
child: ExcludeSemantics(
|
||||||
|
child: IgnorePointer(child: builder(next)),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -375,6 +375,37 @@ void main() {
|
|||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
|
test(
|
||||||
|
'queue removal preserves duplicates, current audio and unshuffled order',
|
||||||
|
() async {
|
||||||
|
await handler.setQueueAndPlay([
|
||||||
|
_tracks[0],
|
||||||
|
_tracks[0],
|
||||||
|
_tracks[1],
|
||||||
|
_tracks[2],
|
||||||
|
]);
|
||||||
|
final original = List.of(handler.queue.value);
|
||||||
|
await handler.setShuffleMode(AudioServiceShuffleMode.all);
|
||||||
|
handler.removeQueuedItem(original[1]);
|
||||||
|
handler.removeQueuedItem(original[1]); // A stale swipe is harmless.
|
||||||
|
handler.removeQueuedItem(
|
||||||
|
original[0],
|
||||||
|
); // The playing occurrence is protected.
|
||||||
|
await handler.setShuffleMode(AudioServiceShuffleMode.none);
|
||||||
|
expect(handler.queue.value.map((item) => item.id), [
|
||||||
|
'one',
|
||||||
|
'two',
|
||||||
|
'three',
|
||||||
|
]);
|
||||||
|
expect(native.resumedSources, ['/one.flac']);
|
||||||
|
await handler.skipToNext();
|
||||||
|
handler.removeQueuedItem(original[0]);
|
||||||
|
expect(handler.playbackState.value.queueIndex, 0);
|
||||||
|
expect(handler.mediaItem.value?.id, 'two');
|
||||||
|
expect(native.sources['music-player'], '/two.flac');
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
test('restored shuffle can return to the saved original order', () async {
|
test('restored shuffle can return to the saved original order', () async {
|
||||||
await handler.restoreSession(
|
await handler.restoreSession(
|
||||||
items: [_tracks[1], _tracks[2], _tracks[0]],
|
items: [_tracks[1], _tracks[2], _tracks[0]],
|
||||||
|
|||||||
@@ -105,6 +105,7 @@ void main() {
|
|||||||
Widget Function(Widget)? wrapPlayer,
|
Widget Function(Widget)? wrapPlayer,
|
||||||
MotionArtwork? motionArtwork,
|
MotionArtwork? motionArtwork,
|
||||||
MusicPlayerController? controller,
|
MusicPlayerController? controller,
|
||||||
|
List<MediaItem> queue = const [],
|
||||||
}) async {
|
}) async {
|
||||||
tester.view.physicalSize = size;
|
tester.view.physicalSize = size;
|
||||||
tester.view.devicePixelRatio = 1;
|
tester.view.devicePixelRatio = 1;
|
||||||
@@ -141,7 +142,7 @@ void main() {
|
|||||||
? const Stream.empty()
|
? const Stream.empty()
|
||||||
: Stream.value(playback)),
|
: Stream.value(playback)),
|
||||||
),
|
),
|
||||||
playQueueProvider.overrideWith((ref) => const Stream.empty()),
|
playQueueProvider.overrideWith((ref) => Stream.value(queue)),
|
||||||
systemVolumeProvider.overrideWith((ref) => Stream.value(0.5)),
|
systemVolumeProvider.overrideWith((ref) => Stream.value(0.5)),
|
||||||
systemVolumeWriterProvider.overrideWith(
|
systemVolumeWriterProvider.overrideWith(
|
||||||
(ref) =>
|
(ref) =>
|
||||||
@@ -160,6 +161,56 @@ void main() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
for (final page in ['player', 'lyrics', 'queue']) {
|
||||||
|
testWidgets('cover swipe changes the track in the Mornye $page', (
|
||||||
|
tester,
|
||||||
|
) async {
|
||||||
|
final queue = [item('first'), item('second')];
|
||||||
|
final controller = _QueueController(
|
||||||
|
(index) => mediaItems.add(queue[index]),
|
||||||
|
);
|
||||||
|
await pumpNowPlaying(
|
||||||
|
tester,
|
||||||
|
theme: MornyeTheme.build(Brightness.dark),
|
||||||
|
size: const Size(393, 852),
|
||||||
|
queue: queue,
|
||||||
|
controller: controller,
|
||||||
|
playback: PlaybackState(queueIndex: 0),
|
||||||
|
);
|
||||||
|
mediaItems.add(queue.first);
|
||||||
|
await tester.pumpAndSettle();
|
||||||
|
if (page != 'player') {
|
||||||
|
await tester.tap(
|
||||||
|
find.byIcon(
|
||||||
|
page == 'lyrics'
|
||||||
|
? CupertinoIcons.quote_bubble
|
||||||
|
: CupertinoIcons.list_bullet,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
await tester.pumpAndSettle();
|
||||||
|
}
|
||||||
|
final cover = find
|
||||||
|
.byKey(
|
||||||
|
ValueKey(
|
||||||
|
page == 'player'
|
||||||
|
? 'full-player-artwork'
|
||||||
|
: 'compact-player-artwork',
|
||||||
|
),
|
||||||
|
)
|
||||||
|
.hitTestable();
|
||||||
|
final rect = tester.getRect(cover);
|
||||||
|
final gesture = await tester.startGesture(rect.center);
|
||||||
|
await gesture.moveBy(const Offset(110, 0));
|
||||||
|
await tester.pump();
|
||||||
|
expect(tester.getRect(cover), rect);
|
||||||
|
await gesture.up();
|
||||||
|
await tester.pumpAndSettle();
|
||||||
|
expect(controller.selected, [1]);
|
||||||
|
expect(find.text('Second').hitTestable(), findsOneWidget);
|
||||||
|
expect(tester.takeException(), isNull);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
testWidgets(
|
testWidgets(
|
||||||
'portrait motion cover keeps the raised square-cover control positions',
|
'portrait motion cover keeps the raised square-cover control positions',
|
||||||
(tester) async {
|
(tester) async {
|
||||||
@@ -3139,6 +3190,18 @@ void main() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class _QueueController extends MusicPlayerController {
|
||||||
|
_QueueController(this.onSelected);
|
||||||
|
final void Function(int) onSelected;
|
||||||
|
final selected = <int>[];
|
||||||
|
|
||||||
|
@override
|
||||||
|
Future<void> jumpTo(int index) async {
|
||||||
|
selected.add(index);
|
||||||
|
onSelected(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
class _SeekController extends MusicPlayerController {
|
class _SeekController extends MusicPlayerController {
|
||||||
final seeks = <Duration>[];
|
final seeks = <Duration>[];
|
||||||
final completions = <Completer<void>>[];
|
final completions = <Completer<void>>[];
|
||||||
|
|||||||
@@ -0,0 +1,144 @@
|
|||||||
|
import 'package:audio_service/audio_service.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter_test/flutter_test.dart';
|
||||||
|
import 'package:spotiflac_android/widgets/player_queue_dismissible.dart';
|
||||||
|
import 'package:spotiflac_android/widgets/player_track_swipe.dart';
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
final queue = [
|
||||||
|
for (var i = 0; i < 3; i++)
|
||||||
|
MediaItem(id: '$i', title: 'Song $i', artist: 'Artist $i'),
|
||||||
|
];
|
||||||
|
|
||||||
|
for (final reducedMotion in [false, true]) {
|
||||||
|
testWidgets(
|
||||||
|
'cover drag moves only titles and selects once ($reducedMotion)',
|
||||||
|
(tester) async {
|
||||||
|
var index = 0;
|
||||||
|
final selected = <int>[];
|
||||||
|
await tester.pumpWidget(
|
||||||
|
MaterialApp(
|
||||||
|
home: MediaQuery(
|
||||||
|
data: MediaQueryData(disableAnimations: reducedMotion),
|
||||||
|
child: StatefulBuilder(
|
||||||
|
builder: (context, setState) {
|
||||||
|
return PlayerTrackSwipe(
|
||||||
|
queue: queue,
|
||||||
|
currentIndex: index,
|
||||||
|
onSelected: (item) async {
|
||||||
|
selected.add(queue.indexOf(item));
|
||||||
|
setState(() => index = queue.indexOf(item));
|
||||||
|
},
|
||||||
|
child: Scaffold(
|
||||||
|
body: Center(
|
||||||
|
child: SizedBox(
|
||||||
|
width: 300,
|
||||||
|
child: Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
const PlayerTrackSwipeRegion(
|
||||||
|
child: SizedBox(
|
||||||
|
key: ValueKey('cover'),
|
||||||
|
width: 200,
|
||||||
|
height: 200,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
PlayerTrackSwipeTitles(
|
||||||
|
current: queue[index],
|
||||||
|
builder: (item) => Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
Text(item.title),
|
||||||
|
Text(item.artist!),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
final cover = find.byKey(const ValueKey('cover'));
|
||||||
|
final coverRect = tester.getRect(cover);
|
||||||
|
final titleX = tester.getTopLeft(find.text('Song 0')).dx;
|
||||||
|
final gesture = await tester.startGesture(coverRect.center);
|
||||||
|
await gesture.moveBy(const Offset(110, 0));
|
||||||
|
await tester.pump();
|
||||||
|
expect(tester.getRect(cover), coverRect);
|
||||||
|
expect(tester.getTopLeft(find.text('Song 0')).dx, greaterThan(titleX));
|
||||||
|
expect(find.text('Song 1'), findsOneWidget);
|
||||||
|
await gesture.up();
|
||||||
|
await tester.pumpAndSettle();
|
||||||
|
expect(selected, [1]);
|
||||||
|
expect(tester.getTopLeft(find.text('Song 1')).dx, closeTo(titleX, 0.1));
|
||||||
|
|
||||||
|
await tester.drag(find.text('Song 1'), const Offset(-180, 0));
|
||||||
|
await tester.pumpAndSettle();
|
||||||
|
expect(selected, [1, 0]);
|
||||||
|
// At the first song the previous direction resists, then returns.
|
||||||
|
await tester.drag(cover, const Offset(-200, 0));
|
||||||
|
await tester.pumpAndSettle();
|
||||||
|
expect(selected, [1, 0]);
|
||||||
|
expect(tester.getTopLeft(find.text('Song 0')).dx, closeTo(titleX, 0.1));
|
||||||
|
await tester.drag(cover, const Offset(20, 0));
|
||||||
|
await tester.pumpAndSettle();
|
||||||
|
expect(selected, [1, 0]);
|
||||||
|
expect(tester.takeException(), isNull);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
testWidgets('queue left swipe removes just that occurrence', (tester) async {
|
||||||
|
final entries = [queue[0], queue[0].copyWith(), queue[1]];
|
||||||
|
await tester.pumpWidget(
|
||||||
|
MaterialApp(
|
||||||
|
home: StatefulBuilder(
|
||||||
|
builder: (context, setState) => Scaffold(
|
||||||
|
body: Column(
|
||||||
|
children: [
|
||||||
|
for (final item in entries)
|
||||||
|
PlayerQueueDismissible(
|
||||||
|
key: ObjectKey(item),
|
||||||
|
enabled: !identical(item, entries.first),
|
||||||
|
onRemove: () => setState(() {
|
||||||
|
entries.removeWhere((entry) => identical(entry, item));
|
||||||
|
}),
|
||||||
|
child: SizedBox(
|
||||||
|
width: 320,
|
||||||
|
height: 64,
|
||||||
|
child: Text(item.title),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
await tester.drag(
|
||||||
|
find.byType(PlayerQueueDismissible).at(1),
|
||||||
|
const Offset(280, 0),
|
||||||
|
);
|
||||||
|
await tester.pumpAndSettle();
|
||||||
|
expect(entries, hasLength(3));
|
||||||
|
await tester.drag(
|
||||||
|
find.byType(PlayerQueueDismissible).at(1),
|
||||||
|
const Offset(-280, 0),
|
||||||
|
);
|
||||||
|
await tester.pumpAndSettle();
|
||||||
|
expect(entries.map((item) => item.id), ['0', '1']);
|
||||||
|
await tester.drag(
|
||||||
|
find.byType(PlayerQueueDismissible).first,
|
||||||
|
const Offset(-280, 0),
|
||||||
|
);
|
||||||
|
await tester.pumpAndSettle();
|
||||||
|
expect(entries, hasLength(2));
|
||||||
|
expect(tester.takeException(), isNull);
|
||||||
|
});
|
||||||
|
}
|
||||||
Reference in new issue
Block a user