Improvements/live site

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';

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);
     }
   }

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 {

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;
   }
 }