From 156f8a2a15cc174e503a40ce2cf8632cc925ab45 Mon Sep 17 00:00:00 2001 From: "Donald McEachern (from Dev Box)" Date: Tue, 14 Oct 2025 17:45:13 -0700 Subject: [PATCH 1/5] add active call transfer functionality --- Project/src/MakeCall/MakeCall.js | 34 ++++++++++++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/Project/src/MakeCall/MakeCall.js b/Project/src/MakeCall/MakeCall.js index 6b98589..14ae576 100644 --- a/Project/src/MakeCall/MakeCall.js +++ b/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,16 @@ 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.callAgent.on('callsUpdated', e => { console.log(`callsUpdated, added=${e.added}, removed=${e.removed}`); @@ -986,6 +997,25 @@ this.callAgent.on('incomingCall', async (args) => { {this.state.ufdMessages.map((msg, index) =>
  • {msg.msg}
    • )} } + { + this.state.activeCallDetails && { this.setState({ activeCallDetails: undefined }) }} + dismissButtonAriaLabel="Close"> +
    + You're in an active call! + { + const newCall = await this.callAgent.activeCallTransfer(this.state.activeCallDetails, {isTransfer: true}); + this.setState({call: newCall}); + }}>Transfer to this device + { + const newCall = await this.callAgent.activeCallTransfer(this.state.activeCallDetails, {isTransfer: false}); + this.setState({call: newCall}); + }}>Join here +
    +     + } { !this.state.incomingCall && !this.state.call && !this.state.callSurvey &&
    From 2304fa6ee8f96c660eb0197321ccf3b89c39c70a Mon Sep 17 00:00:00 2001 From: "Donald McEachern (from Dev Box)" Date: Tue, 14 Oct 2025 17:45:35 -0700 Subject: [PATCH 2/5] styling --- Project/src/MakeCall/MakeCall.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Project/src/MakeCall/MakeCall.js b/Project/src/MakeCall/MakeCall.js index 14ae576..a75b3d3 100644 --- a/Project/src/MakeCall/MakeCall.js +++ b/Project/src/MakeCall/MakeCall.js @@ -1003,7 +1003,7 @@ this.callAgent.on('incomingCall', async (args) => { isMultiline={true} onDismiss={() => { this.setState({ activeCallDetails: undefined }) }} dismissButtonAriaLabel="Close"> -
    +
    You're in an active call! { const newCall = await this.callAgent.activeCallTransfer(this.state.activeCallDetails, {isTransfer: true}); From ff473b3bad4e13e312059a7f9939193836ddc0fc Mon Sep 17 00:00:00 2001 From: "Donald McEachern (from Dev Box)" Date: Wed, 15 Oct 2025 13:30:24 -0700 Subject: [PATCH 3/5] Add callOptions to make sure device info is setup for the call --- Project/src/MakeCall/MakeCall.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/Project/src/MakeCall/MakeCall.js b/Project/src/MakeCall/MakeCall.js index a75b3d3..8ff45cc 100644 --- a/Project/src/MakeCall/MakeCall.js +++ b/Project/src/MakeCall/MakeCall.js @@ -164,6 +164,7 @@ export default class MakeCall extends React.Component { this.callAgent.on('noActiveCalls', () => { console.log('noActiveCalls event received - user no longer in a call'); + this.setState({activeCallDetails: undefined}); }); @@ -998,19 +999,21 @@ this.callAgent.on('incomingCall', async (args) => { } { - this.state.activeCallDetails && { this.setState({ activeCallDetails: undefined }) }} dismissButtonAriaLabel="Close"> -
    +
    You're in an active call! - { - const newCall = await this.callAgent.activeCallTransfer(this.state.activeCallDetails, {isTransfer: true}); + { + 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 newCall = await this.callAgent.activeCallTransfer(this.state.activeCallDetails, {isTransfer: false}); + { + 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}); }}>Join here
    From 7d86a52412c9ef5a9231b0d25970bbf1ec1d00bc Mon Sep 17 00:00:00 2001 From: "Donald McEachern (from Dev Box)" Date: Wed, 15 Oct 2025 15:09:43 -0700 Subject: [PATCH 4/5] fix styling --- Project/src/MakeCall/MakeCall.js | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/Project/src/MakeCall/MakeCall.js b/Project/src/MakeCall/MakeCall.js index 8ff45cc..0144787 100644 --- a/Project/src/MakeCall/MakeCall.js +++ b/Project/src/MakeCall/MakeCall.js @@ -1000,22 +1000,27 @@ 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}); - }}>Join here + 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 +
    +
    } From b92d7b02dbdc524222f57621421dc0631369a04b Mon Sep 17 00:00:00 2001 From: "Donald McEachern (from Dev Box)" Date: Tue, 28 Oct 2025 17:45:38 -0700 Subject: [PATCH 5/5] update to do fetch on callAgent initilization --- Project/src/MakeCall/MakeCall.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Project/src/MakeCall/MakeCall.js b/Project/src/MakeCall/MakeCall.js index 0144787..d84880d 100644 --- a/Project/src/MakeCall/MakeCall.js +++ b/Project/src/MakeCall/MakeCall.js @@ -236,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); }