GSoC 2022 @ Kodi: Mid-Term Evaluation

Mohd. Shaheer
5 min readAug 6, 2022

--

Hi, everyone! I am Mohd. Shaheer, Computer Science undergrad in freshman year. I am a GSoC contributor working on the project “Finish the web interface” for Kodi. I have been working on this project for the past 2–3 months. This blog post contains my experience through phase 1 of GSoC and an overview of my work during that period.

About this Project
Chorus 2 is the default Web Interface for Kodi which allows you to browse your Music, Movies or TV Shows from the comfort of your own web browser. You can play media via Kodi or stream it in your browser. Works best with Chrome but plays well with most modern browsers. It has been implemented in Coffeescript, Backbone, Marionette, etc.

Kodi now has a project in development called Elm-Chorus which is the re-implementation of Chorus 2 in Elm functional language as it provides easy maintainability of code, error reporting, etc.

Why this Project?

I decided to get involved with Kodi primarily because of my interest in building media players. As a matter of fact, I had built a music player (using python, Tkinter, etc) in my high school which was similar to the windows media player.

Kodi offers me a platform and an opportunity for my shipped code to reach a good userbase, which I’m very excited about.

Community Bonding Period (May 20th — 12th June)

The period of time between when accepted GSoC contributors are announced and the time they are expected to start coding. This time is an excellent one to introduce your GSoC contributors to the community, get them on the right mailing lists, introduce them to the codebase, discuss how they will work with their mentors on their timeline for the program, etc.

I utilized this time to go through the codebase and make notes to understand the code flow and how various functionalities have been implemented (part of the codebase that I hadn’t touched yet) and also to brush up on my Elm Skills.
As a matter of fact, Elm was my first functional programming language and I started learning it when I decided to work on this project. I struggled a lot with Elm at first as it was a new experience with functional programming languages but as time went on my understanding of the codebase and the language improved.

I asked a lot of foolish questions on Elm-Slack when I had a doubt regarding Elm in general and I have to say that the Elm Slack community has some of the nicest people when it comes to helping each other out, they are quite patient with beginners :).

Phase 1 (June 13th — July 12th)

The coding phase started and I decided to take up one of the functionalities which were proposed by me. After a discussion with the mentor, I took the “Working on the Right Sidebar” issue to work on.

Before beginning, My mentor — “Razze” suggested that we should divide the issue into sub-issues and make milestones for them on Github which will make progress our transparent + it will be fun for me to work like this and I can close the issues after every few days.

In the first issue, Implementing its Front-end was comparatively easier than the back-end. I had to implement the backend in order to fetch the metadata of the item which is currently playing which has to be displayed on the Right Sidebar which required an understanding of JSON RPC and decoders in Elm in order to accomplish this. I faced many roadblocks while working with the decoders in the project while implementing this issue as I was new to its working and figuring things out along the way.

Here is the before and after image of the Right Sidebar.

During the first half, I also reworked the UI of Album and Artist Cards as, during development, I realized that some major rework on the UI is required in many places therefore I suggested that we can make MRs in between in order to improve UI as we go on implementing functionalities, fixing issues, etc so that we can progress in UI areas too and discussed with my mentor for the same.
An example :

Before
After

Another issue on which I worked was “Implementing the sort functionality”. The aim was to add sort options to the Vertical Navbar which will be used to sort the Objects according to different fields such as date, artist, etc.

Implementing this functionality was challenging for me due as the previous implementation of the Vertical Navbar had some limitations due to which we couldn’t add the front-end for the button, forms, etc following the basic approach. I, therefore, came up with the approach that we can divide the Vertical Navbar into two sections which will be 2 different views completely, the first section will contain the links and the second section will contain the interactable UI elements.

While working on the backend, I realized that the Objects don’t have all the fields on which they will be sorted, therefore I went ahead and added fields to them by fetching the data using JSON RPC requests and modifying the decoders.

Before
After

Till now, GSOC has been a huge learning experience for me whether it's learning the workflow of understanding a codebase, a new language, GitHub, communication skills, etc. I learned a lot and pushed myself to do better.

I would like to thank my mentor — Razze aka Kolja Lampe for being supportive and helpful throughout and the Elm Slack community for clearing my doubts.

--

--