[Jetcaster] Touch up the TV UI (#1432)

Fix podcast art padding Fix clipping on podcast screen Fix navigation transition jumping around
android · Jul 16, 2024 · 594649b · 594649b
2 parents 696c1b0 + 8f05627
commit 594649b
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 8 deletions.
diff --git a/Jetcaster/tv/src/main/java/com/example/jetcaster/tv/MainActivity.kt b/Jetcaster/tv/src/main/java/com/example/jetcaster/tv/MainActivity.kt
@@ -37,7 +37,8 @@ class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
-            JetcasterTheme {
+            // TV is hardcoded to dark mode to match TV ui
+            JetcasterTheme(isInDarkTheme = true) {
                 Surface(
                     modifier = Modifier.fillMaxSize(),
                     shape = RectangleShape

diff --git a/Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/JetcasterApp.kt b/Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/JetcasterApp.kt
@@ -217,13 +217,15 @@ private fun Route(jetcasterAppState: JetcasterAppState) {
         composable(Screen.Profile.route) {
             ProfileScreen(
                 modifier = Modifier
+                    .fillMaxSize()
                     .padding(JetcasterAppDefaults.overScanMargin.default.intoPaddingValues())
             )
         }
 
         composable(Screen.Settings.route) {
             SettingsScreen(
                 modifier = Modifier
+                    .fillMaxSize()
                     .padding(JetcasterAppDefaults.overScanMargin.default.intoPaddingValues())
             )
         }

diff --git a/Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/component/EpisodeCard.kt b/Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/component/EpisodeCard.kt
@@ -23,13 +23,15 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import androidx.tv.material3.Card
+import androidx.tv.material3.CardDefaults
 import androidx.tv.material3.CardScale
 import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.MaterialTheme
@@ -73,6 +75,7 @@ private fun EpisodeThumbnail(
         onClick = onClick,
         interactionSource = interactionSource,
         scale = CardScale.None,
+        shape = CardDefaults.shape(RoundedCornerShape(12.dp)),
         modifier = modifier,
     ) {
         Thumbnail(episode = playerEpisode, size = JetcasterAppDefaults.thumbnailSize.episode)

diff --git a/Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/component/PodcastCard.kt b/Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/component/PodcastCard.kt
@@ -17,10 +17,12 @@
 package com.example.jetcaster.tv.ui.component
 
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.tv.material3.Card
+import androidx.tv.material3.CardDefaults
 import androidx.tv.material3.CardScale
 import androidx.tv.material3.StandardCardContainer
 import androidx.tv.material3.Text
@@ -39,6 +41,7 @@ internal fun PodcastCard(
                 onClick = onClick,
                 interactionSource = it,
                 scale = CardScale.None,
+                shape = CardDefaults.shape(RoundedCornerShape(12.dp))
             ) {
                 Thumbnail(
                     podcastInfo = podcastInfo,

diff --git a/Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/episode/EpisodeScreen.kt b/Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/episode/EpisodeScreen.kt
@@ -20,6 +20,7 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
@@ -52,16 +53,18 @@ fun EpisodeScreen(
 
     val uiState by episodeScreenViewModel.uiStateFlow.collectAsState()
 
+    val screenModifier = modifier.fillMaxSize()
     when (val s = uiState) {
-        EpisodeScreenUiState.Loading -> Loading(modifier = modifier)
-        EpisodeScreenUiState.Error -> ErrorState(backToHome = backToHome, modifier = modifier)
+        EpisodeScreenUiState.Loading -> Loading(modifier = screenModifier)
+        EpisodeScreenUiState.Error -> ErrorState(backToHome = backToHome, modifier = screenModifier)
         is EpisodeScreenUiState.Ready -> EpisodeDetailsWithBackground(
             playerEpisode = s.playerEpisode,
             playEpisode = {
                 episodeScreenViewModel.play(it)
                 playEpisode()
             },
-            addPlayList = episodeScreenViewModel::addPlayList
+            addPlayList = episodeScreenViewModel::addPlayList,
+            modifier = screenModifier
         )
     }
 }

diff --git a/Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/podcast/PodcastDetailsScreen.kt b/Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/podcast/PodcastDetailsScreen.kt
@@ -128,7 +128,6 @@ private fun PodcastDetailsWithBackground(
             enqueue = enqueue,
             modifier = Modifier
                 .fillMaxSize()
-                .padding(JetcasterAppDefaults.overScanMargin.podcast.intoPaddingValues())
         )
     }
 }
@@ -157,7 +156,12 @@ private fun PodcastDetails(
                 isSubscribed = isSubscribed,
                 subscribe = subscribe,
                 unsubscribe = unsubscribe,
-                modifier = Modifier.weight(0.3f),
+                modifier = Modifier
+                    .weight(0.3f)
+                    .padding(
+                        JetcasterAppDefaults.overScanMargin.podcast.copy(end = 0.dp)
+                            .intoPaddingValues()
+                    ),
             )
         },
         second = {
@@ -258,7 +262,8 @@ private fun PodcastEpisodeList(
 ) {
     TvLazyColumn(
         verticalArrangement = Arrangement.spacedBy(JetcasterAppDefaults.gap.podcastRow),
-        modifier = modifier
+        modifier = modifier,
+        contentPadding = JetcasterAppDefaults.overScanMargin.podcast.intoPaddingValues()
     ) {
         items(episodeList) {
             EpisodeListItem(

diff --git a/Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/theme/Space.kt b/Jetcaster/tv/src/main/java/com/example/jetcaster/tv/ui/theme/Space.kt
@@ -34,7 +34,7 @@ internal data class OverScanMarginSettings(
     val default: OverScanMargin = OverScanMargin(),
     val catalog: OverScanMargin = OverScanMargin(end = 0.dp),
     val episode: OverScanMargin = OverScanMargin(start = 80.dp, end = 80.dp),
-    val drawer: OverScanMargin = OverScanMargin(start = 0.dp, end = 0.dp),
+    val drawer: OverScanMargin = OverScanMargin(start = 16.dp, end = 16.dp),
     val podcast: OverScanMargin = OverScanMargin(
         top = 40.dp,
         bottom = 40.dp,