viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 90bec8782d5c023170fbcd70bf6061b9bf24ee35

Authored by Amber Dev
1 parent db965de899
Exists in master and in 2 other branches amber-development, ui-design

added loader to video chat

Showing 1 changed file with 4 additions and 2 deletions   Show diff stats
src/pages/Dashboard/LiveOnlineClass.vue
Diff comments   View file @90bec87
1 <template> 1 <template>
2 <div class="body-color"> 2 <div class="body-color">
3 <!-- LOADER --> 3 <!-- LOADER -->
4 <div class="loader" v-if="showLoader"> 4 <div class="loader" v-if="showLoader">
5 <v-progress-circular indeterminate color="white"></v-progress-circular> 5 <v-progress-circular indeterminate color="white"></v-progress-circular>
6 </div> 6 </div>
7 7
8 <!-- SNACKBAR --> 8 <!-- SNACKBAR -->
9 <v-snackbar 9 <v-snackbar
10 :timeout="timeout" 10 :timeout="timeout"
11 :top="y === 'top'" 11 :top="y === 'top'"
12 :right="x === 'right'" 12 :right="x === 'right'"
13 :vertical="mode === 'vertical'" 13 :vertical="mode === 'vertical'"
14 v-model="snackbar" 14 v-model="snackbar"
15 :color="snackbarColor" 15 :color="snackbarColor"
16 > 16 >
17 {{ text }} 17 {{ text }}
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-btn flat text @click="snackbar = false">X</v-btn> 19 <v-btn flat text @click="snackbar = false">X</v-btn>
20 </v-snackbar> 20 </v-snackbar>
21 21
22 <v-container grid-list-xl class="pt-0"> 22 <v-container grid-list-xl class="pt-0">
23 <v-layout row wrap class="mt-1"> 23 <v-layout row wrap class="mt-1">
24 <!-- if logged in user is parent --> 24 <!-- if logged in user is parent -->
25 <v-flex xs12 sm12 md9 v-if=" $store.state.role === 'PARENT' "> 25 <v-flex xs12 sm12 md9 v-if=" $store.state.role === 'PARENT' ">
26 <v-layout column> 26 <v-layout column>
27 <!-- HEADING --> 27 <!-- HEADING -->
28 <v-flex> 28 <v-flex>
29 <div 29 <div
30 class="title side-bar-color font-weight-bold" 30 class="title side-bar-color font-weight-bold"
31 >Live Online Classes - {{$route.query.chapterName}}</div> 31 >Live Online Classes - {{$route.query.chapterName}}</div>
32 <!-- <div class="subheading grey--text lighten-1">{{liveLink}}</div> --> 32 <!-- <div class="subheading grey--text lighten-1">{{liveLink}}</div> -->
33 <!-- <div 33 <!-- <div
34 class="subheading grey--text lighten-1" 34 class="subheading grey--text lighten-1"
35 >The session started at 1:00 there is 1 moderator</div>--> 35 >The session started at 1:00 there is 1 moderator</div>-->
36 </v-flex> 36 </v-flex>
37 37
38 <!-- JOIN OR END SESSION --> 38 <!-- JOIN OR END SESSION -->
39 <v-flex> 39 <v-flex>
40 <div> 40 <div>
41 <v-btn 41 <v-btn
42 round 42 round
43 class="open-dialog-button" 43 class="open-dialog-button"
44 dark 44 dark
45 v-if="studentBtn" 45 v-if="studentBtn"
46 @click="showLoader = true;startChat();" 46 @click="showLoader = true;startChat();"
47 >{{studentBtn}}</v-btn> 47 >{{studentBtn}}</v-btn>
48 <span class="subheading grey--twxt lighten-1" v-else>Session hasnt started yet</span> 48 <span class="subheading grey--twxt lighten-1" v-else>Session hasnt started yet</span>
49 </div> 49 </div>
50 </v-flex> 50 </v-flex>
51 <v-flex id="studentClone"> 51 <v-flex id="studentClone">
52 <div id="jitsi-container"></div> 52 <div id="jitsi-container"></div>
53 </v-flex> 53 </v-flex>
54 </v-layout> 54 </v-layout>
55 </v-flex> 55 </v-flex>
56 56
57 <!-- if logged in user is teacher --> 57 <!-- if logged in user is teacher -->
58 <v-flex xs12 sm12 md12 v-else> 58 <v-flex xs12 sm12 md12 v-else>
59 <v-layout column> 59 <v-layout column>
60 <!-- HEADING --> 60 <!-- HEADING -->
61 <v-flex> 61 <v-flex>
62 <div 62 <div
63 class="title side-bar-color font-weight-bold" 63 class="title side-bar-color font-weight-bold"
64 >Live Online Classes - {{$route.query.chapterName}}</div> 64 >Live Online Classes - {{$route.query.chapterName}}</div>
65 <!-- <div class="subheading grey--text lighten-1"></div> --> 65 <!-- <div class="subheading grey--text lighten-1"></div> -->
66 <!-- <div 66 <!-- <div
67 class="subheading grey--text lighten-1" 67 class="subheading grey--text lighten-1"
68 >The session started at 1:00 there is 1 moderator</div>--> 68 >The session started at 1:00 there is 1 moderator</div>-->
69 </v-flex> 69 </v-flex>
70 70
71 <!-- JOIN OR END SESSION --> 71 <!-- JOIN OR END SESSION -->
72 <v-flex> 72 <v-flex>
73 <div> 73 <div>
74 <v-btn round class="open-dialog-button" dark @click="showLoader = true;startChat()">Start Session</v-btn> 74 <v-btn round class="open-dialog-button" dark @click="showLoader = true;startChat()">Start Session</v-btn>
75 </div> 75 </div>
76 </v-flex> 76 </v-flex>
77 <v-flex id="teacherClone"> 77 <v-flex id="teacherClone">
78 <div id="jitsi-container"></div> 78 <div id="jitsi-container"></div>
79 </v-flex> 79 </v-flex>
80 </v-layout> 80 </v-layout>
81 </v-flex> 81 </v-flex>
82 82
83 <v-spacer></v-spacer> 83 <v-spacer></v-spacer>
84 84
85 <!-- COURSES SIDE BAR- positioned to the right of the page --> 85 <!-- COURSES SIDE BAR- positioned to the right of the page -->
86 <!-- <v-flex xs3> 86 <!-- <v-flex xs3>
87 <v-card class="elevation-0 card-border" height="100%"> 87 <v-card class="elevation-0 card-border" height="100%">
88 <CoursesSideBar></CoursesSideBar> 88 <CoursesSideBar></CoursesSideBar>
89 </v-card> 89 </v-card>
90 </v-flex>--> 90 </v-flex>-->
91 </v-layout> 91 </v-layout>
92 </v-container> 92 </v-container>
93 </div> 93 </div>
94 </template> 94 </template>
95 <script> 95 <script>
96 import AllApiCalls from "@/Services/AllApiCalls.js"; 96 import AllApiCalls from "@/Services/AllApiCalls.js";
97 import http from "@/Services/http.js"; 97 import http from "@/Services/http.js";
98 import moment from "moment"; 98 import moment from "moment";
99 import Meet from "@/pages/Meet/meet.vue"; 99 import Meet from "@/pages/Meet/meet.vue";
100 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue"; 100 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue";
101 export default { 101 export default {
102 mixins: [AllApiCalls], 102 mixins: [AllApiCalls],
103 components: { 103 components: {
104 CoursesSideBar, 104 CoursesSideBar,
105 }, 105 },
106 data() { 106 data() {
107 return { 107 return {
108 startLiveSession: "", 108 startLiveSession: "",
109 studentBtn: "", 109 studentBtn: "",
110 110
111 // DATA TABLE 111 // DATA TABLE
112 search: "", 112 search: "",
113 pagination: { 113 pagination: {
114 rowsPerPage: 10, 114 rowsPerPage: 10,
115 }, 115 },
116 liveOnlineHeaders: [ 116 liveOnlineHeaders: [
117 { 117 {
118 text: "Playback", 118 text: "Playback",
119 value: "attachementUrl", 119 value: "attachementUrl",
120 sortable: false, 120 sortable: false,
121 align: "center", 121 align: "center",
122 }, 122 },
123 { 123 {
124 text: "Meeting", 124 text: "Meeting",
125 align: "center", 125 align: "center",
126 sortable: false, 126 sortable: false,
127 value: "", 127 value: "",
128 }, 128 },
129 { 129 {
130 text: "Recording", 130 text: "Recording",
131 value: "", 131 value: "",
132 sortable: false, 132 sortable: false,
133 align: "center", 133 align: "center",
134 }, 134 },
135 { 135 {
136 text: "Description Preview", 136 text: "Description Preview",
137 value: "", 137 value: "",
138 sortable: false, 138 sortable: false,
139 align: "center", 139 align: "center",
140 }, 140 },
141 { text: "Date", value: "", sortable: false, align: "center" }, 141 { text: "Date", value: "", sortable: false, align: "center" },
142 { text: "Duration", value: "", sortable: false, align: "center" }, 142 { text: "Duration", value: "", sortable: false, align: "center" },
143 { text: "Toolbar", value: "", sortable: false, align: "center" }, 143 { text: "Toolbar", value: "", sortable: false, align: "center" },
144 ], 144 ],
145 liveOnlineItems: [], 145 liveOnlineItems: [],
146 146
147 // JITSI CONTAINER 147 // JITSI CONTAINER
148 liveLink: "", 148 liveLink: "",
149 token: "", 149 token: "",
150 selectStudents: {}, 150 selectStudents: {},
151 classRules: [(v) => !!v || " Class Name is required"], 151 classRules: [(v) => !!v || " Class Name is required"],
152 sectionRules: [(v) => !!v || " Section Name is required"], 152 sectionRules: [(v) => !!v || " Section Name is required"],
153 addclass: [], 153 addclass: [],
154 addSection: [], 154 addSection: [],
155 loading: false, 155 loading: false,
156 room: "", 156 room: "",
157 username: "", 157 username: "",
158 roomPassword: "", 158 roomPassword: "",
159 counter: 0, 159 counter: 0,
160 }; 160 };
161 }, 161 },
162 methods: { 162 methods: {
163 async startChat() { 163 async startChat() {
164 if (this.$store.state.role === "PARENT") { 164 if (this.$store.state.role === "PARENT") {
165 if (this.counter == 0) { 165 if (this.counter == 0) {
166 console.log("enter start chat"); 166 console.log("enter start chat");
167 this.startConference(); 167 this.startConference();
168 this.counter += 1; 168 this.counter += 1;
169 } 169 }
170 } 170 }
171 if (this.$store.state.role === "TEACHER") { 171 if (this.$store.state.role === "TEACHER") {
172 if (this.counter == 0) { 172 if (this.counter == 0) {
173 this.createRoom(); 173 this.createRoom();
174 this.counter += 1; 174 this.counter += 1;
175 } 175 }
176 } 176 }
177 }, 177 },
178 // JITSI CONTAINER 178 // JITSI CONTAINER
179 startConference() { 179 startConference() {
180 console.log("yes session started"); 180 console.log("yes session started");
181 var _this = this; 181 var _this = this;
182 try { 182 try {
183 const domain = "meet.intrack.in"; 183 const domain = "meet.intrack.in";
184 const options = { 184 const options = {
185 audioInput: "<deviceLabel>", 185 audioInput: "<deviceLabel>",
186 audioOutput: "<deviceLabel>", 186 audioOutput: "<deviceLabel>",
187 videoInput: "<deviceLabel>", 187 videoInput: "<deviceLabel>",
188 prejoinPageEnabled: false, 188 prejoinPageEnabled: false,
189 roomName: this.room, 189 roomName: this.room,
190 height: 500, 190 height: 500,
191 parentNode: document.getElementById("jitsi-container"), 191 parentNode: document.getElementById("jitsi-container"),
192 interfaceConfigOverwrite: { 192 interfaceConfigOverwrite: {
193 filmStripOnly: false, 193 filmStripOnly: false,
194 SHOW_PROMOTIONAL_CLOSE_PAGE: false, 194 SHOW_PROMOTIONAL_CLOSE_PAGE: false,
195 SHOW_POWERED_BY: false, 195 SHOW_POWERED_BY: false,
196 SHOW_JITSI_WATERMARK: false, 196 SHOW_JITSI_WATERMARK: false,
197 TOOLBAR_BUTTONS: [ 197 TOOLBAR_BUTTONS: [
198 "microphone", 198 "microphone",
199 "camera", 199 "camera",
200 "closedcaptions", 200 "closedcaptions",
201 "desktop", 201 "desktop",
202 "fullscreen", 202 "fullscreen",
203 "fodeviceselection", 203 "fodeviceselection",
204 "hangup", 204 "hangup",
205 "profile", 205 "profile",
206 "info", 206 "info",
207 "chat", 207 "chat",
208 "recording", 208 "recording",
209 "livestreaming", 209 "livestreaming",
210 "etherpad", 210 "etherpad",
211 "sharedvideo", 211 "sharedvideo",
212 "settings", 212 "settings",
213 "raisehand", 213 "raisehand",
214 "videoquality", 214 "videoquality",
215 "filmstrip", 215 "filmstrip",
216 "invite", 216 "invite",
217 "feedback", 217 "feedback",
218 "stats", 218 "stats",
219 "shortcuts", 219 "shortcuts",
220 "tileview", 220 "tileview",
221 ], 221 ],
222 }, 222 },
223 configOverwrite: { 223 configOverwrite: {
224 disableSimulcast: false, 224 disableSimulcast: false,
225 }, 225 },
226 teacherName: "", 226 teacherName: "",
227 romm: "", 227 romm: "",
228 }; 228 };
229 _this.api = new JitsiMeetExternalAPI(domain, options); 229 _this.api = new JitsiMeetExternalAPI(domain, options);
230 console.log("this.api ", this.api); 230 console.log("this.api ", this.api);
231 _this.api.addEventListener("videoConferenceJoined", () => { 231 _this.api.addEventListener("videoConferenceJoined", () => {
232 console.log("Local User Joined"); 232 console.log("Local User Joined");
233 233 this.showLoader = false;
234 _this.api.executeCommand("displayName", _this.username); 234 _this.api.executeCommand("displayName", _this.username);
235 _this.api.executeCommand("password", this_.roomPassword); 235 _this.api.executeCommand("password", this_.roomPassword);
236 }); 236 });
237
237 _this.api.on("readyToClose", () => { 238 _this.api.on("readyToClose", () => {
238 this.$router.push({ name: "Refresh" }); 239 this.$router.push({ name: "Refresh" });
239 this.showLoader = false; 240
240 }); 241 });
242
241 } catch (error) { 243 } catch (error) {
242 console.error("Failed to load Jitsi API", error); 244 console.error("Failed to load Jitsi API", error);
243 } 245 }
244 }, 246 },
245 openRoom() { 247 openRoom() {
246 // verify the JitsiMeetExternalAPI constructor is added to the global.. 248 // verify the JitsiMeetExternalAPI constructor is added to the global..
247 // if (this.teacherName != "" || this.room != "") { 249 // if (this.teacherName != "" || this.room != "") {
248 // if (window.JitsiMeetExternalAPI) { 250 // if (window.JitsiMeetExternalAPI) {
249 // // var person = prompt("Please enter your name:", "Rabie"); 251 // // var person = prompt("Please enter your name:", "Rabie");
250 // if (person != null || person != "") this.username = this.teacherName; 252 // if (person != null || person != "") this.username = this.teacherName;
251 // var room = prompt("Please enter your room:", "Test Room"); 253 // var room = prompt("Please enter your room:", "Test Room");
252 // if (room != null || room != "") this.room = this.room; 254 // if (room != null || room != "") this.room = this.room;
253 // this.startConference(); 255 // this.startConference();
254 // } else alert("Jitsi Meet API script not loaded"); 256 // } else alert("Jitsi Meet API script not loaded");
255 // } 257 // }
256 }, 258 },
257 259
258 createRoom(classId) { 260 createRoom(classId) {
259 this.showLoader = true; 261 this.showLoader = true;
260 var classId = { 262 var classId = {
261 classId: classId, 263 classId: classId,
262 }; 264 };
263 http() 265 http()
264 .post("/createLiveClasses", { 266 .post("/createLiveClasses", {
265 classId: this.$route.query.classId, 267 classId: this.$route.query.classId,
266 courseId: this.$route.query.courseId, 268 courseId: this.$route.query.courseId,
267 chapterId: this.$route.query.chapterId, 269 chapterId: this.$route.query.chapterId,
268 }) 270 })
269 .then((response) => { 271 .then((response) => {
270 // this.addSection = response.data.data; 272 // this.addSection = response.data.data;
271 console.log("CREATE___ROOOM", response.data); 273 console.log("CREATE___ROOOM", response.data);
272 var room = response.data.data.roomName; 274 var room = response.data.data.roomName;
273 var username = localStorage.getItem("teacherName") 275 var username = localStorage.getItem("teacherName")
274 var roomPassword = response.data.data.password; 276 var roomPassword = response.data.data.password;
275 console.log( 277 console.log(
276 "room", 278 "room",
277 room, 279 room,
278 "username", 280 "username",
279 username, 281 username,
280 "roomPassword", 282 "roomPassword",
281 roomPassword 283 roomPassword
282 ); 284 );
283 var this_ = this; 285 var this_ = this;
284 if (username != "" || room != "") { 286 if (username != "" || room != "") {
285 if (window.JitsiMeetExternalAPI) { 287 if (window.JitsiMeetExternalAPI) {
286 // var person = prompt("Please enter your name:", "Rabie"); 288 // var person = prompt("Please enter your name:", "Rabie");
287 if (username != null || username != "") { 289 if (username != null || username != "") {
288 this_.username = username; 290 this_.username = username;
289 } 291 }
290 // var room = prompt("Please enter your room:", "Test Room"); 292 // var room = prompt("Please enter your room:", "Test Room");
291 if (room != null || room != "") { 293 if (room != null || room != "") {
292 this_.room = room; 294 this_.room = room;
293 } 295 }
294 if (roomPassword != null || roomPassword != "") { 296 if (roomPassword != null || roomPassword != "") {
295 this_.password = roomPassword; 297 this_.password = roomPassword;
296 } 298 }
297 } else alert("Jitsi Meet API script not loaded"); 299 } else alert("Jitsi Meet API script not loaded");
298 this_.startConference(); 300 this_.startConference();
299 } 301 }
300 this.showLoader = false; 302 this.showLoader = false;
301 }) 303 })
302 .catch((err) => { 304 .catch((err) => {
303 this.showLoader = false; 305 this.showLoader = false;
304 }); 306 });
305 }, 307 },
306 async studentClasses() { 308 async studentClasses() {
307 this.liveLink = ""; 309 this.liveLink = "";
308 this.room = ""; 310 this.room = "";
309 this.username = ""; 311 this.username = "";
310 this.roomPassword = ""; 312 this.roomPassword = "";
311 /* getLiveClassesesList - To up date line under heading*/ 313 /* getLiveClassesesList - To up date line under heading*/
312 let response = await this.getLiveClassesesList({ 314 let response = await this.getLiveClassesesList({
313 classId: this.$route.query.classId, 315 classId: this.$route.query.classId,
314 courseId: this.$route.query.courseId, 316 courseId: this.$route.query.courseId,
315 chapterId: this.$route.query.chapterId, 317 chapterId: this.$route.query.chapterId,
316 }); 318 });
317 console.log("response getLiveClassesesList- ", response); 319 console.log("response getLiveClassesesList- ", response);
318 320
319 /* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */ 321 /* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */
320 if (response.data.data[0].sessionStatus == "ENDED") { 322 if (response.data.data[0].sessionStatus == "ENDED") {
321 // this.startLiveSession = "Start Session"; 323 // this.startLiveSession = "Start Session";
322 this.studentBtn = ""; 324 this.studentBtn = "";
323 } 325 }
324 if (response.data.data[0].sessionStatus == "STARTED") { 326 if (response.data.data[0].sessionStatus == "STARTED") {
325 // this.startLiveSession = "Join Session"; 327 // this.startLiveSession = "Join Session";
326 this.studentBtn = "Join Session"; 328 this.studentBtn = "Join Session";
327 } 329 }
328 if (response.data.data.length == 0) { 330 if (response.data.data.length == 0) {
329 this.startLiveSession = "Start Session"; 331 this.startLiveSession = "Start Session";
330 this.studentBtn = ""; 332 this.studentBtn = "";
331 } else { 333 } else {
332 this.liveLink = response.data.data[0].link; 334 this.liveLink = response.data.data[0].link;
333 var room = response.data.data[0].roomName; 335 var room = response.data.data[0].roomName;
334 var username = this.currentUser; 336 var username = this.currentUser;
335 var roomPassword = response.data.data[0].password; 337 var roomPassword = response.data.data[0].password;
336 var this_ = this; 338 var this_ = this;
337 // console.log(this.room, this.roomPassword, this.username); 339 // console.log(this.room, this.roomPassword, this.username);
338 340
339 if (username != "" || room != "") { 341 if (username != "" || room != "") {
340 if (window.JitsiMeetExternalAPI) { 342 if (window.JitsiMeetExternalAPI) {
341 // var person = prompt("Please enter your name:", "Rabie"); 343 // var person = prompt("Please enter your name:", "Rabie");
342 if (username != null || username != "") { 344 if (username != null || username != "") {
343 this_.username = username; 345 this_.username = username;
344 } 346 }
345 if (roomPassword != null || roomPassword != "") { 347 if (roomPassword != null || roomPassword != "") {
346 this_.roomPassword = roomPassword; 348 this_.roomPassword = roomPassword;
347 } 349 }
348 // var room = prompt("Please enter your room:", "Test Room"); 350 // var room = prompt("Please enter your room:", "Test Room");
349 if (room != null || room != "") { 351 if (room != null || room != "") {
350 this_.room = room; 352 this_.room = room;
351 } 353 }
352 // this.startConference(); 354 // this.startConference();
353 } 355 }
354 } 356 }
355 } 357 }
356 }, 358 },
357 }, 359 },
358 360
359 async created() { 361 async created() {
360 console.log( 362 console.log(
361 "this.$store.state.studentsData", 363 "this.$store.state.studentsData",
362 this.$store.state.studentsData[0].name 364 this.$store.state.studentsData[0].name
363 ); 365 );
364 this.currentUser = localStorage.getItem("studentName"); 366 this.currentUser = localStorage.getItem("studentName");
365 this.token = this.$store.state.token; 367 this.token = this.$store.state.token;
366 if (this.$store.state.role === "PARENT") { 368 if (this.$store.state.role === "PARENT") {
367 await this.studentClasses(); 369 await this.studentClasses();
368 } 370 }
369 371
370 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 372 /* getStudentCourses - to get courseData - defined in GetApis.js*/
371 if (this.$store.state.role === "PARENT") { 373 if (this.$store.state.role === "PARENT") {
372 await this.getStudentCourses({ 374 await this.getStudentCourses({
373 classId: localStorage.getItem("parentClassId"), 375 classId: localStorage.getItem("parentClassId"),
374 studentId: localStorage.getItem("parentStudentId"), 376 studentId: localStorage.getItem("parentStudentId"),
375 }); 377 });
376 } 378 }
377 }, 379 },
378 }; 380 };
379 </script> 381 </script>
380 <style scoped> 382 <style scoped>
381 .side-bar-color { 383 .side-bar-color {
382 color: #827bfa !important; 384 color: #827bfa !important;
383 /* border-top-right-radius: 74px !important; */ 385 /* border-top-right-radius: 74px !important; */
384 } 386 }
385 .card-border { 387 .card-border {
386 border: 1px #bdbdbd solid; 388 border: 1px #bdbdbd solid;
387 border-radius: 3px; 389 border-radius: 3px;
388 } 390 }
389 .reply-desc { 391 .reply-desc {
390 border: 1px solid #f2f2f2; 392 border: 1px solid #f2f2f2;
391 } 393 }
392 .open-dialog-button { 394 .open-dialog-button {
393 background: #827bfa !important; 395 background: #827bfa !important;
394 border-color: #827bfa !important; 396 border-color: #827bfa !important;
395 text-transform: none !important; 397 text-transform: none !important;
396 } 398 }
397 399
398 .reply-btn { 400 .reply-btn {
399 background: #feb83c !important; 401 background: #feb83c !important;
400 border-color: #feb83c !important; 402 border-color: #feb83c !important;
401 text-transform: none !important; 403 text-transform: none !important;
402 -webkit-box-shadow: none !important; 404 -webkit-box-shadow: none !important;
403 box-shadow: none !important; 405 box-shadow: none !important;
404 } 406 }
405 #jitsi-container { 407 #jitsi-container {
406 height: 100vh; 408 height: 100vh;
407 } 409 }
408 </style> 410 </style>