Merge pull request #282 from Azure-Samples/dmceachernmsft/active-call-transfer

Active call transfer feature

Author: dmceachernmsft

Project/src/MakeCall/MakeCall.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { CallClient, LocalVideoStream, Features, CallAgentKind, VideoStreamRenderer } from '@azure/communication-calling';
 import { AzureCommunicationTokenCredential, createIdentifierFromRawId} from '@azure/communication-common';
-import { PrimaryButton } from '@fluentui/react/lib/Button';
+import { DefaultButton, PrimaryButton } from '@fluentui/react/lib/Button';
 import { TextField } from '@fluentui/react/lib/TextField';
 import { MessageBar, MessageBarType, Toggle } from '@fluentui/react';
 import { Icon } from '@fluentui/react/lib/Icon';
@@ -83,7 +83,8 @@ export default class MakeCall extends React.Component {
             },
             preCallDiagnosticsResults: {},
             isTeamsUser: false,
-            identityMri: undefined
+            identityMri: undefined,
+            activeCallDetails: undefined
         };
 
         // override logger to be able to dowload logs locally
@@ -155,6 +156,17 @@ export default class MakeCall extends React.Component {
                     await this.callClient.createTeamsCallAgent(tokenCredential) :
                     await this.callClient.createCallAgent(tokenCredential, { displayName: userDetails.displayName });
                 window.callAgent = this.callAgent;
+                
+                this.callAgent.on('activeCallsUpdated', (args) => {
+                    console.log(`activeCallsUpdated, activeCalls=${args.activeCallDetails}`);
+                    this.setState({activeCallDetails: args.activeCallDetails});
+                });
+
+                this.callAgent.on('noActiveCalls', () => {
+                    console.log('noActiveCalls event received - user no longer in a call');
+                    this.setState({activeCallDetails: undefined});
+                });
+
 
                 this.callAgent.on('callsUpdated', e => {
                     console.log(`callsUpdated, added=${e.added}, removed=${e.removed}`);
@@ -224,6 +236,8 @@ export default class MakeCall extends React.Component {
                 this.logInComponentRef.current.setCallAgent(this.callAgent);
                 this.logInComponentRef.current.setCallClient(this.callClient);
                 this.autoJoinMeetingByMeetingLink();
+                const activeCalls = await this.callAgent.getActiveCallDetails();
+                this.setState({ activeCallDetails: activeCalls.callId ? activeCalls : undefined });
             } catch (e) {
                 console.error(e);
             }
@@ -986,6 +1000,32 @@ this.callAgent.on('incomingCall', async (args) => {
                                 {this.state.ufdMessages.map((msg, index) => <li key={index}>{msg.msg}</li>)}
                             </MessageBar>
                         }
+                        {
+                            this.state.activeCallDetails && !this.state.call && <MessageBar
+                                messageBarType={MessageBarType.warning}
+                                isMultiline={true}
+                                onDismiss={() => { this.setState({ activeCallDetails: undefined }) }}
+                                dismissButtonAriaLabel="Close">
+                                <div className="ms-Grid-row">
+                                    <b className="ms-Grid-col">You're in an active call!</b>
+                                    <div className="ms-Grid-col">
+                                        <DefaultButton  onClick={async () => {
+                                            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</DefaultButton>
+                                    </div>
+                                    <div className="ms-Grid-col">
+                                        <DefaultButton onClick={async () => {
+                                            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</DefaultButton>
+                                    </div>
+                                    
+                                </div>
+                            </MessageBar>
+                        }
                         {
                             !this.state.incomingCall && !this.state.call && !this.state.callSurvey &&
                             <div>