45 lines
2.3 KiB
Markdown
45 lines
2.3 KiB
Markdown
|
# Now Playing UI Overhaul — Dominant Color, Typography, Modern Controls
|
|||
|
|
|
|||
|
|
## Task
|
|||
|
|
Address four issues: (1) swap station name / artist-title text hierarchy, (2) fix dominant color extraction not applying, (3) invert back button in portrait mode, (4) make the UI feel cohesive and modern to match the blur aesthetic.
|
|||
|
|
|
|||
|
|
## Changes Made
|
|||
|
|
|
|||
|
|
### `NowPlayingScreen.kt` — full rewrite
|
|||
|
|
|
|||
|
|
**Typography swap**
|
|||
|
|
- Station name → `labelLarge`, uppercase, 3sp letter-spacing, 50% alpha (diminished label)
|
|||
|
|
- Artist/title → `headlineLarge`, bold (hero text)
|
|||
|
|
- "No track info" replaced with `♪` music note when no metadata
|
|||
|
|
- Artist-title separator changed from `-` to `—` (em dash)
|
|||
|
|
|
|||
|
|
**Palette extraction fix**
|
|||
|
|
- Replaced Coil 3 `ImageLoader.execute()` + `toBitmap()` (which was silently failing) with direct `OkHttp` + `BitmapFactory.decodeStream()` for reliable bitmap creation
|
|||
|
|
- Palette swatch fallback chain: dominant → vibrant → muted
|
|||
|
|
- Accent color picks light variants on dark backgrounds, dark variants on light
|
|||
|
|
- Added `animateColorAsState` with 600ms tween for smooth color transitions when artwork/tracks change
|
|||
|
|
- Bitmap properly recycled after palette extraction
|
|||
|
|
|
|||
|
|
**Portrait back button**
|
|||
|
|
- Added gradient scrim (45% black → transparent, 100dp tall) at top of artwork panel
|
|||
|
|
- Back icon uses `Color.White` for visibility over any artwork
|
|||
|
|
|
|||
|
|
**Modern UI refresh**
|
|||
|
|
- Transport controls: hero button (play/pause) is a filled accent circle (80dp) with contrasting icon; secondary buttons (skip, stop) are smaller plain icons
|
|||
|
|
- Settings section wrapped in a translucent `Surface` card with 16dp rounded corners
|
|||
|
|
- Timer section condensed to a single compact line with `·` separators, `bodyMedium` weight `Light`
|
|||
|
|
- Settings labels use `labelLarge`/`labelMedium` for clean hierarchy
|
|||
|
|
- Switch and slider colors fully themed to accent/text palette
|
|||
|
|
- Increased breathing room between sections (20–28dp spacers)
|
|||
|
|
- Stop button toned down to 50% alpha (not a bright red error color)
|
|||
|
|
|
|||
|
|
### `RadioApplication.kt`
|
|||
|
|
- Removed unused `ImageLoader` (palette now uses OkHttp directly)
|
|||
|
|
|
|||
|
|
### `gradle/libs.versions.toml` / `app/build.gradle.kts`
|
|||
|
|
- `palette-ktx` dependency added (previous commit, retained)
|
|||
|
|
|
|||
|
|
## Follow-up Items
|
|||
|
|
- Consider adding a gradient seam between artwork panel and metadata panel for smoother visual transition
|
|||
|
|
- May want to add haptic feedback on transport button taps
|