Adding the pinned chat feature and resizable chat window on mobile? / Jitsi-Meet-RN-SDK [GSOC]


Here is a rough wireframe for my feature ideas for REACT NATIVE SDK project from the GSoC idea list, which are mainly two -

  1. Adding a pinned chats/announcements feature in the RN integrated jitsi-meet .

  2. Particularly in android and IOS view adding (1). and then making the “Chat and Polls” resizeable with a draggable border, This could also mean a user can look at the meet participants / shared screen and chats at the same time a feature in the web view that mobile app seems to be lagging ?

A huge amount of focus will also need to be given to the Mobile (IOS in particular) Compatibility…

Native Mobile Developers and Project mentors’ thoughts on this one would be greatly appreciated.

Please take a look at these ideas and suggest some changes/amends along with the above rough wireframe.

  1. Resizable Chat Window - Instead of making the proposed idea as a hard and fast rule we can say it is optional too, we can add a boolean value in the prop for ex, isResizeable so that SDK user can use it if they want the chat and polls window component resizable by dragging or not in their application.

<ChatAndPolls resizeableOpts = {true} /> // or false

  1. .Theme - Here the RN SDK user can pass in the options to the SDK component prop with prebuilt names of CSS classes which will be passed to the SDK as options and applied to the integrated Jitsi meet window.

<JitsiMeet theme = { backgroundColor :-- , textColor : -- ...etc }/> //or just add in theme = "light" then the .light {} CSS class will be applied

  1. Bundling- As rollup is more efficient bundler than webpack..
    I guess instead of using rollup on its own we can use Vite maybe ?
    Not only does Vite use rollup under the hood but also supports a lot of plugins and JS APIs . Also it is comparatively Lightweight than other web bundlers.

Good effort!

To clarify, the initial objective of the project is to make the necessary adjustments to out React Native project so it can be consumed as a component.

Imagine people installing the @jitsi/react-native-jitsi-meet and then using a component like so:

<JitsiMeeting
    server = 'https://meet.jit.si'
    room = 'lalala13223424'
    onReadyToClose = { this._onReadyToClose } />

Extra features are welcome and would definitely be “extra credit”, but the main target is turning our app into an SDK.

Hope that helps!

1 Like

Thanks for your feedback!

Just to be clear,

Just to be clear here the project refers to the main jitsi-meet project , right ?

Because there is not jitsi-meet-react-native other than jitsi-meet-sdk

Correct.

Well the web, apps and sdks live in the same repo, the main one.

1 Like

Yes , Got it .

Thanks for the confirmation :+1:

Hello @saghul recently my pull request got merged for jitsi-meet-electron. here .

One more thing I forgot to mention is that here for RN Applications focus also needs to be given to the libraries installation and compatibility issues which also needs to be taken care of during the development of such application because RN also brings in library installations and the compatibility issues of the Javascript world.to native mobile development Your thoughts ?

So I have been playing with Jitsi SDK Samples for a while especially the React SDK…

So far, I understand that these guy’s RN SDK have been mentioning Jitsi Meet SDK . Do they mean the one that is on the main jitsi-meet repository?

Further, maybe the resizable chat window feature can be made in the standalone RN SDK itself with window references for mobile.What are your thoughts on this ? Thank you.

Secondly regarding the pinned chat feature I think it could have a standalone feat in the main jitsi meet repo .

Third, may I know when will @calinteodor or other mentors might be free to offer their opinions? thanks :+1:

Finally, to summarize, we are aiming for truly efficiently bundled easy to use RN SDK which allows devs to consume jitsi-meet as a component in their application as easy as possible with appropriate configurations and Opts.

Not sure what you mean, can you rephrase?

That is not our package. It uses our native SDK (which is built with RN so things get confusing) to create a RN package. I just posted in a dedicated topic why that is a Bad Idea ™.

I think that would only make sense for a tablet layout, but sure.

Yeah, that could be a useful feature!

Sure ! What I mean is problems like these will keep occurring.

Yes :+1: I just opened the issue as a matter of fact.

Yep. We already support auto-linking on iOS. Supporting it on Android would be nice. This should not be a probllem, however, with a proper RN SDK setup.

1 Like

Yes for sure!

Here maybe instead of taking the long road of chipping away the reactNativeView Componenet for all devices and possibly get a whole lot of bugs at once here is an easier approach →

  1. For the SDK, make a View Component making an apiReference to JitsiMeetExternalApi ->Here pass in the Roomname , jwt , devices etc as Options.
//This is how the RN SDK user will initialize the JitsiMeet component
<JitsiMeet 
 Opts = { server , roomName , jwt , devices , ....} 
 onReadyToClose = { this._onReadyToClose }/>
// Here Default server = 'https://meet.jit.si' 
  1. If bugs arise for a device then resolving them for a given device → The reason why ? because if the initial apiReferece View Component is working well on a particular device it is easier to pinpoint the root problem - the device where the bugs are found.
    Shortly -easier to add unit tests and debug runtime errors

  2. Linking dependencies for mobile → This should be autolinked before the user consumes jitsimeet as a component.

  1. This approach might be far easier for the end user.

Please, let me know your thoughts on this :+1:

Let’s move the SDK discussion here: [GSOC] React Native SDK

I don’t think we need the external API in this case (not the same implementation, that is) because our external API is about communicating with the native side, which won’t exist in the RN SDK case. It needs to be replaced with a JS counterpart.

Sorry to disturb here again but may I ask whether I can propose the pinned chat feature idea for my GSoC proposal and work on this idea during the GSoC period as Jitsi was accepting original ideas too?

I will still be helping out with the RN SDK project too in between.

AlsoI will probably make a new topic on this, framing the process a little better, this thread is getting too cluttered.

If you cover web. mobile web and mobile (react native) platforms then I think it can be a good project of short duration (175 h).

Projects tend to be independent.

Thank a lot. Yes I was planning that feature for web, mobile web and mobile.
I will be making a possible approach flowchart in another thread.

Ok no problem. Thanks again for your prompt reply and consideration.

1 Like