feat: support video headers in editorial #12853
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Update ArticleHero component to match web implementation for video heroes: - Position text overlay absolutely on top of video using LinearGradient - Add gradient background (transparent to rgba(0,0,0,0.6)) for readability - Style text in white with subtle shadows (15px blur, 0.25 opacity) - Maintain existing behavior for image heroes (text below image) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Updates article hero video to match web implementation where video height is calculated as max(50vh - navHeight, 360px) instead of using aspect ratio. This ensures consistent behavior with the web FULLSCREEN layout, where the video fills a height-constrained container with object-fit: cover. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
brainbicycle
changed the title
- Added react-native-linear-gradient mock to setupJest.tsx so it's available globally for all tests - Updated ArticleHero tests to explicitly set media: null in test data to ensure image rendering path is tested instead of video path - Removed local LinearGradient mock from ArticleHero tests since it's now global 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Changed video preload from "metadata" to "auto" for faster loading - Enabled WebView caching (cacheEnabled: true, cacheMode: "LOAD_DEFAULT") - Added mixedContentMode="always" for better Android network performance - Added Android-specific optimizations (javaScriptEnabled, domStorageEnabled, allowFileAccess) - Added testID to ArticleHeroVideo component for testing - Added test for video rendering - Fixed WebView mock to export both default and named WebView export 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
brainbicycle
commented
Oct 16, 2025
| return <View ref={ref} {...props} /> | ||
| }), | ||
| default: MockWebView, | ||
| WebView: MockWebView, |
There was a problem hiding this comment.
missing named export mock was causing test failures
brainbicycle
commented
Oct 16, 2025
| </body> | ||
| </html> | ||
| `, | ||
| [videoUrl, backgroundColor] |
There was a problem hiding this comment.
using embedded html and webviews built in video playback capabilities, customization is limited and performance specifically on Android is not great (at least on my old test device), but is what we are currently using for embedded videos, if we find it is not up to the task we should explore video libraries like react-native-video
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR resolves DIAM-129
Description
Adds basic video header support for native editorial articles.
Embeds the video in a webview, the same approach we use for embedded videos elsewhere in articles.
Draft until tested for performance and design sign off.
android-video-header-low.mov
video-header-low.mov
PR Checklist
To the reviewers 👀
Changelog updates
Changelog updates
Cross-platform user-facing changes
iOS user-facing changes
Android user-facing changes
Dev changes
Need help with something? Have a look at our docs, or get in touch with us.