feat: add kickout feature in live site

app/components/base-modal.hbs

@@ -0,0 +1,4 @@
+<div class='base-modal {{if @isOpen "base-modal--show" "base-modal--hide"}}'>
+  {{yield (hash closeModal=this.closeModal)}}
+
+</div>

app/components/base-modal.js

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class BaseModal extends Component {
+  @action closeModal() {
+    this.args.closeModal();
+  }
+
+  @action openModal() {
+    this.args.openModel();
+  }
+}

app/components/kickout-modal.hbs

@@ -0,0 +1,18 @@
+<div data-test-kickout-modal class='kickout-modal'>
+  <h4 data-test-kickout-heading>Do you want to remove {{this.peer}}?</h4>
+  <div data-test-kickout-buttons class='kickout-modal__buttons'>
+    <Reusables::Button
+      @text='Cancel'
+      @variant='dark'
+      @test='kickout-button-cancel'
+      @onClick={{this.closeModal}}
+    />
+    <Reusables::Button
+      @text='Remove'
+      @variant='pink btn-dark'
+      @test='kickout-button-remove'
+      @type='button'
+      @onClick={{this.removePeer}}
+    />
+  </div>
+</div>

app/components/kickout-modal.js

@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class KickoutModalComponent extends Component {
+  @tracked peer = 'guest 1';
+
+  @action clickHandler(e) {
+    e.stopPropagation();
+  }
+
+  @action
+  closeModal() {
+    this.args.closeModal();
+  }
+
+  @action removePeer() {
+    this.args.removePeer();
+  }
+}

app/components/live-sidebar.hbs

@@ -46,10 +46,26 @@
         class='role-user__type guestUsers'
       >Guest Users</p>
       <ul>
+
         {{#each @peers as |peer|}}
           {{#if (eq peer.roleName this.ROLES.guest)}}
-            <li data-test-sidebar-user={{peer.name}} class='user'>
+            <li data-test-sidebar-user={{peer.id}} class='user'>
               <p>{{peer.name}}</p>
+              {{#if (eq this.liveService.localPeer.roleName this.ROLES.host)}}
+                <button
+                  type='button'
+                  class='user__btn'
+                  {{on 'click' (fn @openKickoutModal peer.id)}}
+                >
+                  <IconifyIcon
+                    data-test-icon='remove'
+                    @icon='material-symbols:person-remove'
+                    width='36'
+                    height='36'
+                    color='red'
+                  />
+                </button>
+              {{/if}}
             </li>
           {{/if}}
         {{/each}}

app/components/live-sidebar.js

@@ -2,11 +2,14 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { ROLES } from '../constants/live';
+import { getOwner } from '@ember/application';
 
 export default class LiveHeaderComponent extends Component {
   @tracked isSideBarOpen = false;
   ROLES = ROLES;
-
+  get liveService() {
+    return getOwner(this).lookup('service:live');
+  }
   @action toggleMobileSidebar() {
     this.isSideBarOpen = !this.isSideBarOpen;
   }

app/constants/apis.js

@@ -1,6 +1,6 @@
 import ENV from 'website-www/config/environment';
 
-const BASE_API_URL = ENV.BASE_API_URL;
+export const BASE_API_URL = ENV.BASE_API_URL;
 export const JOIN_URL = `${BASE_API_URL}/users/self/intro`;
 
 export const USER_JOINED_LINK = (userId) => {

app/constants/live.js

@@ -7,4 +7,13 @@ export const BUTTONS_TYPE = {
   COPY_LINK: 'copy-link',
   LEAVE_ROOM: 'leave-room',
 };
+
 export const API_METHOD = { POST: 'POST', GET: 'GET', PATCH: 'PATCH' };
+
+export const PATCH_API_CONFIGS = {
+  method: API_METHOD.PATCH,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  credentials: 'include',
+};

app/constants/urls.js

@@ -1,12 +1,12 @@
 import ENV from 'website-www/config/environment';
 
 export const APPS = {
-  HOME: ENV.APPS.HOME,
-  WELCOME: ENV.APPS.WELCOME,
-  EVENTS: ENV.APPS.EVENTS,
-  MEMBERS: ENV.APPS.MEMBERS,
-  STATUS: ENV.APPS.STATUS,
-  PROFILE: ENV.APPS.PROFILE,
+  HOME: ENV.APPS?.HOME,
+  WELCOME: ENV.APPS?.WELCOME,
+  EVENTS: ENV.APPS?.EVENTS,
+  MEMBERS: ENV.APPS?.MEMBERS,
+  STATUS: ENV.APPS?.STATUS,
+  PROFILE: ENV.APPS?.PROFILE,
   LIVE: 'live',
 };
 
@@ -18,7 +18,7 @@ export const ABOUT = {
 
 export const AUTH = {
   SIGN_IN: `${ENV.BASE_API_URL}/auth/github/login`,
-  SIGN_UP: `${ENV.APPS.PROFILE}/new-signup`,
+  SIGN_UP: `${ENV.APPS?.PROFILE}/new-signup`,
 };
 
 export const SOCIALS = {

app/controllers/live.js

@@ -5,7 +5,6 @@ import { inject as service } from '@ember/service';
 import { getOwner } from '@ember/application';
 import { globalRef } from 'ember-ref-bucket';
 import { ROLES, BUTTONS_TYPE } from '../constants/live';
-
 export default class LiveController extends Controller {
   queryParams = ['dev', 'role', 'room'];
   @service login;
@@ -15,23 +14,18 @@ export default class LiveController extends Controller {
     { id: 3, label: 'Real Dev Squad', active: false },
   ];
   @tracked activeTab = 'Screenshare';
-  @tracked isLoading = true;
+  @tracked isLoading = false;
   @tracked name = '';
   @tracked role = null;
   @tracked room = null;
   @tracked isCopied = false;
+  @tracked isKickoutModalOpen = false;
+  @tracked peerToRemove;
   @globalRef('videoEl') videoEl;
   get liveService() {
     return getOwner(this).lookup('service:live');
   }
 
-  constructor() {
-    super(...arguments);
-    setTimeout(() => {
-      this.isLoading = false;
-    }, 4000);
-  }
-
   @action inputHandler(e) {
     this.name = e.target.value;
   }
@@ -76,6 +70,21 @@ export default class LiveController extends Controller {
     }
   }
 
+  @action removePeer() {
+    this.liveService.removePeer(this.peerToRemove);
+    this.isKickoutModalOpen = false;
+  }
+
+  @action openKickoutModal(peerId) {
+    this.isKickoutModalOpen = true;
+    this.peerToRemove = peerId;
+  }
+
+  @action closeKickoutModal() {
+    this.isKickoutModalOpen = false;
+    this.peerToRemove = '';
+  }
+
   @action buttonClickHandler(buttonId) {
     switch (buttonId) {
       case BUTTONS_TYPE.SCREEN_SHARE:

app/services/live.js

@@ -4,20 +4,24 @@ import {
   selectIsSomeoneScreenSharing,
   selectPeers,
   selectIsConnectedToRoom,
+  selectLocalPeer,
 } from '@100mslive/hms-video-store';
 import { tracked } from '@glimmer/tracking';
 import ENV from 'website-www/config/environment';
 import { globalRef } from 'ember-ref-bucket';
-import { ROLES, API_METHOD } from '../constants/live';
-
+import { inject as service } from '@ember/service';
+import { ROLES, API_METHOD, PATCH_API_CONFIGS } from '../constants/live';
+import { TOAST_OPTIONS } from '../constants/toast-options';
 export default class LiveService extends Service {
+  @service toast;
   hmsManager;
   hmsStore;
   hmsActions;
   @tracked isScreenShareOn = false;
   @tracked isJoined = false;
   @tracked activeRoomId = '';
   @tracked isLoading = false;
+  @tracked localPeer;
   @globalRef('videoEl') videoEl;
   @tracked peers;
   @tracked isScreenShareOn;
@@ -29,6 +33,7 @@ export default class LiveService extends Service {
     this.hmsManager.triggerOnSubscribe();
     this.hmsStore = this.hmsManager.getStore();
     this.hmsActions = this.hmsManager.getActions();
+    this.hmsNotifications = this.hmsManager.notifications;
     this.hmsStore.subscribe(
       (peers) => this.renderScreenVideoToPeers(peers, this.hmsActions),
       selectPeers
@@ -121,9 +126,32 @@ export default class LiveService extends Service {
         userName,
         authToken: token,
       });
+      const peer = this.hmsStore.getState(selectLocalPeer);
+      this.localPeer = peer;
+      const addPeerResponse = await fetch(
+        `${ENV.BASE_API_URL}/events/${roomId}/peer`,
+        {
+          ...PATCH_API_CONFIGS,
+          body: JSON.stringify({
+            peerId: peer?.id,
+            name: peer?.name,
+            role: peer?.roleName,
+            joinedAt: peer?.joinedAt,
+          }),
+        }
+      );
+      const { data: addedPeerData } = await addPeerResponse.json();
+      if (addPeerResponse?.status === 200 && addedPeerData) {
+        this.toast.success(
+          'Successfully joined the event!',
+          'Success!',
+          TOAST_OPTIONS
+        );
+      }
     } catch (error) {
       this.isLoading = false;
       console.error(error);
+      this.toast.error('Something went wrong!', 'Error!', TOAST_OPTIONS);
     }
   }
 
@@ -165,4 +193,30 @@ export default class LiveService extends Service {
       await this.hmsActions.detachVideo(presenterTrackId, this.videoEl);
     }
   }
+
+  async removePeer(peerId) {
+    const roomId = this.hmsStore?.getState()?.room?.id;
+
+    const reason = 'For doing something wrong!';
+    try {
+      const response = await fetch(
+        `${ENV.BASE_API_URL}/events/${roomId}/peers/kickout`,
+        {
+          ...PATCH_API_CONFIGS,
+          body: JSON.stringify({
+            peerId: peerId,
+            reason: reason,
+          }),
+        }
+      );
+
+      const data = await response.json();
+      if (response.status === 200 && data) {
+        this.toast.success(data?.message, 'Success!', TOAST_OPTIONS);
+      }
+    } catch (err) {
+      console.error('The error is: ', err);
+      this.toast.error('Something went wrong!', 'error!', TOAST_OPTIONS);
+    }
+  }
 }

app/styles/app.css

@@ -20,6 +20,8 @@
 @import 'icon-button.module.css';
 @import 'live-join.module.css';
 @import 'live-sidebar.module.css';
+@import 'kickout-modal.module.css';
+@import 'base-modal.module.css';
 
 * {
   margin: 0px;

app/styles/base-modal.module.css

@@ -0,0 +1,17 @@
+.base-modal {
+  z-index: 99;
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  width: 100vw;
+  background-color: rgba(0, 0, 0, 0.452);
+}
+
+.base-modal--show {
+  display: block;
+}
+
+.base-modal--hide {
+  display: none;
+}

app/styles/kickout-modal.module.css

@@ -0,0 +1,19 @@
+.kickout-modal {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 179px;
+  width: 470px;
+  box-shadow: 0px 0px 10px grey;
+  background-color: var(--color-white);
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.kickout-modal h4 {
+  font-size: 24px;
+}

app/styles/live-sidebar.module.css

@@ -123,6 +123,9 @@
   background: var(--color-green-white);
   border-radius: 6px;
   margin-bottom: 0.6rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .user p {
@@ -133,6 +136,11 @@
   color: var(--color-black);
 }
 
+.user__btn {
+  all: unset;
+  cursor: pointer;
+}
+
 @media only screen and (max-width: 768px) {
   .sidebar {
     height: 70px;

app/templates/application.hbs

@@ -1,4 +1,4 @@
-{{page-title "Real Dev Squad"}}
+{{page-title 'Real Dev Squad'}}
 <body>
   <Navbar
     @firstName={{this.login.userData.first_name}}

app/templates/index.hbs

@@ -2,4 +2,4 @@
 <Description />
 <JoinSection />
 <Cards />
-<MoreAbout />
+<MoreAbout />