google · yschimke · Jun 30, 2022 · Jun 29, 2022 · Jun 29, 2022 · Jun 29, 2022
diff --git a/media-sample/src/main/java/com/google/android/horologist/mediasample/domain/Settings.kt b/media-sample/src/main/java/com/google/android/horologist/mediasample/domain/Settings.kt
@@ -18,5 +18,6 @@ package com.google.android.horologist.mediasample.domain
 
 data class Settings(
     val podcastControls: Boolean = false,
-    val loadItemsAtStartup: Boolean = true
+    val loadItemsAtStartup: Boolean = true,
+    val artworkGradient: Boolean = true,
 )
diff --git a/...mple/src/main/java/com/google/android/horologist/mediasample/domain/SettingsRepository.kt b/...mple/src/main/java/com/google/android/horologist/mediasample/domain/SettingsRepository.kt
@@ -45,17 +45,25 @@ class SettingsRepository(
         }
     }
 
+    suspend fun writeArtworkGradient(enabled: Boolean) {
+        edit {
+            it[ArtworkGradient] = enabled
+        }
+    }
+
     val settingsFlow: Flow<Settings> = dataStore.data.map {
         it.toSettings()
     }
 
     companion object {
         val PodcastControls = booleanPreferencesKey("podcast_controls")
         val LoadItemsAtStartup = booleanPreferencesKey("load_items_at_startup")
+        val ArtworkGradient = booleanPreferencesKey("artwork_gradient")
 
         fun Preferences.toSettings() = Settings(
             this[PodcastControls] ?: false,
-            this[LoadItemsAtStartup] ?: true
+            this[LoadItemsAtStartup] ?: true,
+            this[ArtworkGradient] ?: true
         )
     }
 }
diff --git a/...rc/main/java/com/google/android/horologist/mediasample/ui/player/UampMediaPlayerScreen.kt b/...rc/main/java/com/google/android/horologist/mediasample/ui/player/UampMediaPlayerScreen.kt
@@ -21,13 +21,15 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
+import androidx.wear.compose.material.MaterialTheme
 import androidx.wear.compose.material.Scaffold
 import com.google.android.horologist.audio.ui.VolumePositionIndicator
 import com.google.android.horologist.audio.ui.VolumeViewModel
 import com.google.android.horologist.compose.layout.StateUtils.rememberStateWithLifecycle
 import com.google.android.horologist.compose.navscaffold.scrollableColumn
 import com.google.android.horologist.media.ui.components.PodcastControlButtons
 import com.google.android.horologist.media.ui.components.background.ArtworkColorBackground
+import com.google.android.horologist.media.ui.components.background.ColorBackground
 import com.google.android.horologist.media.ui.screens.DefaultPlayerScreenControlButtons
 import com.google.android.horologist.media.ui.screens.PlayerScreen
 import com.google.android.horologist.media.ui.state.PlayerUiState
@@ -72,7 +74,15 @@ fun UampMediaPlayerScreen(
                 }
             },
             background = {
-                ArtworkColorBackground(artworkUri = it.mediaItem?.artworkUri)
+                if (settingsState?.artworkGradient == true) {
+                    val artworkUri = it.mediaItem?.artworkUri
+                    ArtworkColorBackground(
+                        artworkUri = artworkUri,
+                        defaultColor = MaterialTheme.colors.primary
+                    )
+                } else {
+                    ColorBackground(color = MaterialTheme.colors.primary)
+                }
             }
         )
     }

diff --git a/...ain/java/com/google/android/horologist/mediasample/ui/settings/SettingsScreenViewModel.kt b/...ain/java/com/google/android/horologist/mediasample/ui/settings/SettingsScreenViewModel.kt
@@ -35,6 +35,7 @@ class SettingsScreenViewModel(
         UiState(
             podcastControls = it.podcastControls,
             loadItemsAtStartup = it.loadItemsAtStartup,
+            artworkGradient = it.artworkGradient,
             writable = true
         )
     }.stateIn(
@@ -46,6 +47,7 @@ class SettingsScreenViewModel(
     data class UiState(
         val podcastControls: Boolean = false,
         val loadItemsAtStartup: Boolean = true,
+        val artworkGradient: Boolean = true,
         val writable: Boolean = false,
     )
 
@@ -61,6 +63,12 @@ class SettingsScreenViewModel(
         }
     }
 
+    fun setArtworkGradient(enabled: Boolean) {
+        viewModelScope.launch {
+            settingsRepository.writeArtworkGradient(enabled)
+        }
+    }
+
     fun logout() {
         // TODO login and logout functionality
     }

diff --git a/...src/main/java/com/google/android/horologist/mediasample/ui/settings/UampSettingsScreen.kt b/...src/main/java/com/google/android/horologist/mediasample/ui/settings/UampSettingsScreen.kt
@@ -67,6 +67,15 @@ fun UampSettingsScreen(
                 settingsScreenViewModel.setLoadItemsAtStartup(it)
             }
         }
+        item {
+            CheckedSetting(
+                uiState.artworkGradient,
+                stringResource(id = R.string.horologist_artwork_gradient),
+                enabled = uiState.writable
+            ) {
+                settingsScreenViewModel.setArtworkGradient(it)
+            }
+        }
         item {
             ActionSetting(stringResource(id = R.string.horologist_logout)) {
                 settingsScreenViewModel.logout()

diff --git a/media-sample/src/main/res/values/strings.xml b/media-sample/src/main/res/values/strings.xml
@@ -25,4 +25,5 @@
     <string name="horologist_off">Off</string>
     <string name="horologist_on">On</string>
     <string name="horologist_favorite_content_description">Favorite</string>
+    <string name="horologist_artwork_gradient">Use Artwork Gradient</string>
 </resources>
diff --git a/media-ui/api/current.api b/media-ui/api/current.api
@@ -74,7 +74,8 @@ package com.google.android.horologist.media.ui.components.animated {
 package com.google.android.horologist.media.ui.components.background {
 
   public final class ArtworkColorBackgroundKt {
-    method @androidx.compose.runtime.Composable public static void ArtworkColorBackground(String? artworkUri, optional androidx.compose.ui.Modifier modifier);
+    method @androidx.compose.runtime.Composable public static void ArtworkColorBackground(String? artworkUri, optional androidx.compose.ui.Modifier modifier, optional androidx.compose.ui.graphics.Color? defaultColor);
+    method @androidx.compose.runtime.Composable public static void ColorBackground(androidx.compose.ui.graphics.Color? color, optional androidx.compose.ui.Modifier modifier);
   }
 
   public final class RadialBackgroundKt {

diff --git a/...va/com/google/android/horologist/media/ui/components/background/ArtworkColorBackground.kt b/...va/com/google/android/horologist/media/ui/components/background/ArtworkColorBackground.kt
@@ -41,14 +41,15 @@ import coil.request.ImageRequest
 public fun ArtworkColorBackground(
     artworkUri: String?,
     modifier: Modifier = Modifier,
+    defaultColor: Color? = null,
 ) {
     val context = LocalContext.current
     val imageLoader = context.imageLoader
 
-    var color by remember { mutableStateOf<Color?>(null) }
+    var artworkColor by remember { mutableStateOf<Color?>(null) }
 
     LaunchedEffect(artworkUri) {
-        color = if (artworkUri != null) {
+        artworkColor = if (artworkUri != null) {
             val request =
                 ImageRequest.Builder(context)
                     .data(artworkUri)
@@ -62,6 +63,14 @@ public fun ArtworkColorBackground(
         }
     }
 
+    ColorBackground(color = artworkColor ?: defaultColor, modifier = modifier)
+}
+
+@Composable
+public fun ColorBackground(
+    color: Color?,
+    modifier: Modifier = Modifier,
+) {
     Box(
         modifier = modifier
             .fillMaxSize()