add playlist support

Author: LonelyCpp

doc/readme.md

@@ -31,6 +31,8 @@
 - width
 - ref
 - videoId
+- playList,
+- playListStartIndex,
 - play
 - onChangeState
 - onReady
@@ -41,6 +43,7 @@
 - playbackRate
 - onPlaybackRateChange
 - initialPlayerParams
+- webViewStyle
 
 ### Ref functions
 
@@ -88,10 +91,29 @@ const App = () => {
 
 ## videoId
 
-**REQUIRED, _String_**
+**_String_**
 
 Specifies the YouTube Video ID of the video to be played.
 
+## playList
+
+**_Array<String> | String_**
+
+Specifies the playlist to play. It can be either the playlist ID or a list of video IDs
+
+`playList={'PLbpi6ZahtOH6Blw3RGYpWkSByi_T7Rygb'}`
+
+or
+
+`playList={['QRt7LjqJ45k', 'fHsa9DqmId8']}`
+
+## playListStartIndex
+
+**_Number_**
+
+Starts the playlist from the given index
+**Works only if the playlist is a list of video IDs.**
+
 ## play
 
 **_Boolean_**
@@ -200,3 +222,7 @@ The `playbackRate` that the API passes to the event listener function will be a
 | iv_load_policy     | Number  |         | https://developers.google.com/youtube/player_parameters#iv_load_policy |
 | modestbranding     | boolean | false   | https://developers.google.com/youtube/player_parameters#modestbranding |
 | rel                | boolean | false   | https://developers.google.com/youtube/player_parameters#rel            |
+
+## webViewStyle
+
+A style prop that will be given to the webview

src/PlayerScripts.js

@@ -33,10 +33,14 @@ player.seekTo(${seconds}, ${allowSeekAhead})
   setPlaybackRate: playbackRate =>
     `player.setPlaybackRate(${playbackRate}); true;`,
   setVolume: volume => `player.setVolume(${volume}); true;`,
+  loadPlaylist: (playList, startIndex) => `
+  player.loadPlaylist({playlist: ${JSON.stringify(playList)},
+    index: ${startIndex || 0}}); true;`,
 };
 
 export const MAIN_SCRIPT = (
   videoId,
+  playList,
   {
     loop = false,
     controls = true,
@@ -89,7 +93,7 @@ export const MAIN_SCRIPT = (
         player = new YT.Player('player', {
           height: '1000',
           width: '1000',
-          videoId: '${videoId}',
+          videoId: '${videoId || ''}',
           playerVars: {
             playsinline: 1,
             loop: ${loop ? 1 : 0},
@@ -104,6 +108,8 @@ export const MAIN_SCRIPT = (
             modestbranding: ${modestbranding ? 1 : 0},
             rel: ${rel ? 1 : 0},
             start: ${start},
+            listType:  '${typeof playList === 'string' ? 'playlist' : ''}',
+            list: '${typeof playList === 'string' ? playList : ''}',
           },
           events: {
             'onReady': onPlayerReady,

src/YoutubeIframe.js

@@ -6,7 +6,7 @@ import React, {
   forwardRef,
   useState,
 } from 'react';
-import {View} from 'react-native';
+import {View, StyleSheet} from 'react-native';
 import WebView from 'react-native-webview';
 import {PLAYER_STATES, PLAYER_ERROR} from './constants';
 import {EventEmitter} from 'events';
@@ -17,6 +17,8 @@ const YoutubeIframe = (
     height,
     width,
     videoId,
+    playList,
+    playListStartIndex,
     play = false,
     onChangeState,
     onReady,
@@ -27,6 +29,7 @@ const YoutubeIframe = (
     playbackRate = 1,
     onPlaybackRateChange,
     initialPlayerParams = {},
+    webViewStyle,
   },
   ref,
 ) => {
@@ -121,6 +124,11 @@ const YoutubeIframe = (
           case 'playerReady':
             onReady();
             setPlayerReady(true);
+            if (Array.isArray(playList)) {
+              webViewRef.current.injectJavaScript(
+                PLAYER_FUNCTIONS.loadPlaylist(playList, playListStartIndex),
+              );
+            }
             break;
           case 'playerQualityChange':
             onPlaybackQualityChange(message.data);
@@ -145,20 +153,27 @@ const YoutubeIframe = (
       onPlaybackQualityChange,
       onError,
       onPlaybackRateChange,
+      playListStartIndex,
+      playList,
     ],
   );
 
   return (
     <View style={{height, width}}>
       <WebView
+        style={[webViewStyle, styles.webView]}
         ref={webViewRef}
         originWhitelist={['*']}
-        source={{html: MAIN_SCRIPT(videoId, initialPlayerParams)}}
+        source={{html: MAIN_SCRIPT(videoId, playList, initialPlayerParams)}}
         allowsInlineMediaPlayback
         onMessage={onWebMessage}
       />
     </View>
   );
 };
 
+const styles = StyleSheet.create({
+  webView: {backgroundColor: 'transparent'},
+});
+
 export default forwardRef(YoutubeIframe);