[vlc-devel] [PATCH 12/17] qml: change album list from list based to table based

[Prince Gupta]

---
 .../gui/qt/medialibrary/qml/MusicAlbums.qml   | 104 +++++++++++-------
 .../medialibrary/qml/MusicAlbumsDisplay.qml   |   5 -
 2 files changed, 62 insertions(+), 47 deletions(-)

diff --git a/modules/gui/qt/medialibrary/qml/MusicAlbums.qml b/modules/gui/qt/medialibrary/qml/MusicAlbums.qml
index b81275052a..3d331d92db 100644
--- a/modules/gui/qt/medialibrary/qml/MusicAlbums.qml
+++ b/modules/gui/qt/medialibrary/qml/MusicAlbums.qml
@@ -151,58 +151,78 @@ Widgets.NavigableFocusScope {
         }
     }
 
-    Component {
-        id: listComponent
-        /* ListView */
-        Widgets.KeyNavigableListView {
-            id: listView_id
-
-            header: root.header
+    Widgets.MenuExt {
+        id: contextMenu
+        property var model: ({})
+        closePolicy: Popup.CloseOnReleaseOutside | Popup.CloseOnEscape
+
+        Widgets.MenuItemExt {
+            id: playMenuItem
+            text: "Play from start"
+            onTriggered: {
+                medialib.addAndPlay( contextMenu.model.id )
+                history.push(["player"])
+            }
+        }
 
-            spacing: VLCStyle.margin_xxxsmall
+        Widgets.MenuItemExt {
+            text: "Enqueue"
+            onTriggered: medialib.addToPlaylist( contextMenu.model.id )
+        }
 
-            model: albumModelId
+        onClosed: contextMenu.parent.forceActiveFocus()
 
-            delegate: Widgets.ListItem {
-                id: listDelegate
+    }
 
-                width: root.width
-                height: VLCStyle.icon_normal + VLCStyle.margin_small
+    Component {
+        id: tableComponent
 
-                selected: selectionModel.isSelected(root.model.index(index, 0))
-                Connections {
-                   target: selectionModel
-                   onSelectionChanged: listDelegate.selected = selectionModel.isSelected(root.model.index(index, 0))
-                }
+        Widgets.KeyNavigableTableView {
+            id: tableView_id
 
-                cover: Image {
-                    id: cover_obj
-                    fillMode: Image.PreserveAspectFit
-                    source: model.cover || VLCStyle.noArtAlbum
-                    sourceSize: Qt.size(width, height)
-                }
-                line1: (model.title || i18n.qtr("Unknown title"))+" ["+model.duration+"]"
-                line2: model.main_artist || i18n.qtr("Unknown artist")
+            readonly property int _nbCols: VLCStyle.gridColumnsForWidth(tableView_id.availableRowWidth)
 
-                onItemClicked : {
-                    selectionModel.updateSelection( modifier, view.currentItem.currentIndex, index )
-                    view.currentItem.currentIndex = index
-                    this.forceActiveFocus()
-                }
-                onPlayClicked: medialib.addAndPlay( model.id )
-                onAddToPlaylistClicked : medialib.addToPlaylist( model.id )
-            }
+            model: albumModelId
+            headerColor: VLCStyle.colors.bg
+            onActionForSelection: _actionAtIndex(index)
+            navigationParent: root
+            section.property: "title_first_symbol"
+            header: root.header
 
-            onActionAtIndex: _actionAtIndex(index)
-            onSelectAll: selectionModel.selectAll()
-            onSelectionUpdated: selectionModel.updateSelection( keyModifiers, oldIndex, newIndex )
+            sortModel:  [
+                { isPrimary: true, criteria: "title", width: VLCStyle.colWidth(2), text: i18n.qtr("Title"), headerDelegate: tableColumns.titleHeaderDelegate, colDelegate: tableColumns.titleDelegate },
+                { criteria: "main_artist", width: VLCStyle.colWidth(Math.max(tableView_id._nbCols - 3, 1)), text: i18n.qtr("Artist") },
+                { criteria: "durationShort", width:VLCStyle.colWidth(1), showSection: "", headerDelegate: tableColumns.timeHeaderDelegate, colDelegate: tableColumns.timeColDelegate },
+            ]
 
-            navigationParent: root
             navigationCancel: function() {
-                if (listView_id.currentIndex <= 0)
+                if (tableView_id.currentIndex <= 0)
                     defaultNavigationCancel()
                 else
-                    listView_id.currentIndex = 0;
+                    tableView_id.currentIndex = 0;
+            }
+
+            onContextMenuButtonClicked: {
+                contextMenu.model = menuModel
+                contextMenu.popup(menuParent)
+            }
+
+            Widgets.TableColumns {
+                id: tableColumns
+            }
+
+            Connections {
+                target: albumModelId
+                onSortCriteriaChanged: {
+                    switch (albumModelId.sortCriteria) {
+                    case "title":
+                    case "main_artist":
+                        tableView_id.section.property = albumModelId.sortCriteria + "_first_symbol"
+                        break;
+                    default:
+                        tableView_id.section.property = ""
+                    }
+                }
             }
         }
     }
@@ -213,7 +233,7 @@ Widgets.NavigableFocusScope {
         anchors.fill: parent
         focus: albumModelId.count !== 0
 
-        initialItem: medialib.gridView ? gridComponent : listComponent
+        initialItem: medialib.gridView ? gridComponent : tableComponent
 
         Connections {
             target: medialib
@@ -221,7 +241,7 @@ Widgets.NavigableFocusScope {
                 if (medialib.gridView)
                     view.replace(gridComponent)
                 else
-                    view.replace(listComponent)
+                    view.replace(tableComponent)
             }
         }
 
diff --git a/modules/gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml b/modules/gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml
index c126566bc3..0df7edbe34 100644
--- a/modules/gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml
+++ b/modules/gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml
@@ -26,11 +26,6 @@ import "qrc:///widgets/" as Widgets
 MusicAlbums {
     id: root
 
-    header: Widgets.LabelSeparator {
-        text: i18n.qtr("Albums")
-        width: root.width
-    }
-
     onCurrentIndexChanged: {
         history.update(["mc","music", "albums", {"initialIndex": currentIndex}])
     }
-- 
2.25.1