fix: align inline baseUrl with IFrame origin (#76)

saseungmin · web-flow · commit 3f6f6dfbaeea · 2025-08-25T10:41:01.000+09:00
* 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

* docs: update TSDoc for webViewUrl/inline behavior
diff --git a/.changeset/fresh-drinks-slide.md 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
@@ -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
@@ -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
@@ -25,7 +25,7 @@ const useCreateLocalPlayerHtml = ({
       return '<html><body><div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff;">Invalid YouTube ID</div></body></html>';
     }
 
-    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
@@ -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

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"react-native-youtube-bridge": patch
 +---
++
 +docs: update TSDoc for webViewUrl/inline behavior
Original file line number	Diff line number	Diff line change
`@@ -40,9 +40,12 @@ function YoutubeView({`
`40`	`40`	`// biome-ignore lint/correctness/useExhaustiveDependencies: webViewProps.source is intentionally excluded to prevent unnecessary re-renders`
`41`	`41`	`const webViewSource = useMemo(() => {`
`42`	`42`	`if (useInlineHtml) {`
	`43`	`+ const webViewBaseUrlWithSlash =`
	`44`	+ webViewBaseUrl && (webViewBaseUrl.endsWith('/') ? webViewBaseUrl : `${webViewBaseUrl}/`);
	`45`	`+`
`43`	`46`	`return {`
`44`	`47`	`html: createPlayerHTML(),`
`45`		`- baseUrl: webViewBaseUrl ?? 'https://localhost/',`
	`48`	`+ baseUrl: webViewBaseUrlWithSlash \|\| 'https://localhost/',`
`46`	`49`	`};`
`47`	`50`	`}`
`48`	`51`
`@@ -111,7 +114,7 @@ function YoutubeView({`
`111`	`114`	`}`
`112`	`115`	`} catch (error) {`
`113`	`116`	`if (__DEV__) {`
`114`		`- console.error('Error parsing WebView message:', error);`
	`117`	`+ console.error('Error parsing WebView message:', error, event?.nativeEvent?.data);`
`115`	`118`	`}`
`116`	`119`	`player.emit('error', { code: 1000, message: 'FAILED_TO_PARSE_WEBVIEW_MESSAGE' });`
`117`	`120`	`}`
Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ const useCreateLocalPlayerHtml = ({`
`25`	`25`	`return '<html><body><div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff;">Invalid YouTube ID</div></body></html>';`
`26`	`26`	`}`
`27`	`27`
`28`		`- const safeOrigin = escapeHtml(origin) ?? 'https://localhost';`
	`28`	`+ const safeOrigin = escapeHtml(origin) \|\| 'https://localhost';`
`29`	`29`	`const safeStartTime = safeNumber(startTime);`
`30`	`30`	`const safeEndTime = endTime ? safeNumber(endTime) : undefined;`
`31`	`31`