So this is where we left.
We wanted to build the meeting setup component.
So first let's make the TypeScript happy.
Let's say we are going to get this on setup complete prop.
And let's give it a type.
Let's say this is going to be a function that doesn't return anything.
Then before we build the return statement let's have a couple of different states.
And let me show you how that would look like.
So we're going to have a state to check if camera is disabled or not.
Same for the microphone.
Let's go ahead and try to get those.
Instead of typing this out I think I can just paste it.
Is the camera disabled by default?
Let's just say this is going to be true.
And I will get the same thing for microphone.
And let's say this is going to be false by default.
So it would not be disabled.
And then we can get a call.
So I'll just say const call.
And by saying a call I want it to say the current call.
So I'll just say use call.
And why can we make this right.
Shouldn't we say something like get use, get call by ID?
We don't need to do it because we have already done this in this component and we passed it.
Pass this into a stream call.
Now in any of these components you can get this call by using this hook.
I hope that makes sense.
So just in case, if you are wondering why didn't we say something like use get call by ID and then
pass the ID inside?
It's because we are passing this call into the stream call.
We can use it in this entire component, right?
And since we are in the meeting setup, we can go ahead and grab this call just like that.
I hope that makes sense.
And I'll say if there is not a call, just return null.
You can handle this in a different way.
Maybe show 404 page, something like that.
I'll just don't return anything and then I will have a use effect that I'll be copying and pasting.
I will say let's first import the use effect if camera is disabled, go ahead inside the call and disable
the camera, but else enable it and this use effect will run whenever these changes.
Then we'll go ahead and say the exact same thing for the microphone, right?
If it is disabled, disable the microphone inside the call and else enable it.
Then we can have a function, let's say const handle join.
And we are going to be calling this function when we click to this button.
Okay.
So let's say handle join is going to be an let's say async function.
And we will say await call dot join.
Yes you can call this method on the call.
Once we join we can just say on setup Complete.
So when we join to the call we will set the state to be true.
Right.
So that we can see the meeting room.
The UI will update as well as we will be joining into the call.
So I think that's going to be it for the logic.
Now we can go ahead and build the return statement, which is going to be mostly UI.
So I would suggest you to have the source code open on a next tab so that you can just copy and paste
it with me.
We'll have a div with a bunch of different classes.
I will go ahead and grab this.
So we have minimum height of screen flex item centered justify centered padding of six and background
opacity is just changing little bit.
Then we'll go get a div.
Once again we'll have a couple of different classes.
So let's say width full maximum width is going to be 1200 pixels max auto.
And then we'll have one more div below to it which is going to be looking like this.
Let's close this off I will save to get this formatting.
So we have this grid layout because we will have something on the left, something on the right okay.
So first things first I will have my video preview container component.
So this is going to be a card component.
I will go ahead and copy it.
Paste it which is around ten lines of code and no logic at all.
So we can go ahead and copy it.
Now the most important thing here is this video preview component that is coming from um, stream.
Right.
They can just give you this component that you can use to see the video preview.
And we just style this a little bit.
Okay.
So this is video preview container.
After this card we will say um card controls or yeah I think we can just call it like that.
We will have the meeting details and I will go into the source code.
Get the card.
Let's close this off.
So inside the card I would like to have a div with let's say class name of height, full Flax and flax
column.
Then inside we'll have the meeting details so you can copy this and paste it, which is around, I think,
four lines of code where we have a div with an h2 and then p tag that says meeting details.
It's going to get the call ID and after this step we would like to have one more div.
Let's say class name is going to be flex of one flex flex column justify between okay below two it will
have one more div say class name space y of six as well as margin top of eight.
And now we'll have the camera control.
So I will go ahead and copy this code and paste it.
So we are using a camera icon coming from Lucid React as well as a switch component which is going to
be coming from CDN.
So let's say.
uh.
Oops.
Why?
I cannot search with command k.
Let's say switch.
So it would look like this.
Let's go ahead and try to install it.
And this is the usage.
You can add some props into it.
So this should install it hopefully.
There we go.
Let's get it from the UI folder.
And this would be checked depending on the state.
And unchecked change will be this function.
Basically we will negate the state okay.
So after this camera control make sure to give a bit space.
Then we'll add the microphone control.
And once again we can grab this code which is almost the same thing.
But this time we're using a make icon as well as the make state okay.
So after the microphone control we can go ahead and add the device settings.
So it would look like this.
So we are building this part and this component will be coming from stream as well.
Okay.
So let's try to copy this and paste it.
Get the icon and device settings from stream.
So after the device settings we have one more div and skip that as well.
We will have the join button.
Which is around five lines of code.
So I'll go ahead and get this.
Import the button.
When we click to it.
We are calling this handle join function.
That would take us to the call right.
Okay.
So now let's go ahead and test this out to see how that looks in our application.
Okay.
So now it is trying to use my phone.
But let's say Use my machine's microphone.
And this is the UI that we can see.
Let me try to say allow this time.
And for the camera now it is open as you can tell.
We'll just say allow this time as well.
It says video is disabled.
If we open this up, we should be able to see it on the left hand side.
We can do the same thing for this one.
Okay.
Now we cannot see the settings tab.
Let's go back.
Okay.
So we cannot see the device settings.
It is because we didn't add any any CSS coming from um coming from the stream.
We need to visit our layout.
And here we will add some CSS styling.
And since we are not using this I think we can delete that as well as this one.
Okay.
Just before the global CSS let's try to add this line that I will get it from the GitHub repo.
Okay.
So from the stream we're going to get some styles dot CSS file right.
We're going to get some styling so that it is working as expected.
And then below it we will add our own global CSS file so that we can override anything that they have.
Okay.
Now we can see this is like this is the component coming from stream right.
We can disable it enable it.
And if it is disabled UI has been updated.
This looks a lot more better than what we had previously.
And like this is something that I get.
It's annoying, but just ignore it.
And we have our microphone.
We can disable it.
Enable it.
Once we are ready, we can join to the meeting.
I clicked it.
Now we are in the meeting room, right?
Which would look like this.
Oops.
Okay.
It would look like this.
And this is what we are going to build next.