Update compiled iframe website $ npm run build

Author: dat-boris

iframe.html

@@ -160,14 +160,9 @@
       document.addEventListener('mozfullscreenchange', onFullScreenChange);
       document.addEventListener('webkitfullscreenchange', onFullScreenChange);
 
-      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.
+      // NOTE: the 3rd parameter is needed for Android Webview.
       // https://github.com/react-native-webview/react-native-webview/issues/356
-      const listenerDocument = isAndroidWebView ? document : window;
-      listenerDocument.addEventListener('message', function (event) {
+      window.addEventListener('message', function (event) {
         const {data} = event;
 
         try {
@@ -202,7 +197,7 @@
         } catch (error) {
           console.error('Error parsing data', event, error);
         }
-      });
+      }, true);
     </script>
   </body>
 </html>

website/static/iframe_v2.html

@@ -1 +1 @@
-<!doctypehtml><meta name="viewport"content="width=device-width,"><style>body{margin:0}.container{position:relative;width:100%;height:0;padding-bottom:56.25%}.video{position:absolute;top:0;left:0;width:100%;height:100%}</style><div class="container"><div class="video"id="player"></div></div><script>const randomPlayerId="player"+Date.now();document.getElementById("player").id=randomPlayerId;const parsedUrl=new URL(window.location.href),UrlQueryData=parsedUrl.searchParams.get("data"),{end:end,list:list,color:color,start:start,rel_s:rel_s,loop_s:loop_s,listType:listType,playerLang:playerLang,playlist:playlist,videoId_s:videoId_s,controls_s:controls_s,cc_lang_pref_s:cc_lang_pref_s,contentScale_s:contentScale_s,allowWebViewZoom:allowWebViewZoom,modestbranding_s:modestbranding_s,iv_load_policy:iv_load_policy,preventFullScreen_s:preventFullScreen_s,showClosedCaptions_s:showClosedCaptions_s}=JSON.parse(UrlQueryData);function sendMessageToRN(e){window.ReactNativeWebView.postMessage(JSON.stringify(e))}let metaString="";contentScale_s&&(metaString+=`initial-scale=${contentScale_s}, `),allowWebViewZoom||(metaString+=`maximum-scale=${contentScale_s}`);const viewport=document.querySelector("meta[name=viewport]");viewport.setAttribute("content","width=device-width, "+metaString);var tag=document.createElement("script");tag.src="https://www.youtube.com/iframe_api";var player,firstScriptTag=document.getElementsByTagName("script")[0];function onYouTubeIframeAPIReady(){player=new YT.Player(randomPlayerId,{width:"1000",height:"1000",videoId:videoId_s,playerVars:{end:end,rel:rel_s,list:list,color:color,loop:loop_s,start:start,playsinline:1,hl:playerLang,playlist:playlist,listType:listType,controls:controls_s,fs:preventFullScreen_s,cc_lang_pref:cc_lang_pref_s,iv_load_policy:iv_load_policy,modestbranding:modestbranding_s,cc_load_policy:showClosedCaptions_s},events:{onReady:onPlayerReady,onError:onPlayerError,onStateChange:onPlayerStateChange,onPlaybackRateChange:onPlaybackRateChange,onPlaybackQualityChange:onPlaybackQualityChange}})}function onPlayerError(e){sendMessageToRN({eventType:"playerError",data:e.data})}function onPlaybackRateChange(e){sendMessageToRN({eventType:"playbackRateChange",data:e.data})}function onPlaybackQualityChange(e){sendMessageToRN({eventType:"playerQualityChange",data:e.data})}function onPlayerReady(e){sendMessageToRN({eventType:"playerReady"})}function onPlayerStateChange(e){sendMessageToRN({eventType:"playerStateChange",data:e.data})}firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);var isFullScreen=!1;function onFullScreenChange(){isFullScreen=document.fullscreenElement||document.msFullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement,sendMessageToRN({eventType:"fullScreenChange",data:Boolean(isFullScreen)})}document.addEventListener("fullscreenchange",onFullScreenChange),document.addEventListener("msfullscreenchange",onFullScreenChange),document.addEventListener("mozfullscreenchange",onFullScreenChange),document.addEventListener("webkitfullscreenchange",onFullScreenChange),window.addEventListener("message",function(e){var{data:e}=e;switch(e){case"playVideo":player.playVideo();break;case"pauseVideo":player.pauseVideo();break;case"muteVideo":player.mute();break;case"unMuteVideo":player.unMute()}})</script>
+<!doctypehtml><meta name="viewport"content="width=device-width,"><style>body{margin:0}.container{position:relative;width:100%;height:0;padding-bottom:56.25%}.video{position:absolute;top:0;left:0;width:100%;height:100%}</style><div class="container"><div class="video"id="player"></div></div><script>const randomPlayerId="player"+Date.now();document.getElementById("player").id=randomPlayerId;const parsedUrl=new URL(window.location.href),UrlQueryData=parsedUrl.searchParams.get("data"),{end:end,list:list,color:color,start:start,rel_s:rel_s,loop_s:loop_s,listType:listType,playerLang:playerLang,playlist:playlist,videoId_s:videoId_s,controls_s:controls_s,cc_lang_pref_s:cc_lang_pref_s,contentScale_s:contentScale_s,allowWebViewZoom:allowWebViewZoom,modestbranding_s:modestbranding_s,iv_load_policy:iv_load_policy,preventFullScreen_s:preventFullScreen_s,showClosedCaptions_s:showClosedCaptions_s}=JSON.parse(UrlQueryData);function sendMessageToRN(e){window.ReactNativeWebView?window.ReactNativeWebView.postMessage(JSON.stringify(e)):window.parent?window.parent.postMessage(JSON.stringify(e),"*"):console.error("Not running in Iframe, cannot postMessage.")}let metaString="";contentScale_s&&(metaString+=`initial-scale=${contentScale_s}, `),allowWebViewZoom||(metaString+=`maximum-scale=${contentScale_s}`);const viewport=document.querySelector("meta[name=viewport]");viewport.setAttribute("content","width=device-width, "+metaString);var tag=document.createElement("script");tag.src="https://www.youtube.com/iframe_api";var player,firstScriptTag=document.getElementsByTagName("script")[0];function onYouTubeIframeAPIReady(){player=new YT.Player(randomPlayerId,{width:"1000",height:"1000",videoId:videoId_s,playerVars:{end:end,rel:rel_s,list:list,color:color,loop:loop_s,start:start,playsinline:1,hl:playerLang,playlist:playlist,listType:listType,controls:controls_s,fs:preventFullScreen_s,cc_lang_pref:cc_lang_pref_s,iv_load_policy:iv_load_policy,modestbranding:modestbranding_s,cc_load_policy:showClosedCaptions_s},events:{onReady:onPlayerReady,onError:onPlayerError,onStateChange:onPlayerStateChange,onPlaybackRateChange:onPlaybackRateChange,onPlaybackQualityChange:onPlaybackQualityChange}})}function onPlayerError(e){sendMessageToRN({eventType:"playerError",data:e.data})}function onPlaybackRateChange(e){sendMessageToRN({eventType:"playbackRateChange",data:e.data})}function onPlaybackQualityChange(e){sendMessageToRN({eventType:"playerQualityChange",data:e.data})}function onPlayerReady(e){sendMessageToRN({eventType:"playerReady"})}function onPlayerStateChange(e){sendMessageToRN({eventType:"playerStateChange",data:e.data})}firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);var isFullScreen=!1;function onFullScreenChange(){isFullScreen=document.fullscreenElement||document.msFullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement,sendMessageToRN({eventType:"fullScreenChange",data:Boolean(isFullScreen)})}document.addEventListener("fullscreenchange",onFullScreenChange),document.addEventListener("msfullscreenchange",onFullScreenChange),document.addEventListener("mozfullscreenchange",onFullScreenChange),document.addEventListener("webkitfullscreenchange",onFullScreenChange),window.addEventListener("message",function(a){var{data:e}=a;try{var{eventName:n,meta:t}=JSON.parse(e);switch(n){case"playVideo":player.playVideo();break;case"pauseVideo":player.pauseVideo();break;case"muteVideo":player.mute();break;case"unMuteVideo":player.unMute();break;case"setVolume":player.setVolume(t.volume);break;case"setPlaybackRate":player.setPlaybackRate(t.playbackRate)}}catch(e){console.error("Error parsing data",a,e)}},!0)</script>