fix: prevent YouTube website from loading inside video player (#71)

- 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

Author: saseungmin

.changeset/flat-showers-tease.md

@@ -0,0 +1,5 @@
+---
+"@react-native-youtube-bridge/core": patch
+---
+
+feat: export `MATCH_URL_YOUTUBE` regex constant

.changeset/quick-needles-stay.md

@@ -0,0 +1,9 @@
+---
+"react-native-youtube-bridge": patch
+---
+
+fix: prevent YouTube website from loading inside video player
+
+- 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

packages/core/src/index.ts

@@ -15,4 +15,4 @@ export {
 export type { MessageData } from './types/webview';
 export { default as WebYoutubePlayerController } from './WebYoutubePlayerController';
 export { escapeHtml, extractVideoIdFromUrl, safeNumber, validateVideoId } from './utils';
-export { ERROR_CODES } from './constants';
+export { ERROR_CODES, MATCH_URL_YOUTUBE } from './constants';

packages/react-native-youtube-bridge/src/YoutubeView.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { type DataDetectorTypes, Dimensions, StyleSheet } from 'react-native';
+import { type DataDetectorTypes, Dimensions, StyleSheet, Linking } from 'react-native';
 import WebView, { type WebViewMessageEvent } from 'react-native-webview';
-import type { MessageData } from '@react-native-youtube-bridge/core';
+import type { ShouldStartLoadRequest } from 'react-native-webview/lib/WebViewTypes';
+import { type MessageData, MATCH_URL_YOUTUBE } from '@react-native-youtube-bridge/core';
 
 import YoutubeViewWrapper from './YoutubeViewWrapper';
 import useCreateLocalPlayerHtml from './hooks/useCreateLocalPlayerHtml';
@@ -113,6 +114,15 @@ function YoutubeView({
     [player],
   );
 
+  const handleShouldStartLoadWithRequest = useCallback((request: ShouldStartLoadRequest) => {
+    if (MATCH_URL_YOUTUBE.test(request.url) && !request.url.includes('/embed/')) {
+      Linking.openURL(request.url);
+      return false;
+    }
+
+    return true;
+  }, []);
+
   useEffect(() => {
     if (isReady && webViewRef.current) {
       const controller = WebviewYoutubePlayerController.createInstance(webViewRef);
@@ -156,6 +166,7 @@ function YoutubeView({
         mixedContentMode="compatibility"
         thirdPartyCookiesEnabled={false}
         webviewDebuggingEnabled={__DEV__}
+        onShouldStartLoadWithRequest={handleShouldStartLoadWithRequest}
         {...webViewProps}
         ref={webViewRef}
         javaScriptEnabled