fix: prevent YouTube website from loading inside video player #71
Conversation
- YouTube logo clicks now open in external browser instead of WebView - Add default `onShouldStartLoadWithRequest` handler to intercept navigation - Maintain embed video playback while redirecting external YouTube links - core: export `MATCH_URL_YOUTUBE` regex constant
🦋 Changeset detectedLatest commit: c8c4585 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughA new regular expression constant, Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant YoutubeView (WebView)
participant handleShouldStartLoadWithRequest
participant System Browser
User->>YoutubeView (WebView): Clicks YouTube logo/link
YoutubeView (WebView)->>handleShouldStartLoadWithRequest: onShouldStartLoadWithRequest(request)
handleShouldStartLoadWithRequest->>handleShouldStartLoadWithRequest: Check if URL matches MATCH_URL_YOUTUBE and is not embed
alt Is YouTube site link
handleShouldStartLoadWithRequest->>System Browser: Linking.openURL(url)
handleShouldStartLoadWithRequest-->>YoutubeView (WebView): Return false (prevent navigation)
else Not a YouTube site link
handleShouldStartLoadWithRequest-->>YoutubeView (WebView): Return true (allow navigation)
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Deploying react-native-youtube-bridge-example with
|
| Latest commit: |
c8c4585
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://139e5ebe.react-native-youtube-bridge-example.pages.dev |
| Branch Preview URL: | https://fix-youtube-external-navigat.react-native-youtube-bridge-example.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/react-native-youtube-bridge/src/YoutubeView.tsx (1)
117-124: Consider error handling for external URL opening.The logic correctly identifies YouTube URLs that aren't embed URLs and opens them externally. However, consider adding error handling for the
Linking.openURLcall.const handleShouldStartLoadWithRequest = useCallback((request: ShouldStartLoadRequest) => { if (MATCH_URL_YOUTUBE.test(request.url) && !request.url.includes('/embed/')) { - Linking.openURL(request.url); + Linking.openURL(request.url).catch((error) => { + console.warn('Failed to open YouTube URL externally:', error); + }); return false; } return true; }, []);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
.changeset/flat-showers-tease.md(1 hunks).changeset/quick-needles-stay.md(1 hunks)packages/core/src/index.ts(1 hunks)packages/react-native-youtube-bridge/src/YoutubeView.tsx(3 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/react-native-youtube-bridge/src/YoutubeView.tsx (1)
packages/core/src/index.ts (1)
MATCH_URL_YOUTUBE(18-18)
🔇 Additional comments (7)
.changeset/flat-showers-tease.md (1)
1-6: LGTM! Changeset accurately documents the regex export.The changeset correctly documents the addition of the
MATCH_URL_YOUTUBEregex constant export with an appropriate patch version bump.packages/core/src/index.ts (1)
18-18: LGTM! Clean export addition for URL matching functionality.The addition of
MATCH_URL_YOUTUBEto the exports follows the existing pattern and enables the YoutubeView component to access the regex for URL interception.packages/react-native-youtube-bridge/src/YoutubeView.tsx (4)
2-2: LGTM! Appropriate import addition for external URL opening.The
Linkingimport is correctly added to enable opening URLs in external browser.
4-4: LGTM! Correct type import for WebView callback.The
ShouldStartLoadRequesttype import is necessary for typing the callback parameter.
5-5: LGTM! Import of the exported regex constant.The
MATCH_URL_YOUTUBEimport correctly utilizes the newly exported regex from the core package.
169-169: LGTM! Correct WebView prop integration.The
onShouldStartLoadWithRequestprop is correctly wired to the callback function to intercept URL navigation requests..changeset/quick-needles-stay.md (1)
1-10: LGTM! Comprehensive changeset documentation.The changeset accurately documents the fix with clear description of the behavior changes and implementation approach. The patch version bump is appropriate for this bug fix.
onShouldStartLoadWithRequesthandler to intercept navigationMATCH_URL_YOUTUBEregex constantSummary by CodeRabbit
New Features
Bug Fixes