v1.4.3/call manager fixes, usersOnCall view

app/src/App.js

@@ -46,7 +46,6 @@ function hboClickFix(ev) {
     ev.preventDefault();
     ev.stopPropagation();
     ev.stopImmediatePropagation();
-    console.log('cc');
   }
 }
 
@@ -95,7 +94,6 @@ const App = () => {
             ev.preventDefault();
             ev.stopPropagation();
             ev.stopImmediatePropagation();
-            console.log('cc');
           }
         },
         { capture: true }

app/src/CallManager.js

@@ -95,7 +95,7 @@ export default class CallManager {
   async leaveCall() {
     VoxeetSDK.conference.leave().then(() => {
       VoxeetSDK.session.close();
-      this.listener({ onCall: false, callActionPending: false });
+      this.listener({ onCall: false, muted: false, callActionPending: false });
     });
   }
   async openSession() {
@@ -114,13 +114,23 @@ export default class CallManager {
     }
     return true;
   }
+  async usersListHandle() {
+    var usersOnCall = {};
+    VoxeetSDK.conference.participants.forEach((v, k, m) => {
+      usersOnCall[k] = v;
+    });
+    this.listener({ usersOnCall });
+  }
   async initialize() {
+    VoxeetSDK.conference.on('participantAdded', () => this.usersListHandle());
+    VoxeetSDK.conference.on('participantUpdated', () => this.usersListHandle());
+
     VoxeetSDK.conference.on('joined', () => {
-      this.listener({ onCall: true, callActionPending: false, voxeet: VoxeetSDK });
+      this.listener({ onCall: true, callActionPending: false });
     });
 
     VoxeetSDK.conference.on('left', () => {
-      this.listener({ onCall: false, callActionPending: false, voxeet: null });
+      this.listener({ onCall: false, callActionPending: false, usersOnCall: {} });
     });
 
     VoxeetSDK.conference.on('streamAdded', (participant, stream) => {
@@ -134,10 +144,12 @@ export default class CallManager {
         voiceNode.classList.add('voxeetAudioOut');
         document.body.appendChild(voiceNode);
       }
+      this.listener({ callActionPending: false });
     });
 
     VoxeetSDK.conference.on('streamRemoved', (participant, stream) => {
       if (document.getElementById(participant.id)) document.getElementById(participant.id).remove();
+      this.listener({ callActionPending: false });
     });
 
     if (

app/src/Chat.js

@@ -71,6 +71,7 @@ import Create from './Create';
 import { goTo } from 'route-lite';
 import CallManager from './CallManager';
 import VideoListener from './VideoListener';
+import VoxeetSDK from '@voxeet/voxeet-web-sdk';
 
 const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq');
 const alerts = [
@@ -90,6 +91,7 @@ export default class Chat extends Component {
       newMessage: '',
       admin: null,
       users: [],
+      usersOnCall: {},
       gif: false,
       onCall: false,
       muted: false,
@@ -310,6 +312,7 @@ export default class Chat extends Component {
       allowChatNotification,
       users,
       callActionPending,
+      usersOnCall,
     } = this.state;
     return (
       <div className="party-chat-container">
@@ -387,7 +390,15 @@ export default class Chat extends Component {
                     color={allowChatNotification ? 'secondary' : 'primary'}
                   />
                 }
-                label="Allow chat notification when side panel is closed"
+                label={
+                  <span>
+                    Allow chat notification when side panel is closed
+                    <br />
+                    <span style={{ color: '#8a8a8a' }}>
+                      {allowChatNotification ? 'Currently Enabled' : 'Currently Disabled'}
+                    </span>
+                  </span>
+                }
                 labelPlacement="end"
               />
               <Typography className="party-controls-users-title" variant="overline">
@@ -398,6 +409,26 @@ export default class Chat extends Component {
                   <Chip className="party-controls-users-chip" clickable size="small" label={user} />
                 ))}
               </div>
+              {VoxeetSDK.conference.participants.size > 0 ? (
+                <Typography className="party-controls-users-title" variant="overline">
+                  MEMBERS IN CALL
+                </Typography>
+              ) : null}
+              {VoxeetSDK.conference.participants.size > 0 ? (
+                <div className="party-controls-users-container">
+                  {Object.keys(usersOnCall).map((id) => {
+                    return usersOnCall[id].status === 'Connected' ||
+                      usersOnCall[id].status === 'Connecting' ? (
+                      <Chip
+                        className="party-controls-users-chip"
+                        clickable
+                        size="small"
+                        label={usersOnCall[id].info.name}
+                      />
+                    ) : null;
+                  })}
+                </div>
+              ) : null}
             </ExpansionPanelDetails>
           </ExpansionPanel>
           {player ? (
@@ -495,7 +526,7 @@ export default class Chat extends Component {
             placeholder={this.state.gif ? 'Search something...' : 'Say something...'}
             helperText={
               this.state.newMessage && !this.state.gif
-                ? 'Enter to send / Shift+Enter for next line'
+                ? 'Enter to send / Shift+Enter for new line'
                 : this.state.gif
                 ? 'Click on gif to send'
                 : null

app/src/index.css

@@ -346,6 +346,20 @@ textarea::-webkit-scrollbar {
 .party-controls button:hover .MuiButton-startIcon {
   margin-right: 8px !important;
 }
+.party-controls-users-container {
+  max-height: 100px;
+  overflow-y: auto;
+}
+.party-controls-users-container::-webkit-scrollbar-thumb {
+  background-color: #c0f300 !important;
+  border-radius: 13px;
+}
+.party-controls-users-container::-webkit-scrollbar {
+  width: 5px;
+}
+.party-controls-users-title {
+  margin-top: 25px !important;
+}
 .party-controls-users-chip {
   font-size: 11px !important;
   letter-spacing: 1.1px !important;
@@ -486,3 +500,16 @@ body.amazon-prime .notification-switch .MuiSwitch-thumb {
   letter-spacing: 1.1px;
   align-items: center;
 }
+
+.mic-permission-overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: block;
+  background: rgba(0, 0, 0, 0.9);
+  z-index: 9999;
+  color: white;
+  font-size: 95px;
+}