In the last video, we saw how to implement the reactor toxin Aparajith by using this video selectively.
Now in this video, we'll see how to build the video component.
So instead of immediately.
We'll be sending W digital component.
With some props, the props will be this retributive so that we should to show that, Senator, you're
doing with the big box, right?
So the seller, the product will be.
Radios.
Will be selected, really.
So that will be the prop, the video prop will be selected.
We do.
Now we have to go to the regional component.
Now we will import some material UI components.
Paper.
Typography.
From.
But the very.
Why?
Court.
So these are the components for to you.
And I said in the previous readers will be using them now will write the function familiar to.
Bonds to video retail.
So here I will be using the objective structuring method, so as I said here in the selected, we do
have dodges.
You can see we are using diety and snippet of the YouTube video that we're getting.
Basically, it will be that every YouTube video we have a unique I.D., so we'll be using that data
and snippet of the details like check, title channel, title description of the video and or so we'll
be structuring those items from this object and then we'll be using to display them in video detail.
So how to do that, we will be.
The problems that we are catching is Russian radio.
With the I.D..
Retired, it will be the way you do it.
Next, the snippet.
Impact will contain Vital.
Channel.
Title and then description.
Now, once we did the object restructuring, now what the information we are getting from those videos,
we're getting the video I.D. The unique idea of that video.
The title of that video channel title and description.
So now using this, we can like show that a lot of the video on the screen today, the.
So if there is a video I represent, like if the video is not, then we should not give anything like
if the media is not present in the way you do it.
So how to showcase it or to present itself?
If not, really, that means that the is not present.
Then we'll return.
Are you saying loading?
OK.
Else, if it is not the case, if there is a video that we are returning, then we have to like bring
some material the right thing, like using the paper and typography, and we will be showcasing the
video.
So return.
First thing will be React Fragment.
But.
Fragment.
There should be applause in for this.
Inside a fragment will have the paper.
So people will have high elevation.
Of six.
And in style with custom styling.
But the kind as 70 percent.
And then here and this will be having the effect.
I think.
So for him that he would really frame border will be zero.
Height will be.
And represents 100 percent so.
It will be.
Hundred percent, same as the height.
Title will be radio player.
And what will be the source like what we should replace the source will be the video source.
Really?
So this now we have to declare it.
Right.
So now we'll be writing the code for radio source constant.
Radio.
So it will be.
It's deeply.
This.
Dollars.
And then the do.
So we were getting the videos were from the video using this you.
So I use these type of quotes because when we use these type of quotes, we can write the value we can
use.
Some JavaScript constants are some JavaScript variables inside that you are so used to use that we do
it.
I have used this type of brackets how to use the JavaScript object on our JavaScript variable using
this data and then a British.
So with this now, we're going to pretend that we're different from that video and then play softer
this way, but I wouldn't be having another paper component.
This will have the details of the title challenge, title description and everything.
So the.
Elevation will be six.
China would be the same as, I think about 15.
Adding will be.
Just convictions.
Them the extra call, I know what you.
So after this, we'll be having the title, but that we should use the typography component.
So.
That Biden.
Will be channel.
Channel.
Here the variant will be.
Hatch for.
Actually, pitch foot channel didn't offer that will have on other typography component.
But this stunning instead of channel titles, it will be only airing the channel.
It's subtitled one.
So he had the typography, probably this aspect, so this works as a subtitle, the variant will be
subtitle.
I do.
Now, now this apparently will be the description.
The variant will be subtitled to.
Here the.
Pretty description.
This.
Then you need not to worry about this type of paper, these are basically the components that we are
using for material that someone may be just using them and using them in our web site.
The main thing is you have to understand all this object restructuring is happening, what kind of variables
they're pulling out from the API, how we are using them and all those kind of stuff like props, start
handling, react stops in this app or just how we are sending the props.
This business logic behind the search box on keypress handle change and everything you have to focus
on.
So once this is done now, we'll explore that.
Export default.
Really auditing.
So once this is done now, we have been voted.
They're not gorgeous.
Or you deal with that.
That's.
OK, so to.
Have that stuff fixed the bugs that we are getting, so there are two things that we missed over here
yet I like I gave you the idea and yet you're not free the idea you have capital being so change that
we created and also import react because we are using React Fragment, so we have to import react.
So when you made this genius, save this and open opened up our app so you can see as of now there is
nothing in the search, so therefore they're not getting any.
That means we really know that, right?
That's why we are getting this annoying component.
But if I give some value to that search, like let me give evidence and then enter, so often happen.
So basically, we will get our will fetch data from the YouTube app.
It can have a variety that will use as a friend will use that video source.
With that, we do it and then we'll print that data like all the channel, title, title description
and everything.
We'll see if that is happening on and I click Enter.
You're going to see I got video like Spider-Man.
I was going to go see there in just action.
So this is the video that I fetched from YouTube API.
You can see there is a title under the title, subtitle one and subtitle two.
So now this is dicey.
There is a Google page toggle page that if you get if you use it, you can see what all the iframe division
is looking like.
This is a course extension.
Probably best thing.
So you can see that the A-frame division over, you know, the next step is we have to also have a video
list on the right side, like we should have a few videos so that we can select from media.
And when we click on that video, that video should appear in the.
And then it should be.
We should have a chance to play here.
You can see I can play the media with a life review so that we'll see how to build that video list and
media item in the next three to.