Update UI Display when no item or not connected

audio-ui/api/current.api

@@ -56,12 +56,12 @@ package com.google.android.horologist.audio.ui.components {
   }
 
   public final class SettingsButtonsDefaults {
-    method @androidx.compose.runtime.Composable public void BrandIcon(@DrawableRes int iconId);
+    method @androidx.compose.runtime.Composable public void BrandIcon(@DrawableRes int iconId, optional androidx.compose.ui.Modifier modifier, optional boolean enabled);
     field public static final com.google.android.horologist.audio.ui.components.SettingsButtonsDefaults INSTANCE;
   }
 
   public final class SettingsButtonsKt {
-    method @androidx.compose.runtime.Composable @com.google.android.horologist.audio.ui.ExperimentalHorologistAudioUiApi public static void SettingsButtons(com.google.android.horologist.audio.VolumeState volumeState, kotlin.jvm.functions.Function0<kotlin.Unit> onVolumeClick, kotlin.jvm.functions.Function0<kotlin.Unit> onOutputClick, optional androidx.compose.ui.Modifier modifier, optional kotlin.jvm.functions.Function0<kotlin.Unit> brandIcon);
+    method @androidx.compose.runtime.Composable @com.google.android.horologist.audio.ui.ExperimentalHorologistAudioUiApi public static void SettingsButtons(com.google.android.horologist.audio.VolumeState volumeState, kotlin.jvm.functions.Function0<kotlin.Unit> onVolumeClick, kotlin.jvm.functions.Function0<kotlin.Unit> onOutputClick, optional androidx.compose.ui.Modifier modifier, optional kotlin.jvm.functions.Function0<kotlin.Unit> brandIcon, optional boolean enabled);
   }
 
 }
@@ -73,7 +73,11 @@ package com.google.android.horologist.audio.ui.components.actions {
   }
 
   public final class SetVolumeButtonKt {
-    method @androidx.compose.runtime.Composable @com.google.android.horologist.audio.ui.ExperimentalHorologistAudioUiApi public static void SetVolumeButton(kotlin.jvm.functions.Function0<kotlin.Unit> onVolumeClick, com.google.android.horologist.audio.VolumeState volumeState, optional androidx.compose.ui.Modifier modifier);
+    method @androidx.compose.runtime.Composable @com.google.android.horologist.audio.ui.ExperimentalHorologistAudioUiApi public static void SetVolumeButton(kotlin.jvm.functions.Function0<kotlin.Unit> onVolumeClick, com.google.android.horologist.audio.VolumeState volumeState, optional androidx.compose.ui.Modifier modifier, optional boolean enabled);
+  }
+
+  public final class SettingsButtonKt {
+    method @androidx.compose.runtime.Composable @com.google.android.horologist.audio.ui.ExperimentalHorologistAudioUiApi public static void SettingsButton(kotlin.jvm.functions.Function0<kotlin.Unit> onClick, androidx.compose.ui.graphics.vector.ImageVector imageVector, String contentDescription, optional androidx.compose.ui.Modifier modifier, optional boolean enabled);
   }
 
 }

audio-ui/src/debug/java/com/google/android/horologist/audio/ui/components/actions/SettingsButtonsPreview.kt

@@ -50,7 +50,24 @@ fun SettingsButtonsWithBrandIconPreview() {
         onVolumeClick = {},
         onOutputClick = {},
         brandIcon = {
-            BrandIcon(R.drawable.ic_uamp)
+            BrandIcon(R.drawable.ic_uamp, enabled = true)
+        }
+    )
+}
+
+@Preview(
+    backgroundColor = 0xff000000,
+    showBackground = true,
+)
+@Composable
+fun SettingsButtonsDisabledPreview() {
+    SettingsButtons(
+        volumeState = VolumeState(5, 10),
+        onVolumeClick = {},
+        onOutputClick = {},
+        enabled = false,
+        brandIcon = {
+            BrandIcon(R.drawable.ic_uamp, enabled = false)
         }
     )
 }

audio-ui/src/main/java/com/google/android/horologist/audio/ui/components/SettingsButtons.kt

@@ -25,6 +25,7 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
@@ -45,29 +46,38 @@ public fun SettingsButtons(
     onOutputClick: () -> Unit,
     modifier: Modifier = Modifier,
     brandIcon: @Composable () -> Unit = {},
+    enabled: Boolean = true
 ) {
     Row(
         modifier = modifier,
         verticalAlignment = Alignment.CenterVertically
     ) {
         SetVolumeButton(
             onVolumeClick = onVolumeClick,
-            volumeState = volumeState
+            volumeState = volumeState,
+            enabled = enabled
         )
         Spacer(modifier = Modifier.size(8.dp))
         brandIcon()
         Spacer(modifier = Modifier.size(8.dp))
         AudioOutputButton(
-            onOutputClick = onOutputClick
+            onOutputClick = onOutputClick,
+            enabled = enabled
         )
     }
 }
 
 public object SettingsButtonsDefaults {
     @Composable
-    public fun BrandIcon(@DrawableRes iconId: Int) {
+    public fun BrandIcon(
+        @DrawableRes iconId: Int,
+        modifier: Modifier = Modifier,
+        enabled: Boolean = true
+    ) {
         Image(
-            modifier = Modifier.size(18.dp).clip(CircleShape),
+            modifier = modifier.size(18.dp).clip(CircleShape).let {
+                if (enabled) it else it.alpha(0.38f)
+            },
             painter = painterResource(id = iconId),
             contentDescription = null
         )

audio-ui/src/main/java/com/google/android/horologist/audio/ui/components/actions/AudioOutputButton.kt

@@ -22,9 +22,7 @@ import androidx.compose.material.icons.filled.Radio
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
-import androidx.wear.compose.material.Button
 import androidx.wear.compose.material.ButtonDefaults
-import androidx.wear.compose.material.Icon
 import com.google.android.horologist.audio.ui.ExperimentalHorologistAudioUiApi
 import com.google.android.horologist.audio.ui.R
 
@@ -38,15 +36,11 @@ public fun AudioOutputButton(
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
 ) {
-    Button(
-        onClick = onOutputClick,
+    SettingsButton(
         modifier = modifier.size(ButtonDefaults.SmallButtonSize),
+        onClick = onOutputClick,
         enabled = enabled,
-        colors = ButtonDefaults.iconButtonColors(),
-    ) {
-        Icon(
-            imageVector = Icons.Default.Radio,
-            contentDescription = stringResource(R.string.horologist_audio_output_content_description)
-        )
-    }
+        imageVector = Icons.Default.Radio,
+        contentDescription = stringResource(R.string.horologist_audio_output_content_description)
+    )
 }

audio-ui/src/main/java/com/google/android/horologist/audio/ui/components/actions/SetVolumeButton.kt

@@ -24,14 +24,10 @@ import androidx.compose.material.icons.filled.VolumeUp
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.semantics.semantics
-import androidx.wear.compose.material.Button
 import androidx.wear.compose.material.ButtonDefaults
-import androidx.wear.compose.material.Icon
 import com.google.android.horologist.audio.VolumeState
 import com.google.android.horologist.audio.ui.ExperimentalHorologistAudioUiApi
 import com.google.android.horologist.audio.ui.R
-import com.google.android.horologist.audio.ui.semantics.CustomSemanticsProperties.iconImageVector
 
 /**
  * Button to launch a screen to control the system volume.
@@ -44,22 +40,17 @@ public fun SetVolumeButton(
     onVolumeClick: () -> Unit,
     volumeState: VolumeState,
     modifier: Modifier = Modifier,
+    enabled: Boolean = true,
 ) {
-    Button(
+    SettingsButton(
         modifier = modifier.size(ButtonDefaults.SmallButtonSize),
         onClick = onVolumeClick,
-        colors = ButtonDefaults.iconButtonColors(),
-    ) {
-        val imageVector = when {
+        enabled = enabled,
+        imageVector = when {
             volumeState.current == 0 -> Icons.Default.VolumeMute
             volumeState.isMax -> Icons.Default.VolumeUp
             else -> Icons.Default.VolumeDown
-        }
-
-        Icon(
-            imageVector = imageVector,
-            contentDescription = stringResource(R.string.horologist_set_volume_content_description),
-            modifier = Modifier.semantics { iconImageVector = imageVector }
-        )
-    }
+        },
+        contentDescription = stringResource(R.string.horologist_set_volume_content_description)
+    )
 }

audio-ui/src/main/java/com/google/android/horologist/audio/ui/components/actions/SettingsButton.kt

@@ -0,0 +1,65 @@
+/*
+ * Copyright 2022 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.google.android.horologist.audio.ui.components.actions
+
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.semantics.semantics
+import androidx.wear.compose.material.Button
+import androidx.wear.compose.material.ButtonDefaults
+import androidx.wear.compose.material.ButtonDefaults.buttonColors
+import androidx.wear.compose.material.Icon
+import androidx.wear.compose.material.MaterialTheme
+import com.google.android.horologist.audio.VolumeState
+import com.google.android.horologist.audio.ui.ExperimentalHorologistAudioUiApi
+import com.google.android.horologist.audio.ui.semantics.CustomSemanticsProperties.iconImageVector
+
+/**
+ * Button to launch a screen to control the system volume.
+ *
+ * See [VolumeState]
+ */
+@ExperimentalHorologistAudioUiApi
+@Composable
+public fun SettingsButton(
+    onClick: () -> Unit,
+    imageVector: ImageVector,
+    contentDescription: String,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+) {
+    Button(
+        modifier = modifier.size(ButtonDefaults.SmallButtonSize),
+        onClick = onClick,
+        colors = buttonColors(
+            backgroundColor = Color.Transparent,
+            disabledBackgroundColor = Color.Transparent,
+            contentColor = MaterialTheme.colors.onSurface,
+        ),
+        enabled = enabled
+    ) {
+
+        Icon(
+            imageVector = imageVector,
+            contentDescription = contentDescription,
+            modifier = Modifier.semantics { iconImageVector = imageVector }
+        )
+    }
+}

media-sample/src/main/java/com/google/android/horologist/mediasample/ui/player/UampMediaPlayerScreen.kt

@@ -65,8 +65,12 @@ fun UampMediaPlayerScreen(
                     onVolumeClick = onVolumeClick,
                     onOutputClick = onOutputClick,
                     brandIcon = {
-                        SettingsButtonsDefaults.BrandIcon(R.drawable.ic_uamp)
-                    }
+                        SettingsButtonsDefaults.BrandIcon(
+                            iconId = R.drawable.ic_uamp,
+                            enabled = it.connected
+                        )
+                    },
+                    enabled = it.connected
                 )
             },
             controlButtons = {