theme the artist, now playing and mini player from their art

app/src/main/kotlin/com/subtracks/ui/AppRoot.kt

@@ -45,6 +45,7 @@ import com.subtracks.ui.playback.NowPlayingRoute
 import com.subtracks.ui.playback.QueueRoute
 import com.subtracks.ui.settings.AddSourceRoute
 import com.subtracks.ui.settings.SettingsRoute
+import com.subtracks.ui.theme.rememberArtworkColors
 import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.stateIn
@@ -200,9 +201,11 @@ private fun MainNavigation() {
             }
 
             if (playerVisible) {
+                val miniArt = playbackController.coverArt(playback.item, thumbnail = true)
                 MiniPlayer(
                     state = playback,
-                    coverArt = playbackController.coverArt(playback.item, thumbnail = true),
+                    coverArt = miniArt,
+                    artwork = rememberArtworkColors(miniArt),
                     onExpand = { showingNowPlaying = true },
                     onPlayPause = playbackController::togglePlayPause,
                     onNext = playbackController::next,

app/src/main/kotlin/com/subtracks/ui/components/Components.kt

@@ -27,15 +27,18 @@ fun CoverArt(
     name: String,
     modifier: Modifier = Modifier,
     thumbnailRef: CoverArtRef? = null,
+    showPlaceholder: Boolean = true,
 ) {
     val context = LocalPlatformContext.current
     Box(modifier = modifier.background(MaterialTheme.colorScheme.surfaceVariant)) {
+        if (showPlaceholder) {
             Text(
                 text = name.trim().take(1).uppercase(),
                 style = MaterialTheme.typography.headlineMedium,
                 color = MaterialTheme.colorScheme.onSurfaceVariant,
                 modifier = Modifier.align(Alignment.Center),
             )
+        }
         if (thumbnailRef != null && thumbnailRef != ref) {
             AsyncImage(
                 model = remember(thumbnailRef) { imageRequest(context, thumbnailRef, crossfade = false) },

app/src/main/kotlin/com/subtracks/ui/library/ArtistDetailScreen.kt

@@ -27,11 +27,13 @@ import androidx.compose.material.icons.automirrored.rounded.ArrowBack
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
@@ -53,13 +55,18 @@ import com.subtracks.data.model.Artist
 import com.subtracks.data.model.CoverArtRef
 import com.subtracks.ui.components.CoverArt
 import com.subtracks.ui.components.rememberViewportFill
+import com.subtracks.ui.theme.ArtworkColors
+import com.subtracks.ui.theme.ArtworkTheme
+import com.subtracks.ui.theme.HeroGradient
 import com.subtracks.ui.theme.PrefetchArtworkSeeds
+import com.subtracks.ui.theme.rememberArtworkColors
 import org.koin.compose.viewmodel.koinViewModel
 import org.koin.core.parameter.parametersOf
 
 private val ART_HEIGHT = 420.dp
 private val TITLE_INSET = 16.dp
 private val FADE_LEAD = 24.dp
+private const val THEME_TRANSITION_MS = 100
 
 @Composable
 fun ArtistDetailRoute(
@@ -77,6 +84,7 @@ fun ArtistDetailRoute(
         albums = albums,
         art = art,
         artThumbnail = artThumbnail,
+        artwork = rememberArtworkColors(artThumbnail ?: art, THEME_TRANSITION_MS),
         coverArt = viewModel::coverArt,
         onBack = onBack,
         onAlbumClick = onAlbumClick,
@@ -90,6 +98,7 @@ fun ArtistDetailScreen(
     albums: List<Album>,
     art: CoverArtRef?,
     artThumbnail: CoverArtRef? = null,
+    artwork: ArtworkColors? = null,
     coverArt: (String?, Boolean) -> CoverArtRef?,
     onBack: () -> Unit,
     onAlbumClick: (Album) -> Unit,
@@ -129,7 +138,14 @@ fun ArtistDetailScreen(
                 ),
         )
 
-    Box(modifier.fillMaxSize().background(MaterialTheme.colorScheme.background)) {
+    CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onBackground) {
+        ArtworkTheme(artwork) {
+            Box(modifier.fillMaxSize().background(Color.Black)) {
+                HeroGradient(
+                    colors = artwork,
+                    scrollPx = { 0f },
+                    modifier = Modifier.fillMaxSize(),
+                )
                 LazyVerticalGrid(
                     state = listState,
                     columns = GridCells.Fixed(2),
@@ -144,6 +160,7 @@ fun ArtistDetailScreen(
                                 ref = art,
                                 name = artist?.name.orEmpty(),
                                 thumbnailRef = artThumbnail,
+                                showPlaceholder = false,
                                 modifier = Modifier.fillMaxWidth().height(ART_HEIGHT),
                             )
                             Text(
@@ -233,4 +250,6 @@ fun ArtistDetailScreen(
                             ) {},
                 )
             }
+        }
+    }
 }

app/src/main/kotlin/com/subtracks/ui/playback/MiniPlayer.kt

@@ -30,17 +30,21 @@ import androidx.compose.ui.unit.dp
 import com.subtracks.data.model.CoverArtRef
 import com.subtracks.playback.PlaybackState
 import com.subtracks.ui.components.CoverArt
+import com.subtracks.ui.theme.ArtworkColors
+import com.subtracks.ui.theme.ArtworkTheme
 
 @Composable
 fun MiniPlayer(
     state: PlaybackState,
     coverArt: CoverArtRef?,
+    artwork: ArtworkColors?,
     onExpand: () -> Unit,
     onPlayPause: () -> Unit,
     onNext: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
     val item = state.item ?: return
+    ArtworkTheme(artwork) {
         Surface(
             color = MaterialTheme.colorScheme.surfaceContainerHigh,
             contentColor = MaterialTheme.colorScheme.onSurface,
@@ -109,4 +113,5 @@ fun MiniPlayer(
                 }
             }
         }
+    }
 }

app/src/main/kotlin/com/subtracks/ui/playback/NowPlayingScreen.kt

@@ -25,12 +25,15 @@ import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Slider
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.mutableStateOf
@@ -39,12 +42,17 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.subtracks.data.model.CoverArtRef
 import com.subtracks.playback.PlaybackController
 import com.subtracks.playback.PlaybackState
 import com.subtracks.ui.components.CoverArt
+import com.subtracks.ui.theme.ArtworkColors
+import com.subtracks.ui.theme.ArtworkTheme
+import com.subtracks.ui.theme.HeroGradient
+import com.subtracks.ui.theme.rememberArtworkColors
 import org.koin.compose.koinInject
 
 @Composable
@@ -55,9 +63,11 @@ fun NowPlayingRoute(
     controller: PlaybackController = koinInject(),
 ) {
     val state by controller.state.collectAsStateWithLifecycle()
+    val art = controller.coverArt(state.item)
     NowPlayingScreen(
         state = state,
-        coverArt = controller.coverArt(state.item),
+        coverArt = art,
+        artwork = rememberArtworkColors(art),
         onBack = onBack,
         onQueue = onQueue,
         onPlayPause = controller::togglePlayPause,
@@ -73,6 +83,7 @@ fun NowPlayingRoute(
 fun NowPlayingScreen(
     state: PlaybackState,
     coverArt: CoverArtRef?,
+    artwork: ArtworkColors?,
     onBack: () -> Unit,
     onQueue: () -> Unit,
     onPlayPause: () -> Unit,
@@ -84,8 +95,17 @@ fun NowPlayingScreen(
     val playButtonSize = 96.dp
     val playCircleDiameter = playButtonSize * 20f / 24f
 
+    CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onBackground) {
+        ArtworkTheme(artwork) {
+            Box(modifier.fillMaxSize().background(Color.Black)) {
+                HeroGradient(
+                    colors = artwork,
+                    scrollPx = { 0f },
+                    modifier = Modifier.fillMaxSize(),
+                )
                 Scaffold(
-        modifier = modifier,
+                    modifier = Modifier.fillMaxSize(),
+                    containerColor = Color.Transparent,
                     topBar = {
                         TopAppBar(
                             title = { Text("Now playing") },
@@ -94,6 +114,7 @@ fun NowPlayingScreen(
                                     Icon(Icons.AutoMirrored.Rounded.ArrowBack, contentDescription = "Back")
                                 }
                             },
+                            colors = TopAppBarDefaults.topAppBarColors(containerColor = Color.Transparent),
                         )
                     },
                 ) { padding ->
@@ -220,6 +241,9 @@ fun NowPlayingScreen(
                         }
                     }
                 }
+            }
+        }
+    }
 }
 
 private fun formatTime(milliseconds: Long): String {

app/src/test/kotlin/com/subtracks/ui/AppScreenshotTest.kt

@@ -162,6 +162,7 @@ class AppScreenshotTest {
                     artist = Fixtures.artists.first(),
                     albums = Fixtures.albums.filter { it.artistId == Fixtures.artists.first().id },
                     art = CoverArtRef("art-ar-radiohead", "test:art-ar-radiohead"),
+                    artwork = artworkColorsFromSeed(Color.rgb(120, 80, 200)),
                     coverArt = { id, _ -> id?.let { CoverArtRef(it, "test:$it") } },
                     onBack = {},
                     onAlbumClick = {},
@@ -181,6 +182,7 @@ class AppScreenshotTest {
                     playlist = Fixtures.playlists.first(),
                     songs = remember { flowOf(PagingData.from(Fixtures.songItems)) }.collectAsLazyPagingItems(),
                     coverArt = { id, _ -> id?.let { CoverArtRef(it, "test:$it") } },
+                    artwork = artworkColorsFromSeed(Color.rgb(60, 150, 90)),
                     onBack = {},
                     onSongClick = {},
                     modifier = Modifier.fillMaxSize(),
@@ -247,6 +249,7 @@ class AppScreenshotTest {
                 NowPlayingScreen(
                     state = Fixtures.playbackState(),
                     coverArt = CoverArtRef("art-al-kid-a", "test:art-al-kid-a"),
+                    artwork = artworkColorsFromSeed(Color.rgb(120, 80, 200)),
                     onBack = {},
                     onQueue = {},
                     onPlayPause = {},
@@ -296,6 +299,7 @@ class AppScreenshotTest {
                     MiniPlayer(
                         state = Fixtures.playbackState(),
                         coverArt = CoverArtRef("art-al-kid-a", "test:art-al-kid-a"),
+                        artwork = artworkColorsFromSeed(Color.rgb(120, 80, 200)),
                         onExpand = {},
                         onPlayPause = {},
                         onNext = {},
@@ -388,7 +392,7 @@ private object Fixtures {
 
     val playlists =
         listOf(
-            playlist("pl-late-night", "Late Night", 42),
+            playlist("pl-late-night", "Late Night", 42, "Smooth late-night picks"),
             playlist("pl-road-trip", "Road Trip", 63),
             playlist("pl-rainy-day", "Rainy Day", 25),
             playlist("pl-focus", "Focus", 18),
@@ -477,14 +481,16 @@ private object Fixtures {
         id: String,
         name: String,
         songCount: Long,
+        comment: String? = null,
     ) = Playlist(
         sourceId = 1,
         id = id,
         name = name,
-        comment = null,
+        comment = comment,
         coverArt = "art-$id",
         songCount = songCount,
         created = 0,
+        duration = songCount * 210,
     )
 
     fun artEngine(): FakeImageLoaderEngine {