Changing the default UX kit layout to show Grid/Carrousel View

[techiespace]

We have a requirement to show a grid of viewers when the number of users is less than 4 and a carrousel like Zoom mobile app when users are greater than 4. Currently, we are trying to modify the UXkit code to change the circles on top to bigger rectangle views in a grid.
I see that RCTVoxeetVideoView is responsible for returning the VideoView which has a prop isCircle. The VideoView itself is coming from com.voxeet.sdk.views. Can we modify the RNVideoViewManager in some way to achieve this? What would be the best approach?

[codlab]

This is currently impossible but a future version of the library will let you manage the layout using directly the various events + participants and their related streams

[techiespace]

If not though UX Kit what other approach can we take? Is it possible to write wrappers on top of the android and iOS SDKs to achieve this? I'm just curious if I can create a fork change the UX kit somehow to achieve this. However, while going through the code I noticed some parts of the overlay (eg. Waiting for users... text) are not present in this codebase of react-native UXKit.

[codlab]

For custom layout like this you won't be able to use the overlay but with the new API you will be able to grab the list of participants, stream for each of them and directly attach/unattach onto VideoView that you will be able to mount directly into your app controlling fully your own implementation directly in your React environment

[techiespace]

By new API you mean there are methods added in the recent voxeet-uxkit-reactnative version to get participants list and attach their streams to VideoView? In the new version, I see the below types/methods available

Types:
  1. ConferenceUser,
  2. CreateOptions, 
  4. CreateResult,
  5. JoinOptions, 
  6. JoinResult,
  7. MediaStream

Classes:
  1. VoxeetSDK,
  2. VoxeetEvents,
  3. VideoView

How do I get the participant list and video stream URIs from here?

[techiespace]

This is currently impossible but a future version of the library will let you manage the layout using directly the various events + participants and their related streams

Are there any rough timelines on when is this update planned for?

[codlab]

It's still a WIP, the VoxeetSDK is providing two methods (streams and participants) - on top of the events which exists and will be documented for typescript usage a bit later

From there, when the streams for a given participant are obtained, you will be able to do things like :

public someMethodToManageFromObtainedStream = async (participant: Participant, stream: MediaStream) => {
  if (this.video) {
    await this.video.attach(participant, stream);
  }
}

render() {
  <VideoView ref={video => this.video = video} />; //only for the example, you should manage the validity etc...
}

and from there build up a complete interface meeting your needs

[techiespace]

Okay. Thanks for the update. One question on the new version. With the VoxeetEvents class now added we should now be able to listen to conference events like when the user leaves the call right? Can we also listen when a video presentation starts like we do using the Voxeet JS SDK in the code snippet below:

VoxeetSDK.videoPresentation.on("started", (e) => {
    setSrcUrl(e.url);
});
VoxeetSDK.videoPresentation.on("stopped", () => {
    setSrcUrl();
});

[techiespace]

Okay. Thanks for the update. One question on the new version. With the VoxeetEvents class now added we should now be able to listen to conference events like when the user leaves the call right? Can we also listen when a video presentation starts like we do using the Voxeet JS SDK in the code snippet below:

VoxeetSDK.videoPresentation.on("started", (e) => {
    setSrcUrl(e.url);
});
VoxeetSDK.videoPresentation.on("stopped", () => {
    setSrcUrl();
});

I tried adding event listener to my code:

VoxeetSDK.events.addListener("ConferenceStatusUpdatedEvent", onConferenceStatus);

But the event is not getting triggered. I isolated the issue here in this repo: https://github.com/techiespace/voxeet-demo

[codlab]

What is the platform you can reproduce the issue onto?

[techiespace]

1. The event listener for ConferenceStatusUpdatedEvent is not working.
2. I'm not sure which callback should I use to listen to when a video presentation starts

What is the platform you can reproduce the issue onto?

On Android

[codlab]

1. The current develop branch should have the fix for this issue 👍

2. It's currently not supported. The various events are going to be implemented in the next weeks, those for the presentation as well. Edit : android should have those properly defined and available for testing. You can install using yarn or rpm, the latest develop commit

[codlab]

I have added all the various events that you can use when registering to the events

[codlab]

The new version lets you integrate your own UI directly from your app. You can then customize everything with more integration. You can use the latest versions. I'm closing this ticket but don't hesitate to open a new one if something goes wrong using the new one. (the initialization step now have a boolean, true will deactivate the overlay)