End of Year: Show top 1 podcast and top 5 podcasts

[ashiagr]

📘 Project: #410

iOS PR: Automattic/pocket-casts-ios#415

Description

Adds the story for the top 1 podcast and the top 5 podcasts.

PS: Ignore hard-coded strings and placeholder layouts/ design in StoryViews.

To test

Testing Instructions

1. Set END_OF_YEAR_ENABLED feature flag to true in base.gradle
2. Run the app and make sure you're logged in to an account with a few items on Listening History
3. When the prompt appears, tap "View My 2022"
4. Skip to the 5th story
5. ✅ Check that it shows your most listened podcast, together with the number of episodes and listening time
6. Skip to the 6th story
7. ✅ Check that it shows your top 5 podcasts

Screenshots or Screencast

Top 1 podcast	Top 5 podcasts

Checklist

N/A (added placeholder layouts + strings)

• If this is a user-facing change, I have added an entry in CHANGELOG.md
• I have considered whether it makes sense to add tests for my changes
• All strings that need to be localized are in modules/services/localization/src/main/res/values/strings.xml
• Any jetpack compose components I added or changed are covered by compose previews

I have tested any UI changes...

• with different themes
• with a landscape orientation
• with the device set to have a large display and font size
• for accessibility with TalkBack

[mchowning]

Looks good. 👍

While testing this I did notice that there is a bit of a flicker when switching to the stories with 5 list items (happen on both the top podcast and top categories ones). It's quick (you really have to slow down the video to see it), but it is definitely noticeable on my device.

device-2022-11-03-095115.mp4

My guess is that coil is loading the podcast images asynchronously. If it's not easy to delay displaying the screen until the images are loading, perhaps we could just include some kind of placeholder so the text doesn't jump (ideally, the PodcastImage component itself would take care of that, or at least have an option to to take care of that). That would probably be enough to completely hide this. I haven't tested any of that, so all of that might be completely wrong.

I'll go ahead and approve because this doesn't need to be addressed in this PR.

[ashiagr]

Thanks for reviewing it, @mchowning! I'll address the flicker issue in a future PR.