1 00:00:01,200 --> 00:00:08,000 So in this UI, I don't know if you have realized it, but we have a resizable component that we can 2 00:00:08,360 --> 00:00:11,720 like drag and drop it to the left and to the right. 3 00:00:11,720 --> 00:00:19,440 We have the same thing on this part, where we can vertically take this to the top and to the bottom, 4 00:00:19,440 --> 00:00:21,600 where we can just resize our tabs. 5 00:00:21,800 --> 00:00:26,680 And this is a component coming from CDN UI, let's say resizable. 6 00:00:27,600 --> 00:00:34,200 So you can have these kind of panels using this component either in the horizontal direction or in the 7 00:00:34,200 --> 00:00:35,280 vertical direction. 8 00:00:35,600 --> 00:00:37,600 So let's go ahead and copy this. 9 00:00:38,080 --> 00:00:39,720 Paste it into our terminal. 10 00:00:39,720 --> 00:00:43,600 And these are the files that we have open from the latest section. 11 00:00:44,040 --> 00:00:47,000 So we have added this one at the very last. 12 00:00:47,280 --> 00:00:48,840 So go ahead and close everything. 13 00:00:49,240 --> 00:00:50,480 Open up my terminal. 14 00:00:51,080 --> 00:00:52,080 We got this switch. 15 00:00:52,080 --> 00:00:56,120 Let's clear the console and just paste this in. 16 00:00:56,400 --> 00:00:58,600 Okay I have done a mistake. 17 00:00:59,340 --> 00:01:00,140 So what have I done? 18 00:01:00,140 --> 00:01:02,540 Let me just delete everything. 19 00:01:03,500 --> 00:01:10,460 Go back to chats UI documentation, copy this and paste this in. 20 00:01:11,340 --> 00:01:18,860 Okay, so I have lately switched from Windows to Mac OS, so I sometimes forgot the shortcut shortcuts 21 00:01:18,860 --> 00:01:20,980 is kind of annoying, but there we go. 22 00:01:20,980 --> 00:01:26,420 So that's why I got this kind of like a weird situation because I used the wrong shortcut. 23 00:01:26,740 --> 00:01:30,500 Okay, so we got the resizable panel component. 24 00:01:30,820 --> 00:01:37,100 I would like to go into the meeting room TSX, and we would like to build the UI. 25 00:01:37,500 --> 00:01:43,980 As always, before we get into the return statement, let's first take a look at the output that we 26 00:01:44,180 --> 00:01:45,500 are trying to build. 27 00:01:45,900 --> 00:01:50,020 So we have two panels left hand side as well as the right hand side. 28 00:01:50,260 --> 00:01:51,500 This entire thing. 29 00:01:52,180 --> 00:01:59,050 So this entire thing called as a code editor component that we're going to build maybe in the next section. 30 00:01:59,050 --> 00:02:01,810 For now we are going to focus on this left hand side. 31 00:02:02,250 --> 00:02:02,690 Okay. 32 00:02:03,250 --> 00:02:07,370 So we are going to have a resizable panel in between. 33 00:02:07,370 --> 00:02:11,490 And we will have two different panels next to each other. 34 00:02:11,850 --> 00:02:14,570 So let's try to build this UI pretty quickly. 35 00:02:14,730 --> 00:02:16,410 For this we will have a state. 36 00:02:16,570 --> 00:02:23,050 I'll first get the let's say layout and let's say set layout. 37 00:02:24,410 --> 00:02:26,610 And this can have two different values. 38 00:02:26,730 --> 00:02:28,650 So I'll just say use state. 39 00:02:29,410 --> 00:02:31,610 Um this could be I think a grid. 40 00:02:31,850 --> 00:02:36,170 But by default I would like to go with the speaker layout. 41 00:02:36,210 --> 00:02:37,610 Let's import the use state. 42 00:02:37,610 --> 00:02:42,570 And let's say this can take two different values grid or speaker. 43 00:02:42,770 --> 00:02:44,570 By default this is what we'll have. 44 00:02:44,850 --> 00:02:51,730 And we can update the layout by pressing this button which will open up a dropdown. 45 00:02:51,730 --> 00:02:53,730 And we can update the layout. 46 00:02:54,170 --> 00:02:56,870 So this is something that we'll see we'll see just in a second. 47 00:02:56,910 --> 00:03:01,550 And we would like to have one more state to be able to show the participants. 48 00:03:02,030 --> 00:03:11,070 So when we click to this button from the right hand side, we will see like a component that will open 49 00:03:11,070 --> 00:03:13,390 and show us the participants in this list. 50 00:03:13,390 --> 00:03:14,950 And we can filter them out. 51 00:03:15,350 --> 00:03:18,270 So this is the state either that we want to show it or not. 52 00:03:18,790 --> 00:03:20,510 By default this will be false. 53 00:03:20,790 --> 00:03:24,110 Then I would like to get my router from Next.js. 54 00:03:24,670 --> 00:03:25,950 Let's go ahead and import it. 55 00:03:26,830 --> 00:03:29,710 And this should be coming from next navigation. 56 00:03:32,990 --> 00:03:33,310 Okay. 57 00:03:33,350 --> 00:03:34,310 Just like that. 58 00:03:34,950 --> 00:03:35,710 I have a typo. 59 00:03:35,750 --> 00:03:36,390 There we go. 60 00:03:36,590 --> 00:03:42,830 And I would like to have a a hook coming from let's say from the stream. 61 00:03:44,910 --> 00:03:48,710 So they have this special hook use called state hooks. 62 00:03:48,710 --> 00:03:52,190 And from here you can get all kinds of different hooks. 63 00:03:52,230 --> 00:03:57,620 And in our case we would like to use the calling state because depending on this we will do something. 64 00:03:57,780 --> 00:04:05,380 So we'll say if I think first I should say const calling state, we will just check if we are joined 65 00:04:05,380 --> 00:04:05,980 or not. 66 00:04:06,220 --> 00:04:07,300 Let's call this state. 67 00:04:07,300 --> 00:04:09,220 This is going to give us the calling state. 68 00:04:09,540 --> 00:04:20,620 I will say if calling state is not equal to calling state dot joined. 69 00:04:21,420 --> 00:04:25,820 So if you are not joined we will we can show some kind of a loader spinner. 70 00:04:25,860 --> 00:04:26,300 Right. 71 00:04:26,700 --> 00:04:31,340 I would like to get this return statement with this loader icon. 72 00:04:33,180 --> 00:04:33,620 Okay. 73 00:04:33,660 --> 00:04:34,460 Size of six. 74 00:04:34,460 --> 00:04:38,740 And it would be animated with the spin class. 75 00:04:39,540 --> 00:04:44,380 So with this if you check now we can go and build the return statement instead of a dev. 76 00:04:44,420 --> 00:04:45,820 Let's delete everything. 77 00:04:45,860 --> 00:04:47,060 Delete the content. 78 00:04:47,100 --> 00:04:55,760 This will be resizable panel group coming from our UI folder and let's make sure we close this off. 79 00:04:56,160 --> 00:05:00,240 So this needs to take a prop which is going to be direction. 80 00:05:00,240 --> 00:05:03,320 And we'll take the go in the horizontal direction. 81 00:05:03,880 --> 00:05:08,440 So in the horizontally we will have two different tabs one here and then this one. 82 00:05:08,440 --> 00:05:12,800 And in the code editor component we will have in the vertical direction. 83 00:05:13,360 --> 00:05:16,720 But currently we would like to have in the horizontal direction. 84 00:05:17,200 --> 00:05:17,720 Okay. 85 00:05:17,800 --> 00:05:21,200 So we'll have a resizable panel. 86 00:05:22,160 --> 00:05:23,440 Let's get this. 87 00:05:24,040 --> 00:05:26,440 So this will be for the right hand side. 88 00:05:26,440 --> 00:05:28,760 And I would like to copy this. 89 00:05:29,800 --> 00:05:34,000 So maybe I'll just get that copy it and paste it. 90 00:05:34,000 --> 00:05:36,040 This is going to be for the right hand side. 91 00:05:36,680 --> 00:05:36,920 Okay. 92 00:05:36,960 --> 00:05:38,640 So let me just build the right hand side. 93 00:05:38,640 --> 00:05:42,320 I will say the default size for this will be 65. 94 00:05:42,320 --> 00:05:44,960 And let's say minimum size will be 25. 95 00:05:45,120 --> 00:05:50,560 And let's say code editor will go here. 96 00:05:51,180 --> 00:05:53,660 This is something that we'll build later in the video. 97 00:05:53,660 --> 00:05:56,140 And now we can focus on this right hand side. 98 00:05:57,180 --> 00:05:57,540 Okay. 99 00:05:57,740 --> 00:06:03,420 So let's say this or maybe let's say video will go here. 100 00:06:03,420 --> 00:06:06,740 We can add some props just like what we have done here. 101 00:06:06,780 --> 00:06:10,620 I'll say the default size for this could be 35. 102 00:06:10,860 --> 00:06:13,700 And minimum size could be 25. 103 00:06:13,700 --> 00:06:15,660 Let's say maximum size. 104 00:06:16,500 --> 00:06:20,860 Maybe we can just go with one 100 and just see how that would look like. 105 00:06:20,900 --> 00:06:25,780 And class name I'll add relative because we'll be using some absolute positioning inside. 106 00:06:26,020 --> 00:06:28,300 So let's save and try to see the output. 107 00:06:30,620 --> 00:06:34,740 So I'll just say join to the meeting okay. 108 00:06:35,060 --> 00:06:39,740 Now we have two different panels but we cannot see the resizable handle. 109 00:06:39,780 --> 00:06:40,260 Right. 110 00:06:41,220 --> 00:06:50,330 So for this we have a component let's say resizable handle coming from UI folder and we'll just say 111 00:06:50,330 --> 00:06:51,170 width handle. 112 00:06:51,690 --> 00:06:53,410 That's going to be equal to true. 113 00:06:54,530 --> 00:06:57,770 So if you'll leave it as it is that means it's true. 114 00:06:59,850 --> 00:07:02,450 Now we can see this is resizable right? 115 00:07:02,490 --> 00:07:06,250 I don't know if you can see it, but this is what we have. 116 00:07:06,930 --> 00:07:08,770 And we'll make this to look a lot better. 117 00:07:08,770 --> 00:07:09,730 Just in a second. 118 00:07:12,290 --> 00:07:17,570 Okay, so let's try to build this left hand side where we have the video component. 119 00:07:18,890 --> 00:07:25,530 So I'll just say video layout and go inside. 120 00:07:25,530 --> 00:07:31,290 We'll have a div with class name of absolute inset of zero. 121 00:07:31,290 --> 00:07:33,370 And we will have this check. 122 00:07:33,410 --> 00:07:42,250 We'll say if layout is equal to grid then we would like to show this paginated grid layout coming from 123 00:07:42,250 --> 00:07:42,970 stream. 124 00:07:42,970 --> 00:07:46,930 But else we can show the speaker layout. 125 00:07:47,550 --> 00:07:51,550 Once again, this was coming from stream, so we can just put this in. 126 00:07:51,910 --> 00:07:55,390 Then I would like to show the participant list overlay. 127 00:07:56,070 --> 00:07:57,550 So I'll go ahead and paste this in. 128 00:07:57,550 --> 00:08:03,230 I'll say if show participants state is true we would like to see this component. 129 00:08:03,670 --> 00:08:06,910 And on close we'll just set the state to be false. 130 00:08:08,030 --> 00:08:10,950 Okay I just saved and the code has been formatted. 131 00:08:11,350 --> 00:08:18,310 Then after this div, just before the resizable panel, we would like to add our video controls. 132 00:08:21,230 --> 00:08:22,470 So let's say div. 133 00:08:22,510 --> 00:08:25,070 And maybe before we move on let's just save. 134 00:08:25,110 --> 00:08:27,270 Take a look at the output how that looks. 135 00:08:27,670 --> 00:08:27,830 Okay. 136 00:08:27,870 --> 00:08:29,550 Currently it doesn't look really nice. 137 00:08:29,550 --> 00:08:30,910 So let's continue. 138 00:08:31,350 --> 00:08:33,950 This div will take some classes. 139 00:08:33,990 --> 00:08:36,150 I would like to copy it and paste it. 140 00:08:36,430 --> 00:08:38,950 Then we will have one more div inside. 141 00:08:39,550 --> 00:08:40,710 Let's close this off. 142 00:08:41,150 --> 00:08:41,550 Flex. 143 00:08:41,550 --> 00:08:41,870 Flex. 144 00:08:42,350 --> 00:08:43,710 Items centered. 145 00:08:44,310 --> 00:08:50,900 And then we would like to have one last div that I'll be getting it and pasting it. 146 00:08:51,300 --> 00:08:53,060 I'll save to get this formatting. 147 00:08:53,380 --> 00:08:57,860 So inside this div we will have the call controls. 148 00:08:58,620 --> 00:09:00,940 This is a component coming from stream. 149 00:09:00,940 --> 00:09:04,100 It is really convenient to use it we'll say on live. 150 00:09:04,140 --> 00:09:07,940 Basically we want to push the user to the home page. 151 00:09:08,420 --> 00:09:17,780 Then we would like to have a div with class name of flex items centered and I believe gap of two. 152 00:09:18,940 --> 00:09:23,500 Okay, so inside this div we will have a drop down menu component. 153 00:09:23,540 --> 00:09:27,660 So we'll say drop down menu coming from UI folder. 154 00:09:27,700 --> 00:09:29,700 Make sure you don't get it from the Redux. 155 00:09:30,380 --> 00:09:32,180 So we get it from the CDN. 156 00:09:33,660 --> 00:09:35,100 Okay drop down menu. 157 00:09:35,100 --> 00:09:38,500 And this will be taking a trigger component inside. 158 00:09:38,540 --> 00:09:39,700 I will paste this in. 159 00:09:39,740 --> 00:09:42,540 Let's try to import them from the UI. 160 00:09:43,100 --> 00:09:44,340 Same for the button. 161 00:09:44,880 --> 00:09:47,840 and we have this layout list icon. 162 00:09:48,000 --> 00:09:55,240 So in Lucid React there is the same thing that is called with icon as well as the just the name. 163 00:09:56,000 --> 00:10:01,200 In my opinion, I think we should always use it with the icon so that when we read our code, we should 164 00:10:01,200 --> 00:10:03,160 understand that this is an icon. 165 00:10:03,680 --> 00:10:04,160 Okay. 166 00:10:04,280 --> 00:10:05,680 And this is size of four. 167 00:10:05,880 --> 00:10:10,560 And after the trigger we would like to have the drop down menu content. 168 00:10:11,080 --> 00:10:12,880 So I will go ahead and paste this in. 169 00:10:13,040 --> 00:10:15,640 Import this from UI folder. 170 00:10:15,720 --> 00:10:16,800 Same for this one. 171 00:10:17,040 --> 00:10:24,200 And here we have an onclick where we change the layout to be grid and speaker. 172 00:10:24,640 --> 00:10:24,920 Okay. 173 00:10:24,960 --> 00:10:29,160 Let's save and maybe try to see if UI has been updated. 174 00:10:29,920 --> 00:10:34,520 So it has definitely been updated, but it doesn't really look nice yet. 175 00:10:35,800 --> 00:10:38,000 We're going to build it just in a second. 176 00:10:39,640 --> 00:10:39,920 Okay. 177 00:10:39,960 --> 00:10:44,260 Let's go inside and Try to build the rest. 178 00:10:44,260 --> 00:10:50,980 So just below to the drop down menu, we will have a button where we can join or where we can show the 179 00:10:50,980 --> 00:10:52,100 participants list. 180 00:10:52,100 --> 00:10:56,260 And for this I'll be using this users icon coming from Lucid React. 181 00:10:56,260 --> 00:10:58,060 And this has the size of four. 182 00:10:58,180 --> 00:11:03,700 So if you don't know in tailwind, if you're using the same height and width, you can basically use 183 00:11:03,700 --> 00:11:06,340 this shortcut with the size class. 184 00:11:06,340 --> 00:11:08,740 So you can do the same thing for this dude as well. 185 00:11:08,900 --> 00:11:09,860 Size of ten. 186 00:11:10,220 --> 00:11:10,820 There we go. 187 00:11:10,860 --> 00:11:14,620 Use this size of icon variant of outline for this button. 188 00:11:14,740 --> 00:11:18,220 And after this button we would like to show another button. 189 00:11:18,220 --> 00:11:24,580 So for now I'll just say um button let's say and call button. 190 00:11:24,580 --> 00:11:28,580 This is something that we'll build just in a couple of minutes okay. 191 00:11:28,620 --> 00:11:32,140 So with this I think we can save and take a look at the output. 192 00:11:33,260 --> 00:11:33,500 Okay. 193 00:11:33,580 --> 00:11:37,740 For some reason this doesn't look nice as expected. 194 00:11:38,260 --> 00:11:43,930 Maybe we should wrap this entire component with a div or maybe. 195 00:11:45,010 --> 00:11:46,690 Okay, let's wrap it with a div. 196 00:11:49,730 --> 00:11:54,450 And give it a class name like height of screen. 197 00:11:55,130 --> 00:11:56,450 Is this going to fix it. 198 00:11:58,050 --> 00:12:02,170 Okay so it fixed this but it overflows right. 199 00:12:03,490 --> 00:12:05,370 How could we fix this. 200 00:12:05,570 --> 00:12:07,850 We can go ahead and calculate the height. 201 00:12:08,130 --> 00:12:13,690 So I'll just say um let's say height and open up this brackets. 202 00:12:13,690 --> 00:12:17,610 I'll say calculate the whole screen minus four REM. 203 00:12:19,210 --> 00:12:20,370 This should fix it. 204 00:12:20,370 --> 00:12:26,170 But remember we have one pixel in the border in the navbar right from the border. 205 00:12:26,170 --> 00:12:28,330 We just need to say minus one. 206 00:12:28,570 --> 00:12:31,770 Let's save and it should be minus one pixels by the way. 207 00:12:31,810 --> 00:12:32,490 Let's save. 208 00:12:32,810 --> 00:12:35,570 Okay, now we don't get this, uh, overflow. 209 00:12:36,450 --> 00:12:38,290 Uh, the scroll bar, right? 210 00:12:38,610 --> 00:12:39,870 Okay, there we go. 211 00:12:39,910 --> 00:12:41,710 This is working as expected. 212 00:12:41,710 --> 00:12:49,110 We're going to build this button in a second, but we can see the, the, um, layout buttons. 213 00:12:49,110 --> 00:12:49,590 Right. 214 00:12:49,630 --> 00:12:55,150 We can go into the grid view even though it doesn't really change too much because we don't have too 215 00:12:55,150 --> 00:12:56,470 many participants. 216 00:12:57,150 --> 00:13:01,750 But as you can tell, it definitely updates the view and we can see the list. 217 00:13:01,910 --> 00:13:04,870 This is the participants list that we can search for. 218 00:13:04,910 --> 00:13:11,670 If I just search for someone that does not exist, we'll get this UI, but else we can just search for 219 00:13:11,670 --> 00:13:14,590 someone that is existed in the call. 220 00:13:15,870 --> 00:13:20,190 And when we clicked this, it would close it and update the state. 221 00:13:20,590 --> 00:13:22,830 Okay, so we can share our screen as well. 222 00:13:22,870 --> 00:13:24,110 Add a reaction. 223 00:13:25,430 --> 00:13:32,990 Everyone would see it in real time and let me actually go and create a new account, then join into 224 00:13:32,990 --> 00:13:33,670 this call. 225 00:13:33,710 --> 00:13:35,910 So this is what I'll be doing just in a second. 226 00:13:36,350 --> 00:13:39,690 So I have just signed up with a different Google account. 227 00:13:39,730 --> 00:13:42,210 Now this is a candidate by default. 228 00:13:42,410 --> 00:13:48,970 So I'll go ahead and grab the URL from this call and paste it into here. 229 00:13:49,530 --> 00:13:54,130 Later in the video we will actually have the cards that we can join manually. 230 00:13:54,530 --> 00:14:01,130 Um, but for now we can like we can join from the URL since we don't have the functionality yet. 231 00:14:02,530 --> 00:14:05,890 So we're going to be in the setup page and I don't know why. 232 00:14:05,930 --> 00:14:07,810 For some reason it connects to my phone. 233 00:14:07,810 --> 00:14:12,050 I will select the machine this, uh MacBook. 234 00:14:12,290 --> 00:14:15,410 And let's open up the camera just to check how we look. 235 00:14:15,850 --> 00:14:17,530 This is working as expected. 236 00:14:17,570 --> 00:14:19,290 Let's say you join into the meeting. 237 00:14:21,130 --> 00:14:24,050 Okay, I'll just mute myself so that it doesn't echo. 238 00:14:24,570 --> 00:14:27,250 And let's try to share our screen. 239 00:14:27,250 --> 00:14:33,370 Or maybe before this, we can add some reactions and the other user should be able to see it in real 240 00:14:33,410 --> 00:14:34,330 time, right? 241 00:14:34,690 --> 00:14:39,760 We can update the view can go into the grid view or into the speaker view. 242 00:14:40,000 --> 00:14:44,080 We can see the participants and let's try to share our screen. 243 00:14:44,440 --> 00:14:45,320 So I'll go ahead. 244 00:14:47,480 --> 00:14:49,680 And let's just share the VS code. 245 00:14:50,480 --> 00:14:52,560 It says you are presenting your screen. 246 00:14:53,120 --> 00:14:53,880 Let's go back. 247 00:14:53,920 --> 00:14:56,080 This user can see the entire screen. 248 00:14:57,040 --> 00:14:59,600 Now in this case both of these users is me. 249 00:14:59,640 --> 00:15:01,440 That's why it looks a bit buggy. 250 00:15:01,440 --> 00:15:08,360 But in real world this this would not be the case because you are the you will not be the only users, 251 00:15:08,360 --> 00:15:08,800 right? 252 00:15:09,480 --> 00:15:12,960 Okay, so let's go ahead and stop sharing the screen. 253 00:15:12,960 --> 00:15:14,720 We can take a recording. 254 00:15:15,680 --> 00:15:17,680 Let's go ahead and start the recording. 255 00:15:21,240 --> 00:15:22,400 Now it is recording. 256 00:15:22,400 --> 00:15:25,560 Let's just wait a little bit and then we can pause this. 257 00:15:26,120 --> 00:15:32,000 And this button will be only visible to the creator of the call. 258 00:15:32,160 --> 00:15:35,460 So as a candidate you should not be able to see this button. 259 00:15:35,940 --> 00:15:37,980 This would end the call for everyone. 260 00:15:38,380 --> 00:15:40,700 This is something that we'll build later in the video. 261 00:15:40,700 --> 00:15:43,620 And let's stop the recording now in the background. 262 00:15:43,660 --> 00:15:50,740 The recording will be prepared and it would be sent to the stream stream dashboard. 263 00:15:50,740 --> 00:15:51,980 So we can go ahead. 264 00:15:52,180 --> 00:15:54,500 Check this out if we really want it to. 265 00:15:56,420 --> 00:15:57,740 Let's visit the dashboard. 266 00:15:57,900 --> 00:16:02,820 We should be able to see our calls in this recently created application. 267 00:16:04,820 --> 00:16:07,940 Let's just see audio video overview. 268 00:16:08,700 --> 00:16:11,580 And these are all the calls that we had previously. 269 00:16:13,700 --> 00:16:17,260 And I believe under the recordings you can find it. 270 00:16:17,300 --> 00:16:20,660 Feel free to definitely check this dashboard. 271 00:16:20,900 --> 00:16:25,500 But later in the video we will actually fetch those recordings in a different page. 272 00:16:26,700 --> 00:16:29,580 Okay, so looks like everything is working as expected. 273 00:16:29,580 --> 00:16:31,940 I will leave from this call. 274 00:16:31,980 --> 00:16:38,450 Now we are in the home page and the other user should not be able to see that user because it that user 275 00:16:38,490 --> 00:16:39,210 just left. 276 00:16:39,810 --> 00:16:42,690 So with that, that's going to be it for this component as well. 277 00:16:42,890 --> 00:16:45,570 Next we can build this and call button. 278 00:16:45,690 --> 00:16:47,330 So I'll see you in the next section. 279 00:16:47,330 --> 00:16:51,930 And just before we move on with the next section, I just wanted to show you the place that you can 280 00:16:51,930 --> 00:16:53,250 find the recordings. 281 00:16:53,370 --> 00:16:59,770 So from the overview you can say view call explorer which is the explorer that you can see everything 282 00:16:59,770 --> 00:17:01,970 related to your past calls. 283 00:17:02,290 --> 00:17:04,330 So we had two different calls. 284 00:17:04,330 --> 00:17:06,930 And from this one we can see the recordings. 285 00:17:07,050 --> 00:17:12,130 We have one recording and we can get the URL and test this out. 286 00:17:12,890 --> 00:17:13,810 Just paste it. 287 00:17:13,810 --> 00:17:15,690 This is the call that we had. 288 00:17:16,530 --> 00:17:17,730 So you can watch it. 289 00:17:18,730 --> 00:17:22,130 It has been processed and it has been saved to the dashboard. 290 00:17:22,370 --> 00:17:28,970 Later in the video we will actually fetch them from this dashboard and show it in the recordings page. 291 00:17:29,370 --> 00:17:29,650 Okay. 292 00:17:29,690 --> 00:17:32,170 So with that we can move on with the next section.