Merge pull request #187 from hoangvvo/use-iframe-api

Use YouTube API for videoId and playList changes

Author: LonelyCpp

src/PlayerScripts.js

@@ -53,6 +53,12 @@ true;
 
     return `player.${func}({playlist: ${playlistJson}, index: ${index}); true;`;
   },
+
+  loadVideoById: (videoId, play) => {
+    const func = play ? 'loadVideoById' : 'cueVideoById';
+
+    return `player.${func}({videoId: ${JSON.stringify(videoId)}}); true;`;
+  },
 };
 
 export const playMode = {

src/YoutubeIframe.js

@@ -1,27 +1,38 @@
+import {EventEmitter} from 'events';
 import React, {
-  useRef,
-  useState,
-  useEffect,
   forwardRef,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useMemo,
+  useRef,
+  useState,
 } from 'react';
-import {View, StyleSheet, Platform} from 'react-native';
-import {WebView} from './WebView';
+import {Platform, StyleSheet, View} from 'react-native';
 import {
+  CUSTOM_USER_AGENT,
+  DEFAULT_BASE_URL,
   PLAYER_ERROR,
   PLAYER_STATES,
-  DEFAULT_BASE_URL,
-  CUSTOM_USER_AGENT,
 } from './constants';
-import {EventEmitter} from 'events';
 import {
-  playMode,
-  soundMode,
   MAIN_SCRIPT,
   PLAYER_FUNCTIONS,
+  playMode,
+  soundMode,
 } from './PlayerScripts';
+import {WebView} from './WebView';
+
+const deepComparePlayList = (lastPlayList, playList) => {
+  return (
+    typeof lastPlayList === typeof playList &&
+    (Array.isArray(lastPlayList)
+      ? lastPlayList.join('')
+      : lastPlayList === Array.isArray(playList)
+      ? playList.join('')
+      : playList)
+  );
+};
 
 const YoutubeIframe = (props, ref) => {
   const {
@@ -41,7 +52,7 @@ const YoutubeIframe = (props, ref) => {
     onError = _err => {},
     onReady = _event => {},
     playListStartIndex = 0,
-    initialPlayerParams = {},
+    initialPlayerParams,
     allowWebViewZoom = false,
     forceAndroidAutoplay = false,
     onChangeState = _event => {},
@@ -50,6 +61,10 @@ const YoutubeIframe = (props, ref) => {
     onPlaybackRateChange = _playbackRate => {},
   } = props;
 
+  const lastVideoIdRef = useRef(videoId);
+  const lastPlayListRef = useRef(playList);
+  const initialPlayerParamsRef = useRef(initialPlayerParams || {});
+
   const webViewRef = useRef(null);
   const eventEmitter = useRef(new EventEmitter());
   const [playerReady, setPlayerReady] = useState(0);
@@ -126,6 +141,39 @@ const YoutubeIframe = (props, ref) => {
     ].forEach(webViewRef.current.injectJavaScript);
   }, [play, playerReady, mute, volume, playbackRate]);
 
+  useEffect(() => {
+    if (playerReady < 1 || lastVideoIdRef.current === videoId) {
+      // no instance of player is ready
+      // or videoId has not changed
+      return;
+    }
+
+    lastVideoIdRef.current = videoId;
+
+    webViewRef.current.injectJavaScript(
+      PLAYER_FUNCTIONS.loadVideoById(videoId, play),
+    );
+  }, [videoId, play, playerReady]);
+
+  useEffect(() => {
+    if (playerReady < 1) {
+      // no instance of player is ready
+      return;
+    }
+
+    // Also, right now, we are helping users by doing "deep" comparisons of playList prop,
+    // but in the next major we should leave the responsibility to user (either via useMemo or moving the array outside)
+    if (!playList || deepComparePlayList(lastPlayListRef.current, playList)) {
+      return;
+    }
+
+    lastPlayListRef.current = playList;
+
+    webViewRef.current.injectJavaScript(
+      PLAYER_FUNCTIONS.loadPlaylist(playList, playListStartIndex, play),
+    );
+  }, [playList, play, playListStartIndex, playerReady]);
+
   const onWebMessage = useCallback(
     event => {
       try {
@@ -141,15 +189,6 @@ const YoutubeIframe = (props, ref) => {
           case 'playerReady':
             onReady();
             setPlayerReady(prev => prev + 1);
-            if (Array.isArray(playList)) {
-              webViewRef.current.injectJavaScript(
-                PLAYER_FUNCTIONS.loadPlaylist(
-                  playList,
-                  playListStartIndex,
-                  play,
-                ),
-              );
-            }
             break;
           case 'playerQualityChange':
             onPlaybackQualityChange(message.data);
@@ -169,13 +208,10 @@ const YoutubeIframe = (props, ref) => {
       }
     },
     [
-      play,
       onReady,
       onError,
-      playList,
       onChangeState,
       onFullScreenChange,
-      playListStartIndex,
       onPlaybackRateChange,
       onPlaybackQualityChange,
     ],
@@ -200,9 +236,9 @@ const YoutubeIframe = (props, ref) => {
 
   const source = useMemo(() => {
     const ytScript = MAIN_SCRIPT(
-      videoId,
-      playList,
-      initialPlayerParams,
+      lastVideoIdRef.current,
+      lastPlayListRef.current,
+      initialPlayerParamsRef.current,
       allowWebViewZoom,
       contentScale,
     );
@@ -219,15 +255,7 @@ const YoutubeIframe = (props, ref) => {
     const data = ytScript.urlEncodedJSON;
 
     return {uri: base + '?data=' + data};
-  }, [
-    videoId,
-    playList,
-    useLocalHTML,
-    contentScale,
-    baseUrlOverride,
-    allowWebViewZoom,
-    initialPlayerParams,
-  ]);
+  }, [useLocalHTML, contentScale, baseUrlOverride, allowWebViewZoom]);
 
   return (
     <View style={{height, width}}>
@@ -238,7 +266,9 @@ const YoutubeIframe = (props, ref) => {
         style={[styles.webView, webViewStyle]}
         mediaPlaybackRequiresUserAction={false}
         onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
-        allowsFullscreenVideo={!initialPlayerParams?.preventFullScreen}
+        allowsFullscreenVideo={
+          !initialPlayerParamsRef.current.preventFullScreen
+        }
         userAgent={
           forceAndroidAutoplay
             ? Platform.select({android: CUSTOM_USER_AGENT, ios: ''})