1
00:00:01,420 --> 00:00:07,830
In the last video, we saw how to implement the reactor toxin Aparajith by using this video selectively.

2
00:00:08,350 --> 00:00:11,920
Now in this video, we'll see how to build the video component.

3
00:00:12,340 --> 00:00:13,660
So instead of immediately.

4
00:00:15,140 --> 00:00:17,270
We'll be sending W digital component.

5
00:00:19,710 --> 00:00:24,750
With some props, the props will be this retributive so that we should to show that, Senator, you're

6
00:00:24,750 --> 00:00:26,550
doing with the big box, right?

7
00:00:28,440 --> 00:00:31,890
So the seller, the product will be.

8
00:00:35,990 --> 00:00:36,620
Radios.

9
00:00:39,660 --> 00:00:41,100
Will be selected, really.

10
00:00:47,520 --> 00:00:50,710
So that will be the prop, the video prop will be selected.

11
00:00:50,730 --> 00:00:51,030
We do.

12
00:00:53,590 --> 00:00:56,110
Now we have to go to the regional component.

13
00:00:59,020 --> 00:01:01,600
Now we will import some material UI components.

14
00:01:05,030 --> 00:01:05,570
Paper.

15
00:01:06,940 --> 00:01:07,810
Typography.

16
00:01:11,750 --> 00:01:12,080
From.

17
00:01:14,040 --> 00:01:15,500
But the very.

18
00:01:18,080 --> 00:01:18,570
Why?

19
00:01:19,840 --> 00:01:20,160
Court.

20
00:01:27,970 --> 00:01:29,710
So these are the components for to you.

21
00:01:30,250 --> 00:01:36,130
And I said in the previous readers will be using them now will write the function familiar to.

22
00:01:39,340 --> 00:01:40,420
Bonds to video retail.

23
00:01:44,680 --> 00:01:51,270
So here I will be using the objective structuring method, so as I said here in the selected, we do

24
00:01:51,590 --> 00:01:52,260
have dodges.

25
00:01:52,600 --> 00:01:56,170
You can see we are using diety and snippet of the YouTube video that we're getting.

26
00:01:56,470 --> 00:02:01,410
Basically, it will be that every YouTube video we have a unique I.D., so we'll be using that data

27
00:02:01,450 --> 00:02:06,550
and snippet of the details like check, title channel, title description of the video and or so we'll

28
00:02:06,610 --> 00:02:12,700
be structuring those items from this object and then we'll be using to display them in video detail.

29
00:02:13,570 --> 00:02:16,240
So how to do that, we will be.

30
00:02:18,850 --> 00:02:22,300
The problems that we are catching is Russian radio.

31
00:02:23,670 --> 00:02:24,320
With the I.D..

32
00:02:26,520 --> 00:02:28,410
Retired, it will be the way you do it.

33
00:02:33,990 --> 00:02:35,040
Next, the snippet.

34
00:02:37,270 --> 00:02:39,220
Impact will contain Vital.

35
00:02:42,430 --> 00:02:43,000
Channel.

36
00:02:44,450 --> 00:02:46,670
Title and then description.

37
00:02:58,400 --> 00:03:03,380
Now, once we did the object restructuring, now what the information we are getting from those videos,

38
00:03:03,650 --> 00:03:06,230
we're getting the video I.D. The unique idea of that video.

39
00:03:06,530 --> 00:03:09,620
The title of that video channel title and description.

40
00:03:09,860 --> 00:03:15,680
So now using this, we can like show that a lot of the video on the screen today, the.

41
00:03:17,830 --> 00:03:22,990
So if there is a video I represent, like if the video is not, then we should not give anything like

42
00:03:22,990 --> 00:03:24,820
if the media is not present in the way you do it.

43
00:03:25,270 --> 00:03:28,210
So how to showcase it or to present itself?

44
00:03:28,720 --> 00:03:31,300
If not, really, that means that the is not present.

45
00:03:33,030 --> 00:03:34,350
Then we'll return.

46
00:03:35,280 --> 00:03:36,780
Are you saying loading?

47
00:03:43,700 --> 00:03:44,030
OK.

48
00:03:44,970 --> 00:03:50,220
Else, if it is not the case, if there is a video that we are returning, then we have to like bring

49
00:03:50,280 --> 00:03:55,050
some material the right thing, like using the paper and typography, and we will be showcasing the

50
00:03:55,050 --> 00:03:55,410
video.

51
00:03:56,850 --> 00:03:57,510
So return.

52
00:04:00,920 --> 00:04:02,660
First thing will be React Fragment.

53
00:04:03,950 --> 00:04:04,210
But.

54
00:04:05,790 --> 00:04:06,330
Fragment.

55
00:04:13,310 --> 00:04:14,840
There should be applause in for this.

56
00:04:21,810 --> 00:04:24,660
Inside a fragment will have the paper.

57
00:04:27,150 --> 00:04:28,680
So people will have high elevation.

58
00:04:31,130 --> 00:04:32,420
Of six.

59
00:04:36,990 --> 00:04:38,820
And in style with custom styling.

60
00:04:41,070 --> 00:04:44,910
But the kind as 70 percent.

61
00:04:50,010 --> 00:04:52,500
And then here and this will be having the effect.

62
00:04:55,700 --> 00:04:56,270
I think.

63
00:05:05,890 --> 00:05:10,480
So for him that he would really frame border will be zero.

64
00:05:13,230 --> 00:05:14,050
Height will be.

65
00:05:15,740 --> 00:05:17,780
And represents 100 percent so.

66
00:05:19,430 --> 00:05:20,210
It will be.

67
00:05:22,810 --> 00:05:24,430
Hundred percent, same as the height.

68
00:05:28,100 --> 00:05:30,470
Title will be radio player.

69
00:05:34,480 --> 00:05:39,040
And what will be the source like what we should replace the source will be the video source.

70
00:05:40,660 --> 00:05:40,940
Really?

71
00:05:41,980 --> 00:05:43,390
So this now we have to declare it.

72
00:05:45,040 --> 00:05:45,260
Right.

73
00:05:45,630 --> 00:05:50,580
So now we'll be writing the code for radio source constant.

74
00:05:52,530 --> 00:05:53,130
Radio.

75
00:05:56,130 --> 00:05:57,480
So it will be.

76
00:05:59,470 --> 00:06:00,250
It's deeply.

77
00:06:01,300 --> 00:06:01,780
This.

78
00:06:14,070 --> 00:06:14,460
Dollars.

79
00:06:15,860 --> 00:06:16,910
And then the do.

80
00:06:18,050 --> 00:06:20,930
So we were getting the videos were from the video using this you.

81
00:06:21,440 --> 00:06:27,020
So I use these type of quotes because when we use these type of quotes, we can write the value we can

82
00:06:27,020 --> 00:06:27,200
use.

83
00:06:27,200 --> 00:06:32,720
Some JavaScript constants are some JavaScript variables inside that you are so used to use that we do

84
00:06:32,720 --> 00:06:32,990
it.

85
00:06:33,170 --> 00:06:38,630
I have used this type of brackets how to use the JavaScript object on our JavaScript variable using

86
00:06:38,630 --> 00:06:40,910
this data and then a British.

87
00:06:41,950 --> 00:06:46,870
So with this now, we're going to pretend that we're different from that video and then play softer

88
00:06:46,870 --> 00:06:50,350
this way, but I wouldn't be having another paper component.

89
00:06:51,380 --> 00:06:56,120
This will have the details of the title challenge, title description and everything.

90
00:06:56,990 --> 00:06:57,560
So the.

91
00:06:58,720 --> 00:07:01,240
Elevation will be six.

92
00:07:03,950 --> 00:07:07,790
China would be the same as, I think about 15.

93
00:07:09,010 --> 00:07:09,940
Adding will be.

94
00:07:11,660 --> 00:07:12,470
Just convictions.

95
00:07:21,020 --> 00:07:22,490
Them the extra call, I know what you.

96
00:07:26,830 --> 00:07:33,940
So after this, we'll be having the title, but that we should use the typography component.

97
00:07:40,100 --> 00:07:40,550
So.

98
00:07:41,530 --> 00:07:42,370
That Biden.

99
00:07:43,390 --> 00:07:44,800
Will be channel.

100
00:07:47,150 --> 00:07:47,630
Channel.

101
00:07:50,780 --> 00:07:52,550
Here the variant will be.

102
00:07:54,620 --> 00:07:55,250
Hatch for.

103
00:07:57,430 --> 00:08:04,870
Actually, pitch foot channel didn't offer that will have on other typography component.

104
00:08:06,620 --> 00:08:11,060
But this stunning instead of channel titles, it will be only airing the channel.

105
00:08:11,360 --> 00:08:12,170
It's subtitled one.

106
00:08:13,360 --> 00:08:20,110
So he had the typography, probably this aspect, so this works as a subtitle, the variant will be

107
00:08:20,830 --> 00:08:21,660
subtitle.

108
00:08:23,740 --> 00:08:24,180
I do.

109
00:08:25,030 --> 00:08:27,730
Now, now this apparently will be the description.

110
00:08:30,100 --> 00:08:32,260
The variant will be subtitled to.

111
00:08:38,250 --> 00:08:39,030
Here the.

112
00:08:40,310 --> 00:08:41,240
Pretty description.

113
00:08:43,910 --> 00:08:44,420
This.

114
00:08:47,060 --> 00:08:51,830
Then you need not to worry about this type of paper, these are basically the components that we are

115
00:08:51,830 --> 00:08:56,210
using for material that someone may be just using them and using them in our web site.

116
00:08:56,630 --> 00:09:01,280
The main thing is you have to understand all this object restructuring is happening, what kind of variables

117
00:09:01,280 --> 00:09:07,580
they're pulling out from the API, how we are using them and all those kind of stuff like props, start

118
00:09:07,580 --> 00:09:11,840
handling, react stops in this app or just how we are sending the props.

119
00:09:12,120 --> 00:09:18,320
This business logic behind the search box on keypress handle change and everything you have to focus

120
00:09:18,320 --> 00:09:18,440
on.

121
00:09:19,010 --> 00:09:21,110
So once this is done now, we'll explore that.

122
00:09:22,420 --> 00:09:24,820
Export default.

123
00:09:27,560 --> 00:09:28,400
Really auditing.

124
00:09:33,380 --> 00:09:36,560
So once this is done now, we have been voted.

125
00:09:38,380 --> 00:09:39,430
They're not gorgeous.

126
00:09:42,680 --> 00:09:45,470
Or you deal with that.

127
00:09:47,220 --> 00:09:47,540
That's.

128
00:09:54,360 --> 00:09:55,920
OK, so to.

129
00:10:04,750 --> 00:10:09,550
Have that stuff fixed the bugs that we are getting, so there are two things that we missed over here

130
00:10:09,560 --> 00:10:15,520
yet I like I gave you the idea and yet you're not free the idea you have capital being so change that

131
00:10:15,550 --> 00:10:21,070
we created and also import react because we are using React Fragment, so we have to import react.

132
00:10:21,430 --> 00:10:28,240
So when you made this genius, save this and open opened up our app so you can see as of now there is

133
00:10:28,240 --> 00:10:30,660
nothing in the search, so therefore they're not getting any.

134
00:10:31,510 --> 00:10:33,490
That means we really know that, right?

135
00:10:33,520 --> 00:10:35,440
That's why we are getting this annoying component.

136
00:10:35,800 --> 00:10:42,050
But if I give some value to that search, like let me give evidence and then enter, so often happen.

137
00:10:42,370 --> 00:10:45,050
So basically, we will get our will fetch data from the YouTube app.

138
00:10:45,340 --> 00:10:49,420
It can have a variety that will use as a friend will use that video source.

139
00:10:49,420 --> 00:10:54,050
With that, we do it and then we'll print that data like all the channel, title, title description

140
00:10:54,050 --> 00:10:54,550
and everything.

141
00:10:54,880 --> 00:10:58,240
We'll see if that is happening on and I click Enter.

142
00:10:59,230 --> 00:11:02,400
You're going to see I got video like Spider-Man.

143
00:11:02,470 --> 00:11:03,970
I was going to go see there in just action.

144
00:11:03,970 --> 00:11:06,040
So this is the video that I fetched from YouTube API.

145
00:11:06,700 --> 00:11:12,580
You can see there is a title under the title, subtitle one and subtitle two.

146
00:11:13,360 --> 00:11:15,120
So now this is dicey.

147
00:11:16,030 --> 00:11:20,890
There is a Google page toggle page that if you get if you use it, you can see what all the iframe division

148
00:11:20,890 --> 00:11:21,490
is looking like.

149
00:11:21,910 --> 00:11:23,050
This is a course extension.

150
00:11:23,050 --> 00:11:23,890
Probably best thing.

151
00:11:25,210 --> 00:11:32,080
So you can see that the A-frame division over, you know, the next step is we have to also have a video

152
00:11:32,080 --> 00:11:36,400
list on the right side, like we should have a few videos so that we can select from media.

153
00:11:36,580 --> 00:11:39,100
And when we click on that video, that video should appear in the.

154
00:11:40,060 --> 00:11:41,010
And then it should be.

155
00:11:41,020 --> 00:11:43,090
We should have a chance to play here.

156
00:11:43,090 --> 00:11:51,200
You can see I can play the media with a life review so that we'll see how to build that video list and

157
00:11:51,200 --> 00:11:52,450
media item in the next three to.