Add Hero animation and swipe-to-dismiss for Now Playing

[phanan]

Summary

• Replace showModalBottomSheet with a custom PageRoute (NowPlayingPageRoute) that slides up with easeOutCubic curve, enabling Hero animations on the album thumbnail between MiniPlayer and NowPlayingScreen
• Add swipe-down-to-dismiss gesture with velocity detection (>800px/s) and position threshold (>20% screen height)
• Add drag handle indicator at the top of the Now Playing screen
• Add platform-aware rounded corners (38.5px on iOS to match device radius, none on Android)
• Route is non-opaque so the underlying screen remains visible during the drag dismiss
• Wrap content in Material(type: transparency) to maintain text styling
• Improve MiniPlayer progress bar to use millisecond precision with clamped values

Test plan

• All 76 tests pass
• Tap MiniPlayer → Now Playing slides up with thumbnail Hero animation
• Swipe down on Now Playing → dismisses back to MiniPlayer
• Quick swipe down dismisses immediately (velocity-based)
• Slow partial drag springs back if < 20% screen height
• Rounded corners visible on iOS, square on Android
• Queue, info sheet, and action sheet still work from Now Playing

Summary by CodeRabbit

Release Notes

New Features

• Added drag-to-dismiss gesture on the Now Playing screen
• Enhanced Now Playing screen with full-screen presentation and smooth slide-up animation

Bug Fixes

• Fixed mini-player progress bar width calculation for accurate playback progress display

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 87be8de1-b82c-4ca9-af3c-c286ceac2de0

📥 Commits

Reviewing files that changed from the base of the PR and between ddef4e3 and f95e2d6.

📒 Files selected for processing (4)

• lib/router.dart
• lib/ui/screens/now_playing.dart
• lib/ui/widgets/mini_player.dart
• lib/ui/widgets/now_playing_page_route.dart

---

📝 Walkthrough

Walkthrough

The changes convert the Now Playing screen from a modal bottom sheet presentation to a full-screen route with custom slide-up transition and drag-to-dismiss capability. A new page route class manages the transition animation, while the screen itself implements gesture-driven dismissal with visual feedback via a drag handle and animated offset.

Changes

Cohort / File(s)	Summary
Navigation & Route Handling lib/router.dart, lib/ui/widgets/now_playing_page_route.dart	Replaced showModalBottomSheet with full-screen route push using new NowPlayingPageRoute class. Added custom page route with configurable slide-up transition (400ms forward, 350ms reverse) from bottom of screen, no barrier, and content built via builder pattern.
Now Playing Screen UI lib/ui/screens/now_playing.dart	Introduced drag-to-dismiss interaction: tracks vertical drag offset, dismisses when drag exceeds 20% screen height or velocity exceeds 800, otherwise animates back to origin. Added visual drag handle and wrapped content in AnimatedContainer for smooth offset transitions.
Player Progress Bar lib/ui/widgets/mini_player.dart	Refactored progress bar duration handling: now directly assigns from mediaItem.duration!, calculates progress ratio from milliseconds instead of seconds, and clamps progress value to [0.0, 1.0] for accurate width factor calculation.

Poem

🐰 A hop, a swipe, a graceful slide,
The Now Playing screen rides the modal tide,
Drag it down with a gesture so keen,
A custom route painted the prettiest scene,
Progress bar perfect, the journey's divine! ✨

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/now-playing-transition

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}