1
00:00:00,730 --> 00:00:04,570
In the last video, we saw how to implement the visual component recording part of this.

2
00:00:04,900 --> 00:00:09,640
In this video, we'll see the 40 part video item, so each and every item of that list.

3
00:00:10,270 --> 00:00:12,790
So firstly, we have to import react.

4
00:00:18,230 --> 00:00:23,440
And I'll be using the styling for styling purpose, I'll be using the great paper and typography components

5
00:00:23,440 --> 00:00:26,340
from the material, you're so important.

6
00:00:29,730 --> 00:00:30,060
Great.

7
00:00:32,230 --> 00:00:36,940
Paper, and I said, if they are not default experts, then we have to do this quietly braces.

8
00:00:37,270 --> 00:00:37,750
That's fine.

9
00:00:37,900 --> 00:00:43,570
Since we act as a default expert from the act component, we are importing it without any basis.

10
00:00:44,050 --> 00:00:49,360
But great paper and typography are one of the exports that the material has.

11
00:00:49,360 --> 00:00:52,030
So we have to export import them using this kind of precious.

12
00:00:53,520 --> 00:00:55,170
I for coffee.

13
00:00:58,090 --> 00:00:58,420
From.

14
00:00:59,820 --> 00:01:00,710
I believe I could.

15
00:01:03,750 --> 00:01:06,420
Once this is done, the function for the radio item.

16
00:01:10,920 --> 00:01:11,460
So.

17
00:01:13,950 --> 00:01:20,130
Coming to the props, what props like, what of that barometer that we are getting in for this vital

18
00:01:20,130 --> 00:01:20,550
function?

19
00:01:20,790 --> 00:01:21,690
You've seen list.

20
00:01:22,050 --> 00:01:24,330
We are sending three bedroom because one is the key.

21
00:01:24,720 --> 00:01:26,730
One is the video and one is on celebrity.

22
00:01:27,210 --> 00:01:32,730
So now those things will actually mean I will catch video on select radio since we don't have any use

23
00:01:32,730 --> 00:01:33,240
with that key.

24
00:01:37,490 --> 00:01:38,400
It will be video.

25
00:01:39,870 --> 00:01:40,790
On reducing the.

26
00:01:44,430 --> 00:01:46,590
Once it is done, we'll return.

27
00:01:51,380 --> 00:01:52,340
We need an upgrade.

28
00:02:00,550 --> 00:02:02,020
So the great item will be.

29
00:02:03,850 --> 00:02:06,550
Excess of excess will be plural, as I said.

30
00:02:07,000 --> 00:02:09,550
These are fundamentally good that we are using simply.

31
00:02:10,550 --> 00:02:11,720
And then the people.

32
00:02:14,190 --> 00:02:15,840
The paper this day will be.

33
00:02:20,540 --> 00:02:21,890
This player will be flex.

34
00:02:28,930 --> 00:02:30,310
A line item should be center.

35
00:02:38,590 --> 00:02:39,730
Carson will be a appointed.

36
00:02:42,200 --> 00:02:43,070
At seven a.m..

37
00:02:45,000 --> 00:02:45,500
Washington.

38
00:02:48,830 --> 00:02:51,420
So after this on select on.

39
00:02:54,980 --> 00:02:55,660
On Click.

40
00:03:04,450 --> 00:03:07,780
We'll be calling on select radio.

41
00:03:10,290 --> 00:03:13,470
On radio, Seligman said on those radio.

42
00:03:16,480 --> 00:03:16,770
Really?

43
00:03:20,520 --> 00:03:29,220
So I have used up all these shortcuts so that, you know, everything will be equal like item the text

44
00:03:29,430 --> 00:03:33,930
alignment, all the text will be wrapped in a single screen.

45
00:03:33,930 --> 00:03:36,570
You need to move the bottom left and right.

46
00:03:36,930 --> 00:03:38,820
So all these are useful shortcuts.

47
00:03:39,480 --> 00:03:44,670
So what is happening is on click whenever you click on a particular element, then we are calling on

48
00:03:44,790 --> 00:03:48,840
to select function and sending this video where we are getting this onto that function.

49
00:03:48,900 --> 00:03:53,820
We are getting from the parent company that is Middle East component here, also with any mountain of

50
00:03:53,820 --> 00:03:54,380
brilliant the.

51
00:03:54,930 --> 00:03:59,730
So where we are getting this answer to the problem we are getting from parent comment approaches.

52
00:04:00,210 --> 00:04:04,590
So we do item parent component as we do list variant is the components.

53
00:04:04,590 --> 00:04:09,030
Parent component is not just so it's going to have something that function through all these components.

54
00:04:09,030 --> 00:04:12,300
So this is called update management and props from one component to another.

55
00:04:12,840 --> 00:04:16,520
So instead, this after just when we are triggering this on click function.

56
00:04:16,530 --> 00:04:21,480
This is a callback function so they don't when the click is performed only then only we are calling

57
00:04:21,480 --> 00:04:21,900
this on.

58
00:04:21,900 --> 00:04:22,770
We does not function.

59
00:04:22,980 --> 00:04:27,330
And this in Britain will go back to that initial state where it is called in Aparajith.

60
00:04:27,720 --> 00:04:31,050
And then there we are, calling this select this function.

61
00:04:31,410 --> 00:04:37,860
Self-select reverse function should have a Eurobarometer so that it will change the selected video to

62
00:04:38,610 --> 00:04:40,440
the media that we are sending it as a barometer.

63
00:04:40,740 --> 00:04:44,730
So what we are getting, the parameters from this will be that parameter that we do.

64
00:04:44,970 --> 00:04:50,100
So the current video on which the unit is clicking the video item that will go down, not just change

65
00:04:50,100 --> 00:04:55,170
the selected video and managed on that the video data will be based on this activity video.

66
00:04:56,430 --> 00:05:03,090
This is all we are working with on this item and all the Bay State management and parent to child component

67
00:05:03,690 --> 00:05:04,680
props transmit it all.

68
00:05:05,370 --> 00:05:06,600
So this is the logic.

69
00:05:06,810 --> 00:05:08,700
Now the remaining thing is we have to.

70
00:05:10,470 --> 00:05:11,160
The source.

71
00:05:12,390 --> 00:05:13,280
So it will be.

72
00:05:17,330 --> 00:05:19,910
Well, OK, second, yeah.

73
00:05:20,840 --> 00:05:23,360
So the image component style will be.

74
00:05:29,980 --> 00:05:31,210
My agenda, it should be.

75
00:05:35,620 --> 00:05:36,490
Granted, since.

76
00:05:41,290 --> 00:05:42,550
All the major Mitt Romney.

77
00:05:51,670 --> 00:05:52,810
And the source will be.

78
00:05:55,570 --> 00:05:56,980
Your dog?

79
00:05:58,000 --> 00:05:58,630
Snippet.

80
00:05:59,610 --> 00:06:01,530
Not thumbnails.

81
00:06:04,280 --> 00:06:06,580
I'm unarmed, not medium, not driven.

82
00:06:11,630 --> 00:06:14,750
So this is the role of the data that we want as the image.

83
00:06:16,630 --> 00:06:18,790
And then after they met, you never typography.

84
00:06:19,970 --> 00:06:20,470
April.

85
00:06:23,200 --> 00:06:24,580
The typography will be.

86
00:06:28,360 --> 00:06:29,020
In bold.

87
00:06:30,180 --> 00:06:36,370
We'll have really all these are basically the attributes that the video did condensate like in the starting

88
00:06:36,370 --> 00:06:41,040
me console.log one, the response fun celebrity, marvelously particularized it will have details.

89
00:06:41,040 --> 00:06:45,000
Everything in detail regarding the video for that snippet contains the title of the video.

90
00:06:47,390 --> 00:06:49,480
So he had to be sure to send a variant from.

91
00:06:50,680 --> 00:06:51,850
Variant should be.

92
00:06:54,630 --> 00:06:56,160
Subtitle one.

93
00:06:59,660 --> 00:07:01,340
So once this is completed.

94
00:07:02,180 --> 00:07:04,970
Let me check whether there are the bugs are not, everything is fine.

95
00:07:05,480 --> 00:07:10,750
On Friday, we're calling this it is going to die and gorgeous and sending this video to that six select

96
00:07:10,760 --> 00:07:13,700
video set selected with your book.

97
00:07:14,000 --> 00:07:20,930
And then we are changing the period detail in an appearance to that item that is selected by default.

98
00:07:20,930 --> 00:07:24,510
We now have our identity is given to the ideas element.

99
00:07:24,940 --> 00:07:27,830
We just need title and the URL for the image.

100
00:07:27,830 --> 00:07:28,280
Everything.

101
00:07:28,520 --> 00:07:29,720
Finally, we have to export it.

102
00:07:30,800 --> 00:07:31,520
Exploded.

103
00:07:32,650 --> 00:07:33,190
Different.

104
00:07:34,820 --> 00:07:35,570
We do item.

105
00:07:38,090 --> 00:07:44,990
Once this is done in the video approaches, you can see we have imported the video list of everything

106
00:07:44,990 --> 00:07:45,620
is pretty good.

107
00:07:46,280 --> 00:07:51,100
Let us see that it is working out OK, there are no errors, so let's click on a.

108
00:07:52,960 --> 00:07:57,040
And then, yes, if I click enter, then they're getting some errors.

109
00:08:03,750 --> 00:08:11,090
There is a small bug in the code right here in 032 item in rural is not just the key video dot IED,

110
00:08:11,430 --> 00:08:14,130
so the IED inside the video contains the video.

111
00:08:14,130 --> 00:08:16,790
So we don't really want to change this.

112
00:08:17,250 --> 00:08:20,610
Save this and open the auto website.

113
00:08:21,300 --> 00:08:28,200
So now when you select somebody like avenges and click Enter, then you can see we are getting the five

114
00:08:28,620 --> 00:08:31,930
five videos that are updating from the YouTube app.

115
00:08:31,930 --> 00:08:36,600
You can see the first thing as default here in effect, not when you select something.

116
00:08:39,540 --> 00:08:42,560
Then we are getting some eye on media slap is not a function.

117
00:08:46,030 --> 00:08:52,750
So do we have a dinner type where they interest on video that we initially had on select radio?

118
00:08:53,200 --> 00:08:53,500
Right.

119
00:08:53,770 --> 00:08:56,530
So it's not on select radar because you have Roger Jones.

120
00:08:56,530 --> 00:09:02,290
We have given that to us on Radio Select, so it should be on Radio Select Change that immediate list

121
00:09:03,460 --> 00:09:05,200
on Radio Select.

122
00:09:05,380 --> 00:09:07,410
So everything should be on Radio Select, so on.

123
00:09:07,420 --> 00:09:13,060
We just heard the name of the phone that we are sending the army to select function with an the interpreter

124
00:09:13,390 --> 00:09:18,670
for that bottom channel component so that we can use it in the parent component and change the main

125
00:09:18,880 --> 00:09:21,550
radio detail radio based on the user selection.

126
00:09:22,450 --> 00:09:24,970
So if that union this, save it and open your.

127
00:09:26,510 --> 00:09:27,770
Website refresh it.

128
00:09:29,290 --> 00:09:30,940
Now select awareness.

129
00:09:32,730 --> 00:09:34,780
Now you can see you are getting a few readers here.

130
00:09:34,950 --> 00:09:37,170
The default one is the first item of duty.

131
00:09:37,740 --> 00:09:41,940
Now, for example, and this reader, then you can see that is changing over in the reader.

132
00:09:42,180 --> 00:09:44,310
If I select this reader can see this change.

133
00:09:44,380 --> 00:09:47,820
You can also play everything you can do in your depiction.

134
00:09:47,820 --> 00:09:50,520
Do it or you can click and now, you know.

135
00:09:52,110 --> 00:09:53,850
It can open it on YouTube if you want.

136
00:09:55,910 --> 00:09:57,770
Are you open the first thing?

137
00:09:59,750 --> 00:10:01,790
You may also have subtitles if you want.

138
00:10:05,260 --> 00:10:10,110
Are subtitles coming, so this is basically everything that you are doing in YouTube?

139
00:10:11,080 --> 00:10:16,690
OK, so with this, we have completed all the business logic board and coding for the YouTube or like

140
00:10:17,530 --> 00:10:23,560
video sharing platform that is in letting you do using the Google Developer Tools YouTube API.

141
00:10:24,930 --> 00:10:29,790
Annoying to make sure you're going to school, the summary of what we are doing and also your tips of

142
00:10:30,270 --> 00:10:34,780
working with the tab and also like a work with other GitHub repository.

143
00:10:34,780 --> 00:10:38,580
So if you are downloading them, uploading them and see that in the next little?