Fix android postMessage and cross-origin webview

Author: dat-boris

iframe.html

@@ -54,7 +54,20 @@
       } = JSON.parse(UrlQueryData);
 
       function sendMessageToRN(msg) {
-        window.ReactNativeWebView.postMessage(JSON.stringify(msg));
+
+        if (window.ReactNativeWebView) {
+          // React Native WebView
+          window.ReactNativeWebView.postMessage(JSON.stringify(msg));
+        } else if (window.parent) {
+          // This is from expo web iframe.
+          //
+          // We set cross origin to so that this will work on differnet origin.
+          // We don't expect any sensitive data to be sent.
+          window.parent.postMessage(JSON.stringify(msg), '*');
+        } else {
+          console.error('Not running in Iframe, cannot postMessage.');
+          return;
+        }
       }
 
       let metaString = '';
@@ -147,7 +160,14 @@
       document.addEventListener('mozfullscreenchange', onFullScreenChange);
       document.addEventListener('webkitfullscreenchange', onFullScreenChange);
 
-      window.addEventListener('message', function (event) {
+      const userAgent = navigator.userAgent;
+      const isAndroidWebView = userAgent.includes('Android') && userAgent.includes('; wv');
+
+      // NOTE: for Android Webview, postMessage needs to be set on document
+      // instead of window.
+      // https://github.com/react-native-webview/react-native-webview/issues/356
+      const listenerDocument = isAndroidWebView ? document : window;
+      listenerDocument.addEventListener('message', function (event) {
         const {data} = event;
 
         try {

src/YoutubeIframe.js

@@ -62,7 +62,10 @@ const YoutubeIframe = (props, ref) => {
       }
 
       const message = JSON.stringify({eventName, meta});
-      webViewRef.current.postMessage(message);
+
+      // NOTE: we set cross origin to so that this will work for webView for
+      // website hosted across different origin.
+      webViewRef.current.postMessage(message, '*');
     },
     [playerReady],
   );
@@ -193,6 +196,14 @@ const YoutubeIframe = (props, ref) => {
             break;
           case 'playerStateChange':
             onChangeState(PLAYER_STATES[message.data]);
+            if (message.data === -1) {
+              // unstartred state is -1
+              // We will not normally "change" to this state, but it can happen
+              // if autoplay is not supported.
+              console.warn(
+                '[rn-youtube-iframe] Player unstarted - autoplay may be blocked.',
+              );
+            }
             break;
           case 'playerReady':
             onReady();