Prince Gupta ([email protected])
Videolan
VLC Desktop UI Improvement
Pierre Lamot, JB Kempf
Videolan's VLC is a free and open source cross-platform multimedia player that plays most multimedia files as well as Blu-ray, DVD, Audio CD, VCD, and various streaming protocols. Many have revered it as best media player on desktop. VLC's desktop user interface is simple, flexible and lightweight. Though with time, its desktop interface has become old and outdated. However, the current development branch was under major redesign process, but the most important views was still not properly updated to match a modern user interface. My project aimed to overhaul the current media player and implement the new designs.
VLC's old desktop interface was developed using QtWidgets, though very simple, flexible and quite fast, it has become quite outdated and doesn't fit with new design paradigms of fluency and simplicity. At some point of time, it was decided to implement a whole new VLC desktop interface aimed to be simpler, modern, more user friendly and at the same time add a better "media center" feel into it. The plan was to use Qt's QML for frontend and C++ for backend. At the time when I started, a large portion of basic ground work was already done but almost all of main views was still outdated and was not properly following established design guidelines for the project. In this summer I worked on these views.
It was an excellent learning experience. A huge thanks to my mentors Pierre Lamot and JB Kempf. Their advice and experience have been truly invaluable and helpful throughout these past four months.
GUI implementation at that time was following very loose and inconsistent spacing and layout sizes. So, my mentor Pierre introduced an idea to have common constants for width and margin, which can be used across GUI to assign such values. This patch implements that. I also added some premade widgets that can be used to add different types texts at different places in GUI.
This patchset implemented a "PlayCover" widget that was used to highlight selected row's cover image in table view or selected cell's cover image in case of a grid type view. It displays a play icon which can be clicked to play the media. This patch also fixed oversized columns of Video table view.
This patchset implemented special header and column delegates for duration type values. It adds an icon-based column header with centered aligned column texts. This also introduced required changes to different model implementations.
This patchset aimed to redesign table-type views with following changes - add separators between rows, center aligns whole row in the main view, changes the position of section texts to align with following row, allow consumers of this type view to define their own delegates per column and add and use special delegates for title type column. Additionally, it also converted music genre view to table-based view from list based.
Next, I moved to working on grid type views. Starting with the base widget "GridItem" which is used as cell in all grid type view. I changed how GridItem layouts items and at the same time add shadows and animation to the same.
Moving forward with working on grid type view, this patchset focused on overhauling different expand delegate implementations and their usage. Expand delegate occupies fixed height of Grid View and displays extra info about the selected item.
The goal of this patchset was reimplementation of Music Artist View. Initially it was a single page with artist list at left side and their albums and songs at other. This patchset adds a new page at starting which contains only artists and then change view to more detailed view.
This patch set focused on overhauling Music genre view. New way to generate genre cover was introduced.
This patchset aimed to redo top bar's layout and appearance. It shifts button from top most bar to bar below it. Removes history next button. Updates Icons from designs. Adds shadows and animation.
This patchset focused on improving network view. Fixes spacing between items and added margins where applicable. Changes how cover images are loaded for network items, fixing oversized icons and improper coloring. I also converted existing list-type view to table type.
This patchset adds sticky section label in top headers of table view.
This patchset makes artist list horizontally resizable. Also refactored playlist view to use same functionality.
| Before | After |
|---|---|
 |
 |
All of my work got merged in VLC's main repository, following are the commits
- b846c65a98 qml: use HorizontalResizeHandle to make playlist horizontally resizable
- 21fc590caa qml: make artist list horizontally resizable
- 8ec81503ea qml: introduce HorizontalResizehandle
- b4e4a65a65 qml: show 'Unknown Title' text when model value is unavailable in titleDelegate
- 0c0f914165 qml: use ListLabel component for section labels of KeyNavigableTableView
- c08f5767e6 qml: show top section of current view in header of KeyNavigableTableView
- c601091efe qml: add currentSection property to KeyNavigableListView
- 93dbbbdced qml: correctly set cellHeight for grid items in NetworkBrowseDisplay
- 844586c38f qml: use SubtitleLabel for headers in NetworkBrowseDisplay
- dda176f30b qml: implement play icon clicked for network grid items
- 3e49e4e371 qml: use table view for list mode in NetworkBrowseDisplay
- 7d53a42c8a qml: attach index property to column items of KeyNavigableTableView
- 3ad4a41c4e qml: use parent provided selection model in KeyNavigableTableView
- efc179e181 qml: load placeholder icons with size VLCStyle.icon_normal for NetworkGridItem
- bbefec5b03 qml: add spacing in between items of NetworkHomeListView
- 7322b5f044 qml: change NetworkHomeDisplay's content spacing to margin_small and add topPadding
- 8492d78fcd qml: add left and top padding in headers of NetworkHomeDisplay
- 73ddc10364 qml: use Subtitle label for headers in NetworkHomeDisplay
- 1b35e6e6cc qml: add index property to NetworkGridItem instance in ExpandGridView
- 2c1d800afe qml: change order of tabs in MusicDisplay
- c2c0cc2390 qml: use VLCColors.textDisabled color for disabled history button in top banner
- ba7c50a834 qml: use set height for search icon button in SearchBox
- 0102a229cb qml: add shadow to top Banner
- c344826056 qml: change background color of localMenuBar
- 9dbb4a3088 qml: use VLCIcons.ellipsis as menu icon in BannerSources
- e4018b3339 qml: use MenuCaption for texts in SortControl's context menu
- 84dbc85789 qml: smooth animation in SearchBox
- 94c906d245 qml: use VLCStyle's banner_icon_size constant for icon size in BannerSources
- aac2d4eb6f qml: add banner_icon_size constant to VLCStyle
- 4f028e687a qml: update icon resources used in topbar
- f51161b84a qml: remove history next button from topbar
- 7d1cdd38ac qml: rearrange items in BannerSources and resize rows
- 8614195fd8 qml: add topBarheight and pageBarHeight constants to VLCStyle
- 58d5de3d3f qml: use BannerTabButton for tabs in BannerSources
- 627a46aefe qml: introduce BannerTabButton widget
- a6246cb426 qml: fix sorting from topbar in MusicGenres
- adf018f674 qml: change cover width in list view for genres
- d57038da1d qml: use SubtitleLabel for header of Videos Grid view and align headers texts with content
- 15de3331e3 qml: fix keyboard action for table view of Music Genres
- 3b55343a8f qml: use SubtitleLabel for header of Genre albums view and align texts with content
- fa483e92e5 qml: export rowX property from ExpandGridView
- eba456ab4d qml: redesign genres grid items
- d5de61cfa9 qt: generate genre covers in 4x2 grid with blur and dark effects
- 7a83ea37d2 qml: remove 'Genre' text header from Genre view
- a9b877456c qml: use positioners instead of layout in GridItem
- 62758eb7eb qml: change background of artist list of MusicArtists
- 479b188c1e qml: add new page to artist view with only artists
- d24fe23fa5 qml: remove usage of selection model from artistList
- e8b335efc4 qml: center content in GridItems
- 9f2491e585 qml: allow changing picture radius and play icon size of GridItem
- 336a541c0c qml: introduce radius for artist covers in VLCStyle
- d020e5b449 qml: change MusicArtist headers to InlineHeader so that headers scrolls with content
- ebd3f340fb qml: add 'headerPositioning' property to KeyNavigableTableView
- 56897e59c6 qml: correct spacing and alignment of ListItem
- 614ff0f71d qml: add border to artist list item's cover images
- 5eb739cb81 qml: change artist list item's cover sizes to play_cover_small
- ee76dbae2a qml: respect loaded cover size in ListItem
- 5d1d4a859f qml: add 'Artists' text header to artistList in MusicArtistsDisplay
- 287e59be21 qml: fix back button for artist page
- a732f4bfc9 qml: don't base MusicArtist to MusicAlbums, create it separately
- 4d6db26117 qml: add setCurrentItemFocus function to ExpandGridView
- 3cd305f5f5 qml: add property textHorizontalAlignment to GridItem
- a8ba5735a5 qml: allow ScrollingText to manage center aligned text
- 145b49a74b qml: add leftMargin, rightMargin and rename marginTop and marginBottom to topMargin and bottomMargin respectively in ExpandGridView
- e2e0489247 qml: add leftMargin, rightMargin, topMargin and bottomMargin properties to KeyNavigableListView
- efd1759ddd qml: make 'selectedBorderWidth' property of GridItem public
- c28d9f4379 qml: refactor artist view from MusicArtistDisplay to separate component
- c6bb178383 qml: remove unnecessary property aliases and FocusScope from MusicArtistDisplay
- 7fcfc5c34f qml: redesign ArtistTopBanner
- b450601260 qml: add color constant for round play cover borders
- fc6fe05aec qml: add artistBanner_height constant to VLCStyle
- e4b4e7eb7f qml: add color property from TabButtonExt
- e66efd4e1b qt: add nbtracks property to artist model
- 9b71095bf8 qml: correctly propagate titleMargin property of GridItem
- cd2943d70e qml: have index as a property for items in ExpandGridView rather then separately attaching it through Object.defineProperty
- 6d272069eb qml: apply margintop and marginBottom properties when laying out items
- 051f711f35 qml: remove unused functions from VideoInfoExpandPanel
- 44613c2019 qml: redesign VideoInfoExpandPanel
- d9a6dc378b qml: add back icon in VLCIcons
- ee50e1f224 qml: expose video and audio description as separate properties in mlvideo
- 239c3370fe qml: redesign music expand delegate
- 342cff6e51 qml: expose spacing property in NavigableRow
- 87d444cc10 qml: add margin_xxlarge value to VLCStyle
- fe49aaf6bd qml: add cover sizes for Music Expand Delegate in VLCStyle
- 76e631aa8d qml: use IconLabel and MenuCaption widget in TabButtonExt
- 151e100967 qml: update play icon and add play_outline and enqueue icons to VLCIcons
- f24e451559 qml: apply horizontal and vertical spacing to ExpandItems in ExpandGridView
- fde06372a1 qml: make ExpandGridView.expandIndex public
- 905bf44be3 qml: fix expand delegate not showing up for video grid view
- 9afe08a7b7 qml: allow to only show borders of GridItem's play cover
- 8027b04242 qml: implement playClicked signals in AudioGridItem and VideoGridItem
- 36ac1cc291 qml: fix no cover for thumbnails in VideoListDisplay
- b58fcbda99 qml: add new indicator for GridItem
- 973dd7ad56 qml: add shadows to GridItems
- e8d00a95b5 qml: set ExpandGridView's spacing with column margins
- 971359b092 qml: update griditem properties
- 33a5e3157a qml: use MediaCover for image in GridItem
- 1b2b431d2b qml: allow arbitary text type in ScrollingText widget
- 41df7c94b8 qml: introduce MenuLabel widget
- 07f39b56aa qml: introduce MenuCaption widget
- 581d45fa39 qml: update GridItem's sizes according to grid system based upon designs
- 06feb0bfd2 qml: expose cover border width in MediaCover
- feff28a761 qml: remove isVideo, isNew, infoLeft and 'NEW' label from GridItem
- a3b288e09b qml: change music genre view from list based to table based
- 00eecfe3e7 qml: emit signal itemDoubleClicked for items in KeyNavigableTableView
- 7a2272e9d0 qml: use default column delegate in VideoListDisplay
- 13ce4ab4d6 qml: introduce MediaCover widget
- f50e3546b0 qml: add context menu in MusicTracksDisplay
- 14dc45d73a qml: change album list from list based to table based
- e1662eada4 qt: add property durationShort to album model
- 483648bd6c qt: add first_symbol model roles in album model
- 55eb9a6cf6 qt: move getFirstSymbol to MlBaseModel
- d7fc6bb880 qml: allow views to define Component to show before table headers in KeyNavigableTableView
- 7544444b03 qml: always show context button in last column of KeyNavigableTableView
- f87e7388c3 qml: transfer titleHeaderDelegate and titleDelegate to TableColumns
- 1b9ecee821 qml: leave space for section lables in KeyNavigableTableView
- fc47af42e8 qml: show separators between items in KeyNavigableTableView
- 58c0d38cf3 qml: centre align section of KeyNavigableTableView
- 9c8d6d283a qml: add separator color to VLCColors
- fb54e34fef qml: add table section width and margin to VLCStyle
- 4e72a40324 qml: change header sequence in VideoList
- f7936adf07 qml: use default colDelegate in MusicTrackListDisplay
- 2757af1ce8 qml: show icons as header and centre align text for duration column in MusicAlbumExpandView
- 8f9766c181 qml: show icons as header and centre align text for duration column in VideoList
- 8e26efd030 qml: show icons as header and centre align text for duration column in MusicTrackList
- e52c3db038 qml: provide specialized time header and column delegates for KeyNavigableTableView
- a8dc9e1489 qt: provide durationShort in video and album tracks model
- c98b8e8804 qml: use constants for Video and Music track list sizes
- 0b3ed042ce qml: add sizes for video and music tracklist in VLCStyle
- 79e4d6d749 qml: show bgHover color when row has focus in KeyNavigableTableView
- 2a67d1fcce qml: change bgHover of VLCColors to match designs
- 8fa5fe13fe qml: show play cover on VideoList cover images
- 0ea1f97966 qml: show play cover on MusicTrackList cover images
- c3b987f8b0 qml: add table cover border and cover icon size constants to KeyNavigableTableView
- 3b8a7527f1 qml: attach containsMouse and currentlyFocused property to delegates in KeyNavigableTableView
- 217007a453 qml: introduce PlayCover widget
- aba9b7d896 qml: show covers for album tracks
- fce4a4d031 qt: store thumbnails inside mlAlbumTrack
- 23173e0cbb qml: add albums_cover and time icon to VLCIcons
- ce8d3e45fa qml: allow header and selective column delegation in KeyNavigableTableView
- c2ca32b6c9 qml: introduce ListLabel
- 062fa6de9e qml: introduce IconLabel
- 809080b075 qml: introduce CaptionLabel
- 36c9a80841 qml: introduce fixed width column sizes in KeyNavigableTableView
- f091607387 qml: add column width and margin to VLCStyle
- 6c04b13430 qml: introduce horizontal and vertical spacing property in ExpandGridView
- 6a050b88a4 qml: provide extra padding for scroll bar in PlayListView
- 3c1d8d2020 qml: allow sorting through banner for music tracks
- 119a3c812e qml: Only show sort icon if a sort model is available