So in this UI, I don't know if you have realized it, but we have a resizable component that we can
like drag and drop it to the left and to the right.
We have the same thing on this part, where we can vertically take this to the top and to the bottom,
where we can just resize our tabs.
And this is a component coming from CDN UI, let's say resizable.
So you can have these kind of panels using this component either in the horizontal direction or in the
vertical direction.
So let's go ahead and copy this.
Paste it into our terminal.
And these are the files that we have open from the latest section.
So we have added this one at the very last.
So go ahead and close everything.
Open up my terminal.
We got this switch.
Let's clear the console and just paste this in.
Okay I have done a mistake.
So what have I done?
Let me just delete everything.
Go back to chats UI documentation, copy this and paste this in.
Okay, so I have lately switched from Windows to Mac OS, so I sometimes forgot the shortcut shortcuts
is kind of annoying, but there we go.
So that's why I got this kind of like a weird situation because I used the wrong shortcut.
Okay, so we got the resizable panel component.
I would like to go into the meeting room TSX, and we would like to build the UI.
As always, before we get into the return statement, let's first take a look at the output that we
are trying to build.
So we have two panels left hand side as well as the right hand side.
This entire thing.
So this entire thing called as a code editor component that we're going to build maybe in the next section.
For now we are going to focus on this left hand side.
Okay.
So we are going to have a resizable panel in between.
And we will have two different panels next to each other.
So let's try to build this UI pretty quickly.
For this we will have a state.
I'll first get the let's say layout and let's say set layout.
And this can have two different values.
So I'll just say use state.
Um this could be I think a grid.
But by default I would like to go with the speaker layout.
Let's import the use state.
And let's say this can take two different values grid or speaker.
By default this is what we'll have.
And we can update the layout by pressing this button which will open up a dropdown.
And we can update the layout.
So this is something that we'll see we'll see just in a second.
And we would like to have one more state to be able to show the participants.
So when we click to this button from the right hand side, we will see like a component that will open
and show us the participants in this list.
And we can filter them out.
So this is the state either that we want to show it or not.
By default this will be false.
Then I would like to get my router from Next.js.
Let's go ahead and import it.
And this should be coming from next navigation.
Okay.
Just like that.
I have a typo.
There we go.
And I would like to have a a hook coming from let's say from the stream.
So they have this special hook use called state hooks.
And from here you can get all kinds of different hooks.
And in our case we would like to use the calling state because depending on this we will do something.
So we'll say if I think first I should say const calling state, we will just check if we are joined
or not.
Let's call this state.
This is going to give us the calling state.
I will say if calling state is not equal to calling state dot joined.
So if you are not joined we will we can show some kind of a loader spinner.
Right.
I would like to get this return statement with this loader icon.
Okay.
Size of six.
And it would be animated with the spin class.
So with this if you check now we can go and build the return statement instead of a dev.
Let's delete everything.
Delete the content.
This will be resizable panel group coming from our UI folder and let's make sure we close this off.
So this needs to take a prop which is going to be direction.
And we'll take the go in the horizontal direction.
So in the horizontally we will have two different tabs one here and then this one.
And in the code editor component we will have in the vertical direction.
But currently we would like to have in the horizontal direction.
Okay.
So we'll have a resizable panel.
Let's get this.
So this will be for the right hand side.
And I would like to copy this.
So maybe I'll just get that copy it and paste it.
This is going to be for the right hand side.
Okay.
So let me just build the right hand side.
I will say the default size for this will be 65.
And let's say minimum size will be 25.
And let's say code editor will go here.
This is something that we'll build later in the video.
And now we can focus on this right hand side.
Okay.
So let's say this or maybe let's say video will go here.
We can add some props just like what we have done here.
I'll say the default size for this could be 35.
And minimum size could be 25.
Let's say maximum size.
Maybe we can just go with one 100 and just see how that would look like.
And class name I'll add relative because we'll be using some absolute positioning inside.
So let's save and try to see the output.
So I'll just say join to the meeting okay.
Now we have two different panels but we cannot see the resizable handle.
Right.
So for this we have a component let's say resizable handle coming from UI folder and we'll just say
width handle.
That's going to be equal to true.
So if you'll leave it as it is that means it's true.
Now we can see this is resizable right?
I don't know if you can see it, but this is what we have.
And we'll make this to look a lot better.
Just in a second.
Okay, so let's try to build this left hand side where we have the video component.
So I'll just say video layout and go inside.
We'll have a div with class name of absolute inset of zero.
And we will have this check.
We'll say if layout is equal to grid then we would like to show this paginated grid layout coming from
stream.
But else we can show the speaker layout.
Once again, this was coming from stream, so we can just put this in.
Then I would like to show the participant list overlay.
So I'll go ahead and paste this in.
I'll say if show participants state is true we would like to see this component.
And on close we'll just set the state to be false.
Okay I just saved and the code has been formatted.
Then after this div, just before the resizable panel, we would like to add our video controls.
So let's say div.
And maybe before we move on let's just save.
Take a look at the output how that looks.
Okay.
Currently it doesn't look really nice.
So let's continue.
This div will take some classes.
I would like to copy it and paste it.
Then we will have one more div inside.
Let's close this off.
Flex.
Items centered.
And then we would like to have one last div that I'll be getting it and pasting it.
I'll save to get this formatting.
So inside this div we will have the call controls.
This is a component coming from stream.
It is really convenient to use it we'll say on live.
Basically we want to push the user to the home page.
Then we would like to have a div with class name of flex items centered and I believe gap of two.
Okay, so inside this div we will have a drop down menu component.
So we'll say drop down menu coming from UI folder.
Make sure you don't get it from the Redux.
So we get it from the CDN.
Okay drop down menu.
And this will be taking a trigger component inside.
I will paste this in.
Let's try to import them from the UI.
Same for the button.
and we have this layout list icon.
So in Lucid React there is the same thing that is called with icon as well as the just the name.
In my opinion, I think we should always use it with the icon so that when we read our code, we should
understand that this is an icon.
Okay.
And this is size of four.
And after the trigger we would like to have the drop down menu content.
So I will go ahead and paste this in.
Import this from UI folder.
Same for this one.
And here we have an onclick where we change the layout to be grid and speaker.
Okay.
Let's save and maybe try to see if UI has been updated.
So it has definitely been updated, but it doesn't really look nice yet.
We're going to build it just in a second.
Okay.
Let's go inside and Try to build the rest.
So just below to the drop down menu, we will have a button where we can join or where we can show the
participants list.
And for this I'll be using this users icon coming from Lucid React.
And this has the size of four.
So if you don't know in tailwind, if you're using the same height and width, you can basically use
this shortcut with the size class.
So you can do the same thing for this dude as well.
Size of ten.
There we go.
Use this size of icon variant of outline for this button.
And after this button we would like to show another button.
So for now I'll just say um button let's say and call button.
This is something that we'll build just in a couple of minutes okay.
So with this I think we can save and take a look at the output.
Okay.
For some reason this doesn't look nice as expected.
Maybe we should wrap this entire component with a div or maybe.
Okay, let's wrap it with a div.
And give it a class name like height of screen.
Is this going to fix it.
Okay so it fixed this but it overflows right.
How could we fix this.
We can go ahead and calculate the height.
So I'll just say um let's say height and open up this brackets.
I'll say calculate the whole screen minus four REM.
This should fix it.
But remember we have one pixel in the border in the navbar right from the border.
We just need to say minus one.
Let's save and it should be minus one pixels by the way.
Let's save.
Okay, now we don't get this, uh, overflow.
Uh, the scroll bar, right?
Okay, there we go.
This is working as expected.
We're going to build this button in a second, but we can see the, the, um, layout buttons.
Right.
We can go into the grid view even though it doesn't really change too much because we don't have too
many participants.
But as you can tell, it definitely updates the view and we can see the list.
This is the participants list that we can search for.
If I just search for someone that does not exist, we'll get this UI, but else we can just search for
someone that is existed in the call.
And when we clicked this, it would close it and update the state.
Okay, so we can share our screen as well.
Add a reaction.
Everyone would see it in real time and let me actually go and create a new account, then join into
this call.
So this is what I'll be doing just in a second.
So I have just signed up with a different Google account.
Now this is a candidate by default.
So I'll go ahead and grab the URL from this call and paste it into here.
Later in the video we will actually have the cards that we can join manually.
Um, but for now we can like we can join from the URL since we don't have the functionality yet.
So we're going to be in the setup page and I don't know why.
For some reason it connects to my phone.
I will select the machine this, uh MacBook.
And let's open up the camera just to check how we look.
This is working as expected.
Let's say you join into the meeting.
Okay, I'll just mute myself so that it doesn't echo.
And let's try to share our screen.
Or maybe before this, we can add some reactions and the other user should be able to see it in real
time, right?
We can update the view can go into the grid view or into the speaker view.
We can see the participants and let's try to share our screen.
So I'll go ahead.
And let's just share the VS code.
It says you are presenting your screen.
Let's go back.
This user can see the entire screen.
Now in this case both of these users is me.
That's why it looks a bit buggy.
But in real world this this would not be the case because you are the you will not be the only users,
right?
Okay, so let's go ahead and stop sharing the screen.
We can take a recording.
Let's go ahead and start the recording.
Now it is recording.
Let's just wait a little bit and then we can pause this.
And this button will be only visible to the creator of the call.
So as a candidate you should not be able to see this button.
This would end the call for everyone.
This is something that we'll build later in the video.
And let's stop the recording now in the background.
The recording will be prepared and it would be sent to the stream stream dashboard.
So we can go ahead.
Check this out if we really want it to.
Let's visit the dashboard.
We should be able to see our calls in this recently created application.
Let's just see audio video overview.
And these are all the calls that we had previously.
And I believe under the recordings you can find it.
Feel free to definitely check this dashboard.
But later in the video we will actually fetch those recordings in a different page.
Okay, so looks like everything is working as expected.
I will leave from this call.
Now we are in the home page and the other user should not be able to see that user because it that user
just left.
So with that, that's going to be it for this component as well.
Next we can build this and call button.
So I'll see you in the next section.
And just before we move on with the next section, I just wanted to show you the place that you can
find the recordings.
So from the overview you can say view call explorer which is the explorer that you can see everything
related to your past calls.
So we had two different calls.
And from this one we can see the recordings.
We have one recording and we can get the URL and test this out.
Just paste it.
This is the call that we had.
So you can watch it.
It has been processed and it has been saved to the dashboard.
Later in the video we will actually fetch them from this dashboard and show it in the recordings page.
Okay.
So with that we can move on with the next section.