From a4a3cc62101f8a0544e504fedc1d3b1a985d76ce Mon Sep 17 00:00:00 2001 From: saseungmin Date: Sun, 24 Aug 2025 23:47:29 +0900 Subject: [PATCH] fix: resolve 101/150 errors by aligning WebView baseUrl and IFrame origin in inline mode - Set baseUrl to the default `https://localhost/` for inline WebView - Default playerVars.origin to `https://localhost` in inline WebView - Wrap certain dev logs with DEV so they only run in development - Add TSDoc for playerVars.origin and webViewUrl props --- .changeset/cool-pets-do.md | 11 +++++++++++ example/src/App.tsx | 6 +++--- packages/core/src/types/index.ts | 5 +++++ .../src/YoutubeView.tsx | 16 ++++++++++------ .../src/hooks/useCreateLocalPlayerHtml.ts | 2 +- .../src/hooks/useYouTubePlayer.ts | 4 +++- .../src/types/youtube.ts | 3 +++ 7 files changed, 36 insertions(+), 11 deletions(-) create mode 100644 .changeset/cool-pets-do.md diff --git a/.changeset/cool-pets-do.md b/.changeset/cool-pets-do.md new file mode 100644 index 0000000..19a1456 --- /dev/null +++ b/.changeset/cool-pets-do.md @@ -0,0 +1,11 @@ +--- +"react-native-youtube-bridge": patch +"@react-native-youtube-bridge/core": patch +--- + +fix: resolve 101/150 errors by aligning WebView baseUrl and IFrame origin in inline mode + +- Set baseUrl to the default `https://localhost/` for inline WebView +- Default playerVars.origin to `https://localhost` in inline WebView +- Wrap certain dev logs with DEV so they only run in development +- Add TSDoc for playerVars.origin and webViewUrl props diff --git a/example/src/App.tsx b/example/src/App.tsx index 67fa660..6821781 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -293,10 +293,10 @@ function App() { setVideoId('fJ9rUzIMcZQ')} + style={[styles.videoButton, videoId === 'dvgZkm1xWPE' && styles.activeVideoButton]} + onPress={() => setVideoId('dvgZkm1xWPE')} > - Bohemian Rhapsody + Viva la Vida { if (useInlineHtml) { - return { html: createPlayerHTML(), ...(webViewBaseUrl ? { baseUrl: webViewBaseUrl } : {}) }; + return { + html: createPlayerHTML(), + baseUrl: webViewBaseUrl ?? 'https://localhost/', + }; } if (webViewUrl) { @@ -107,7 +110,9 @@ function YoutubeView({ return; } } catch (error) { - console.error('Error parsing WebView message:', error); + if (__DEV__) { + console.error('Error parsing WebView message:', error); + } player.emit('error', { code: 1000, message: 'FAILED_TO_PARSE_WEBVIEW_MESSAGE' }); } }, @@ -159,12 +164,9 @@ function YoutubeView({ mediaPlaybackRequiresUserAction={false} originWhitelist={['*']} style={[styles.webView, webViewStyle]} - // iOS specific props allowsLinkPreview={false} dataDetectorTypes={dataDetectorTypes} - // Android specific props mixedContentMode="compatibility" - thirdPartyCookiesEnabled={false} webviewDebuggingEnabled={__DEV__} onShouldStartLoadWithRequest={handleShouldStartLoadWithRequest} {...webViewProps} @@ -173,7 +175,9 @@ function YoutubeView({ source={webViewSource} onMessage={handleMessage} onError={(error) => { - console.error('WebView error:', error); + if (__DEV__) { + console.error('WebView error:', error); + } player.emit('error', { code: 1001, message: 'WEBVIEW_LOADING_ERROR' }); }} /> diff --git a/packages/react-native-youtube-bridge/src/hooks/useCreateLocalPlayerHtml.ts b/packages/react-native-youtube-bridge/src/hooks/useCreateLocalPlayerHtml.ts index 752d134..f4811c7 100644 --- a/packages/react-native-youtube-bridge/src/hooks/useCreateLocalPlayerHtml.ts +++ b/packages/react-native-youtube-bridge/src/hooks/useCreateLocalPlayerHtml.ts @@ -25,7 +25,7 @@ const useCreateLocalPlayerHtml = ({ return '
Invalid YouTube ID
'; } - const safeOrigin = escapeHtml(origin); + const safeOrigin = escapeHtml(origin) ?? 'https://localhost'; const safeStartTime = safeNumber(startTime); const safeEndTime = endTime ? safeNumber(endTime) : undefined; diff --git a/packages/react-native-youtube-bridge/src/hooks/useYouTubePlayer.ts b/packages/react-native-youtube-bridge/src/hooks/useYouTubePlayer.ts index 4ebfe8a..211f4fd 100644 --- a/packages/react-native-youtube-bridge/src/hooks/useYouTubePlayer.ts +++ b/packages/react-native-youtube-bridge/src/hooks/useYouTubePlayer.ts @@ -40,7 +40,9 @@ const useYouTubePlayer = (source: YoutubeSource, config?: YoutubePlayerVars): Yo const isFastRefresh = useRef(false); const onError = useCallback((error: YoutubeError) => { - console.error('Invalid YouTube source: ', error); + if (__DEV__) { + console.error('Invalid YouTube source: ', error); + } playerRef.current?.emit('error', error); }, []); diff --git a/packages/react-native-youtube-bridge/src/types/youtube.ts b/packages/react-native-youtube-bridge/src/types/youtube.ts index 003c8e6..6f60b05 100644 --- a/packages/react-native-youtube-bridge/src/types/youtube.ts +++ b/packages/react-native-youtube-bridge/src/types/youtube.ts @@ -54,6 +54,9 @@ export type YoutubeViewProps = { * The URL for the WebView source. * @remark * When `useInlineHtml` is `true`, this value is set as the `baseUrl` for HTML content. + * In this case, the origin of `webViewUrl` MUST match the YouTube IFrame API `origin` + * (e.g. baseUrl `https://localhost/` ⇄ origin `https://localhost`). + * * When `useInlineHtml` is `false`, this value overrides the default URI for the WebView source (https://react-native-youtube-bridge.pages.dev). * @platform ios, android */