Leon Vitanos ([email protected])
Videolan
VLC Qt interface redesign
Pierre Lamot
For the summer of 2022, I participated as a Google Summer of Code student under VideoLan, by contributing to the popular VLC media player. VLC is a free and open source cross-platform multimedia player, supporting a wide range of video and audio formats, and various streaming protocols. Many consider it as the best media player on the desktop. VLC currently counts more than four billion downloads, with at least a hundred million active monthly users.
The project I was involved in, with the title “VLC Qt interface redesign”, aims to improve the newly designed interface for Windows and Linux. Although the user interface is simple, flexible and lightweight, it has become old and outdated. The next major release 4.0 features an interface redesign to match a modern look and feel. VLC follows a modular structure, with over 500 modules, which makes it convenient to get involved in its development. VLC 4.0 uses Qt Qml as the underlying framework for frontend and C++ for backend.
In this article, I will explain all the tasks I was assigned from my mentor Pierre Lamot. Pierre was the perfect mentor for me, since I admire his knowledge in the field and he was very responsive to my questions, even if sometimes I tend ask a lot 🙈. Our email timing was really convenient, since I am a night owl and I pushed my changes after midnight. In the morning I would always have responses to my questions before waking up, which I could work on through the day. I had the chance to meet with Pierre in Paris via a covered bus-trip from the Netherlands, where Jean-Baptiste came at the office to present me a workshop. I couldn't wish for a better mentor, and organization to work with!
In the Community Bonding Period I followed a QML course for beginners, to learn the foundations of QML cross platform development. Often throughout coding, I had to jump back to remember some of these concepts. Outside of the official QT documentation, I also read some chapters of this Qt5 book. The ‘Model-View-Delegate’ and ‘Qt and C++’ chapters were especially helpful.
When the coding period started, I had a video meeting with Pierre, where he showed me different features of VLC. After that I read the developer onbarding’s documentation for VLC, written by Pierre. I followed another course, this time an introduction to Git for GitLab projects, show that i would refresh my git knowledge and learn some new concepts like rebasing.
Patch 1 - Fix bugs on node/directory items
In this patch i fixed two bugs. I properly aligned an item if the secondary label was missing, and removed any use of the vlc://nop string on node/directory items as it didn't add any value.
| Before | After |
|---|---|
 |
 |
 |
|
Commits:
- 53306589 qml: properly align item if secondary label is missing (fix #26353)
- b7fe7d66 qml: hide the "vlc://nop" for node/directory items (fix #26354)
Patch 2 - Set correct color when CSD window buttons are pressed
When using the dark theme, pressing the CSD window buttons would make the background color darker instead of lighter
| Before | After |
|---|---|
 |
 |
Commits:
- 53306589 qml: set correct color when CSD pressed
Patch 3 - Redesign the no-media-library home page
This was originally my first assigned simple task, in order to get acquainted with the code base. Doing this task gave me the confidence that doing actual changes is not that hard!
I added an ‘Open File’ button at the no-media-library home page. After waiting for certain decisions from the designers, we also changed the icon of the drag-n-drop zone using a new artwork. Since the graphic was monochrome, I learned how to transform it into a font where each glyph corresponds to a pictogram. While adding the new artwork, i notice a lot of duplicate artworks. So i deleted 123 unused and obsolete artworks.
While doing task 1, I noticed a centering issue on a the EmptyLabelButton component, where it wouldn’t center properly, which I fixed.
| Before | After |
|---|---|
 |
 |
Commits:
- d1dd4bf9 qml: add 'Open File' button and change dropzone icon at the no-media-library homepage
- e8426b15 qml: fix centering issue with the EmptyLabelButton
- 5433a1a2 qt: remove unused and obsolete artworks
Patch 4 - Chapters UI redesign
This was my most enjoyable task. It made me understand the beauty of Qml components, and how difficult it is to optimize the code of your solution. Although from day two I had something visually close to an end result, it took 2-3 weeks to optimize it. It also introduced me to the backend development of VLC, which at that time was way out of my comfort zone.
From simple red lines, the end result is rectangles which change size on hover with a visually pleasing animation.
| Before | After |
|---|---|
 |
 |
Commits:
- 8ed9912b qt/qml: chapters UI redesign
- ce53cd1e qml: fix activeFocus issue by using invalidateFilter instead of invalidate
Patch 5 - Use GridView for network devices (merge not accepted)
Although the initial thought was to show the network devices into a GridView instead of a horizontal ListView, another developer mentioned that a GridView will instantiate all items, which has an expensive and poor performance. That's why this MR was not merged, and Pierre started working on a more complex solution, outside the scope of this MR.
Patch 6 - Delete KeyNavigableGridView
After trying to make KeyNavigableGridView work for patch 5, i understood (the hard way) that it's deprecated. Instead MainGridView had to be used, and KeyNavigableGridView to be deleted to avoid further confusion.
Commits:
- e78e9f2f delete KeyNavigableGridView
Patch 7 - Bookmarks bar, fix PointingTooltip bugs, SliderBar improvements
This patch was more difficult than the others, because outside of the amount of changes, i had a personal issue i had to deal with, a temporary mentor change (which had a different style of reviewing that i had to adjust) and two week vacations. All of these disoriented me and my productivity was not the highest.
Sliderbar improvements is a slight adjustment to patch 4, to make the slider handle resize as much as the slider does.
The PointingTooltip seemed to appear on the other side of the screen when it's x position would supposedly be lower than zero (e.g a bookmark in the first seconds of a video). This was apparent in the chapters feature, but especially on bookmarks it was really easy to replicate. I fixed it by "glueing" the tooltip to the edge when it's x would supposedly surpass that edge. Same for the arrow of the tooltip, which is not allowed to move outside of the tooltip box.
The bookmarks task was even bigger than the chapters UI redesign. This time the backend wasn't already prepared for the QML side, and i had to understand how to register a QML type, and properly expose the data to QML without breaking the backend. I made my first custom component (Bookmarks.qml), which changed a lot of times (icons used, position, behaviour, etc..). After it was finished, i had to make sure that this feature is only loaded when the medialibrary is available.
While creating the bookmarks component, i had to edit the ControlBar.qml a lot of times. The code it had was quit messy and difficult to understand, so i took the initiative to organize it and make it easier to understand.
| Before | After |
|---|---|
 |
 |
Commits:
- f8b01d54 qml: fix progressBar radius and sliderHandle size
- 57e820c5 qml: fix PointingTooltip position and arrow offset
- 3edfb1ac qt/qml: register MLBookmarkModel as QML type
- 69f7122b qml: improve ControlBar code
- 06dbadef qt/qml: syntax & indentation
- 1a010cf9 qt: disable add button on bookmarks dialog when media is stopped
- d3161967 qt/qml: implementation of bookmarks bar under the SliderBar
The current error message has several issues (pops up over miniplayer, no dismiss button, needs redesign). I started working on the error notification, which I redesigned and addded a counter on error messages that are repeated. There is still some work to do, like handling the miniplayer and showing all past errors in a dialog.