feat(player): swipe track headers and remove individual queue entries

2026-09-29 12:52:13 +02:00 · 2026-09-27 00:35:55 +07:00
parent ad31299a75
commit bf7dd5b1c4
9 changed files with 672 additions and 119 deletions
@@ -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/settings_provider.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';

 /// Upcoming tracks share the player's artwork backdrop and transport controls.
@@ -193,48 +194,51 @@ class MornyePlayerQueue extends ConsumerWidget {
              ),
              itemBuilder: (context, index) {
                final item = queue[start + index];
-                return ListTile(
-                  key: ValueKey('${item.id}_${start + index}'),
-                  contentPadding: const EdgeInsets.only(left: 12),
-                  minVerticalPadding: 6,
-                  leading: ClipRRect(
-                    borderRadius: BorderRadius.circular(5),
-                    child: SizedBox.square(
-                      dimension: 40,
-                      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,
+                return PlayerQueueDismissible(
+                  key: ObjectKey(item),
+                  onRemove: () => controller.removeQueuedItem(item),
+                  child: ListTile(
+                    contentPadding: const EdgeInsets.only(left: 12),
+                    minVerticalPadding: 6,
+                    leading: ClipRRect(
+                      borderRadius: BorderRadius.circular(5),
                      child: SizedBox.square(
-                        dimension: 44,
-                        child: Icon(
-                          CupertinoIcons.line_horizontal_3,
-                          color: Colors.white38,
+                        dimension: 40,
+                        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(
+                          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)),
+                        ),
+                      ),
+                  ],
+                );
+              },
+            ),
+          );
+        },
+      ),
+    );
+  }
+}