feat: add post-message handlers for volume and playback-rate

Author: LonelyCpp

iframe.html

@@ -152,8 +152,9 @@
 
         try {
           const parsedData = JSON.parse(data);
+          const {eventName, meta} = parsedData;
 
-          switch (parsedData.eventName) {
+          switch (eventName) {
             case 'playVideo':
               player.playVideo();
               break;
@@ -169,6 +170,14 @@
             case 'unMuteVideo':
               player.unMute();
               break;
+
+            case 'setVolume':
+              player.setVolume(meta.volume);
+              break;
+
+            case 'setPlaybackRate':
+              player.setPlaybackRate(meta.playbackRate);
+              break;
           }
         } catch (error) {
           console.error('Error parsing data', event, error);

src/YoutubeIframe.js

@@ -55,10 +55,17 @@ 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);
-  }, []);
+  const sendPostMessage = useCallback(
+    (eventName, meta) => {
+      if (!playerReady) {
+        return;
+      }
+
+      const message = JSON.stringify({eventName, meta});
+      webViewRef.current.postMessage(message);
+    },
+    [playerReady],
+  );
 
   useImperativeHandle(
     ref,
@@ -119,42 +126,28 @@ const YoutubeIframe = (props, ref) => {
   );
 
   useEffect(() => {
-    if (!playerReady) {
-      // no instance of player is ready
-      return;
-    }
-
     if (play) {
       sendPostMessage('playVideo', {});
     } else {
       sendPostMessage('pauseVideo', {});
     }
-  }, [play, playerReady, sendPostMessage]);
+  }, [play, sendPostMessage]);
 
   useEffect(() => {
-    if (!playerReady) {
-      // no instance of player is ready
-      return;
-    }
-
     if (mute) {
       sendPostMessage('muteVideo', {});
     } else {
       sendPostMessage('unMuteVideo', {});
     }
-  }, [mute, playerReady, sendPostMessage]);
+  }, [mute, sendPostMessage]);
 
   useEffect(() => {
-    if (!playerReady) {
-      // no instance of player is ready
-      return;
-    }
+    sendPostMessage('setVolume', {volume});
+  }, [sendPostMessage, volume]);
 
-    [
-      PLAYER_FUNCTIONS.setVolume(volume),
-      PLAYER_FUNCTIONS.setPlaybackRate(playbackRate),
-    ].forEach(webViewRef.current.injectJavaScript);
-  }, [volume, playbackRate, playerReady]);
+  useEffect(() => {
+    sendPostMessage('setPlaybackRate', {playbackRate});
+  }, [sendPostMessage, playbackRate]);
 
   useEffect(() => {
     if (!playerReady || lastVideoIdRef.current === videoId) {