diff --git a/app/controllers/live.js b/app/controllers/live.js index 05d404964..854765873 100644 --- a/app/controllers/live.js +++ b/app/controllers/live.js @@ -26,8 +26,7 @@ export default class LiveController extends Controller { @tracked TABS = [ { id: 1, label: 'Screenshare', active: true }, { id: 2, label: 'Survey', active: false }, - { id: 4, label: 'Logs', active: false }, - { id: 3, label: 'More', active: false }, + { id: 3, label: 'Logs', active: false }, ]; @tracked activeTab = 'Screenshare'; @tracked isLoading = false; @@ -53,6 +52,7 @@ export default class LiveController extends Controller { isDisabled: true, isLoading: false, }; + @tracked activeEvent = null; @globalRef('videoEl') videoEl; get liveService() { return getOwner(this).lookup('service:live'); @@ -70,6 +70,12 @@ export default class LiveController extends Controller { this.answerSSEListener(); } } + + if (!this.fastboot.isFastBoot) { + (async () => { + this.activeEvent = (await this.liveService.getActiveEvents())?.[0]; + })(); + } setTimeout(() => { this.isLoading = false; }, 4000); @@ -107,26 +113,52 @@ export default class LiveController extends Controller { if (!canJoin) return; - const activeEventsData = await this.liveService.getActiveEvents(); - this.isActiveEventFound = Boolean(activeEventsData?.[0]?.enabled); - + this.isActiveEventFound = Boolean(this.activeEvent?.enabled); + const upperCasedRole = `${this.role[0].toUpperCase()}${this.role.substring( + 1, + )}`; if (this.isActiveEventFound) { - const roomId = activeEventsData?.[0]?.room_id; + const roomId = this.activeEvent?.room_id; this.liveService.joinSession(roomId, this.name, this.role, this.roomCode); + this.name = ''; + this.roomCode = ''; } else { if (this.role !== ROLES.host) return this.toast.info( - 'No active event found!', - 'Info!', + 'Currently there is no active event!', + `Hey ${upperCasedRole}👋`, TOAST_OPTIONS, ); - const roomId = await this.liveService.createRoom(this.name); - this.liveService.joinSession(roomId, this.name, this.role, this.roomCode); + try { + const roomId = await this.liveService.createRoom(this.name); + if (roomId) { + this.toast.success( + 'Successfully created the event!', + 'Success!', + TOAST_OPTIONS, + ); + } + await this.liveService.joinSession( + roomId, + this.name, + this.role, + this.roomCode, + ); + this.name = ''; + this.roomCode = ''; + } catch (error) { + console.error( + 'Something went wrong while creating and joining the event ', + error, + ); + this.toast.error( + "Couldn't create or join event!", + 'Error!', + TOAST_OPTIONS, + ); + } } - - this.name = ''; - this.roomCode = ''; } @action backHandler() { @@ -266,13 +298,11 @@ export default class LiveController extends Controller { @action async selectRoleHandler(selectedRole) { this.role = selectedRole; - this.buttonText = 'Loading...'; - const activeEventData = await this.liveService.getActiveEvents(); - this.isActiveEventFound = Boolean(activeEventData?.[0]?.enabled); + this.isActiveEventFound = Boolean(this.activeEvent?.enabled); if (!this.isActiveEventFound && selectedRole === ROLES.host) { this.buttonText = 'Create Event'; - } else if (activeEventData) { + } else if (this.activeEvent) { this.buttonText = 'Join'; } else { this.buttonText = 'Join'; diff --git a/app/services/live.js b/app/services/live.js index c2da5aa67..07d58e1a0 100644 --- a/app/services/live.js +++ b/app/services/live.js @@ -104,7 +104,7 @@ export default class LiveService extends Service { return token; } catch (error) { console.error(error); - this.toast.error('Something went wrong!', 'error!', TOAST_OPTIONS); + this.toast.error('Something went wrong!', 'Error!', TOAST_OPTIONS); } } @@ -122,7 +122,7 @@ export default class LiveService extends Service { return token; } catch (error) { console.error(error); - this.toast.error('Something went wrong!', 'error!', TOAST_OPTIONS); + this.toast.error('Something went wrong!', 'Error!', TOAST_OPTIONS); } } @@ -141,8 +141,7 @@ export default class LiveService extends Service { const { room_id } = await response.json(); return room_id; } catch (error) { - console.error(error); - this.toast.error('Something went wrong!', 'error!', TOAST_OPTIONS); + throw new Error(error); } } @@ -160,7 +159,7 @@ export default class LiveService extends Service { return message; } catch (error) { console.error(error); - this.toast.error('Something went wrong!', 'error!', TOAST_OPTIONS); + this.toast.error('Something went wrong!', 'Error!', TOAST_OPTIONS); } } @@ -176,7 +175,7 @@ export default class LiveService extends Service { return data; } catch (error) { console.error(error); - this.toast.error('Something went wrong!', 'error!', TOAST_OPTIONS); + this.toast.error('Something went wrong!', 'Error!', TOAST_OPTIONS); } } @@ -189,7 +188,6 @@ export default class LiveService extends Service { return data; } catch (error) { console.error(error); - this.toast.error('Something went wrong!', 'error!', TOAST_OPTIONS); } } @@ -373,7 +371,7 @@ export default class LiveService extends Service { this.isLoading = false; } catch (error) { this.isLoading = false; - console.error('my error ', error); + console.error('Something went wrong while joining the event ', error); this.toast.error('Something went wrong!', 'Error!', TOAST_OPTIONS); } } diff --git a/app/styles/live-join.module.css b/app/styles/live-join.module.css index 1e305d418..e9d06a8e1 100644 --- a/app/styles/live-join.module.css +++ b/app/styles/live-join.module.css @@ -7,7 +7,7 @@ text-align: center; text-decoration: none; color: var(--color-pink); - box-shadow: 0 10px 10px var(--color-darkblack-low-opacity); + box-shadow: 0 0 10px var(--color-darkblack-low-opacity); } .card__live__title { diff --git a/app/styles/live-sidebar.module.css b/app/styles/live-sidebar.module.css index ef90bb565..ff245f0ee 100644 --- a/app/styles/live-sidebar.module.css +++ b/app/styles/live-sidebar.module.css @@ -208,39 +208,16 @@ .sidebar__body { overflow: hidden; + transition: height 1s; + transition-timing-function: linear; } .sidebar__body.open { - animation: opensidebar 2s; - transition: height 2s; - animation-fill-mode: forwards; - overflow: auto; + height: 300px; } .sidebar__body.close { - animation: closesidebar 2s; - transition: height 2s; - animation-fill-mode: forwards; - } - - @keyframes opensidebar { - 0% { - height: 0; - } - - 100% { - height: 300px; - } - } - - @keyframes closesidebar { - 0% { - height: 300px; - } - - 100% { - height: 0; - } + height: 0; } }