feat: add support for postMessage based events

Author: LonelyCpp

iframe.html

@@ -146,6 +146,28 @@
       document.addEventListener('msfullscreenchange', onFullScreenChange);
       document.addEventListener('mozfullscreenchange', onFullScreenChange);
       document.addEventListener('webkitfullscreenchange', onFullScreenChange);
+
+      window.addEventListener('message', function (event) {
+        const {data} = event;
+
+        switch (data) {
+          case 'playVideo':
+            player.playVideo();
+            break;
+
+          case 'pauseVideo':
+            player.pauseVideo();
+            break;
+
+          case 'muteVideo':
+            player.mute();
+            break;
+
+          case 'unMuteVideo':
+            player.unMute();
+            break;
+        }
+      });
     </script>
   </body>
 </html>

src/PlayerScripts.js

@@ -253,6 +253,28 @@ export const MAIN_SCRIPT = (
       document.addEventListener('mozfullscreenchange', onFullScreenChange)
       document.addEventListener('msfullscreenchange', onFullScreenChange)
       document.addEventListener('webkitfullscreenchange', onFullScreenChange)
+
+      window.addEventListener('message', function (event) {
+        const {data} = event;
+
+        switch (data) {
+          case 'playVideo':
+            player.playVideo();
+            break;
+
+          case 'pauseVideo':
+            player.pauseVideo();
+            break;
+
+          case 'muteVideo':
+            player.mute();
+            break;
+
+          case 'unMuteVideo':
+            player.unMute();
+            break;
+        }
+      });
     </script>
   </body>
 </html>

src/YoutubeIframe.js

@@ -118,19 +118,35 @@ const YoutubeIframe = (props, ref) => {
     [],
   );
 
+  useEffect(() => {
+    if (!playerReady) {
+      // no instance of player is ready
+      return;
+    }
+
+    webViewRef.current.postMessage(play ? 'playVideo' : 'pauseVideo');
+  }, [play]);
+
+  useEffect(() => {
+    if (!playerReady) {
+      // no instance of player is ready
+      return;
+    }
+
+    webViewRef.current.postMessage(mute ? 'muteVideo' : 'unMuteVideo');
+  }, [mute]);
+
   useEffect(() => {
     if (!playerReady) {
       // no instance of player is ready
       return;
     }
 
     [
-      playMode[play],
-      soundMode[mute],
       PLAYER_FUNCTIONS.setVolume(volume),
       PLAYER_FUNCTIONS.setPlaybackRate(playbackRate),
     ].forEach(webViewRef.current.injectJavaScript);
-  }, [play, mute, volume, playbackRate, playerReady]);
+  }, [volume, playbackRate, playerReady]);
 
   useEffect(() => {
     if (!playerReady || lastVideoIdRef.current === videoId) {