Add ability to hook into composite state

[levimiller-qhrtech]

What feature are you requesting?
I'm currently trying to customize the CallComposite, but I'm having a really hard time hooking into the state without accessing private code.

The issue is that the composite hooks require everything to be wrapped in CallAdapterProvider, but the public hooks require everything to be wrapped in CallClientProvider, CallAgentProvider, and CallProvider. This wouldn't be an issue, but the Call adapter has the callClient, callAgent, and call as private properties.

What would be the benefit of adding this feature?
I'd be able to customize the call composite to meet our business requirements.

What solution would be ideal for you?
Can you either export the composite hooks publicly, or make it possible to use the created adapter to use the currently exported hooks.

What alternatives have you considered?
The only alternative I see are to import private code:

import { CallAdapterProvider } from '@azure/communication-react/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/CallAdapterProvider';
import {
  usePropsFor
} from '@azure/communication-react/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/usePropsFor';

or access the private variables of the CallAdapter:

<CallClientProvider callClient={(callAdapter as any).callClient}>

...
Is there any additional information for your request?

Attach screenshots or images add detail to your request:
Here's what I'm trying to do for context:

This dialog pops up when the settings button is pressed.

[prprabhu-ms]

Thanks for starting this discussion @levimiller-qhrtech
When using the composites, you should not have to use any custom hooks exported from @azure/communication-react.

From your screenshot, it looks like you're trying to add an overlay to select devices. For this you'd need access to the DeviceManager.

We support such scenarios via dependency injection. You can create the lower-layer call client via createStatefulCallClient() and then pass that in when creating the adapter via createAzureCommunicationCallAdapterFromClient() (You do have to create the callAgent as well with the StatefulCallClient that you already created).

This way, you can retain a reference to the StatefulCallClient and use it in your own UI views. If you want, you can also use the lower-layer components we export in your own UI view (e.g. the MicrophoneButton by wrapping your UI view in the CallClientProvider etc. with the StatefulCallClient you have a reference to). For an introduction to building on top of our lower-level components, see https://azure.github.io/communication-ui-library/?path=/docs/quickstarts-statefulcallclient--page

But you do not have to use the lower-level components from @azure/communication-react. You can use the StatefulCallClient to build your UI view any way you'd like.

Hope that helps!

[prprabhu-ms]

As an aside, if you're building a device selection experience, you might find this discussion relevant: #1840

[levimiller-qhrtech]

Thank you, I missed that I could just create the adaptor from a CallClient and Agent 😅

That should completely solve my issues 🙂

Also thank you for the link to the issue of saving the device selection because that's the next thing I'll be working on 🙂

[prprabhu-ms]

I think this was a great question. Moving to discussions for greater visibility.

[alkwa-msft]

Closing this discussion due to inactivity. Feel free to re-open if this is still an issue.