Update player background and add volume button

modules/features/player/src/main/java/au/com/shiftyjelly/pocketcasts/player/view/MiniPlayer.kt

@@ -122,7 +122,7 @@ class MiniPlayer @JvmOverloads constructor(context: Context, attrs: AttributeSet
 
             val podcast = upNextState.podcast
             if (podcast != null) {
-                updateTintColor(podcast.getMiniPlayerTintColor(theme.isDarkTheme), theme)
+                updateTintColor(podcast.getPlayerTintColor(theme.isDarkTheme), theme)
             } else {
                 updateTintColor(context.getThemeColor(androidx.appcompat.R.attr.colorAccent), theme)
             }

modules/services/model/src/main/java/au/com/shiftyjelly/pocketcasts/models/entity/Podcast.kt

@@ -183,7 +183,7 @@ data class Podcast(
         return if (isDarkTheme) darkThemeColor else lightThemeColor
     }
 
-    fun getMiniPlayerTintColor(isDarkTheme: Boolean): Int {
+    fun getPlayerTintColor(isDarkTheme: Boolean): Int {
         return if (isDarkTheme) tintColorForDarkBg else tintColorForLightBg
     }
 

wear/src/main/kotlin/au/com/shiftyjelly/pocketcasts/wear/MainActivity.kt

@@ -34,6 +34,7 @@ import au.com.shiftyjelly.pocketcasts.wear.ui.component.NowPlayingPager
 import au.com.shiftyjelly.pocketcasts.wear.ui.downloads.DownloadsScreen
 import au.com.shiftyjelly.pocketcasts.wear.ui.episode.EpisodeScreenFlow
 import au.com.shiftyjelly.pocketcasts.wear.ui.episode.EpisodeScreenFlow.episodeGraph
+import au.com.shiftyjelly.pocketcasts.wear.ui.player.PCVolumeScreen
 import au.com.shiftyjelly.pocketcasts.wear.ui.player.StreamingConfirmationScreen
 import au.com.shiftyjelly.pocketcasts.wear.ui.podcast.PodcastScreen
 import au.com.shiftyjelly.pocketcasts.wear.ui.podcasts.PodcastsScreen
@@ -125,6 +126,13 @@ fun WearApp(
             }
         }
 
+        composable(
+            route = PCVolumeScreen.route,
+        ) {
+            it.timeTextMode = NavScaffoldViewModel.TimeTextMode.Off
+            PCVolumeScreen()
+        }
+
         composable(StreamingConfirmationScreen.route) {
             it.timeTextMode = NavScaffoldViewModel.TimeTextMode.Off
 

wear/src/main/kotlin/au/com/shiftyjelly/pocketcasts/wear/ui/player/NowPlayingScreen.kt

@@ -2,31 +2,38 @@ package au.com.shiftyjelly.pocketcasts.wear.ui.player
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.focusable
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.style.TextAlign
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.navigation.NavController
 import androidx.wear.compose.foundation.ExperimentalWearFoundationApi
 import androidx.wear.compose.foundation.rememberActiveFocusRequester
 import androidx.wear.compose.material.MaterialTheme
 import androidx.wear.compose.material.Scaffold
-import androidx.wear.compose.material.Text
 import au.com.shiftyjelly.pocketcasts.R
-import au.com.shiftyjelly.pocketcasts.localization.helper.TimeHelper
+import au.com.shiftyjelly.pocketcasts.ui.extensions.getThemeColor
+import au.com.shiftyjelly.pocketcasts.ui.theme.ThemeColor
 import au.com.shiftyjelly.pocketcasts.wear.ui.component.MarqueeTextMediaDisplay
+import com.google.android.horologist.audio.ui.VolumeUiState
+import com.google.android.horologist.audio.ui.components.actions.SetVolumeButton
 import com.google.android.horologist.compose.rotaryinput.onRotaryInputAccumulated
 import com.google.android.horologist.media.ui.components.PodcastControlButtons
+import com.google.android.horologist.media.ui.components.background.ColorBackground
 import com.google.android.horologist.media.ui.components.display.MessageMediaDisplay
 import com.google.android.horologist.media.ui.screens.player.PlayerScreen
+import androidx.appcompat.R as AR
 
 object NowPlayingScreen {
     const val route = "now_playing"
@@ -64,6 +71,7 @@ fun NowPlayingScreen(
             }
         }
 
+    val volumeUiState by volumeViewModel.volumeUiState.collectAsStateWithLifecycle()
     Scaffold(
         modifier = modifier.fillMaxSize(),
     ) {
@@ -81,12 +89,18 @@ fun NowPlayingScreen(
                     }
 
                     is NowPlayingViewModel.State.Loaded -> {
-                        MarqueeTextMediaDisplay(
-                            title = state.title,
-                            artist = state.subtitle,
-                            modifier = modifier
-                                .clickable { navigateToEpisode(state.episodeUuid) },
-                        )
+                        MaterialTheme(
+                            colors = MaterialTheme.colors.copy(
+                                onBackground = Color.White,
+                            )
+                        ) {
+                            MarqueeTextMediaDisplay(
+                                title = state.title,
+                                artist = state.subtitle,
+                                modifier = modifier
+                                    .clickable { navigateToEpisode(state.episodeUuid) },
+                            )
+                        }
                     }
                 }
             },
@@ -115,22 +129,22 @@ fun NowPlayingScreen(
             },
             buttons = {
                 if (state is NowPlayingViewModel.State.Loaded) {
-                    val position = TimeHelper.formattedSeconds(
-                        state.trackPositionUiModel.position.inWholeSeconds.toDouble()
-                    )
-                    val duration = TimeHelper.formattedSeconds(
-                        state.trackPositionUiModel.duration.inWholeSeconds.toDouble()
-                    )
-                    Text(
-                        text = "$position / $duration",
-                        style = MaterialTheme.typography.caption2,
-                        color = MaterialTheme.colors.onBackground,
-                        textAlign = TextAlign.Center,
-                        modifier = Modifier.align(alignment = Alignment.CenterVertically)
+                    NowPlayingSettingsButtons(
+                        volumeUiState = volumeUiState,
+                        onVolumeClick = { navController.navigate(PCVolumeScreen.route) },
                     )
                 }
             },
-            background = {},
+            background = {
+
+                when (state) {
+                    NowPlayingViewModel.State.Loading -> Unit // Do Nothing
+
+                    is NowPlayingViewModel.State.Loaded -> {
+                        PodcastColorBackground(state)
+                    }
+                }
+            },
             modifier = Modifier
                 .onVolumeChangeByScroll(
                     focusRequester = rememberActiveFocusRequester(),
@@ -140,6 +154,34 @@ fun NowPlayingScreen(
     }
 }
 
+@Composable
+private fun PodcastColorBackground(
+    state: NowPlayingViewModel.State.Loaded,
+) {
+    val context = LocalContext.current
+    val tintColor = state.tintColor ?: context.getThemeColor(AR.attr.colorAccent)
+    ColorBackground(
+        color = Color(ThemeColor.podcastIcon02(state.theme.activeTheme, tintColor))
+    )
+}
+
+@Composable
+fun NowPlayingSettingsButtons(
+    volumeUiState: VolumeUiState,
+    onVolumeClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        SetVolumeButton(
+            onVolumeClick = onVolumeClick,
+            volumeUiState = volumeUiState
+        )
+    }
+}
+
 private fun Modifier.onVolumeChangeByScroll(
     focusRequester: FocusRequester,
     onVolumeChangeByScroll: (scrollPixels: Float) -> Unit

wear/src/main/kotlin/au/com/shiftyjelly/pocketcasts/wear/ui/player/NowPlayingViewModel.kt

@@ -5,6 +5,7 @@ import androidx.lifecycle.viewModelScope
 import au.com.shiftyjelly.pocketcasts.analytics.AnalyticsSource
 import au.com.shiftyjelly.pocketcasts.preferences.Settings
 import au.com.shiftyjelly.pocketcasts.repositories.playback.PlaybackManager
+import au.com.shiftyjelly.pocketcasts.ui.theme.Theme
 import com.google.android.horologist.media.ui.components.controls.SeekButtonIncrement
 import com.google.android.horologist.media.ui.state.model.TrackPositionUiModel
 import dagger.hilt.android.lifecycle.HiltViewModel
@@ -21,14 +22,17 @@ import kotlin.time.toDuration
 class NowPlayingViewModel @Inject constructor(
     private val playbackManager: PlaybackManager,
     settings: Settings,
+    private val theme: Theme,
 ) : ViewModel() {
 
     sealed class State {
         data class Loaded(
             val title: String,
             val subtitle: String?,
+            val tintColor: Int?,
             val playing: Boolean,
             val episodeUuid: String,
+            val theme: Theme,
             val seekBackwardIncrement: SeekButtonIncrement,
             val seekForwardIncrement: SeekButtonIncrement,
             val trackPositionUiModel: TrackPositionUiModel.Actual,
@@ -56,8 +60,10 @@ class NowPlayingViewModel @Inject constructor(
                     val podcast = playbackState.podcast
                     episode.displaySubtitle(podcast)
                 },
+                tintColor = playbackState.podcast?.getPlayerTintColor(theme.isDarkTheme),
                 episodeUuid = playbackState.episodeUuid,
                 playing = playbackState.isPlaying,
+                theme = theme,
                 seekBackwardIncrement = SeekButtonIncrement.Known(skipBackwardSecs),
                 seekForwardIncrement = SeekButtonIncrement.Known(skipForwardSecs),
                 trackPositionUiModel = trackPositionUiModel,

wear/src/main/kotlin/au/com/shiftyjelly/pocketcasts/wear/ui/player/PCVolumeScreen.kt

@@ -0,0 +1,18 @@
+package au.com.shiftyjelly.pocketcasts.wear.ui.player
+
+import androidx.compose.runtime.Composable
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.google.android.horologist.audio.ui.VolumeScreen
+
+object PCVolumeScreen {
+    const val route = "volume"
+}
+
+@Composable
+fun PCVolumeScreen(
+    volumeViewModel: PCVolumeViewModel = hiltViewModel()
+) {
+    VolumeScreen(
+        volumeViewModel = volumeViewModel
+    )
+}