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) {