feat(flutter): #393 — always-visible play button on home cards

AlbumCard / ArtistCard / PlaylistCard gain a 44dp circular play button overlaid bottom-right of the cover art. Mirrors the hover-revealed .play-overlay on the web cards; always visible because hover is not a real interaction on touch. Per-card semantics match the web: - AlbumCard: fetches /api/albums/{id}, starts playback from track 0. - ArtistCard: fetches /api/artists/{id}/tracks, Fisher-Yates shuffles, plays from index 0 (matches web's playQueue(shuffle(tracks), 0)). - PlaylistCard: fetches /api/playlists/{id}, materializes available rows into TrackRef, plays from index 0. Disabled state when trackCount == 0 — semi-transparent button, taps ignored. Shared PlayCircleButton widget manages loading state (spinner during fetch) so each card's onPressed can stay async without re-entrancy guards. Cards become ConsumerWidget so they can reach the playerActionsProvider + relevant API providers; constructor surface unchanged so existing call sites (artist_detail, library_screen, home_screen) keep working. CompactTrackCard unchanged — its tap already plays-from-here. For #393 / #356 umbrella. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-13 12:35:57 -04:00
parent 89d8b4b5a0
commit 872b0de304
4 changed files with 254 additions and 48 deletions
@@ -0,0 +1,96 @@
+import 'package:flutter/material.dart';
+
+import '../../theme/theme_extension.dart';
+
+/// Always-visible 44dp circular play button overlaid on home-screen
+/// card art (AlbumCard / ArtistCard / PlaylistCard). Mirrors the
+/// hover-revealed `.play-overlay` on the web cards, but always shown
+/// because hover is not a real interaction on touch.
+///
+/// Manages its own loading state via [_starting] so the caller's tap
+/// handler can be `Future<void> Function()` without worrying about
+/// re-entrancy. Disabled state suppresses the tap (used for empty
+/// playlists).
+class PlayCircleButton extends StatefulWidget {
+  const PlayCircleButton({
+    required this.onPressed,
+    this.enabled = true,
+    this.size = 44,
+    super.key,
+  });
+
+  /// Tap handler. Returns a Future so the button can show a spinner
+  /// during the play setup (fetch detail tracks, etc.).
+  final Future<void> Function() onPressed;
+
+  /// When false, the button is rendered semi-transparent and taps are
+  /// ignored. Empty playlists / artists with no tracks should disable.
+  final bool enabled;
+
+  /// Outer diameter in logical pixels. 44 is the iOS / Android
+  /// touch-target minimum; matches the design doc.
+  final double size;
+
+  @override
+  State<PlayCircleButton> createState() => _PlayCircleButtonState();
+}
+
+class _PlayCircleButtonState extends State<PlayCircleButton> {
+  bool _starting = false;
+
+  Future<void> _handleTap() async {
+    if (_starting || !widget.enabled) return;
+    setState(() => _starting = true);
+    try {
+      await widget.onPressed();
+    } finally {
+      if (mounted) setState(() => _starting = false);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final fs = Theme.of(context).extension<FabledSwordTheme>()!;
+    final iconSize = widget.size * 0.5;
+    return Material(
+      color: Colors.transparent,
+      shape: const CircleBorder(),
+      child: InkResponse(
+        onTap: widget.enabled ? _handleTap : null,
+        radius: widget.size / 2,
+        containedInkWell: true,
+        customBorder: const CircleBorder(),
+        child: Container(
+          width: widget.size,
+          height: widget.size,
+          decoration: BoxDecoration(
+            color: fs.accent.withValues(alpha: widget.enabled ? 1.0 : 0.5),
+            shape: BoxShape.circle,
+            boxShadow: const [
+              BoxShadow(
+                color: Color(0x66000000),
+                blurRadius: 6,
+                offset: Offset(0, 2),
+              ),
+            ],
+          ),
+          alignment: Alignment.center,
+          child: _starting
+              ? SizedBox(
+                  width: iconSize,
+                  height: iconSize,
+                  child: CircularProgressIndicator(
+                    strokeWidth: 2,
+                    valueColor: AlwaysStoppedAnimation<Color>(fs.parchment),
+                  ),
+                )
+              : Icon(
+                  Icons.play_arrow,
+                  color: fs.parchment,
+                  size: iconSize,
+                ),
+        ),
+      ),
+    );
+  }
+}