Merge pull request Real-Dev-Squad#504 from Real-Dev-Squad/500-live-si…

…te-improvements-in-live-share

[Live Site] Minor improvements in live

app/components/live-panel.hbs

@@ -1,10 +1,29 @@
 <div class='live-panel' data-test-live-panel>
-  {{#each this.BUTTON_MAPPING as |button|}}
+  {{#if (eq @role this.ROLES.host)}}
     <Reusables::IconButton
-      @id={{button.id}}
-      @class={{button.className}}
-      @onClick={{this.buttonClickHandler}}
-      @icon={{button.icon}}
+      @id='screen-share'
+      @class='icon-button--md'
+      @title={{if @isScreenShareOn 'Stop Share' 'Screen Share'}}
+      @onClick={{@buttonClickHandler}}
+      @icon={{if
+        @isScreenShareOn
+        'material-symbols:stop-screen-share'
+        'material-symbols:screen-share'
+      }}
     />
-  {{/each}}
+    <Reusables::IconButton
+      @id='copy-link'
+      @class='icon-button--md'
+      @title='Invite link'
+      @onClick={{@buttonClickHandler}}
+      @icon={{if @isCopied 'material-symbols:done' 'material-symbols:copy-all'}}
+    />
+  {{/if}}
+  <Reusables::IconButton
+    @id='leave-room'
+    @class='icon-button--md icon-button--pink-bg'
+    @title='Leave Room'
+    @onClick={{@buttonClickHandler}}
+    @icon='material-symbols:call-end'
+  />
 </div>

app/components/live-panel.js

@@ -1,17 +1,6 @@
 import Component from '@glimmer/component';
-import { PANEL_BUTTON } from '../constants/live-panel-data';
-import { action } from '@ember/object';
+import { ROLES } from '../constants/live';
 
 export default class LivePanelComponent extends Component {
-  BUTTON_MAPPING = PANEL_BUTTON;
-
-  @action buttonClickHandler(buttonId) {
-    // TODO: remove console.log
-    console.log(buttonId);
-  }
-
-  @action startLiveHandler() {
-    // TODO: remove console.log
-    console.log('Starting....');
-  }
+  ROLES = ROLES;
 }

app/components/live-sidebar.hbs

@@ -15,10 +15,22 @@
       />
     </button>
   </div>
-  <div data-test-sidebar-body class='sidebar__body {{if this.isSideBarOpen "open" "close"}}'>
+  <div
+    data-test-sidebar-body
+    class='sidebar__body {{if this.isSideBarOpen "open" "close"}}'
+  >
     <div data-test-sidebar-body-host class='body__host'>
       <span data-test-sidebar-host-container class='host__container'>
-        <img data-test-sidebar-host-image class='host__image' src={{@hostProfilePicture}} alt='host' />
+        <img
+          data-test-sidebar-host-image
+          class='host__image'
+          src={{if
+            @hostProfilePicture
+            @hostProfilePicture
+            '/assets/images/profile.png'
+          }}
+          alt='host'
+        />
       </span>
       <span data-test-sidebar-host-name class='host__name'>
         {{#each @peers as |peer|}}
@@ -29,7 +41,10 @@
         is presenting</span>
     </div>
     <div data-test-sidebar-body-role class='body__role-user'>
-      <p data-test-sidebar-body-role-guest class='role-user__type guestUsers'>Guest Users</p>
+      <p
+        data-test-sidebar-body-role-guest
+        class='role-user__type guestUsers'
+      >Guest Users</p>
       <ul>
         {{#each @peers as |peer|}}
           {{#if (eq peer.roleName this.ROLES.guest)}}

app/components/reusables/icon-button.hbs

@@ -1,6 +1,7 @@
 <button
   class='icon-button {{@class}}'
   type='button'
+  title={{@title}}
   {{on 'click' (fn @onClick @id)}}
   data-test-icon-button={{@id}}
 >

app/components/video-screen.hbs

@@ -7,5 +7,6 @@
   autoplay
   muted
   playsinlne
+  loop
   {{create-global-ref 'videoEl'}}
 ></video>

app/constants/live.js

@@ -2,5 +2,9 @@ export const ROLES = {
   guest: 'guest',
   host: 'host',
 };
-
+export const BUTTONS_TYPE = {
+  SCREEN_SHARE: 'screen-share',
+  COPY_LINK: 'copy-link',
+  LEAVE_ROOM: 'leave-room',
+};
 export const API_METHOD = { POST: 'POST', GET: 'GET', PATCH: 'PATCH' };

app/controllers/live.js

@@ -4,7 +4,7 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { getOwner } from '@ember/application';
 import { globalRef } from 'ember-ref-bucket';
-import { ROLES } from '../constants/live';
+import { ROLES, BUTTONS_TYPE } from '../constants/live';
 
 export default class LiveController extends Controller {
   queryParams = ['dev', 'role', 'room'];
@@ -19,6 +19,7 @@ export default class LiveController extends Controller {
   @tracked name = '';
   @tracked role = null;
   @tracked room = null;
+  @tracked isCopied = false;
   @globalRef('videoEl') videoEl;
   get liveService() {
     return getOwner(this).lookup('service:live');
@@ -59,4 +60,35 @@ export default class LiveController extends Controller {
   @action screenShare() {
     this.liveService.shareScreen();
   }
+
+  @action async copyInviteLink() {
+    try {
+      await navigator.clipboard.writeText(
+        `${window.location.origin}/live?dev=true&role=guest&room=${this.liveService.activeRoomId}`
+      );
+      this.isCopied = true;
+      setTimeout(() => {
+        this.isCopied = false;
+      }, 2000);
+    } catch (error) {
+      this.isCopied = false;
+      console.error(error);
+    }
+  }
+
+  @action buttonClickHandler(buttonId) {
+    switch (buttonId) {
+      case BUTTONS_TYPE.SCREEN_SHARE:
+        this.screenShare();
+        break;
+      case BUTTONS_TYPE.COPY_LINK:
+        this.copyInviteLink();
+        break;
+      case BUTTONS_TYPE.LEAVE_ROOM:
+        this.leaveSession();
+        break;
+      default:
+        console.error('Illegal state');
+    }
+  }
 }

app/services/live.js

@@ -17,8 +17,10 @@ export default class LiveService extends Service {
   @tracked isScreenShareOn = false;
   @tracked isJoined = false;
   @tracked activeRoomId = '';
+  @tracked isLoading = false;
   @globalRef('videoEl') videoEl;
   @tracked peers;
+  @tracked isScreenShareOn;
 
   constructor() {
     super(...arguments);
@@ -39,6 +41,9 @@ export default class LiveService extends Service {
 
   onConnection(isConnected) {
     this.isJoined = isConnected;
+    if (isConnected) {
+      this.isLoading = false;
+    }
   }
 
   async joinRoom(roomId, role, userName) {
@@ -106,28 +111,33 @@ export default class LiveService extends Service {
 
   async joinSession(userName, role, room) {
     try {
+      this.isLoading = true;
       const roomId =
         ROLES.host === role ? await this.createRoom(userName) : room;
-      console.log({ roomId }); // For now use it to create link for guest
       this.activeRoomId = roomId;
       const token = await this.joinRoom(roomId, role, userName);
+      this.isLoading = false;
       await this.hmsActions.join({
         userName,
         authToken: token,
       });
     } catch (error) {
+      this.isLoading = false;
       console.error(error);
     }
   }
 
   async leaveSession(role) {
     try {
       if (ROLES.host === role) {
+        this.isLoading = true;
         await this.endRoom(this.activeRoomId);
+        this.isLoading = false;
       } else {
         await this.hmsActions.leave();
       }
     } catch (error) {
+      this.isLoading = false;
       console.error(error);
     }
   }
@@ -149,6 +159,7 @@ export default class LiveService extends Service {
     const presenterTrackId = peers?.find((p) => p.roleName === ROLES.host)
       ?.auxiliaryTracks[0];
     if (presenterTrackId) {
+      this.isScreenShareOn = true;
       await this.hmsActions.attachVideo(presenterTrackId, this.videoEl);
     } else {
       await this.hmsActions.detachVideo(presenterTrackId, this.videoEl);

app/styles/live.module.css

@@ -1,53 +1,53 @@
 #live {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    max-width: 1024px;
-    margin: 1rem auto;
-    padding: 1rem;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	max-width: 1024px;
+	margin: 1rem auto;
+	padding: 1rem;
+	min-height: 80vh;
 }
 
 .live__container {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
 }
 
 .live__video-container {
-    width: 70%;
-    height: 45vh;
+	width: 70%;
 }
 
 .container__sidebar {
-    display: flex;
-    width: 28%;
+	display: flex;
+	width: 28%;
 }
 
-.live__panel-container{
-    width:100%;
-    height: 100px;
-    margin-top: 1rem;
+.live__panel-container {
+	width: 100%;
+	height: 100px;
+	margin-top: 1rem;
 }
 
 
 @media only screen and (max-width: 768px) {
-    .live__video-container {
-        width: 100%;
-    }
-    
-    .container__sidebar {
-        width: 100%;
-        margin-top: 1rem;
-        display: flex;
-        justify-content: center;
-    }
-
-    .live__container {
-        height: initial;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-between;
-    }
+	.live__video-container {
+		width: 100%;
+	}
+
+	.container__sidebar {
+		width: 100%;
+		margin-top: 1rem;
+		display: flex;
+		justify-content: center;
+	}
+
+	.live__container {
+		height: initial;
+		flex-direction: column;
+		align-items: center;
+		justify-content: space-between;
+	}
 
 }

app/styles/video-screen.module.css

@@ -1,3 +1,5 @@
 .video-screen {
-    width: 100%;
-}
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
+}