End of Year: Epilogue story design

[ashiagr]

📘 Project: #410

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

Description

• Adds the design for the epilogue story.
• Improves pause/ resume behavior (now the story pause on press instead of long press earlier)

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. Navigate to the last story
5. ✅ Check the design
6. Tap "Replay"
7. ✅ Stories should replay
8. Tap on a story
9. ✅ Story should pause immediately
10. Release tap event
11. ✅ Story should resume

Screenshots or Screencast

P.S. I picked the background color from the iOS app and applied the existing gradient on other screens.

Checklist

• 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]

Looking good.

The only issue I noticed was that, with the pausing behavior, if your finger moves at all, the story continues playing. Seems like it would be nice for the pause to persist as long as the finger is held down particularly since I found it easy to accidentally move my finger just a bit when I was trying to pause.

[ashiagr]

Merging this PR, tried to fix it in #581.