GSoC 2017: VLC for macOS interface redesign

Sat, Aug 26, 2017

This summer I’ve participated in the Google Summer of Code program, contributing to the VLC media player project by VideoLAN.

My project was the macOS interface redesign, below can be found a summary of the things that I did for my GSoC project:

Native HUD UI

In the past VLC used BGHUDAppKit for the controls on dark panels (HUD style), this library is not maintained since a very long time, so continuing to use it on recent macOS versions was not desired, given that since macOS 10.10+ the standard controls adapt accordingly, when used on HUD panels. Therefore BGHUDAppKit was removed and the relevant controll subclassed we needed were copied from BGHUDAppKit and adapted, to only use them on macOS versions lower than 10.10, where the native controls do not adapt.

Relevant commits:

Custom tinted image buttons

On some views, like the fullscreen controller HUD, tinted buttons are necessary on < 10.10.

A new feature in 3.0 will be renderers, for easy selection of renderers in the macOS interface, I’ve implemented a menu that shows all available renderers. It works similar to the macOS WiFi menu.

Time Slider

VLC has a completely custom slider at the bottom of the main window. In the past this was done by overlaying multiple image views over the actual slider. I removed this and instead made a subclass of NSSliderCell, which uses custom drawing to look how it is needed.

Volume Slider

The Volume slider of VLC can go further than 100%, the user needs a indication when 100% were reached. For this purpose the slider has a tickmark at 100%, but in the past the snapping to the tickmark was not working properly, snapping at the position of the cursor instead of the center of the knob, which could lead to it snapping to values that are not 100%, but 102% or 98%.

NSSlider does not allow an arbitrary positioned tickmark, therefore I had to write a subclass of NSSliderCell which allows that.

Additionally the volume slider uses a custom look, therefore I wrote another subclass, which is a subclass of the VLCDefaultSliderCell

Window bottom bar

The bottom part of the VLC window has a border, which resembles the macOS window border. In the past this was done using images, I’ve replaced this with a simple NSGradient drawing view.

Code cleanup

In addition to the new things I’ve added, I did a lot of minor code cleanup and fixes: