diff --git a/iframe.html b/iframe.html
index 66e2ca1..e5d6270 100644
--- a/iframe.html
+++ b/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);
diff --git a/src/YoutubeIframe.js b/src/YoutubeIframe.js
index 845c8f8..4bbf487 100644
--- a/src/YoutubeIframe.js
+++ b/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) {