feat: send JSON over post-message

Author: LonelyCpp

iframe.html

@@ -150,22 +150,28 @@
       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;
+        try {
+          const parsedData = JSON.parse(data);
+
+          switch (parsedData.eventName) {
+            case 'playVideo':
+              player.playVideo();
+              break;
+
+            case 'pauseVideo':
+              player.pauseVideo();
+              break;
+
+            case 'muteVideo':
+              player.mute();
+              break;
+
+            case 'unMuteVideo':
+              player.unMute();
+              break;
+          }
+        } catch (error) {
+          console.error('Error parsing data', event, error);
         }
       });
     </script>

src/PlayerScripts.js

@@ -257,22 +257,28 @@ export const MAIN_SCRIPT = (
       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;
+        try {
+          const parsedData = JSON.parse(data);
+
+          switch (parsedData.eventName) {
+            case 'playVideo':
+              player.playVideo();
+              break;
+
+            case 'pauseVideo':
+              player.pauseVideo();
+              break;
+
+            case 'muteVideo':
+              player.mute();
+              break;
+
+            case 'unMuteVideo':
+              player.unMute();
+              break;
+          }
+        } catch (error) {
+          console.error('Error parsing data', event, error);
         }
       });
     </script>

src/YoutubeIframe.js

@@ -55,6 +55,11 @@ const YoutubeIframe = (props, ref) => {
   const webViewRef = useRef(null);
   const eventEmitter = useRef(new EventEmitter());
 
+  const sendPostMessage = useCallback((eventName, meta) => {
+    const message = JSON.stringify({eventName, meta});
+    webViewRef.current.postMessage(message);
+  }, []);
+
   useImperativeHandle(
     ref,
     () => ({
@@ -119,17 +124,25 @@ const YoutubeIframe = (props, ref) => {
       return;
     }
 
-    webViewRef.current.postMessage(play ? 'playVideo' : 'pauseVideo');
-  }, [play, playerReady]);
+    if (play) {
+      sendPostMessage('playVideo', {});
+    } else {
+      sendPostMessage('pauseVideo', {});
+    }
+  }, [play, playerReady, sendPostMessage]);
 
   useEffect(() => {
     if (!playerReady) {
       // no instance of player is ready
       return;
     }
 
-    webViewRef.current.postMessage(mute ? 'muteVideo' : 'unMuteVideo');
-  }, [mute, playerReady]);
+    if (mute) {
+      sendPostMessage('muteVideo', {});
+    } else {
+      sendPostMessage('unMuteVideo', {});
+    }
+  }, [mute, playerReady, sendPostMessage]);
 
   useEffect(() => {
     if (!playerReady) {