epic(mobile-expo): match Easter page UX behaviors in mobile app #367
Description
Epic: Match Easter Page UX in Mobile App
The Expo mobile app renders all Easter page sections structurally, but several interactive behaviors from the web page (https://www.jesusfilm.org/watch/easter.html/english.html) are missing or incomplete. This epic tracks each behavioral gap as a separate issue.
Context
- Web source:
apps/watch/src/components/PageCollections/ - Mobile renderers:
mobile/expo/src/components/sections/ - Bounded context:
mobile/expo
Child Issues
| # | Issue | Component | Priority |
|---|---|---|---|
| 1 | #368 | SectionWrapperRenderer — adaptive text colors for dark section backgrounds | High |
| 2 | #369 | VideoHeroRenderer — hero video autoplay muted loop with mute toggle | High |
| 3 | #370 | MediaCollectionRenderer + SectionDispatcher — tappable thumbnails with scroll-to-section | High |
| 4 | #371 | VideoRenderer — visibility-based autoplay for inline video sections | Medium |
| 5 | #373 | BibleQuotesCarouselRenderer — snap scrolling and pagination | Medium |
| 6 | #374 | CTARenderer — in-app navigation for internal CTA links | Medium |
| 7 | #375 | RelatedQuestionsRenderer — animated accordion expand/collapse | Low |
Suggested order
- feat(mobile-expo): adaptive text colors for dark section backgrounds #368 (dark text fix — quick win, high visual impact)
- feat(mobile-expo): hero video autoplay muted loop with mute toggle #369 (hero autoplay — most visible feature)
- feat(mobile-expo): tappable carousel thumbnails with scroll-to-section navigation #370 (scroll-to-section — requires shared context, unlocks feat(mobile-expo): visibility-based autoplay for inline video sections #371)
- feat(mobile-expo): visibility-based autoplay for inline video sections #371 (visibility autoplay — depends on scroll infrastructure from feat(mobile-expo): tappable carousel thumbnails with scroll-to-section navigation #370)
- feat(mobile-expo): snap scrolling and pagination for bible quotes carousel #373 (snap carousel — self-contained)
- feat(mobile-expo): in-app navigation for internal CTA links #374 (in-app nav — depends on navigation architecture decisions)
- feat(mobile-expo): animated accordion expand/collapse with chevron rotation #375 (animated accordion — lowest priority polish)