diff --git a/.changeset/fresh-drinks-slide.md b/.changeset/fresh-drinks-slide.md new file mode 100644 index 0000000..c6277b5 --- /dev/null +++ b/.changeset/fresh-drinks-slide.md @@ -0,0 +1,9 @@ +--- +"react-native-youtube-bridge": patch +--- + +fix: align inline baseUrl with IFrame origin + +- add trailing-slash handling for WebView baseUrl in inline mode +- propagate origin/playerVars into local HTML +- refine YoutubeView WebView source resolution diff --git a/.changeset/slow-kings-lay.md b/.changeset/slow-kings-lay.md new file mode 100644 index 0000000..c5a22d9 --- /dev/null +++ b/.changeset/slow-kings-lay.md @@ -0,0 +1,5 @@ +--- +"react-native-youtube-bridge": patch +--- + +docs: update TSDoc for webViewUrl/inline behavior diff --git a/packages/react-native-youtube-bridge/src/YoutubeView.tsx b/packages/react-native-youtube-bridge/src/YoutubeView.tsx index 9399e82..0dd473f 100644 --- a/packages/react-native-youtube-bridge/src/YoutubeView.tsx +++ b/packages/react-native-youtube-bridge/src/YoutubeView.tsx @@ -40,9 +40,12 @@ function YoutubeView({ // biome-ignore lint/correctness/useExhaustiveDependencies: webViewProps.source is intentionally excluded to prevent unnecessary re-renders const webViewSource = useMemo(() => { if (useInlineHtml) { + const webViewBaseUrlWithSlash = + webViewBaseUrl && (webViewBaseUrl.endsWith('/') ? webViewBaseUrl : `${webViewBaseUrl}/`); + return { html: createPlayerHTML(), - baseUrl: webViewBaseUrl ?? 'https://localhost/', + baseUrl: webViewBaseUrlWithSlash || 'https://localhost/', }; } @@ -111,7 +114,7 @@ function YoutubeView({ } } catch (error) { if (__DEV__) { - console.error('Error parsing WebView message:', error); + console.error('Error parsing WebView message:', error, event?.nativeEvent?.data); } player.emit('error', { code: 1000, message: 'FAILED_TO_PARSE_WEBVIEW_MESSAGE' }); } diff --git a/packages/react-native-youtube-bridge/src/hooks/useCreateLocalPlayerHtml.ts b/packages/react-native-youtube-bridge/src/hooks/useCreateLocalPlayerHtml.ts index f4811c7..0551bdc 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) ?? 'https://localhost'; + 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/types/youtube.ts b/packages/react-native-youtube-bridge/src/types/youtube.ts index 6f60b05..51a89dd 100644 --- a/packages/react-native-youtube-bridge/src/types/youtube.ts +++ b/packages/react-native-youtube-bridge/src/types/youtube.ts @@ -54,8 +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`). + * In this case, the origin of `webViewUrl` MUST exactly match the YouTube IFrame API `origin`. + * - Include the port when applicable (e.g. baseUrl `https://localhost:8081/` ⇄ origin `https://localhost:8081`). + * - Use a trailing slash on the `baseUrl`, but not on `origin` (scheme + host [+ port] only). * * When `useInlineHtml` is `false`, this value overrides the default URI for the WebView source (https://react-native-youtube-bridge.pages.dev). * @platform ios, android