1 00:00:00,760 --> 00:00:02,200 So this is where we left. 2 00:00:02,200 --> 00:00:04,960 We wanted to build the meeting setup component. 3 00:00:05,160 --> 00:00:07,280 So first let's make the TypeScript happy. 4 00:00:07,320 --> 00:00:11,000 Let's say we are going to get this on setup complete prop. 5 00:00:11,200 --> 00:00:12,520 And let's give it a type. 6 00:00:12,760 --> 00:00:15,960 Let's say this is going to be a function that doesn't return anything. 7 00:00:16,240 --> 00:00:21,000 Then before we build the return statement let's have a couple of different states. 8 00:00:21,000 --> 00:00:23,320 And let me show you how that would look like. 9 00:00:23,440 --> 00:00:27,320 So we're going to have a state to check if camera is disabled or not. 10 00:00:27,360 --> 00:00:28,760 Same for the microphone. 11 00:00:29,000 --> 00:00:31,240 Let's go ahead and try to get those. 12 00:00:31,640 --> 00:00:34,200 Instead of typing this out I think I can just paste it. 13 00:00:34,400 --> 00:00:37,560 Is the camera disabled by default? 14 00:00:37,560 --> 00:00:39,560 Let's just say this is going to be true. 15 00:00:39,720 --> 00:00:42,640 And I will get the same thing for microphone. 16 00:00:43,040 --> 00:00:46,080 And let's say this is going to be false by default. 17 00:00:46,080 --> 00:00:47,680 So it would not be disabled. 18 00:00:47,920 --> 00:00:50,480 And then we can get a call. 19 00:00:50,840 --> 00:00:53,520 So I'll just say const call. 20 00:00:53,560 --> 00:00:58,480 And by saying a call I want it to say the current call. 21 00:00:58,520 --> 00:01:00,480 So I'll just say use call. 22 00:01:01,000 --> 00:01:03,200 And why can we make this right. 23 00:01:03,300 --> 00:01:08,780 Shouldn't we say something like get use, get call by ID? 24 00:01:08,980 --> 00:01:14,740 We don't need to do it because we have already done this in this component and we passed it. 25 00:01:15,020 --> 00:01:17,140 Pass this into a stream call. 26 00:01:17,260 --> 00:01:22,460 Now in any of these components you can get this call by using this hook. 27 00:01:22,740 --> 00:01:24,060 I hope that makes sense. 28 00:01:24,220 --> 00:01:30,660 So just in case, if you are wondering why didn't we say something like use get call by ID and then 29 00:01:30,660 --> 00:01:32,060 pass the ID inside? 30 00:01:32,620 --> 00:01:36,780 It's because we are passing this call into the stream call. 31 00:01:37,060 --> 00:01:40,020 We can use it in this entire component, right? 32 00:01:40,060 --> 00:01:44,660 And since we are in the meeting setup, we can go ahead and grab this call just like that. 33 00:01:44,820 --> 00:01:46,180 I hope that makes sense. 34 00:01:46,180 --> 00:01:50,420 And I'll say if there is not a call, just return null. 35 00:01:50,460 --> 00:01:52,140 You can handle this in a different way. 36 00:01:52,180 --> 00:01:55,220 Maybe show 404 page, something like that. 37 00:01:55,260 --> 00:02:02,060 I'll just don't return anything and then I will have a use effect that I'll be copying and pasting. 38 00:02:02,300 --> 00:02:10,360 I will say let's first import the use effect if camera is disabled, go ahead inside the call and disable 39 00:02:10,360 --> 00:02:16,520 the camera, but else enable it and this use effect will run whenever these changes. 40 00:02:16,880 --> 00:02:21,840 Then we'll go ahead and say the exact same thing for the microphone, right? 41 00:02:21,880 --> 00:02:27,560 If it is disabled, disable the microphone inside the call and else enable it. 42 00:02:27,880 --> 00:02:32,640 Then we can have a function, let's say const handle join. 43 00:02:32,640 --> 00:02:36,200 And we are going to be calling this function when we click to this button. 44 00:02:37,440 --> 00:02:37,960 Okay. 45 00:02:38,000 --> 00:02:44,360 So let's say handle join is going to be an let's say async function. 46 00:02:45,440 --> 00:02:49,360 And we will say await call dot join. 47 00:02:49,720 --> 00:02:52,440 Yes you can call this method on the call. 48 00:02:52,480 --> 00:02:56,240 Once we join we can just say on setup Complete. 49 00:02:56,920 --> 00:03:01,560 So when we join to the call we will set the state to be true. 50 00:03:01,600 --> 00:03:02,120 Right. 51 00:03:02,160 --> 00:03:04,120 So that we can see the meeting room. 52 00:03:04,440 --> 00:03:08,120 The UI will update as well as we will be joining into the call. 53 00:03:08,710 --> 00:03:10,990 So I think that's going to be it for the logic. 54 00:03:10,990 --> 00:03:15,550 Now we can go ahead and build the return statement, which is going to be mostly UI. 55 00:03:15,590 --> 00:03:22,870 So I would suggest you to have the source code open on a next tab so that you can just copy and paste 56 00:03:22,870 --> 00:03:23,590 it with me. 57 00:03:24,070 --> 00:03:27,110 We'll have a div with a bunch of different classes. 58 00:03:27,230 --> 00:03:28,870 I will go ahead and grab this. 59 00:03:29,950 --> 00:03:35,950 So we have minimum height of screen flex item centered justify centered padding of six and background 60 00:03:35,990 --> 00:03:39,310 opacity is just changing little bit. 61 00:03:39,670 --> 00:03:41,630 Then we'll go get a div. 62 00:03:41,790 --> 00:03:44,510 Once again we'll have a couple of different classes. 63 00:03:44,750 --> 00:03:50,270 So let's say width full maximum width is going to be 1200 pixels max auto. 64 00:03:50,430 --> 00:03:56,230 And then we'll have one more div below to it which is going to be looking like this. 65 00:03:56,230 --> 00:03:59,710 Let's close this off I will save to get this formatting. 66 00:04:00,150 --> 00:04:07,830 So we have this grid layout because we will have something on the left, something on the right okay. 67 00:04:08,070 --> 00:04:14,890 So first things first I will have my video preview container component. 68 00:04:15,490 --> 00:04:18,290 So this is going to be a card component. 69 00:04:18,330 --> 00:04:19,810 I will go ahead and copy it. 70 00:04:19,810 --> 00:04:24,490 Paste it which is around ten lines of code and no logic at all. 71 00:04:24,530 --> 00:04:26,370 So we can go ahead and copy it. 72 00:04:26,410 --> 00:04:33,290 Now the most important thing here is this video preview component that is coming from um, stream. 73 00:04:33,290 --> 00:04:33,770 Right. 74 00:04:33,810 --> 00:04:38,570 They can just give you this component that you can use to see the video preview. 75 00:04:38,570 --> 00:04:40,730 And we just style this a little bit. 76 00:04:41,130 --> 00:04:41,410 Okay. 77 00:04:41,450 --> 00:04:44,490 So this is video preview container. 78 00:04:45,010 --> 00:04:54,690 After this card we will say um card controls or yeah I think we can just call it like that. 79 00:04:54,730 --> 00:05:01,490 We will have the meeting details and I will go into the source code. 80 00:05:01,530 --> 00:05:02,570 Get the card. 81 00:05:02,610 --> 00:05:04,290 Let's close this off. 82 00:05:06,210 --> 00:05:14,310 So inside the card I would like to have a div with let's say class name of height, full Flax and flax 83 00:05:14,310 --> 00:05:14,950 column. 84 00:05:15,310 --> 00:05:23,270 Then inside we'll have the meeting details so you can copy this and paste it, which is around, I think, 85 00:05:23,310 --> 00:05:31,590 four lines of code where we have a div with an h2 and then p tag that says meeting details. 86 00:05:31,590 --> 00:05:37,470 It's going to get the call ID and after this step we would like to have one more div. 87 00:05:37,510 --> 00:05:47,150 Let's say class name is going to be flex of one flex flex column justify between okay below two it will 88 00:05:47,150 --> 00:05:54,910 have one more div say class name space y of six as well as margin top of eight. 89 00:05:55,310 --> 00:05:58,470 And now we'll have the camera control. 90 00:06:01,310 --> 00:06:04,870 So I will go ahead and copy this code and paste it. 91 00:06:06,230 --> 00:06:12,630 So we are using a camera icon coming from Lucid React as well as a switch component which is going to 92 00:06:12,630 --> 00:06:14,270 be coming from CDN. 93 00:06:14,750 --> 00:06:15,470 So let's say. 94 00:06:16,930 --> 00:06:17,250 uh. 95 00:06:17,250 --> 00:06:17,570 Oops. 96 00:06:17,610 --> 00:06:17,850 Why? 97 00:06:17,850 --> 00:06:19,650 I cannot search with command k. 98 00:06:20,170 --> 00:06:21,130 Let's say switch. 99 00:06:22,970 --> 00:06:24,290 So it would look like this. 100 00:06:24,290 --> 00:06:26,370 Let's go ahead and try to install it. 101 00:06:26,370 --> 00:06:27,610 And this is the usage. 102 00:06:27,610 --> 00:06:29,330 You can add some props into it. 103 00:06:33,290 --> 00:06:35,290 So this should install it hopefully. 104 00:06:35,290 --> 00:06:36,010 There we go. 105 00:06:36,810 --> 00:06:38,930 Let's get it from the UI folder. 106 00:06:39,490 --> 00:06:42,170 And this would be checked depending on the state. 107 00:06:42,170 --> 00:06:45,450 And unchecked change will be this function. 108 00:06:45,450 --> 00:06:49,050 Basically we will negate the state okay. 109 00:06:49,330 --> 00:06:54,210 So after this camera control make sure to give a bit space. 110 00:06:54,210 --> 00:06:56,890 Then we'll add the microphone control. 111 00:06:57,290 --> 00:07:01,690 And once again we can grab this code which is almost the same thing. 112 00:07:02,410 --> 00:07:09,850 But this time we're using a make icon as well as the make state okay. 113 00:07:10,250 --> 00:07:17,330 So after the microphone control we can go ahead and add the device settings. 114 00:07:23,230 --> 00:07:25,070 So it would look like this. 115 00:07:26,390 --> 00:07:31,470 So we are building this part and this component will be coming from stream as well. 116 00:07:32,830 --> 00:07:33,230 Okay. 117 00:07:33,550 --> 00:07:36,670 So let's try to copy this and paste it. 118 00:07:40,070 --> 00:07:43,510 Get the icon and device settings from stream. 119 00:07:44,070 --> 00:07:48,790 So after the device settings we have one more div and skip that as well. 120 00:07:48,830 --> 00:07:51,470 We will have the join button. 121 00:07:54,950 --> 00:07:56,990 Which is around five lines of code. 122 00:07:56,990 --> 00:07:58,230 So I'll go ahead and get this. 123 00:07:58,270 --> 00:07:59,470 Import the button. 124 00:07:59,870 --> 00:08:01,190 When we click to it. 125 00:08:01,230 --> 00:08:03,750 We are calling this handle join function. 126 00:08:03,750 --> 00:08:07,990 That would take us to the call right. 127 00:08:08,750 --> 00:08:09,190 Okay. 128 00:08:09,430 --> 00:08:14,630 So now let's go ahead and test this out to see how that looks in our application. 129 00:08:16,190 --> 00:08:16,550 Okay. 130 00:08:16,590 --> 00:08:18,870 So now it is trying to use my phone. 131 00:08:18,870 --> 00:08:24,100 But let's say Use my machine's microphone. 132 00:08:24,460 --> 00:08:26,300 And this is the UI that we can see. 133 00:08:27,020 --> 00:08:30,060 Let me try to say allow this time. 134 00:08:31,660 --> 00:08:34,780 And for the camera now it is open as you can tell. 135 00:08:34,980 --> 00:08:37,300 We'll just say allow this time as well. 136 00:08:38,940 --> 00:08:40,580 It says video is disabled. 137 00:08:41,060 --> 00:08:45,340 If we open this up, we should be able to see it on the left hand side. 138 00:08:46,540 --> 00:08:48,420 We can do the same thing for this one. 139 00:08:49,660 --> 00:08:50,100 Okay. 140 00:08:50,380 --> 00:08:53,540 Now we cannot see the settings tab. 141 00:08:54,500 --> 00:08:55,420 Let's go back. 142 00:08:58,820 --> 00:08:59,060 Okay. 143 00:08:59,100 --> 00:09:01,220 So we cannot see the device settings. 144 00:09:01,340 --> 00:09:07,700 It is because we didn't add any any CSS coming from um coming from the stream. 145 00:09:07,740 --> 00:09:09,700 We need to visit our layout. 146 00:09:10,220 --> 00:09:12,900 And here we will add some CSS styling. 147 00:09:13,340 --> 00:09:18,140 And since we are not using this I think we can delete that as well as this one. 148 00:09:19,580 --> 00:09:19,860 Okay. 149 00:09:19,900 --> 00:09:26,280 Just before the global CSS let's try to add this line that I will get it from the GitHub repo. 150 00:09:27,120 --> 00:09:27,520 Okay. 151 00:09:27,680 --> 00:09:32,800 So from the stream we're going to get some styles dot CSS file right. 152 00:09:32,840 --> 00:09:36,120 We're going to get some styling so that it is working as expected. 153 00:09:36,160 --> 00:09:42,600 And then below it we will add our own global CSS file so that we can override anything that they have. 154 00:09:44,520 --> 00:09:44,960 Okay. 155 00:09:45,160 --> 00:09:51,760 Now we can see this is like this is the component coming from stream right. 156 00:09:51,800 --> 00:09:53,720 We can disable it enable it. 157 00:09:53,760 --> 00:09:56,760 And if it is disabled UI has been updated. 158 00:09:56,800 --> 00:10:00,240 This looks a lot more better than what we had previously. 159 00:10:01,160 --> 00:10:03,560 And like this is something that I get. 160 00:10:03,600 --> 00:10:05,240 It's annoying, but just ignore it. 161 00:10:05,840 --> 00:10:07,400 And we have our microphone. 162 00:10:07,440 --> 00:10:08,320 We can disable it. 163 00:10:08,360 --> 00:10:09,120 Enable it. 164 00:10:09,480 --> 00:10:12,640 Once we are ready, we can join to the meeting. 165 00:10:13,040 --> 00:10:13,880 I clicked it. 166 00:10:13,920 --> 00:10:16,240 Now we are in the meeting room, right? 167 00:10:16,440 --> 00:10:18,200 Which would look like this. 168 00:10:19,000 --> 00:10:19,480 Oops. 169 00:10:22,200 --> 00:10:22,680 Okay. 170 00:10:22,720 --> 00:10:23,760 It would look like this. 171 00:10:23,760 --> 00:10:26,200 And this is what we are going to build next.