GSoC 2018 Final Evaluation - VLC macOS interface redesign

Vibhoothi

2018-08-09

Hi all,

This blog post contains all relevant work I did in summer with VideoLAN on “macOS interface redesign” project.

image200c

Title of the project

VLC macOS Interface redesign

Synopsis

The project aims to revamp VLC’s user interface for macOS and improve the user experience. It introduces the media center (aka. the libraryView), which provides users with a whole new way to browse and play video files on their computers. A new control system for video playback was also developed.

My task as a GSoC Student was to implement a libraryView or mediaCenter view inside VLC with Service Discovery (loading videos into the mediaCenter) with help of CollectionView.

The Team

image500c

From left: Vibhoothi, Daksh ,Jean-Baptiste ,Felix , David

The VideoLAN community as a whole was really helpful responding very positively to my queries on Freenode #vlc,#vlc-ports,#vlc-gsoc.

What I did

After been accepted at VideoLAN as GSoC 208 student I first worked on an Icecast Patch,“Add Icecast streaming to streaming gui” that helped me learn more about the code base and the standards and more importantly coding conventions that are used which I was not familiar.

During first evaluation part, I had my University Exam so I wasn’t active first  1 and half weeks.After my exams on 29th of May, I have resumed work, as most of the time of day I was working,I think I worked more than 10 hours on most of the days as I was mostly idle and  had no other work to do, even though I took few hour breaks in between to watch some TV series,

The patch was about introducing an Icecast streaming option into the Streaming GUI of Convert/Save, Following things was done as part of the patch which can be seen in “icecast#8” branch of vlc/gsoc/macosx,

During the first week of June, I flew to Frankfurt, Germany for a face-to-face meeting with the team to finalise the plans we wanted to do. After the meeting, I have started working on implementing the libraryView starting off first by removing the sidebar,splitView and podcasts from VLCMainWindow cocoa class. For refactoring the codebase I had to first understand the full working of the _VLCMainWindow _class, Fortunately, in the face-to-face meeting, the team clarified my uncertainty about what I needed to remove and keep.

The following things were also done as part of first steps for making collectionView

After refactoring the code Felix helped me to refactor the more complex parts. Also he added an empty basic collectionView (adding a basic NSCollectionView) to adapt further, which helped me to make smoother progress.

Then I started playing with the collectionView which was the end of the First Phase of the project.

The second phase of the project was more like making a proper collectionView or libraryView advance using modern APIs

So as part of making an advance collectionView, we raised the minimum OS requirement of VLC from macOS 10.10 to 10.11. This allowed for very flexible collection view with advanced properties like NSFlowLayout, collection view delegates. It also has very useful APIs like “didSelectItemsAtIndexPaths”, “numberOfItemsInSection”, “itemForRepresentedObjectAtIndexPath”, and “numberOfSectionsInCollectionView”, which will make the implementation of the libraryView simpler and cleaner.

The main problems trying to delegate the following NSCollectionViewDelegate protocol as an object. Earlier I used mouseDown to track any selection states, but I later figured out that the cell should not handle this state but the NSCollectionView and its delegate instead. Earlier I had been using drawRect to colourize the NSView, but later did it AppKit where I just had to setup the background colour and rest will be done nicely by AppKit itself. Also, we made several changes to VLC Xcode Project to adapt the libraryView

Few notable things in the advancement part are below,

These things spanned up through the midterms.

In the Third and Final phase was the real implementation of the libraryView.

The following are some notable and important changes as part of the final phase:

This commit introduces a minimal popOver with a button into the collectionView (aka. LibraryView), which shows all metaData information of the video when the user clicks the button.

Fully revamp the current implementation of the libraryView with proper Guidelines of MVC so now there is a dataModel which is passed to VLCMainWindowCollectionViewItem with assignValueForDataModel with dataModel as an argument.

Make and use only one instance of dataModel for showing items inside libraryView This also fixes the regression of 264754b3 . Also worth noting is that the loading performance increased marginally after this patch.

Introduce thumbnails to VLC’s libraryView which is now loaded from a local directory. This commit also introduces videoTitle field below to video thumbnail in libraryView

To wrap up the final phase work, I present the final prototype:

image500c

Final Prototype of the libraryView

This wraps up my summer work. It was really great and I had an immense learning experience. I would like to express my sincere thanks to both David and Felix for constantly supporting and guiding me when I was stuck. Even when I brought up very basic doubts they were kind to explain them to me. Also, I would love to say special thanks to Jean Kempf(j-b), ePirat and all others from VideoLAN community who helped me. Last but not least, I would like to thank everyone who sent me their good wishes

My Next Plans after GSoC

After the GSoC, I would really love to continue working on this project and maintain the libraryView and all the things which I did for the community. From the project proposal and from the face to face meeting we had some ideas like introducing a list mode which is found on iOS or formally known as the Play-Queue,Implementing a Audio Player coupled with collectionView, having a seperate section for Internet where users can play videos from YouTube,Vimeo etc and lastly and most important part which was outside scope of project, implementing the libraryView using libVLC core libraries and APIs instead of the dummyData with nice animations and blending option to make the libraryView ready to be shipped with VLC 4.0.

Currently I have only contributed to small parts of the VLC media player, I am planning to contribute to multiple platforms and multiple platforms where VLC is available from end of 2018.

Skills Acquired

Best Regards,

Vibhoothi