Playback 2023 - Top five podcasts story

modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/StoriesPage.kt

@@ -272,6 +272,7 @@ private fun ShareButton(
                 backgroundColor = Color.Transparent,
                 contentColor = Color.White,
             ),
+        disableScale = true,
         fontSize = 14.sp,
         fontFamily = FontFamily(listOf(Font(UR.font.dm_sans))),
         textIcon = rememberVectorPainter(Icons.Default.Share),

modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/utils/Util.kt

@@ -0,0 +1,7 @@
+package au.com.shiftyjelly.pocketcasts.endofyear.utils
+
+import au.com.shiftyjelly.pocketcasts.models.db.helper.TopPodcast
+
+fun List<TopPodcast>.atSafeIndex(index: Int) =
+    this[index.coerceAtMost(size - 1)]
+        .toPodcast()

modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/views/stories/StoryEpilogueView.kt

@@ -121,7 +121,7 @@ private fun SecondaryText(
     modifier: Modifier = Modifier,
 ) {
     val text = stringResource(id = LR.string.end_of_year_story_epilogue_subtitle)
-    StorySecondaryText(text = text, color = story.tintColor, modifier = modifier)
+    StorySecondaryText(text = text, color = story.subtitleColor, modifier = modifier)
 }
 
 @Composable

modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/views/stories/StoryListenedCategoriesView.kt

@@ -109,5 +109,5 @@ private fun SecondaryText(
     modifier: Modifier = Modifier,
 ) {
     val text = stringResource(id = LR.string.end_of_year_story_listened_to_categories_subtitle)
-    StorySecondaryText(text = text, color = story.tintColor, modifier = modifier)
+    StorySecondaryText(text = text, color = story.subtitleColor, modifier = modifier)
 }

modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/views/stories/StoryListenedNumbersView.kt

@@ -6,6 +6,7 @@ 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.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.rememberScrollState
@@ -24,6 +25,7 @@ import au.com.shiftyjelly.pocketcasts.compose.components.PodcastCover
 import au.com.shiftyjelly.pocketcasts.endofyear.components.StoryBlurredBackground
 import au.com.shiftyjelly.pocketcasts.endofyear.components.StoryPrimaryText
 import au.com.shiftyjelly.pocketcasts.endofyear.components.StorySecondaryText
+import au.com.shiftyjelly.pocketcasts.endofyear.utils.atSafeIndex
 import au.com.shiftyjelly.pocketcasts.localization.R
 import au.com.shiftyjelly.pocketcasts.models.db.helper.TopPodcast
 import au.com.shiftyjelly.pocketcasts.repositories.endofyear.stories.StoryListenedNumbers
@@ -53,7 +55,7 @@ fun StoryListenedNumbersView(
 
             PrimaryText(story)
 
-            Spacer(modifier = modifier.weight(0.1f))
+            Spacer(modifier = modifier.height(14.dp))
 
             SecondaryText(story)
 
@@ -151,9 +153,5 @@ private fun SecondaryText(
     modifier: Modifier = Modifier,
 ) {
     val text = stringResource(R.string.end_of_year_story_listened_to_numbers_subtitle)
-    StorySecondaryText(text = text, color = story.tintColor, modifier = modifier)
+    StorySecondaryText(text = text, color = story.subtitleColor, modifier = modifier)
 }
-
-private fun List<TopPodcast>.atSafeIndex(index: Int) =
-    this[index.coerceAtMost(size - 1)]
-        .toPodcast()

modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/views/stories/StoryListeningTimeView.kt

@@ -89,7 +89,7 @@ private fun SecondaryText(
         story.listeningTimeInSecs,
         context.resources
     )
-    StorySecondaryText(text = funnyText, color = story.tintColor, modifier = modifier)
+    StorySecondaryText(text = funnyText, color = story.subtitleColor, modifier = modifier)
 }
 
 @Composable

modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/views/stories/StoryLongestEpisodeView.kt

@@ -132,5 +132,5 @@ private fun SecondaryText(
         id = R.string.end_of_year_story_longest_episode_duration,
         timeText
     )
-    StorySecondaryText(text = text, color = story.tintColor, modifier = modifier)
+    StorySecondaryText(text = text, color = story.subtitleColor, modifier = modifier)
 }

modules/features/endofyear/src/main/java/au/com/shiftyjelly/pocketcasts/endofyear/views/stories/StoryTopFivePodcastsView.kt

@@ -1,5 +1,6 @@
 package au.com.shiftyjelly.pocketcasts.endofyear.views.stories
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -8,17 +9,21 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Surface
 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.geometry.Offset
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
@@ -27,54 +32,69 @@ import au.com.shiftyjelly.pocketcasts.compose.components.PodcastImage
 import au.com.shiftyjelly.pocketcasts.compose.components.TextH30
 import au.com.shiftyjelly.pocketcasts.compose.components.TextH70
 import au.com.shiftyjelly.pocketcasts.compose.preview.ThemePreviewParameterProvider
+import au.com.shiftyjelly.pocketcasts.endofyear.components.StoryBlurredBackground
+import au.com.shiftyjelly.pocketcasts.endofyear.components.StoryPrimaryText
+import au.com.shiftyjelly.pocketcasts.endofyear.components.StorySecondaryText
 import au.com.shiftyjelly.pocketcasts.endofyear.components.disableScale
-import au.com.shiftyjelly.pocketcasts.endofyear.utils.podcastDynamicBackground
-import au.com.shiftyjelly.pocketcasts.localization.R
 import au.com.shiftyjelly.pocketcasts.models.entity.Podcast
 import au.com.shiftyjelly.pocketcasts.repositories.endofyear.stories.StoryTopFivePodcasts
 import au.com.shiftyjelly.pocketcasts.ui.theme.Theme
+import au.com.shiftyjelly.pocketcasts.utils.extensions.pxToDp
+import au.com.shiftyjelly.pocketcasts.localization.R as LR
+import au.com.shiftyjelly.pocketcasts.ui.R as UR
 
 @Composable
 fun StoryTopFivePodcastsView(
     story: StoryTopFivePodcasts,
     modifier: Modifier = Modifier,
 ) {
-    Column(
-        horizontalAlignment = Alignment.CenterHorizontally,
-        modifier = modifier
-            .fillMaxSize()
-            .podcastDynamicBackground(story.topPodcasts[0].toPodcast())
-            .verticalScroll(rememberScrollState())
-    ) {
-        Spacer(modifier = modifier.height(40.dp))
+    Box {
+        StoryBlurredBackground(
+            Offset(
+                LocalView.current.width * 0.6f,
+                -LocalView.current.height * 0.4f
+            ),
+        )
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = modifier
+                .fillMaxSize()
+                .verticalScroll(rememberScrollState())
+                .padding(vertical = 40.dp)
+        ) {
+            Spacer(modifier = modifier.weight(0.2f))
 
-        Spacer(modifier = modifier.weight(1f))
+            PrimaryText(story)
 
-        Title(story)
+            Spacer(modifier = modifier.height(14.dp))
 
-        Spacer(modifier = modifier.weight(0.5f))
+            SecondaryText(story)
 
-        PodcastList(story)
+            Spacer(modifier = modifier.weight(0.3f))
 
-        Spacer(modifier = modifier.weight(1f))
+            PodcastList(story)
+
+            Spacer(modifier = modifier.weight(0.5f))
+        }
     }
 }
 
 @Composable
-private fun Title(
+private fun PrimaryText(
     story: StoryTopFivePodcasts,
     modifier: Modifier = Modifier,
 ) {
-    val text = stringResource(R.string.end_of_year_story_top_podcasts)
-    TextH30(
-        text = text,
-        textAlign = TextAlign.Center,
-        color = story.tintColor,
-        disableScale = disableScale(),
-        modifier = modifier
-            .padding(horizontal = 40.dp)
-            .fillMaxWidth()
-    )
+    val text = stringResource(LR.string.eoy_story_top_podcasts_title)
+    StoryPrimaryText(text = text, color = story.tintColor, modifier = modifier)
+}
+
+@Composable
+private fun SecondaryText(
+    story: StoryTopFivePodcasts,
+    modifier: Modifier = Modifier,
+) {
+    val text = stringResource(LR.string.eoy_story_top_podcasts_subtitle)
+    StorySecondaryText(text = text, color = story.subtitleColor, modifier = modifier)
 }
 
 @Composable
@@ -83,7 +103,8 @@ private fun PodcastList(story: StoryTopFivePodcasts) {
         PodcastItem(
             podcast = topPodcast.toPodcast(),
             position = index,
-            tintColor = story.tintColor
+            tintColor = story.tintColor,
+            subtitleColor = story.subtitleColor,
         )
     }
 }
@@ -93,20 +114,27 @@ fun PodcastItem(
     podcast: Podcast,
     position: Int,
     tintColor: Color,
+    subtitleColor: Color,
     modifier: Modifier = Modifier,
 ) {
+    val context = LocalContext.current
+    val currentLocalView = LocalView.current
+    val heightInDp = currentLocalView.height.pxToDp(context)
     Row(
         verticalAlignment = Alignment.CenterVertically,
         modifier = modifier
             .fillMaxWidth()
             .padding(horizontal = 40.dp)
     ) {
         TextH30(
-            text = "${position + 1}.",
-            color = tintColor,
-            fontWeight = FontWeight.Normal,
+            text = "${position + 1}",
+            color = subtitleColor,
+            fontWeight = FontWeight.W700,
+            fontFamily = FontFamily(listOf(Font(UR.font.dm_sans))),
             disableScale = disableScale(),
-            modifier = modifier.padding(end = 14.dp)
+            modifier = modifier
+                .padding(end = 14.dp)
+                .widthIn(min = 16.dp)
         )
         Row(
             modifier = modifier
@@ -116,7 +144,7 @@ fun PodcastItem(
         ) {
             PodcastImage(
                 uuid = podcast.uuid,
-                modifier = modifier.size(64.dp)
+                modifier = modifier.size((heightInDp * 0.09f).dp)
             )
             Column(
                 modifier = modifier
@@ -126,18 +154,19 @@ fun PodcastItem(
                     text = podcast.title,
                     color = tintColor,
                     maxLines = 2,
+                    fontFamily = FontFamily(listOf(Font(UR.font.dm_sans))),
                     fontWeight = FontWeight.Bold,
                     disableScale = disableScale(),
                     modifier = modifier
                         .padding(bottom = 3.dp)
                 )
                 TextH70(
                     text = podcast.author,
-                    color = tintColor,
+                    color = subtitleColor,
                     maxLines = 1,
+                    fontFamily = FontFamily(listOf(Font(UR.font.dm_sans))),
                     fontWeight = FontWeight.Bold,
                     disableScale = disableScale(),
-                    modifier = modifier.alpha(0.8f)
                 )
             }
         }
@@ -159,6 +188,7 @@ private fun PodcastItemPreview(
                 ),
                 position = 0,
                 tintColor = Color.White,
+                subtitleColor = Color(0xFF8F97A4),
             )
         }
     }