Google Summer of Code 2017 — Final Report

Organization: VideoLAN

Mentors: Mr. David Loiret , Mr. Jean-Baptiste Kempf

Project: Modern Look For VLC Web UI


Introduction

My project for GSoC 2017 was to redesign the Web Interface UI provided in the VLC Media Player. My first step was to create mock UI and decide how the new UI should look. When I got the UI approved from my mentor, the actual coding of the UI began. We had decided to use Vue.js Framework and Sass for the implementation part.

A big shout out to Balsamiq for providing us with a Trial License to use their software for mockup building, covering the entire duration of the project, under their initiative to provide the software for free to open-source projects.

The Coding Period Begins!

As implementation began, vision of how the UI would turn out started getting clearer. It was a very interesting experience to take a project from designing to implementation in 90 days.

I have my own repo at: https://code.videolan.org/gautamchitnis/web-ui-redesign which is based off of VLC 3.0.0-git Vetinari version. This repo has all the work I have done during GSoC’17.
Code written by me during GSoC is in the /share and /share/lua/http directories available in the provided repo.

This repo contains commits after 18th July, as there was a little issue with the repo maintained by me before that, so a clean repo was started incorporating all the earlier code I had written in my first commit id: 44d2ec74 . My GSoC work is available from previous commit id till this commit id: c4170b75.

My focus in the beginning of the summer was to implement features as decided. My mentor brought it to my attention at the time of my first evaluation that I need to focus on how to keep the code more modular and maintainable. I had started exploring how to do this while pushing forward with new features during my second work period.

During my second work period, an issue cropped up which effectively meant that any file playing in the VLC Player could not be streamed in the Web Interface due to javascript security restrictions and some issues in the streaming module of VLC. So we decided to build the UI anyways and keep it ready to be plugged into VLC as soon as a workaround/fix to these issues is available.

As we neared the dates for second evaluation, VideoLAN gave me a fantastic opportunity to come visit their HQ in Paris, France. I visited Paris during 24th July and 29th July. During this visit I worked in the VLC office with my mentors David and J-B along with all the friendly devs present there for a couple of days. Working in their office was one of the greatest experiences ever for me and it went to show just how great things open-source communities and programs like GSoC can do.

When I came back from Paris, the third work period had started. I had worked out how to scaffold the project for better maintainability with David during my visit and it was one of my main focus points for the third work period. When I started restructuring the code, I came to understand how important it is to write code which is modular and maintainable from the start itself, because it becomes easier to work with especially when the code you write is going to be worked up on by many people in the community.

As the third work period was about to end, there was only one very important concern left to address in terms of a GSoC project, compilation! Through out my work period, I had used a precompiled version of VLC as the web interface’s frontend never underwent compilation and was available ‘as is’ for use.

To make sure the code complies as much as possible with ES6 Standard we implemented module system for all the code and that meant we needed to use a compiler to form the final script. For this, we went with Closure Compiler. Also, I had to integrate SassC, a wrapper for LibSass, with the compilation process of the VLC to compile all the sass code.

To alter the compilation process of VLC, I had to work with makefiles. I had never used makefiles before this, so it was pretty overwhelming to actually understand how to write them and how to edit them to perform the tasks as I want. Hugo from VideoLAN team helped me with this process. Once I understood the syntax and basic concepts, it was pretty easy to edit the existing makefiles and compiling the VLC source with my brand new UI for the web interface.


Transformation of the UI

Old Desktop UI
Old Mobile UI
New UI Mock Up
New Desktop UI
New Desktop UI Menu
3 Panels Showing New Mobile UI

How To Use The Project

  1. Clone the repo available at: https://code.videolan.org/gautamchitnis/web-ui-redesign
  2. Follow the compilation steps for VLC available at: https://wiki.videolan.org/UnixCompile/ (The project was developed and tested on Ubuntu 16.04, further testing for compilation on different platforms is ongoing, but shouldn’t be an issue as far as general observation goes)
  3. Make sure the Web Interface for VLC is enabled and visit localhost:port through a web browser on the machine running VLC and the UI should be available for use to you.

Conclusion

Working with VideoLAN for this GSoC project was a very great and teaching experience for me. I have also decided to continue contributing to this project to complete all the necessary tasks for making the new UI production ready. Working on this project for 3 months has only strengthened my views about the importance of open-source communities in the tech world.

Here’s an overview of features that I implemented during GSoC’17:

  1. Playlist population and related functionalities.
  2. Side Menu
  3. File selection from server disk
  4. Track removal, Random toggle, and Repeat toggle from playlist section.
  5. Video play/pause control from player visible in the UI.
  6. Sound level control from player visible in the UI.
  7. Modals for Manage Streams, Track Synchronization, VLM Batch Commands and Equalizer.
  8. Responsive UI

Lastly, here are a few things that I learned/used for the very first time in a real-world project:

  1. Makefiles
  2. Closure Compiler
  3. Balsamiq Mockups
  4. Using Linux based OS as my primary platform to carry out development tasks
  5. Vue.js
  6. Plyr.io library
  7. VCS such as GitLab
  8. Modular programming

Next Steps

Now that GSoC has come to an end, it is time to think about my contribution to open-source beyond this point. As mentioned earlier, I will be contributing to VLC along with any good opportunities that may crop up with other open-source projects.

Readme.md available in the repo linked above has a set of TODOs which I will be working on in the immediate future. I also intend to explore the streaming functionalities of VLC as they are a prime requirement before my code can be merged into the production version of VLC.

I didn’t choose the Cone Life, the Cone Life chose me!