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
*/