Google Summer of Code '18 @ Jitsi

By - Akshit Kr Nagpal
Project Name
Jitsi Electron App
Mentors
Saúl Ibarra Corretgé, Hristo Terezov, George Politis

The work I did combined three project ideas that were listed on the ideas page of Jitsi for GSoC'18.

  • Welcome Page / Multi-Domain Support
  • Native Settings
  • Auto Updates

I also did multiple miscellaneous work for Jitsi in the meanwhile.

In the first phase, the first thing I targeted was a New Welcome Page and Multi-Domain support. Before creating welcome page, I needed to setup React using Webpack. Since Jitsi likes the projects to be follow specific linting rules, I also configured eslint and flow as per suggestion of my mentor.

The Welcome Page did not need much components initially. A simple input box was enough for creating functionality. The idea was to take either the room name for default server (which was meet.jit.si at that time) or the full url of the conference as input, navigate to the conference, wait for conference to end, navigate back to the Welcome Page. Navigation was done using React Router.

Now, we could officially say that we had a fully functional Welcome Page and Multi-Domain support.

But that was done using only local state. Before proceeding further, it was a great idea to have some state management so it was time to add Redux, which I did and also replaced react-router-dom with react-router-redux for that.

For providing some navigation for future features I also, added a simple Navigation Bar with some links.

eslint-config-jitsi

Since Jitsi had only one project using React, their shareable config did not have eslint rules for React. After this was discovered, I was assigned to add React eslint rules the config which I did by adding exports for react and jsdoc.

View Pull Request

A lot was accomplished before the second phase started. But the good thing was, a lot was waiting to be done.

The next thing was to implement some Native Settings. We needed to have some settings in desktop app which we had in mobile app. The settings were as follows -

  • Name of the user
  • Email ID of the user
  • Default Jitsi Server
  • Toggles for Audio/Video Muted

We decided to create a navigation drawer for that. It also included Avatar Generation using Gravatar Service using Email ID or Meeples Service of Jitsi using Name.

It took a little time. As a lot of miscellaneous things were also involved like -

  • Creating Logo for Navbar
  • Keyboard Shortcut for Settings Drawer
  • Validation of Server URL

Finally, Native settings were also checked off the list.

Now, since a decent application was ready, it was time to build it for all platforms (Windows, MacOS, Linux). We decided to do builds of AppImage for Linux, DMG for MacOS and EXE for Windows. But since we had native dependency robotjs, we could only build targets on same host machine. Therefere, we decided to add automatic build using Travis (MacOS and Linux) and Appveyor (Windows).

We had our first alpha release on 13th July, 2018.

js-utils

The avatar for the user was generated using Gravatar service from Email ID. For sharing this logic between jitsi-meet and jitsi-meet-electron, it was moved from jitsi-meet to js-utils.

View Pull Request
jitsi-meet

For synchronizing email in native settings and conference settings, and email change listener was needed in the Jitsi Meet API module. Since, this event was not needed before, it was not implemented. Hence, I implemented this.

View Pull Request

Final Phase

Our first alpha release was out and I had completed everything mentioned in my GSoC proposal. But why leave it here? Lets do a few iteration of alpha and then get rid of alpha channel for now.

The next feature we would love to have in this is Auto Updates. Since electron-builder already has great support for that it was an relatively easy task. We also did some miscellaneous stuff before 2nd alpha release which was on 18th July, 2018.

Next we needed a list of recent meetings so that user can join any previous meeting easily. This was added to the third alpha release which we did on 28th July, 2018.

The last task was to show onboarding when the user opens the application for the first time.