Author: Sandeep Mishra

Youtube video XML url : Part 5- So open youtube.com and open a play list

Search a channel on youtube and open it. You will find a playlist tab . Open that tab and it will display playlist. Click on any play list and you will see url of play list

https://www.youtube.com/watch?v=DPbnQFxdpPg&list=LLA34Z3lq8FozSQzDHsSLcmQ

In this url last parameter is playlist id LLA34Z3lq8FozSQzDHsSLcmQ

By using this playlist id you can find xml data of youtube videos

So we will now use video.xml url of youtube to display xml data

https://www.youtube.com/feeds/videos.xml?playlist_id=LLA34Z3lq8FozSQzDHsSLcmQ

We will get Title , thumnail url and video id from this xml feed to display list of all videos. To achieve this goal we need to parse xml and get data.

This process I will describe in further Step

Process To Get Data From Youtube – If you will see youtube video.xml url, there are many xml node. We  need only all video id , thumbnail url to display image and Title to show on top of Card

XML display data different way than Json. So first we parse xml data and use text to get its value.

First install xmldom so run command

npm install -S xmldom

So after last import line, after a line line break  add parse function which will help to parse data of xml

1. const DOMParser = require(‘xmldom’).DOMParser;

before component start. For example

…..

const DOMParser = require(‘xmldom’).DOMParser;

class VideoList extends Component {

………

First you need to understand few things before we start coding. In this process I am going to use ComponentWillMount, fetch, and state

componentWillMount: this is a lifecycle method . It invoke immediately before mounting occurs.

Fetch: Fetch Networking api used in react native to get content from arbitrary URL

For more details please take a look here

Now in our next process we will use componentWillMount before render function and so

So in VideoList.js remove condole.log(this.props.playlistid); and start writing componentWillMount()

componentWillMount should be called before render() function of component

But before componentWillMount function we will define a state video as array. Because after  fetch were are going to get data in array so open VideoList.js and add before render() function

1. state = { videos: [], }
2. componentWillMount() {
3. const playerid = this.props.playlistid; /* to get playlist id value*/
5. /* Now make url of youtube video smal feed */
6. const url = ‘http://www.youtube.com/feeds/videos.xml?playlist_id=’ + playerid;
8. /* now its time to fetch data from url */
10. fetch(url)
11. .then(Data => Data.text())
12. /* now we will run console.log to check if data coming after fetch */
13. .then(DataText => console.log(DataText));
14. }

Now refresh simulator and you will see xml data in condole.

But this data is not in array and it is not useful for us to setState with array. As you can see we are getting whole xml as it is. To process our video listing we need a array of Title, Image and Video id. To process this we will process to parse data using a helper function . so create a function called getXMLData

So in componentWillMount function add a new function

1. componentWillMount() {
2. const getXMLData = (listdata) => {
4. }
7. ……

No we will expand our function getXMLData. In this function i have passed a parameter which is used to get data which we get from fetch and parse it

So

1. const getXMLData = (listdata) => {
2. const parseData = new DOMParser().parseFromString(listdata, ‘text/xml’);
3. const allVideoTitle = parseData.getElementsByTagName(‘title’);
4. const allVideoId = parseData.getElementsByTagName(‘yt:videoId’);
5. const allThumbnails = parseData.getElementsByTagName(‘media:thumbnail’);
6. /* define a new array */
8. const finalArray = [];
10. /* push all items in one array */
12. for (const i = 0; i < allVideoId.length; i++) {
13. finalArray.push({
14. title: allVideoTitle[i].textContent,
15. id: allVideoId[i].textContent,
16. thumbnail: allThumbnails[i].getAttribute(‘url’)
17. });
18. }
19. return finalArray;
20. };

In above function you can see we have passed our listdata paramer in parseFromString and then we are getting title, video id and Thumbnail by tag name of xml. But is is not enough because we need a series of array in which we can get all values in one array

So I created a variable with name finallArray as array then using for function I have adding each values in finalArray using push function

Push: This  method help to add new item in  array

Now our function returning array of all items which we need in one array. Now we will call this function to setState of Video array state. It may be little confusing but no need to worry much about it . I will show you further process

Now go to this line of componentWillMount function

.then(DataText => console.log(DataText));

And now remove console.log(DataText) and replace with

1. .then(DataText => this.setState({ videos: getXMLData(DataText) }));

Here we have set state video with array using our helper function getXMLData passing Data of fetch

Now if you need to check what is result of this video state you can write a line of console.log in render function of component.

So go to render function of component and write like this

render() {

   console.log(this.state);

   return (

………

If you will open console you will see result as video array

Now remove console.log from render function.

1. import React, { Component } from ‘react’;
2. import { View, Text } from ‘react-native’;
3. import CardWrapper from ‘../common/CardWrapper’;
4. import CardInner from ‘../common/CardInner’;
6. const DOMParser = require(‘xmldom’).DOMParser;
8. class VideoList extends Component {
9. state = { videos: [], }
10. componentWillMount() {
11. const getXMLData = (listdata) => {
12. const parseData = new DOMParser().parseFromString(listdata, ‘text/xml’);
13. const allVideoTitle = parseData.getElementsByTagName(‘title’);
14. const allVideoId = parseData.getElementsByTagName(‘yt:videoId’);
15. const allThumbnails = parseData.getElementsByTagName(‘media:thumbnail’);
16. /* define a new array */
17. const finalArray = [];
18. /* push all items in one array */
19. for (const i = 0; i < allVideoId.length; i++) {
20. finalArray.push({
21. title: allVideoTitle[i].textContent,
22. id: allVideoId[i].textContent,
23. thumbnail: allThumbnails[i].getAttribute(‘url’)
24. });
25. }
26. return finalArray;
27. };
29. const playerid = this.props.playlistid; /* to get playlist id value*/
30. const url = ‘http://www.youtube.com/feeds/videos.xml?playlist_id=’ + playerid;
31. fetch(url)
32. .then(Data => Data.text())
33. .then(DataText => this.setState({ videos: getXMLData(DataText) }));
34. }
35. render() {
36. return (
37. <View>
38. <CardWrapper>
39. <CardInner>
40. <Text>For Title</Text>
41. </CardInner>
42. <CardInner>
43. <Text>For Image</Text>
44. </CardInner>
45. <CardInner>
46. <Text>For Buttons</Text>
47. </CardInner>
48. </CardWrapper>
49. </View>
50. );
51. }
52. }
53. export default VideoList;

Navigation in react native is based on many plateform which you can install and use from npm. I am going to use here react navigator

So open terminal or command prompt and run this command

npm install –save react-navigation

If you want to read more about react navigation please go here https://facebook.github.io/react-native/docs/navigation.html

When installation is complete. Please open root file index.js and we will create Screen and use it . Here i am going to use react-navigation to import StackNavigator so you can easily understand how navigator work in react native

To define screen we will use index.js and in that file we will define YoutubeVideo component to load first. We have added YoutubeVideo in App.js and already imported on index.js on root

So first import stack navigator  in index.js on top. So after this line

import { AppRegistry } from ‘react-native’;

add

1. import { StackNavigator, } from ‘react-navigation’;

Now create new screen component in index.js

1. const AppNav = StackNavigator({
2. YoutubeVideo: {
3. screen: YoutubeVideo
4. }
5. });

And in app registry change component name AppNav

1. AppRegistry.registerComponent(‘youtube_video’, () => AppNav);

Now refresh simulator and see same screen will show

It means you are in right direction and react navigator is working

So your index.js file whole code should look like this

1. import { StackNavigator, } from ‘react-navigation’;
2. import { AppRegistry } from ‘react-native’;
3. import YoutubeVideo from ‘./App’;
5. const AppNav = StackNavigator({
6. YoutubeVideo: {
7. screen: YoutubeVideo
8. }
9. });
11. AppRegistry.registerComponent(‘youtube_video’, () => AppNav);

Note: “if you are getting 500 error after installation of React Navigation, Please delete it and re-install by npm command. To delete please use command npm uninstall –save react-navigation”

Calling Screens In Stack Navigator- Here one need to notice. When we use navigation we should call all component through navigator props. If you will include direct then props from one component to another component will not go and we get error when navigate.

So before video play we will change all component call using navigate function . Here is further process

So first import all component pages in index.js

1. import ViewVideo from ‘./src/components/ViewVideo’;
2. import VideoList from ‘./src/components/VideoList’;
3. import Index from ‘./src/components/Index’;

Then define screen for all components

1. YoutubeVideo: {
2. screen: YoutubeVideo
3. },
4. Index: {
5. screen: Index
6. },
7. VideoList: {
8. screen: VideoList
9. }

Now our index.js page code should look like this

1. import React from ‘react’;
2. import { StackNavigator, } from ‘react-navigation’;
3. import { AppRegistry } from ‘react-native’;
4. import YoutubeVideo from ‘./App’;
5. import VideoList from ‘./src/components/VideoList’;
6. import Index from ‘./src/components/Index’;
8. const AppNav = StackNavigator({
9. YoutubeVideo: {
10. screen: YoutubeVideo
11. },
12. Index: {
13. screen: Index
14. },
15. VideoList: {
16. screen: VideoList
17. }
18. });
20. AppRegistry.registerComponent(‘youtube_video’, () => AppNav);

so now our all screen are added in Stack Navigator function. Now we call any screen to load by using navigation props anywhere without import. Now in next post i will show you how we can call any page instead of import