How to change the options of the CallComposite after loaded.

[GillesTourreau]

I have non-React application and use the callComposite.js to load and start the CallComposite component.
When calling the loadCallComposite() method I pass in the props arguments a CallCompositeOptions object and I fill some property of the callControls property to show or hide some buttons:

var props = {
   callControls = {
      cameraButton = false;
   },
};

loadCallComposite(myArgs, myDiv, props);

After the CallComposite has been loaded, is it possible to show or hide the button ?
For example, in my case, how can I display the camera button after the component has been loaded and rendered ?

Thanks for your answers !

[dmceachernmsft]

Hi @GillesTourreau! Thanks for asking the question! So if you are loading the composite through a function like found in our JS bundles every time the props change or you call this function the composite will re-render and the adapter will be recreated. the latter part is more the issue than the composite, as the composite is just the visual representation of the callstate from the adapter.

In react you can change the props on the composite, and as long as the reference to the call adapter is unchanged the composite can change in appearance. It is important here to note though that when changing the props (say call controls like in your example) the whole composite is going to re-render but if the adapter is unchanged the user will be in the call still.

To specifically solve your problem of using the Composite with buttons that you want to show and hide outside react. the best thing to do may be to hide the camera button (Or all the CallControls) and invoke the handlers on the CallAdapter that start the camera with your own button.

in your case your button might be something like:

<button onClick={() => {adapter.startCamera()}}>Camera</button>

Hope this helps!