[TV] Home parity: banners, categories and sponsored podcasts

modules/services/localization/src/main/res/values/strings.xml

@@ -253,6 +253,14 @@
     <string name="tv_row_because_you_liked">Because you liked Podcast</string>
     <string name="tv_home_keep_listening">Keep Listening</string>
     <string name="tv_search_browse_categories">Browse categories</string>
+    <string name="tv_sponsored_podcast_section_title">Pocket Casts recommends</string>
+    <string name="tv_banner_create_account_title">One account. Every screen</string>
+    <string name="tv_banner_create_account_subtitle">Your follows and progress exactly where you left them</string>
+    <string name="tv_banner_create_account_action_title">Create a free account</string>
+    <string name="tv_banner_discover_more_title">You haven\'t seen the half of it</string>
+    <string name="tv_banner_discover_more_subtitle">Your next obsession is in here somewhere</string>
+    <string name="tv_banner_discover_more_action_title">Discover more shows</string>
+    <string name="tv_search_searching">Searching…</string>
     <string name="tv_search_no_results_title">No results</string>
     <string name="tv_search_no_results_subtitle">Try more general or different keywords.</string>
     <string name="tv_search_error_subtitle">Check your connection and try again.</string>

tv/src/main/java/au/com/shiftyjelly/pocketcasts/component/TvBannerRow.kt

@@ -0,0 +1,214 @@
+package au.com.shiftyjelly.pocketcasts.component
+
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsFocusedAsState
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.requiredHeight
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.tv.material3.CardDefaults
+import androidx.tv.material3.MaterialTheme
+import androidx.tv.material3.Text
+import au.com.shiftyjelly.pocketcasts.discover.TvDiscoverBanner
+import au.com.shiftyjelly.pocketcasts.theme.TvTheme
+import au.com.shiftyjelly.pocketcasts.theme.tvColors
+import au.com.shiftyjelly.pocketcasts.theme.tvTypography
+import au.com.shiftyjelly.pocketcasts.images.R as IR
+import au.com.shiftyjelly.pocketcasts.localization.R as LR
+
+@Composable
+fun TvBannerRow(
+    banner: TvDiscoverBanner,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val interactionSource = remember { MutableInteractionSource() }
+    val isFocused by interactionSource.collectIsFocusedAsState()
+
+    TvTile(
+        onClick = onClick,
+        shape = CardDefaults.shape(RoundedCornerShape(12.dp)),
+        scale = CardDefaults.scale(focusedScale = 1.05f),
+        colors = CardDefaults.colors(
+            containerColor = Color.Black,
+            focusedContainerColor = Color.Black,
+        ),
+        interactionSource = interactionSource,
+        modifier = modifier
+            .fillMaxWidth()
+            .height(132.dp),
+    ) {
+        Box(modifier = Modifier.fillMaxSize().clipToBounds()) {
+            BackgroundLift()
+            Image(
+                painter = painterResource(banner.artwork()),
+                contentDescription = null,
+                contentScale = ContentScale.FillHeight,
+                alignment = Alignment.CenterEnd,
+                modifier = Modifier
+                    .align(Alignment.CenterEnd)
+                    .requiredHeight(banner.artworkHeight),
+            )
+            if (banner.hasArtworkMask) {
+                // Opaque black over the text side so the bright collage only shows on the end edge.
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .background(
+                            Brush.horizontalGradient(
+                                0f to Color.Black,
+                                0.82f to Color.Black,
+                                1f to Color.Transparent,
+                            ),
+                        ),
+                )
+                BackgroundLift()
+            }
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(48.dp),
+                modifier = Modifier
+                    .align(Alignment.CenterStart)
+                    .fillMaxHeight()
+                    .fillMaxWidth(banner.contentWidthFraction)
+                    .padding(horizontal = 48.dp),
+            ) {
+                BannerActionPill(banner, isFocused)
+                BannerText(banner, modifier = Modifier.weight(1f, fill = false))
+            }
+        }
+    }
+}
+
+@Composable
+private fun BackgroundLift() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(
+                Brush.horizontalGradient(
+                    0f to MaterialTheme.tvColors.backgroundActive20,
+                    0.55f to Color.Transparent,
+                ),
+            ),
+    )
+}
+
+@Composable
+private fun BannerText(banner: TvDiscoverBanner, modifier: Modifier = Modifier) {
+    Column(verticalArrangement = Arrangement.Center, modifier = modifier) {
+        Text(
+            text = banner.title(),
+            style = MaterialTheme.tvTypography.callout,
+            color = MaterialTheme.tvColors.textPrimary,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+        )
+        Text(
+            text = banner.subtitle(),
+            style = MaterialTheme.tvTypography.body,
+            color = MaterialTheme.tvColors.textSecondary,
+            maxLines = 2,
+            overflow = TextOverflow.Ellipsis,
+        )
+    }
+}
+
+@Composable
+private fun BannerActionPill(banner: TvDiscoverBanner, isFocused: Boolean) {
+    Box(
+        contentAlignment = Alignment.Center,
+        modifier = Modifier
+            .clip(RoundedCornerShape(percent = 50))
+            .background(if (isFocused) MaterialTheme.tvColors.backgroundActive else MaterialTheme.tvColors.backgroundActive20)
+            .padding(horizontal = 24.dp, vertical = 12.dp),
+    ) {
+        Text(
+            text = banner.actionTitle(),
+            style = MaterialTheme.tvTypography.caption1,
+            color = if (isFocused) MaterialTheme.tvColors.textPrimaryActive else MaterialTheme.tvColors.backgroundActive,
+        )
+    }
+}
+
+@DrawableRes
+private fun TvDiscoverBanner.artwork(): Int = when (this) {
+    TvDiscoverBanner.CreateAccount -> IR.drawable.tv_banner_create_account
+    TvDiscoverBanner.DiscoverMore -> IR.drawable.tv_banner_discover_more
+}
+
+private val TvDiscoverBanner.artworkHeight: Dp
+    get() = when (this) {
+        TvDiscoverBanner.CreateAccount -> 150.dp
+        TvDiscoverBanner.DiscoverMore -> 170.dp
+    }
+
+private val TvDiscoverBanner.contentWidthFraction: Float
+    get() = when (this) {
+        TvDiscoverBanner.CreateAccount -> 0.68f
+        TvDiscoverBanner.DiscoverMore -> 0.82f
+    }
+
+private val TvDiscoverBanner.hasArtworkMask: Boolean
+    get() = this == TvDiscoverBanner.DiscoverMore
+
+@Composable
+private fun TvDiscoverBanner.title(): String = when (this) {
+    TvDiscoverBanner.CreateAccount -> stringResource(LR.string.tv_banner_create_account_title)
+    TvDiscoverBanner.DiscoverMore -> stringResource(LR.string.tv_banner_discover_more_title)
+}
+
+@Composable
+private fun TvDiscoverBanner.subtitle(): String = when (this) {
+    TvDiscoverBanner.CreateAccount -> stringResource(LR.string.tv_banner_create_account_subtitle)
+    TvDiscoverBanner.DiscoverMore -> stringResource(LR.string.tv_banner_discover_more_subtitle)
+}
+
+@Composable
+private fun TvDiscoverBanner.actionTitle(): String = when (this) {
+    TvDiscoverBanner.CreateAccount -> stringResource(LR.string.tv_banner_create_account_action_title)
+    TvDiscoverBanner.DiscoverMore -> stringResource(LR.string.tv_banner_discover_more_action_title)
+}
+
+@Preview(device = Devices.TV_1080p)
+@Composable
+private fun TvBannerRowPreview() {
+    TvTheme {
+        Column(
+            verticalArrangement = Arrangement.spacedBy(24.dp),
+            modifier = Modifier
+                .background(MaterialTheme.tvColors.backgroundSunken)
+                .padding(48.dp),
+        ) {
+            TvBannerRow(banner = TvDiscoverBanner.CreateAccount, onClick = {})
+            TvBannerRow(banner = TvDiscoverBanner.DiscoverMore, onClick = {})
+        }
+    }
+}

tv/src/main/java/au/com/shiftyjelly/pocketcasts/component/TvPodcastTile.kt

@@ -2,18 +2,25 @@ package au.com.shiftyjelly.pocketcasts.component
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.tv.material3.MaterialTheme
+import androidx.tv.material3.Text
 import au.com.shiftyjelly.pocketcasts.theme.TvTheme
 import au.com.shiftyjelly.pocketcasts.theme.tvColors
+import au.com.shiftyjelly.pocketcasts.theme.tvTypography
 import coil3.compose.AsyncImage
+import au.com.shiftyjelly.pocketcasts.localization.R as LR
 
 @Composable
 fun TvPodcastTile(
@@ -22,17 +29,37 @@ fun TvPodcastTile(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     imageModifier: Modifier = Modifier,
+    isSponsored: Boolean = false,
 ) {
     TvTile(
         onClick = onClick,
         modifier = modifier,
     ) {
-        AsyncImage(
-            model = artworkUrl,
-            contentDescription = podcastTitle,
-            contentScale = ContentScale.Crop,
-            modifier = imageModifier.aspectRatio(1f),
-        )
+        if (isSponsored) {
+            Column(horizontalAlignment = Alignment.CenterHorizontally) {
+                AsyncImage(
+                    model = artworkUrl,
+                    contentDescription = podcastTitle,
+                    contentScale = ContentScale.Crop,
+                    modifier = imageModifier
+                        .padding(horizontal = 18.dp, vertical = 9.dp)
+                        .aspectRatio(1f),
+                )
+                Text(
+                    text = stringResource(LR.string.sponsored),
+                    style = MaterialTheme.tvTypography.caption2,
+                    color = MaterialTheme.tvColors.textSecondary,
+                    modifier = Modifier.padding(bottom = 9.dp),
+                )
+            }
+        } else {
+            AsyncImage(
+                model = artworkUrl,
+                contentDescription = podcastTitle,
+                contentScale = ContentScale.Crop,
+                modifier = imageModifier.aspectRatio(1f),
+            )
+        }
     }
 }