fix: resolve 101/150 errors by aligning WebView baseUrl and IFrame origin in inline mode (#74)

- 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

Author: saseungmin

.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

example/src/App.tsx

@@ -293,10 +293,10 @@ function App() {
             </TouchableOpacity>
 
             <TouchableOpacity
-              style={[styles.videoButton, videoId === 'fJ9rUzIMcZQ' && styles.activeVideoButton]}
-              onPress={() => setVideoId('fJ9rUzIMcZQ')}
+              style={[styles.videoButton, videoId === 'dvgZkm1xWPE' && styles.activeVideoButton]}
+              onPress={() => setVideoId('dvgZkm1xWPE')}
             >
-              <Text style={styles.videoButtonText}>Bohemian Rhapsody</Text>
+              <Text style={styles.videoButtonText}>Viva la Vida</Text>
             </TouchableOpacity>
 
             <TouchableOpacity

packages/core/src/types/index.ts

@@ -166,6 +166,11 @@ export type YoutubePlayerVars = {
   rel?: boolean;
   /**
    * This parameter provides an extra security measure for the IFrame API and is only supported for IFrame embeds.
+   *
+   * @remark
+   * - When `useInlineHtml` is `true` (iOS/Android inline WebView), if not provided, the library defaults this to `https://localhost` and sets the WebView `baseUrl` accordingly so that the document origin and this value match.
+   * - When `useInlineHtml` is `false` (remote WebView), if not provided, the external page URL defaults to `https://react-native-youtube-bridge.pages.dev` and this value follows that URL. If you pass a custom `webViewUrl` (base URL), `origin` should follow that same origin.
+   * - In all cases, this value MUST exactly match the document's origin that hosts the iframe for the YouTube IFrame API to function correctly.
    */
   origin?: string;
 };

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

@@ -40,7 +40,10 @@ function YoutubeView({
   // biome-ignore lint/correctness/useExhaustiveDependencies: webViewProps.source is intentionally excluded to prevent unnecessary re-renders
   const webViewSource = useMemo(() => {
     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' });
         }}
       />

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);
+    const safeOrigin = escapeHtml(origin) ?? 'https://localhost';
     const safeStartTime = safeNumber(startTime);
     const safeEndTime = endTime ? safeNumber(endTime) : undefined;
 

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);
   }, []);
 

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