[vlc-commits] qml: use table view for list mode in NetworkBrowseDisplay

Prince Gupta git at videolan.org
Thu Aug 27 12:44:16 CEST 2020


vlc | branch: master | Prince Gupta <guptaprince8832 at gmail.com> | Wed Aug 19 18:29:36 2020 +0530| [3e49e4e37102f0fedfaba2c590dab224f7fafcab] | committer: Pierre Lamot

qml: use table view for list mode in NetworkBrowseDisplay

Signed-off-by: Pierre Lamot <pierre at videolabs.io>

> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=3e49e4e37102f0fedfaba2c590dab224f7fafcab
---

 .../gui/qt/network/qml/NetworkBrowseDisplay.qml    | 162 +++++++++++++++------
 1 file changed, 120 insertions(+), 42 deletions(-)

diff --git a/modules/gui/qt/network/qml/NetworkBrowseDisplay.qml b/modules/gui/qt/network/qml/NetworkBrowseDisplay.qml
index 4b737710e7..98eae1d94b 100644
--- a/modules/gui/qt/network/qml/NetworkBrowseDisplay.qml
+++ b/modules/gui/qt/network/qml/NetworkBrowseDisplay.qml
@@ -20,6 +20,7 @@ import QtQuick.Controls 2.4
 import QtQml.Models 2.2
 import QtQuick.Layouts 1.3
 import QtQml 2.11
+import QtGraphicalEffects 1.0
 
 import org.videolan.vlc 0.1
 import org.videolan.medialib 0.1
@@ -208,60 +209,118 @@ Widgets.NavigableFocusScope {
     }
 
     Component{
-        id: listComponent
-        Widgets.KeyNavigableListView {
-            id: listView
-            height: view.height
-            width: view.width
-            model: providerModel
-
-            delegate: NetworkListItem {
-                id: delegateList
-                focus: true
-
-                selected: selectionModel.isSelected( providerModel.index(index, 0) )
-                Connections {
-                    target: selectionModel
-                    onSelectionChanged: delegateList.selected = selectionModel.isSelected(providerModel.index(index, 0))
+        id: tableComponent
+
+        Widgets.KeyNavigableTableView {
+            id: tableView
+
+            readonly property int _nbCols: VLCStyle.gridColumnsForWidth(tableView.availableRowWidth)
+            readonly property int _nameColSpan: Math.max((_nbCols - 1) / 2, 1)
+            property Component thumbnailHeader: Item {
+                Widgets.IconLabel {
+                    height: VLCStyle.listAlbumCover_height
+                    width: VLCStyle.listAlbumCover_width
+                    horizontalAlignment: Text.AlignHCenter
+                    text: VLCIcons.album_cover
+                    color: VLCStyle.colors.caption
                 }
+            }
 
-                onItemClicked : {
-                    selectionModel.updateSelection( modifier, view.currentItem.currentIndex, index )
-                    view.currentItem.currentIndex = index
-                    delegateList.forceActiveFocus()
-                }
+            property Component thumbnailColumn: Item {
+                id: item
+
+                property var rowModel: parent.rowModel
+                property var model: parent.colModel
+                readonly property bool currentlyFocused: parent.currentlyFocused
+                readonly property bool containsMouse: parent.containsMouse
+                readonly property int index: parent.index
+
+                Rectangle {
+                    id: background
+
+                    color: VLCStyle.colors.bg
+                    width: VLCStyle.listAlbumCover_width
+                    height: VLCStyle.listAlbumCover_height
+                    visible: !artwork.visible
+
+                    Image {
+                        id: custom_cover
+
+                        anchors.centerIn: parent
+                        sourceSize.height: VLCStyle.icon_small
+                        sourceSize.width: VLCStyle.icon_small
+                        fillMode: Image.PreserveAspectFit
+                        mipmap: true
+                        source: {
+                            switch (rowModel.type){
+                            case NetworkMediaModel.TYPE_DISC:
+                                return  "qrc:///type/disc.svg"
+                            case NetworkMediaModel.TYPE_CARD:
+                                return  "qrc:///type/capture-card.svg"
+                            case NetworkMediaModel.TYPE_STREAM:
+                                return  "qrc:///type/stream.svg"
+                            case NetworkMediaModel.TYPE_PLAYLIST:
+                                return  "qrc:///type/playlist.svg"
+                            case NetworkMediaModel.TYPE_FILE:
+                                return  "qrc:///type/file_black.svg"
+                            default:
+                                return "qrc:///type/directory_black.svg"
+                            }
+                        }
+                    }
 
-                onItemDoubleClicked: {
-                    if (model.type === NetworkMediaModel.TYPE_NODE || model.type === NetworkMediaModel.TYPE_DIRECTORY)
-                        history.push( ["mc", "network", { tree: model.tree } ])
-                    else
-                        providerModel.addAndPlay( index )
+                    ColorOverlay {
+                        anchors.fill: custom_cover
+                        source: custom_cover
+                        color: VLCStyle.colors.text
+                        visible: rowModel.type !== NetworkMediaModel.TYPE_DISC
+                                 && rowModel.type !== NetworkMediaModel.TYPE_CARD
+                                 && rowModel.type !== NetworkMediaModel.TYPE_STREAM
+                    }
                 }
 
-                onContextMenuButtonClicked: {
-                    contextMenu.model = providerModel
-                    contextMenu.selectionModel = selectionModel
-                    contextMenu.popup(menuParent)
+                Image {
+                    id: artwork
+
+                    x: (width - paintedWidth) / 2
+                    y: (height - paintedHeight) / 2
+                    width: VLCStyle.listAlbumCover_width
+                    height: VLCStyle.listAlbumCover_height
+                    fillMode: Image.PreserveAspectFit
+                    horizontalAlignment: Image.AlignLeft
+                    verticalAlignment: Image.AlignTop
+                    source: item.rowModel.artwork
+                    visible: item.rowModel.artwork && item.rowModel.artwork.toString() !== ""
+                    mipmap: true
                 }
 
-                onActionLeft: root.navigationLeft(0)
-                onActionRight: root.navigationRight(0)
+                Widgets.PlayCover {
+                    x: artwork.visible ? artwork.x : background.x
+                    y: artwork.visible ? artwork.y : background.y
+                    width: artwork.visible ? artwork.paintedWidth : background.width
+                    height: artwork.visible ? artwork.paintedHeight : background.height
+                    iconSize: VLCStyle.play_cover_small
+                    visible: currentlyFocused || containsMouse
+                    onIconClicked: providerModel.addAndPlay(item.index)
+                    onlyBorders: rowModel.type === NetworkMediaModel.TYPE_NODE || rowModel.type === NetworkMediaModel.TYPE_DIRECTORY
+                }
             }
 
+            height: view.height
+            width: view.width
+            model: providerModel
+            selectionDelegateModel: selectionModel
             focus: true
-            spacing: VLCStyle.margin_xxxsmall
-
-            onSelectAll: selectionModel.selectAll()
-            onSelectionUpdated: selectionModel.updateSelection( keyModifiers, oldIndex, newIndex )
-            onActionAtIndex: _actionAtIndex(index)
-
+            headerColor: VLCStyle.colors.bg
             navigationParent: root
-            navigationUpItem: listView.headerItem
+            navigationUpItem: tableView.headerItem
             navigationCancel: function() {
                 history.previous()
             }
 
-            header:  Widgets.LabelSeparator {
+            rowHeight: VLCStyle.listAlbumCover_height + VLCStyle.margin_xxsmall * 2
+
+            header: Widgets.LabelSeparator {
                 text: providerModel.name
                 width: view.width
 
@@ -280,9 +339,28 @@ Widgets.NavigableFocusScope {
                 navigationUpItem: root.navigationUpItem
                 navigationDown: function() {
                     focus = false
-                    listView.forceActiveFocus()
+                    tableView.forceActiveFocus()
                 }
             }
+
+            sortModel: [
+                { criteria: "thumbnail", width: VLCStyle.colWidth(1), headerDelegate: tableView.thumbnailHeader, colDelegate: tableView.thumbnailColumn },
+                { isPrimary: true, criteria: "name", width: VLCStyle.colWidth(tableView._nameColSpan), text: i18n.qtr("Name") },
+                { criteria: "mrl", width: VLCStyle.colWidth(Math.max(tableView._nbCols - tableView._nameColSpan - 1), 1), text: i18n.qtr("Url"), showContextButton: true },
+            ]
+
+            onActionForSelection: _actionAtIndex(selection[0].row)
+            onItemDoubleClicked: {
+                if (model.type === NetworkMediaModel.TYPE_NODE || model.type === NetworkMediaModel.TYPE_DIRECTORY)
+                    history.push( ["mc", "network", { tree: model.tree } ])
+                else
+                    providerModel.addAndPlay( index )
+            }
+            onContextMenuButtonClicked: {
+                contextMenu.model = providerModel
+                contextMenu.selectionModel = selectionModel
+                contextMenu.popup(menuParent)
+            }
         }
     }
 
@@ -291,7 +369,7 @@ Widgets.NavigableFocusScope {
         anchors.fill:parent
         clip: true
         focus: true
-        initialItem: medialib.gridView ? gridComponent : listComponent
+        initialItem: medialib.gridView ? gridComponent : tableComponent
 
         Connections {
             target: medialib
@@ -299,7 +377,7 @@ Widgets.NavigableFocusScope {
                 if (medialib.gridView)
                     view.replace(gridComponent)
                 else
-                    view.replace(listComponent)
+                    view.replace(tableComponent)
             }
         }
 



More information about the vlc-commits mailing list