From 4ed3f88972e754f15a39d90fffca0a642affcb23 Mon Sep 17 00:00:00 2001 From: Satyam Bajpai Date: Sat, 6 Jul 2024 00:08:35 +0530 Subject: [PATCH 1/5] refactor: remove unnecessary tab from live-header --- app/controllers/live.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/controllers/live.js b/app/controllers/live.js index 05d404964..8b576835c 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; From 8d74860cf578ca491a03dc0d61577d3ee21f866b Mon Sep 17 00:00:00 2001 From: Satyam Bajpai Date: Sat, 6 Jul 2024 00:51:51 +0530 Subject: [PATCH 2/5] fix: loading state of join/create button and heading join/create event --- app/controllers/live.js | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/app/controllers/live.js b/app/controllers/live.js index 8b576835c..02ab5c430 100644 --- a/app/controllers/live.js +++ b/app/controllers/live.js @@ -52,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'); @@ -69,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); @@ -106,17 +113,18 @@ 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); } 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, ); @@ -265,13 +273,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'; From c43b5f3b25652abab775c3ed175661d333c809b4 Mon Sep 17 00:00:00 2001 From: Satyam Bajpai Date: Mon, 8 Jul 2024 19:47:48 +0530 Subject: [PATCH 3/5] styles: improve box-shadow of card for live site --- app/styles/live-join.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 { From ee3e651e24190005f6511a8afbbd9a130d6d3e52 Mon Sep 17 00:00:00 2001 From: Satyam Bajpai Date: Mon, 8 Jul 2024 20:21:31 +0530 Subject: [PATCH 4/5] fix: unnecessary toast coming when user is not logged in --- app/controllers/live.js | 35 ++++++++++++++++++++++++++++++----- app/services/live.js | 14 ++++++-------- 2 files changed, 36 insertions(+), 13 deletions(-) diff --git a/app/controllers/live.js b/app/controllers/live.js index 02ab5c430..854765873 100644 --- a/app/controllers/live.js +++ b/app/controllers/live.js @@ -120,6 +120,8 @@ export default class LiveController extends Controller { if (this.isActiveEventFound) { 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( @@ -128,12 +130,35 @@ export default class LiveController extends Controller { 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() { diff --git a/app/services/live.js b/app/services/live.js index d232e848e..041624817 100644 --- a/app/services/live.js +++ b/app/services/live.js @@ -90,7 +90,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); } } @@ -108,7 +108,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); } } @@ -127,8 +127,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); } } @@ -146,7 +145,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); } } @@ -162,7 +161,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); } } @@ -175,7 +174,6 @@ export default class LiveService extends Service { return data; } catch (error) { console.error(error); - this.toast.error('Something went wrong!', 'error!', TOAST_OPTIONS); } } @@ -359,7 +357,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); } } From ceca08a37ef49a979fe4579073b22a64610d3792 Mon Sep 17 00:00:00 2001 From: Satyam Bajpai Date: Mon, 8 Jul 2024 23:22:45 +0530 Subject: [PATCH 5/5] styles: improve animation of sidebar in mobile --- app/styles/live-sidebar.module.css | 31 ++++-------------------------- 1 file changed, 4 insertions(+), 27 deletions(-) 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; } }