[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)
+}