Commit b6e4f6eaad583373e527939b6f99c60b901e9413
1 parent
e05668b28f
Exists in
master
and in
2 other branches
Check user's device type and set link of app if user start or join live class through mobile
Showing
1 changed file
with
35 additions
and
16 deletions
Show diff stats
src/pages/Dashboard/LiveOnlineClass.vue
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 | 74 | <v-btn |
75 | round | 75 | round |
76 | class="open-dialog-button" | 76 | class="open-dialog-button" |
77 | dark | 77 | dark |
78 | @click="showLoader = true;startChat()" | 78 | @click="showLoader = true;startChat()" |
79 | >Start Session</v-btn> | 79 | >Start Session</v-btn> |
80 | </div> | 80 | </div> |
81 | </v-flex> | 81 | </v-flex> |
82 | <v-flex id="teacherClone"> | 82 | <v-flex id="teacherClone"> |
83 | <div id="jitsi-container"></div> | 83 | <div id="jitsi-container"></div> |
84 | </v-flex> | 84 | </v-flex> |
85 | </v-layout> | 85 | </v-layout> |
86 | </v-flex> | 86 | </v-flex> |
87 | 87 | ||
88 | <v-spacer></v-spacer> | 88 | <v-spacer></v-spacer> |
89 | 89 | ||
90 | <!-- COURSES SIDE BAR- positioned to the right of the page --> | 90 | <!-- COURSES SIDE BAR- positioned to the right of the page --> |
91 | <!-- <v-flex xs3> | 91 | <!-- <v-flex xs3> |
92 | <v-card class="elevation-0 card-border" height="100%"> | 92 | <v-card class="elevation-0 card-border" height="100%"> |
93 | <CoursesSideBar></CoursesSideBar> | 93 | <CoursesSideBar></CoursesSideBar> |
94 | </v-card> | 94 | </v-card> |
95 | </v-flex>--> | 95 | </v-flex>--> |
96 | </v-layout> | 96 | </v-layout> |
97 | </v-container> | 97 | </v-container> |
98 | </div> | 98 | </div> |
99 | </template> | 99 | </template> |
100 | <script> | 100 | <script> |
101 | import AllApiCalls from "@/Services/AllApiCalls.js"; | 101 | import AllApiCalls from "@/Services/AllApiCalls.js"; |
102 | import http from "@/Services/http.js"; | 102 | import http from "@/Services/http.js"; |
103 | import moment from "moment"; | 103 | import moment from "moment"; |
104 | import Meet from "@/pages/Meet/meet.vue"; | 104 | import Meet from "@/pages/Meet/meet.vue"; |
105 | import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue"; | 105 | import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue"; |
106 | export default { | 106 | export default { |
107 | mixins: [AllApiCalls], | 107 | mixins: [AllApiCalls], |
108 | components: { | 108 | components: { |
109 | CoursesSideBar, | 109 | CoursesSideBar, |
110 | }, | 110 | }, |
111 | data() { | 111 | data() { |
112 | return { | 112 | return { |
113 | startLiveSession: "", | 113 | startLiveSession: "", |
114 | studentBtn: "", | 114 | studentBtn: "", |
115 | 115 | ||
116 | // DATA TABLE | 116 | // DATA TABLE |
117 | search: "", | 117 | search: "", |
118 | pagination: { | 118 | pagination: { |
119 | rowsPerPage: 10, | 119 | rowsPerPage: 10, |
120 | }, | 120 | }, |
121 | liveOnlineHeaders: [ | 121 | liveOnlineHeaders: [ |
122 | { | 122 | { |
123 | text: "Playback", | 123 | text: "Playback", |
124 | value: "attachementUrl", | 124 | value: "attachementUrl", |
125 | sortable: false, | 125 | sortable: false, |
126 | align: "center", | 126 | align: "center", |
127 | }, | 127 | }, |
128 | { | 128 | { |
129 | text: "Meeting", | 129 | text: "Meeting", |
130 | align: "center", | 130 | align: "center", |
131 | sortable: false, | 131 | sortable: false, |
132 | value: "", | 132 | value: "", |
133 | }, | 133 | }, |
134 | { | 134 | { |
135 | text: "Recording", | 135 | text: "Recording", |
136 | value: "", | 136 | value: "", |
137 | sortable: false, | 137 | sortable: false, |
138 | align: "center", | 138 | align: "center", |
139 | }, | 139 | }, |
140 | { | 140 | { |
141 | text: "Description Preview", | 141 | text: "Description Preview", |
142 | value: "", | 142 | value: "", |
143 | sortable: false, | 143 | sortable: false, |
144 | align: "center", | 144 | align: "center", |
145 | }, | 145 | }, |
146 | { text: "Date", value: "", sortable: false, align: "center" }, | 146 | { text: "Date", value: "", sortable: false, align: "center" }, |
147 | { text: "Duration", value: "", sortable: false, align: "center" }, | 147 | { text: "Duration", value: "", sortable: false, align: "center" }, |
148 | { text: "Toolbar", value: "", sortable: false, align: "center" }, | 148 | { text: "Toolbar", value: "", sortable: false, align: "center" }, |
149 | ], | 149 | ], |
150 | liveOnlineItems: [], | 150 | liveOnlineItems: [], |
151 | 151 | ||
152 | // JITSI CONTAINER | 152 | // JITSI CONTAINER |
153 | liveLink: "", | 153 | liveLink: "", |
154 | token: "", | 154 | token: "", |
155 | selectStudents: {}, | 155 | selectStudents: {}, |
156 | classRules: [(v) => !!v || " Class Name is required"], | 156 | classRules: [(v) => !!v || " Class Name is required"], |
157 | sectionRules: [(v) => !!v || " Section Name is required"], | 157 | sectionRules: [(v) => !!v || " Section Name is required"], |
158 | addclass: [], | 158 | addclass: [], |
159 | addSection: [], | 159 | addSection: [], |
160 | loading: false, | 160 | loading: false, |
161 | room: "", | 161 | room: "", |
162 | username: "", | 162 | username: "", |
163 | roomPassword: "", | 163 | roomPassword: "", |
164 | counter: 0, | 164 | counter: 0, |
165 | appLink: "", | ||
165 | }; | 166 | }; |
166 | }, | 167 | }, |
167 | methods: { | 168 | methods: { |
168 | async startChat() { | 169 | async startChat() { |
169 | if (this.$store.state.role === "PARENT") { | 170 | if (this.$store.state.role === "PARENT") { |
170 | if (this.counter == 0) { | 171 | if (this.counter == 0) { |
171 | // console.log("enter start chat"); | 172 | // console.log("enter start chat"); |
172 | this.startConference(); | 173 | const isMobile = /iPhone|iPad|iPod|Android/i.test( |
173 | this.counter += 1; | 174 | navigator.userAgent |
175 | ); | ||
176 | if (isMobile) { | ||
177 | // console.log("==PARENT=appLink==", this.appLink); | ||
178 | window.open(this.appLink); | ||
179 | } else { | ||
180 | this.startConference(); | ||
181 | this.counter += 1; | ||
182 | } | ||
174 | } | 183 | } |
175 | } | 184 | } |
176 | if (this.$store.state.role === "TEACHER") { | 185 | if (this.$store.state.role === "TEACHER") { |
177 | if (this.counter == 0) { | 186 | if (this.counter == 0) { |
178 | this.createRoom(); | 187 | this.createRoom(); |
179 | this.counter += 1; | 188 | this.counter += 1; |
180 | } | 189 | } |
181 | } | 190 | } |
182 | }, | 191 | }, |
183 | // JITSI CONTAINER | 192 | // JITSI CONTAINER |
184 | startConference() { | 193 | startConference() { |
185 | // console.log("yes session started"); | 194 | // console.log("yes session started"); |
186 | var _this = this; | 195 | var _this = this; |
187 | try { | 196 | try { |
188 | const domain = "meet.intrack.in"; | 197 | const domain = "meet.intrack.in"; |
189 | const options = { | 198 | const options = { |
190 | audioInput: "<deviceLabel>", | 199 | audioInput: "<deviceLabel>", |
191 | audioOutput: "<deviceLabel>", | 200 | audioOutput: "<deviceLabel>", |
192 | videoInput: "<deviceLabel>", | 201 | videoInput: "<deviceLabel>", |
193 | prejoinPageEnabled: false, | 202 | prejoinPageEnabled: false, |
194 | roomName: this.room, | 203 | roomName: this.room, |
195 | height: 500, | 204 | height: 500, |
196 | parentNode: document.getElementById("jitsi-container"), | 205 | parentNode: document.getElementById("jitsi-container"), |
197 | interfaceConfigOverwrite: { | 206 | interfaceConfigOverwrite: { |
198 | filmStripOnly: false, | 207 | filmStripOnly: false, |
199 | SHOW_PROMOTIONAL_CLOSE_PAGE: false, | 208 | SHOW_PROMOTIONAL_CLOSE_PAGE: false, |
200 | SHOW_POWERED_BY: false, | 209 | SHOW_POWERED_BY: false, |
201 | SHOW_JITSI_WATERMARK: false, | 210 | SHOW_JITSI_WATERMARK: false, |
202 | TOOLBAR_BUTTONS: [ | 211 | TOOLBAR_BUTTONS: [ |
203 | "microphone", | 212 | "microphone", |
204 | "camera", | 213 | "camera", |
205 | "closedcaptions", | 214 | "closedcaptions", |
206 | "desktop", | 215 | "desktop", |
207 | "fullscreen", | 216 | "fullscreen", |
208 | "fodeviceselection", | 217 | "fodeviceselection", |
209 | "hangup", | 218 | "hangup", |
210 | "profile", | 219 | "profile", |
211 | "info", | 220 | "info", |
212 | "chat", | 221 | "chat", |
213 | "recording", | 222 | "recording", |
214 | "livestreaming", | 223 | "livestreaming", |
215 | "etherpad", | 224 | "etherpad", |
216 | "sharedvideo", | 225 | "sharedvideo", |
217 | "settings", | 226 | "settings", |
218 | "raisehand", | 227 | "raisehand", |
219 | "videoquality", | 228 | "videoquality", |
220 | "filmstrip", | 229 | "filmstrip", |
221 | "invite", | 230 | "invite", |
222 | "feedback", | 231 | "feedback", |
223 | "stats", | 232 | "stats", |
224 | "shortcuts", | 233 | "shortcuts", |
225 | "tileview", | 234 | "tileview", |
226 | ], | 235 | ], |
227 | }, | 236 | }, |
228 | configOverwrite: { | 237 | configOverwrite: { |
229 | disableSimulcast: false, | 238 | disableSimulcast: false, |
230 | }, | 239 | }, |
231 | teacherName: "", | 240 | teacherName: "", |
232 | room: "", | 241 | room: "", |
233 | }; | 242 | }; |
234 | _this.api = new JitsiMeetExternalAPI(domain, options); | 243 | _this.api = new JitsiMeetExternalAPI(domain, options); |
235 | // console.log("this.api ", this.api); | 244 | // console.log("this.api ", this.api); |
236 | _this.api.addEventListener("videoConferenceJoined", () => { | 245 | _this.api.addEventListener("videoConferenceJoined", () => { |
237 | this.showLoader = false; | 246 | this.showLoader = false; |
238 | setTimeout(() => { | 247 | setTimeout(() => { |
239 | _this.api.executeCommand("displayName", _this.username); | 248 | _this.api.executeCommand("displayName", _this.username); |
240 | _this.api.executeCommand("password", _this.roomPassword); | 249 | _this.api.executeCommand("password", _this.roomPassword); |
241 | }, 1000); | 250 | }, 1000); |
242 | }); | 251 | }); |
243 | 252 | ||
244 | _this.api.on("readyToClose", () => { | 253 | _this.api.on("readyToClose", () => { |
245 | this.$router.push({ name: "Refresh" }); | 254 | this.$router.push({ name: "Refresh" }); |
246 | }); | 255 | }); |
247 | } catch (error) { | 256 | } catch (error) { |
248 | // console.error("Failed to load Jitsi API", error); | 257 | // console.error("Failed to load Jitsi API", error); |
249 | } | 258 | } |
250 | }, | 259 | }, |
251 | openRoom() { | 260 | openRoom() { |
252 | // verify the JitsiMeetExternalAPI constructor is added to the global.. | 261 | // verify the JitsiMeetExternalAPI constructor is added to the global.. |
253 | // if (this.teacherName != "" || this.room != "") { | 262 | // if (this.teacherName != "" || this.room != "") { |
254 | // if (window.JitsiMeetExternalAPI) { | 263 | // if (window.JitsiMeetExternalAPI) { |
255 | // // var person = prompt("Please enter your name:", "Rabie"); | 264 | // // var person = prompt("Please enter your name:", "Rabie"); |
256 | // if (person != null || person != "") this.username = this.teacherName; | 265 | // if (person != null || person != "") this.username = this.teacherName; |
257 | // var room = prompt("Please enter your room:", "Test Room"); | 266 | // var room = prompt("Please enter your room:", "Test Room"); |
258 | // if (room != null || room != "") this.room = this.room; | 267 | // if (room != null || room != "") this.room = this.room; |
259 | // this.startConference(); | 268 | // this.startConference(); |
260 | // } else alert("Jitsi Meet API script not loaded"); | 269 | // } else alert("Jitsi Meet API script not loaded"); |
261 | // } | 270 | // } |
262 | }, | 271 | }, |
263 | 272 | ||
264 | createRoom(classId) { | 273 | createRoom(classId) { |
265 | // this.showLoader = true; | 274 | // this.showLoader = true; |
266 | var classId = { | 275 | var classId = { |
267 | classId: classId, | 276 | classId: classId, |
268 | }; | 277 | }; |
269 | http() | 278 | http() |
270 | .post("/createLiveClasses", { | 279 | .post("/createLiveClasses", { |
271 | classId: this.$route.query.classId, | 280 | classId: this.$route.query.classId, |
272 | courseId: this.$route.query.courseId, | 281 | courseId: this.$route.query.courseId, |
273 | chapterId: this.$route.query.chapterId, | 282 | chapterId: this.$route.query.chapterId, |
274 | }) | 283 | }) |
275 | .then((response) => { | 284 | .then((response) => { |
276 | // this.addSection = response.data.data; | 285 | // this.addSection = response.data.data; |
277 | // console.log("CREATE___ROOOM", response.data); | 286 | // console.log("CREATE___ROOOM", response.data); |
278 | var room = response.data.data.roomName; | 287 | var room = response.data.data.roomName; |
279 | var username = localStorage.getItem("teacherName"); | 288 | var username = localStorage.getItem("teacherName"); |
280 | var roomPassword = response.data.data.password; | 289 | var roomPassword = response.data.data.password; |
290 | this.appLink = response.data.data.appLink; | ||
281 | // console.log( | 291 | // console.log( |
282 | // "room", | 292 | // "room", |
283 | // room, | 293 | // room, |
284 | // "username", | 294 | // "username", |
285 | // username, | 295 | // username, |
286 | // "roomPassword", | 296 | // "roomPassword", |
287 | // roomPassword | 297 | // roomPassword |
288 | // ); | 298 | // ); |
289 | var this_ = this; | 299 | var this_ = this; |
290 | if (username != "" || room != "") { | 300 | if (username != "" || room != "") { |
291 | if (window.JitsiMeetExternalAPI) { | 301 | const isMobile = /iPhone|iPad|iPod|Android/i.test( |
292 | // var person = prompt("Please enter your name:", "Rabie"); | 302 | navigator.userAgent |
293 | if (username != null || username != "") { | 303 | ); |
294 | this_.username = username; | 304 | if (isMobile) { |
295 | } | 305 | // console.log("==TEACHER=appLink==", this.appLink); |
296 | // var room = prompt("Please enter your room:", "Test Room"); | 306 | window.open(this.appLink); |
297 | if (room != null || room != "") { | 307 | } else { |
298 | this_.room = room; | 308 | if (window.JitsiMeetExternalAPI) { |
299 | } | 309 | // var person = prompt("Please enter your name:", "Rabie"); |
300 | if (roomPassword != null || roomPassword != "") { | 310 | if (username != null || username != "") { |
301 | this_.password = roomPassword; | 311 | this_.username = username; |
302 | } | 312 | } |
303 | } else alert("Jitsi Meet API script not loaded"); | 313 | // var room = prompt("Please enter your room:", "Test Room"); |
304 | this_.startConference(); | 314 | if (room != null || room != "") { |
315 | this_.room = room; | ||
316 | } | ||
317 | if (roomPassword != null || roomPassword != "") { | ||
318 | this_.roomPassword = roomPassword; | ||
319 | } | ||
320 | } else alert("Jitsi Meet API script not loaded"); | ||
321 | this_.startConference(); | ||
322 | } | ||
305 | } | 323 | } |
306 | }) | 324 | }) |
307 | .catch((err) => { | 325 | .catch((err) => { |
308 | this.showLoader = false; | 326 | this.showLoader = false; |
309 | }); | 327 | }); |
310 | }, | 328 | }, |
311 | async studentClasses() { | 329 | async studentClasses() { |
312 | this.liveLink = ""; | 330 | this.liveLink = ""; |
313 | this.room = ""; | 331 | this.room = ""; |
314 | this.username = ""; | 332 | this.username = ""; |
315 | this.roomPassword = ""; | 333 | this.roomPassword = ""; |
316 | /* getLiveClassesesList - To up date line under heading*/ | 334 | /* getLiveClassesesList - To up date line under heading*/ |
317 | let response = await this.getLiveClassesesList({ | 335 | let response = await this.getLiveClassesesList({ |
318 | classId: this.$route.query.classId, | 336 | classId: this.$route.query.classId, |
319 | courseId: this.$route.query.courseId, | 337 | courseId: this.$route.query.courseId, |
320 | chapterId: this.$route.query.chapterId, | 338 | chapterId: this.$route.query.chapterId, |
321 | }); | 339 | }); |
322 | // console.log("response getLiveClassesesList- ", response); | 340 | // console.log("response getLiveClassesesList- ", response); |
323 | 341 | ||
324 | /* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */ | 342 | /* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */ |
325 | if (response.data.data[0].sessionStatus == "ENDED") { | 343 | if (response.data.data[0].sessionStatus == "ENDED") { |
326 | // this.startLiveSession = "Start Session"; | 344 | // this.startLiveSession = "Start Session"; |
327 | this.studentBtn = ""; | 345 | this.studentBtn = ""; |
328 | } | 346 | } |
329 | if (response.data.data[0].sessionStatus == "STARTED") { | 347 | if (response.data.data[0].sessionStatus == "STARTED") { |
330 | // this.startLiveSession = "Join Session"; | 348 | // this.startLiveSession = "Join Session"; |
331 | this.studentBtn = "Join Session"; | 349 | this.studentBtn = "Join Session"; |
332 | } | 350 | } |
333 | if (response.data.data.length == 0) { | 351 | if (response.data.data.length == 0) { |
334 | this.startLiveSession = "Start Session"; | 352 | this.startLiveSession = "Start Session"; |
335 | this.studentBtn = ""; | 353 | this.studentBtn = ""; |
336 | } else { | 354 | } else { |
337 | this.liveLink = response.data.data[0].link; | 355 | this.liveLink = response.data.data[0].link; |
356 | this.appLink = response.data.data[0].appLink; | ||
338 | var room = response.data.data[0].roomName; | 357 | var room = response.data.data[0].roomName; |
339 | var username = this.currentUser; | 358 | var username = this.currentUser; |
340 | var roomPassword = response.data.data[0].password; | 359 | var roomPassword = response.data.data[0].password; |
341 | var this_ = this; | 360 | var this_ = this; |
342 | // console.log(this.room, this.roomPassword, this.username); | 361 | // console.log(this.room, this.roomPassword, this.username); |
343 | 362 | ||
344 | if (username != "" || room != "") { | 363 | if (username != "" || room != "") { |
345 | if (window.JitsiMeetExternalAPI) { | 364 | if (window.JitsiMeetExternalAPI) { |
346 | // var person = prompt("Please enter your name:", "Rabie"); | 365 | // var person = prompt("Please enter your name:", "Rabie"); |
347 | if (username != null || username != "") { | 366 | if (username != null || username != "") { |
348 | this_.username = username; | 367 | this_.username = username; |
349 | } | 368 | } |
350 | if (roomPassword != null || roomPassword != "") { | 369 | if (roomPassword != null || roomPassword != "") { |
351 | this_.roomPassword = roomPassword; | 370 | this_.roomPassword = roomPassword; |
352 | } | 371 | } |
353 | // var room = prompt("Please enter your room:", "Test Room"); | 372 | // var room = prompt("Please enter your room:", "Test Room"); |
354 | if (room != null || room != "") { | 373 | if (room != null || room != "") { |
355 | this_.room = room; | 374 | this_.room = room; |
356 | } | 375 | } |
357 | // this.startConference(); | 376 | // this.startConference(); |
358 | } | 377 | } |
359 | } | 378 | } |
360 | } | 379 | } |
361 | }, | 380 | }, |
362 | }, | 381 | }, |
363 | 382 | ||
364 | async created() { | 383 | async created() { |
365 | // console.log( | 384 | // console.log( |
366 | // "this.$store.state.studentsData", | 385 | // "this.$store.state.studentsData", |
367 | // this.$store.state.studentsData[0].name | 386 | // this.$store.state.studentsData[0].name |
368 | // ); | 387 | // ); |
369 | this.currentUser = localStorage.getItem("studentName"); | 388 | this.currentUser = localStorage.getItem("studentName"); |
370 | this.token = this.$store.state.token; | 389 | this.token = this.$store.state.token; |
371 | if (this.$store.state.role === "PARENT") { | 390 | if (this.$store.state.role === "PARENT") { |
372 | await this.studentClasses(); | 391 | await this.studentClasses(); |
373 | } | 392 | } |
374 | 393 | ||
375 | /* getStudentCourses - to get courseData - defined in GetApis.js*/ | 394 | /* getStudentCourses - to get courseData - defined in GetApis.js*/ |
376 | if (this.$store.state.role === "PARENT") { | 395 | if (this.$store.state.role === "PARENT") { |
377 | await this.getStudentCourses({ | 396 | await this.getStudentCourses({ |
378 | classId: localStorage.getItem("parentClassId"), | 397 | classId: localStorage.getItem("parentClassId"), |
379 | studentId: localStorage.getItem("parentStudentId"), | 398 | studentId: localStorage.getItem("parentStudentId"), |
380 | }); | 399 | }); |
381 | } | 400 | } |
382 | }, | 401 | }, |
383 | }; | 402 | }; |
384 | </script> | 403 | </script> |
385 | <style scoped> | 404 | <style scoped> |
386 | .side-bar-color { | 405 | .side-bar-color { |
387 | color: #827bfa !important; | 406 | color: #827bfa !important; |
388 | /* border-top-right-radius: 74px !important; */ | 407 | /* border-top-right-radius: 74px !important; */ |
389 | } | 408 | } |
390 | .card-border { | 409 | .card-border { |
391 | border: 1px #bdbdbd solid; | 410 | border: 1px #bdbdbd solid; |
392 | border-radius: 3px; | 411 | border-radius: 3px; |
393 | } | 412 | } |
394 | .reply-desc { | 413 | .reply-desc { |
395 | border: 1px solid #f2f2f2; | 414 | border: 1px solid #f2f2f2; |
396 | } | 415 | } |
397 | .open-dialog-button { | 416 | .open-dialog-button { |
398 | background: #827bfa !important; | 417 | background: #827bfa !important; |
399 | border-color: #827bfa !important; | 418 | border-color: #827bfa !important; |
400 | text-transform: none !important; | 419 | text-transform: none !important; |
401 | } | 420 | } |
402 | 421 | ||
403 | .reply-btn { | 422 | .reply-btn { |
404 | background: #feb83c !important; | 423 | background: #feb83c !important; |
405 | border-color: #feb83c !important; | 424 | border-color: #feb83c !important; |
406 | text-transform: none !important; | 425 | text-transform: none !important; |
407 | -webkit-box-shadow: none !important; | 426 | -webkit-box-shadow: none !important; |
408 | box-shadow: none !important; | 427 | box-shadow: none !important; |
409 | } | 428 | } |
410 | #jitsi-container { | 429 | #jitsi-container { |
411 | height: 100vh; | 430 | height: 100vh; |
412 | } | 431 | } |
413 | </style> | 432 | </style> |