Student: Mohit Marathe(@mohit-marathe)
Organization: VideoLAN
Project: VLC Qt Interface Redesign
Mentor: Pierre Lamot
VLC is a free and open-source cross-platform multimedia player and framework that plays most multimedia files as well as DVDs, Audio CDs, VCDs, and various streaming protocols. Check out the official site for more information.
The goal of this project is to contribute to the development of VLC 4.0.0, an upcoming version that showcases a redesigned interface. The project focuses on enhancing user experience and introducing a more intuitive "media center" feel.
Within this context, the project entails integrating the new interface with the existing media library and current interface. By incorporating various features, the aim is to enhance usability and enrich the software with additional functionalities. These improvements will empower users with a more intuitive and feature-rich media playback experience.
VLC uses QML(Qt Modeling Language) as the front end and C++ as the back end.
In this period, I mostly focused on gaining a solid grasp of QML and Qt framework in general. For this, I followed Qt/QML Tutorial Playlist by KDAB. I also read some of the chapters of the book Qt5 Cadaques.
Apart from these, I tried to work on some issues as it is the best way to learn about the codebase.
VLC 4 provide the ability to run on TV (on a set-top box, or a raspberry pi for example), TV has constraints regarding where you're allowed to put graphical elements, see https://en.wikipedia.org/wiki/Safe_area_(television). There were some alignment issues in this setup. I didn't even know QML when I started working on this issue 😅. But with the help of my mentor, I got my first patch merged to VLC.
This was supposed to be a good first issue but it turned out to be a bit challenging (at least for beginners). I learned a lot about VLC's codebase while working on this issue as I had to understand how each component connects with each other. Working on this MR gave me good insights about model-view-delegate architecture in Qt. Initially, I wrote the function to open parent directory 2 times (for video and audio), and then my mentor suggested I refactor it (to avoid code duplication). Then I learned about a really powerful thing called template in C++, with the help the which I was able to refactor the function.
| Before | After |
|---|---|
 |
 |
 |
 |
This was my first task in the coding period. The idea was to make synchronizing audio and subtitles easier for the users. Now you don't have to calculate the delay in the track manually. I learned about a lot of things includings things specific to Qt framework and also a lesson on good code design vs bad code design. It was while working on this feature that I realized the power of Signals and Slots in Qt. I also learned about how to create custom components in C++ that can be used in QML. Initially I connected the delay buttons with the spinbox to change the value of subtitle or audio delay in the spinbox, which will then change the delay. This was an easier and intuitive way to implement this feature but its a bad code design because this is how it works: Calculate Delay with the help of buttons --> Change the value of SpinBox --> Change the actual delay to the value of SpinBox__. This is also known as spaghetti code. My mentor suggested this instead: Calculate Delay with the buttons --> Change the delay to the calculated delay. The reason why the latter structure is better is because its less complicated and hence easier to maintain.
Commits
With VLC, you can stream videos or radio from the internet by using URL. After you stream any media, it gets added to the history. The task was to add an option to delete any media item from the history. While working on this task, I learned how to use glue code to access code from different modules that would otherwise be incompatible. I also learned to use Lambda expressions in C++.
Commits:
- medialibrary: add VLC_ML_REMOVE_STREAM
- qt: create function to delete item
- qt: add isDeletable as role of the mlurlmodel
- qt: add option to delete Stream/URL item in the MLContextMenu
VLC allows a lot of customization options. The task was to add some preset layouts for the user to choose from. For this, I had to get familiar with Qt Widgets. I also had to learn how to use Qt Designer application to work with .ui files.
Commits:
- qt: add presets for selecting layout
- qt: add Customize Interface button
- qt: add tooltip for layout buttons
This feature allows user to toggle play/pause when clicked anywhere on the video screen. I also added a config option to disable this feature. A discussion is going on whether this option should be added to "Simple Preferences" or not. This will be merged after some other related patch will be merged.
Commits:
Whenever you move the mouse, the controlbar at the top and the bottom of the player becomes visible. In case of interactive videos, the controlbar may overlap with the interactive element of the video and can be quite annoying. This merge request adds a button to toggle control bar visibility in case of interactive videos.
Commits: