diff --git a/Project/src/MakeCall/MakeCall.js b/Project/src/MakeCall/MakeCall.js index 6247002..cb09cfc 100644 --- a/Project/src/MakeCall/MakeCall.js +++ b/Project/src/MakeCall/MakeCall.js @@ -50,6 +50,7 @@ export default class MakeCall extends React.Component { this.videoConstraints = null; this.tokenCredential = null; this.logInComponentRef = React.createRef(); + this.activeCallTransferFeature = null; this.state = { id: undefined, @@ -164,19 +165,19 @@ export default class MakeCall extends React.Component { await this.callClient.createTeamsCallAgent(tokenCredential) : await this.callClient.createCallAgent(tokenCredential, { displayName: userDetails.displayName }); window.callAgent = this.callAgent; - try { - this.callAgent.on('activeCallsUpdated', (args) => { - console.log(`activeCallsUpdated, activeCalls=${args.activeCallDetails}`); + this.activeCallTransferFeature = this.callAgent.feature(Features.ActiveCallTransfer); + this.activeCallTransferFeature.on('activeCallsUpdated', (args) => { + console.log(`activeCallsUpdated, activeCalls=`, args.activeCallDetails); this.setState({activeCallDetails: args.activeCallDetails}); }); - this.callAgent.on('noActiveCalls', () => { + this.activeCallTransferFeature.on('noActiveCalls', () => { console.log('noActiveCalls event received - user no longer in a call'); this.setState({activeCallDetails: undefined}); }); - const activeCalls = await this.callAgent.getActiveCallDetails(); - this.setState({ activeCallDetails: activeCalls.callId ? activeCalls : undefined }); + const activeCalls = await this.activeCallTransferFeature.getActiveCallDetails(); + this.setState({ activeCallDetails: activeCalls.length > 0 ? activeCalls : undefined }); } catch (e) { console.log('active call transfer not configured for this release version'); } @@ -1014,30 +1015,44 @@ this.callAgent.on('incomingCall', async (args) => { } { - this.state.activeCallDetails && !this.state.call && { this.setState({ activeCallDetails: undefined }) }} - dismissButtonAriaLabel="Close"> -
- You're in an active call! -
- { - const callOptions = await this.getCallOptions({video: false, micMuted: false}); - const newCall = await this.callAgent.activeCallTransfer(this.state.activeCallDetails, {isTransfer: true, joinCallOptions: callOptions}); - this.setState({call: newCall}); - }}>Transfer to this device -
-
- { - const callOptions = await this.getCallOptions({video: false, micMuted: false}); - const newCall = await this.callAgent.activeCallTransfer(this.state.activeCallDetails, {isTransfer: false, joinCallOptions: callOptions}); - this.setState({call: newCall}); - }}>Add this device -
- -
-
+ this.state.activeCallDetails ? <> + {this.state.activeCallDetails.map((call) => { + let callTitle; + if ('meetingLocator' in call) { + callTitle = `Meeting with organizerId: ${call.meetingLocator.organizerId}`; + } else { + const participantCount = call.participants.length; + callTitle = `Call with ${participantCount > 1 ? participantCount : call.participants[0]} participants`; + } + return ( + call && !this.state.call && { this.setState({ activeCallDetails: this.state.activeCallDetails.filter(c => c !== call) }) }} + dismissButtonAriaLabel="Close"> +
+ You're in an active call! + {callTitle} +
+ { + const callOptions = await this.getCallOptions({video: false, micMuted: false}); + const newCall = await this.activeCallTransferFeature.activeCallTransfer(call, {isTransfer: true, joinCallOptions: callOptions}); + this.setState({call: newCall}); + }}>Transfer to this device +
+
+ { + const callOptions = await this.getCallOptions({video: false, micMuted: false}); + const newCall = await this.activeCallTransferFeature.activeCallTransfer(call, {isTransfer: false, joinCallOptions: callOptions}); + this.setState({call: newCall}); + }}>Add this device +
+
+
+ ); + })} + : <> } { !this.state.incomingCall && !this.state.call && !this.state.callSurvey &&