After creating conference in Twilio Flex using voice API, how do I add hangup button call controls for each participant?

Question

Ive successfully been able to create a custom directory popout component on the right of flex in order to transfer to an external number. Ive used the Voice API through flex manually, and after doing so I notice that flex automatically adds most of the necessary controls to both the TaskDetailsPanel > ParticipantCanvas and TaskDetailsButtons. The only part missing is the hangup buttons, in ParticipantCanvas. How can I create them myself whil still perhaps using the controls provided by default if possible?

Also, I noticed that the mute button for participant 2 works, except it simply mutes the wrong participant, participant 1. (1 being first caller that is added to conference) I don't necessarily need the 'toggle' feature that the native flex has for warm transfer. I just the ability to mute, and remove participant(s) to start.

Here is the link for what its worth to the warm-transfer that was built into flex as of v1.11

https://www.twilio.com/docs/flex/warm-transfer-end-user-guide

I will eventually use this native transfer feature, but right now I need to transfer to external numbers only so I can roll out incrementally.

One approach I think might work is to listen for changes to voice task attributes, specifically the

task.attributes.conference

How can I watch for task attribute changes and respond accordingly?

I see I can invoke 'KickParticipant' as described here.

https://www.twilio.com/docs/flex/actions-framework

Just need to figure out how to add UI controls which have references to each participant other than myself (since there are 3 participants technically). Hopefully this is possible within the existing TaskDetailsPanel so that I dont have to completely rewrite both TaskDetailsPanel and perhaps TaskDetailsButtons.

UPDATE: I have been able to successfully create a twilio function which kicks the participant. Ill update when I have a working version. Still need to figure out how to add kick buttons for each participant since there can be more than 1?

Answer 1

I was able to find a solution for now by placing this in my plugin.

    const liveParticipantCountGreaterThan2 = (props) => {
  return props.task && props.task.conference && props.task.conference.liveParticipantCount > 2;
};

flex.DefaultTaskChannels.Call.addedComponents = [{
  target: "CallCanvasActions",
  component: <CustomCancelTransferButton key="someKeyName" />,
  options: { if: liveParticipantCountGreaterThan2 }
}];

It would be nice however to add a hangup button to each participant but perhaps another iteration.