diff --git a/app/src/App.js b/app/src/App.js index 0ff6749..2b7a003 100644 --- a/app/src/App.js +++ b/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 } diff --git a/app/src/CallManager.js b/app/src/CallManager.js index 8a93359..bfc51d7 100644 --- a/app/src/CallManager.js +++ b/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 ( diff --git a/app/src/Chat.js b/app/src/Chat.js index 08b274e..ca513cf 100644 --- a/app/src/Chat.js +++ b/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 (
@@ -387,7 +390,15 @@ export default class Chat extends Component { color={allowChatNotification ? 'secondary' : 'primary'} /> } - label="Allow chat notification when side panel is closed" + label={ + + Allow chat notification when side panel is closed +
+ + {allowChatNotification ? 'Currently Enabled' : 'Currently Disabled'} + +
+ } labelPlacement="end" /> @@ -398,6 +409,26 @@ export default class Chat extends Component { ))}
+ {VoxeetSDK.conference.participants.size > 0 ? ( + + MEMBERS IN CALL + + ) : null} + {VoxeetSDK.conference.participants.size > 0 ? ( +
+ {Object.keys(usersOnCall).map((id) => { + return usersOnCall[id].status === 'Connected' || + usersOnCall[id].status === 'Connecting' ? ( + + ) : null; + })} +
+ ) : null} {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 diff --git a/app/src/index.css b/app/src/index.css index f7e1916..6439c95 100644 --- a/app/src/index.css +++ b/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; +}