[Jetcaster] Rework dominant color palette to use MaterialTheme

Currently the generated color is only used within a vertical
gradient composable. This CL expands the result and pushes it
into the MaterialTheme.

Change-Id: I672f5cd9b51ce5ece677da4543655bd363688c01

Author: Chris Banes

Jetcaster/app/src/main/java/com/example/jetcaster/data/Feeds.kt

@@ -21,6 +21,11 @@ package com.example.jetcaster.data
  * in this sample app.
  */
 val SampleFeeds = listOf(
+    "https://www.omnycontent.com/d/playlist/aaea4e69-af51-495e-afc9-a9760146922b/dc5b55ca-5f00-4063-b47f-ab870163d2b7/ca63aa52-ef7b-43ee-8ba5-ab8701645231/podcast.rss",
+    "https://audioboom.com/channels/2399216.rss",
+    "http://nowinandroid.googledevelopers.libsynpro.com/rss",
+    "https://fragmentedpodcast.com/feed/",
+    "https://feeds.megaphone.fm/replyall",
     "http://feeds.feedburner.com/blogspot/AndroidDevelopersBackstage",
     "https://feeds.thisamericanlife.org/talpodcast",
     "https://feeds.npr.org/510289/podcast.xml",

Jetcaster/app/src/main/java/com/example/jetcaster/ui/home/Home.kt

@@ -16,6 +16,7 @@
 
 package com.example.jetcaster.ui.home
 
+import androidx.compose.foundation.Box
 import androidx.compose.foundation.Icon
 import androidx.compose.foundation.Text
 import androidx.compose.foundation.background
@@ -47,6 +48,7 @@ import androidx.compose.material.icons.filled.Search
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.launchInComposition
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -65,12 +67,15 @@ import com.example.jetcaster.data.PodcastWithExtraInfo
 import com.example.jetcaster.ui.home.discover.Discover
 import com.example.jetcaster.ui.theme.JetcasterTheme
 import com.example.jetcaster.ui.theme.Keyline1
-import com.example.jetcaster.util.DominantColorVerticalGradient
+import com.example.jetcaster.util.DynamicThemePrimaryColorsFromImage
 import com.example.jetcaster.util.Pager
 import com.example.jetcaster.util.PagerState
 import com.example.jetcaster.util.ToggleFollowPodcastIconButton
+import com.example.jetcaster.util.constrastAgainst
 import com.example.jetcaster.util.quantityStringResource
+import com.example.jetcaster.util.rememberDominantColorState
 import com.example.jetcaster.util.statusBarPadding
+import com.example.jetcaster.util.verticalGradientScrim
 import dev.chrisbanes.accompanist.coil.CoilImage
 import java.time.Duration
 import java.time.LocalDateTime
@@ -129,6 +134,13 @@ fun HomeAppBar(
     }
 }
 
+/**
+ * This is the minimum amount of calculated constrast for a color to be used on top of the
+ * surface color. These values are defined within the WCAG AA guidelines, and we use a value of
+ * 3:1 which is the minimum for user-interface components.
+ */
+private const val MinConstastOfPrimaryVsSurface = 3f
+
 @Composable
 fun HomeContent(
     featuredPodcasts: List<PodcastWithExtraInfo>,
@@ -140,37 +152,63 @@ fun HomeContent(
     onCategorySelected: (HomeCategory) -> Unit
 ) {
     Column(modifier = modifier) {
-        Stack(Modifier.fillMaxWidth()) {
+        // We dynamically theme this sub-section of the layout to match the selected
+        // 'top podcast'
+
+        val surfaceColor = MaterialTheme.colors.surface
+        val dominantColorState = rememberDominantColorState { color ->
+            // We want a color which has sufficient contrast against the surface color
+            color.constrastAgainst(surfaceColor) >= MinConstastOfPrimaryVsSurface
+        }
+
+        DynamicThemePrimaryColorsFromImage(dominantColorState) {
             val clock = AnimationClockAmbient.current
             val pagerState = remember(clock) { PagerState(clock) }
 
-            DominantColorVerticalGradient(
-                imageSourceUrl = featuredPodcasts.getOrNull(pagerState.currentPage)
-                    ?.podcast?.imageUrl,
-                modifier = Modifier.matchParentSize()
-            )
+            val selectedImageUrl = featuredPodcasts.getOrNull(pagerState.currentPage)
+                ?.podcast?.imageUrl
 
-            Column(Modifier.fillMaxWidth()) {
-                HomeAppBar(
-                    modifier = Modifier.fillMaxWidth()
-                        .statusBarPadding()
-                        .preferredHeight(56.dp) /* TODO: change height to 48.dp in landscape */
+            // When the selected image url changes, call updateColorsFromImageUrl() or reset()
+            if (selectedImageUrl != null) {
+                launchInComposition(selectedImageUrl) {
+                    dominantColorState.updateColorsFromImageUrl(selectedImageUrl)
+                }
+            } else {
+                dominantColorState.reset()
+            }
+
+            Stack(Modifier.fillMaxWidth()) {
+                Box(
+                    Modifier.matchParentSize()
+                        .verticalGradientScrim(
+                            color = MaterialTheme.colors.primary.copy(alpha = 0.38f),
+                            startYPercentage = 1f,
+                            endYPercentage = 0f
+                        )
                 )
 
-                if (featuredPodcasts.isNotEmpty()) {
-                    Spacer(Modifier.height(16.dp))
-
-                    FollowedPodcasts(
-                        items = featuredPodcasts,
-                        pagerState = pagerState,
-                        onPodcastUnfollowed = onPodcastUnfollowed,
-                        modifier = Modifier
-                            .padding(start = Keyline1, top = 16.dp, end = Keyline1)
-                            .fillMaxWidth()
-                            .preferredHeight(200.dp)
+                Column(Modifier.fillMaxWidth()) {
+                    HomeAppBar(
+                        Modifier.fillMaxWidth()
+                            .statusBarPadding()
+                            .preferredHeight(56.dp) /* TODO: change height to 48.dp in landscape */
                     )
 
-                    Spacer(Modifier.height(16.dp))
+                    if (featuredPodcasts.isNotEmpty()) {
+                        Spacer(Modifier.height(16.dp))
+
+                        FollowedPodcasts(
+                            items = featuredPodcasts,
+                            pagerState = pagerState,
+                            onPodcastUnfollowed = onPodcastUnfollowed,
+                            modifier = Modifier
+                                .padding(start = Keyline1, top = 16.dp, end = Keyline1)
+                                .fillMaxWidth()
+                                .preferredHeight(200.dp)
+                        )
+
+                        Spacer(Modifier.height(16.dp))
+                    }
                 }
             }
         }

Jetcaster/app/src/main/java/com/example/jetcaster/ui/theme/Color.kt

@@ -34,7 +34,7 @@ fun Colors.compositedOnSurface(alpha: Float): Color {
 val Yellow800 = Color(0xFFF29F05)
 val Red300 = Color(0xFFEA6D7E)
 
-val Colors = darkColors(
+val JetcasterColors = darkColors(
     primary = Yellow800,
     onPrimary = Color.Black,
     primaryVariant = Yellow800,

Jetcaster/app/src/main/java/com/example/jetcaster/ui/theme/Shape.kt

@@ -20,7 +20,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Shapes
 import androidx.compose.ui.unit.dp
 
-val Shapes = Shapes(
+val JetcasterShapes = Shapes(
     small = RoundedCornerShape(percent = 50),
     medium = RoundedCornerShape(size = 8.dp),
     large = RoundedCornerShape(size = 0.dp)

Jetcaster/app/src/main/java/com/example/jetcaster/ui/theme/Theme.kt

@@ -24,9 +24,9 @@ fun JetcasterTheme(
     content: @Composable () -> Unit
 ) {
     MaterialTheme(
-        colors = Colors,
-        typography = Typography,
-        shapes = Shapes,
+        colors = JetcasterColors,
+        typography = JetcasterTypography,
+        shapes = JetcasterShapes,
         content = content
     )
 }

Jetcaster/app/src/main/java/com/example/jetcaster/ui/theme/Type.kt

@@ -31,7 +31,7 @@ private val Montserrat = fontFamily(
     font(R.font.montserrat_semibold, FontWeight.SemiBold)
 )
 
-val Typography = Typography(
+val JetcasterTypography = Typography(
     h1 = TextStyle(
         fontFamily = Montserrat,
         fontSize = 96.sp,

Jetcaster/app/src/main/java/com/example/jetcaster/util/Colors.kt

@@ -0,0 +1,83 @@
+/*
+ * Copyright 2020 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.example.jetcaster.util
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material.Colors
+import androidx.compose.material.darkColors
+import androidx.compose.material.lightColors
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.compositeOver
+import androidx.compose.ui.graphics.luminance
+import kotlin.math.max
+import kotlin.math.min
+
+@Composable
+fun Colors.copy(
+    primary: Color = this.primary,
+    primaryVariant: Color = this.primaryVariant,
+    secondary: Color = this.secondary,
+    secondaryVariant: Color = this.secondaryVariant,
+    background: Color = this.background,
+    surface: Color = this.surface,
+    error: Color = this.error,
+    onPrimary: Color = this.onPrimary,
+    onSecondary: Color = this.onSecondary,
+    onBackground: Color = this.onBackground,
+    onSurface: Color = this.onSurface,
+    onError: Color = this.onError,
+    darkColors: Boolean = isSystemInDarkTheme()
+): Colors = if (darkColors) {
+    darkColors(
+        primary = primary,
+        primaryVariant = primaryVariant,
+        secondary = secondary,
+        background = background,
+        surface = surface,
+        error = error,
+        onPrimary = onPrimary,
+        onSecondary = onSecondary,
+        onBackground = onBackground,
+        onSurface = onSurface,
+        onError = onError
+    )
+} else {
+    lightColors(
+        primary = primary,
+        primaryVariant = primaryVariant,
+        secondary = secondary,
+        secondaryVariant = secondaryVariant,
+        background = background,
+        surface = surface,
+        error = error,
+        onPrimary = onPrimary,
+        onSecondary = onSecondary,
+        onBackground = onBackground,
+        onSurface = onSurface,
+        onError = onError
+    )
+}
+
+fun Color.constrastAgainst(background: Color): Float {
+    val fg = if (alpha < 1f) compositeOver(background) else this
+
+    val fgLuminance = fg.luminance() + 0.05f
+    val bgLuminance = background.luminance() + 0.05f
+
+    return max(fgLuminance, bgLuminance) / min(fgLuminance, bgLuminance)
+}

Jetcaster/app/src/main/java/com/example/jetcaster/util/DynamicTheming.kt

@@ -0,0 +1,177 @@
+/*
+ * Copyright 2020 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.example.jetcaster.util
+
+import android.content.Context
+import androidx.collection.LruCache
+import androidx.compose.animation.animate
+import androidx.compose.animation.core.Spring
+import androidx.compose.animation.core.spring
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.ContextAmbient
+import androidx.core.graphics.drawable.toBitmap
+import androidx.palette.graphics.Palette
+import coil.Coil
+import coil.request.GetRequest
+import coil.request.SuccessResult
+import coil.size.Scale
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.withContext
+
+@Composable
+fun rememberDominantColorState(
+    context: Context = ContextAmbient.current,
+    defaultColor: Color = MaterialTheme.colors.primary,
+    defaultOnColor: Color = MaterialTheme.colors.onPrimary,
+    cacheSize: Int = 12,
+    isColorValid: (Color) -> Boolean = { true }
+): DominantColorState = remember {
+    DominantColorState(context, defaultColor, defaultOnColor, cacheSize, isColorValid)
+}
+
+/**
+ * A composable which allows dynamic theming of the [androidx.compose.material.Colors.primary]
+ * color from an image.
+ */
+@Composable
+fun DynamicThemePrimaryColorsFromImage(
+    dominantColorState: DominantColorState = rememberDominantColorState(),
+    content: @Composable () -> Unit
+) {
+    val colors = MaterialTheme.colors.copy(
+        primary = animate(dominantColorState.color, spring(stiffness = Spring.StiffnessLow)),
+        onPrimary = animate(dominantColorState.onColor, spring(stiffness = Spring.StiffnessLow))
+    )
+    MaterialTheme(colors = colors, content = content)
+}
+
+/**
+ * A class which stores and caches the result of any calculated dominant colors
+ * from images.
+ *
+ * @param context Android context
+ * @param defaultColor The default color, which will be used if [calculateDominantColor] fails to
+ * calculate a dominant color
+ * @param defaultOnColor The default foreground 'on color' for [defaultColor].
+ * @param cacheSize The size of the [LruCache] used to store recent results. Pass `0` to
+ * disable the cache.
+ * @param isColorValid A lambda which allows filtering of the calculated image colors.
+ */
+@Stable
+class DominantColorState(
+    private val context: Context,
+    private val defaultColor: Color,
+    private val defaultOnColor: Color,
+    cacheSize: Int = 12,
+    private val isColorValid: (Color) -> Boolean = { true }
+) {
+    var color by mutableStateOf(defaultColor)
+        private set
+    var onColor by mutableStateOf(defaultOnColor)
+        private set
+
+    private val cache = when {
+        cacheSize > 0 -> LruCache<String, DominantColors>(cacheSize)
+        else -> null
+    }
+
+    suspend fun updateColorsFromImageUrl(url: String) {
+        val result = calculateDominantColor(url)
+        color = result?.color ?: defaultColor
+        onColor = result?.onColor ?: defaultOnColor
+    }
+
+    private suspend fun calculateDominantColor(url: String): DominantColors? {
+        val cached = cache?.get(url)
+        if (cached != null) {
+            // If we already have the result cached, return early now...
+            return cached
+        }
+
+        // Otherwise we calculate the swatches in the image, and return the first valid color
+        return calculateSwatchesInImage(context, url)
+            // First we want to sort the list by the color's population
+            .sortedByDescending { swatch -> swatch.population }
+            // Then we want to find the first valid color
+            .firstOrNull { swatch -> isColorValid(Color(swatch.rgb)) }
+            // If we found a valid swatch, wrap it in a [DominantColors]
+            ?.let { swatch ->
+                DominantColors(
+                    color = Color(swatch.rgb),
+                    onColor = Color(swatch.bodyTextColor).copy(alpha = 1f)
+                )
+            }
+            // Cache the resulting [DominantColors]
+            ?.also { result -> cache?.put(url, result) }
+    }
+
+    /**
+     * Reset the color values to [defaultColor].
+     */
+    fun reset() {
+        color = defaultColor
+        onColor = defaultColor
+    }
+}
+
+@Immutable
+private data class DominantColors(val color: Color, val onColor: Color)
+
+/**
+ * Fetches the given [imageUrl] with [Coil], then uses [Palette] to calculate the dominant color.
+ */
+private suspend fun calculateSwatchesInImage(
+    context: Context,
+    imageUrl: String
+): List<Palette.Swatch> {
+    val r = GetRequest.Builder(context)
+        .data(imageUrl)
+        // We scale the image to cover 128px x 128px (i.e. min dimension == 128px)
+        .size(128).scale(Scale.FILL)
+        // Disable hardware bitmaps, since Palette uses Bitmap.getPixels()
+        .allowHardware(false)
+        .build()
+
+    val bitmap = when (val result = Coil.execute(r)) {
+        is SuccessResult -> result.drawable.toBitmap()
+        else -> null
+    }
+
+    return bitmap?.let {
+        withContext(Dispatchers.Default) {
+            val palette = Palette.Builder(bitmap)
+                // Disable any bitmap resizing in Palette. We've already loaded an appropriately
+                // sized bitmap through Coil
+                .resizeBitmapArea(0)
+                // Clear any built-in filters. We want the unfiltered dominant color
+                .clearFilters()
+                // We reduce the maximum color count down to 8
+                .maximumColorCount(8)
+                .generate()
+
+            palette.swatches
+        }
+    } ?: emptyList()
+}

Jetcaster/app/src/main/java/com/example/jetcaster/util/GradientScrim.kt

@@ -49,11 +49,18 @@ fun Modifier.verticalGradientScrim(
     numStops: Int = 16
 ): Modifier = composed {
     val colors = remember(color, numStops) {
-        val baseAlpha = color.alpha
-        List(numStops) { i ->
-            val x = i * 1f / (numStops - 1)
-            val opacity = x.pow(decay)
-            color.copy(alpha = baseAlpha * opacity)
+        if (decay != 1f) {
+            // If we have a non-linear decay, we need to create the color gradient steps
+            // manually
+            val baseAlpha = color.alpha
+            List(numStops) { i ->
+                val x = i * 1f / (numStops - 1)
+                val opacity = x.pow(decay)
+                color.copy(alpha = baseAlpha * opacity)
+            }
+        } else {
+            // If we have a linear decay, we just create a simple list of start + end colors
+            listOf(color.copy(alpha = 0f), color)
         }
     }