qml: refactor NetworkList view's custom thumbnail into separate Widget

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

modules/gui/qt/Makefile.am

@@ -647,6 +647,7 @@ libqt_plugin_la_QML = \
 	gui/qt/network/qml/NetworkHomeDisplay.qml \
 	gui/qt/network/qml/NetworkHomeDeviceListView.qml \
 	gui/qt/network/qml/NetworkListItem.qml \
+	gui/qt/network/qml/NetworkThumbnailItem.qml \
 	gui/qt/network/qml/ServicesHomeDisplay.qml \
 	gui/qt/player/qml/ControlBar.qml \
 	gui/qt/player/qml/ControlButtons.qml \

modules/gui/qt/network/qml/NetworkBrowseDisplay.qml

@@ -187,84 +187,8 @@ Widgets.NavigableFocusScope {
                 }
             }
 
-            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"
-                            }
-                        }
-                    }
-
-                    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
-                    }
-                }
-
-                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
-                }
-
-                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
-                }
+            property Component thumbnailColumn: NetworkThumbnailItem {
+                onPlayClicked: providerModel.addAndPlay(index)
             }
 
             height: view.height

modules/gui/qt/network/qml/NetworkThumbnailItem.qml

+/*****************************************************************************
+ * Copyright (C) 2020 VLC authors and VideoLAN
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * ( at your option ) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
+ *****************************************************************************/
+
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import QtQml.Models 2.2
+import QtGraphicalEffects 1.0
+
+import org.videolan.vlc 0.1
+import org.videolan.medialib 0.1
+
+import "qrc:///widgets/" as Widgets
+import "qrc:///style/"
+
+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
+
+    signal playClicked(var 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"
+                }
+            }
+        }
+
+        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
+        }
+    }
+
+    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
+    }
+
+    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: playClicked(item.index)
+        onlyBorders: rowModel.type === NetworkMediaModel.TYPE_NODE
+                     || rowModel.type === NetworkMediaModel.TYPE_DIRECTORY
+    }
+}

modules/gui/qt/vlc.qrc

@@ -238,6 +238,7 @@
         <file alias="NetworkBrowseDisplay.qml">network/qml/NetworkBrowseDisplay.qml</file>
         <file alias="NetworkGridItem.qml">network/qml/NetworkGridItem.qml</file>
         <file alias="NetworkListItem.qml">network/qml/NetworkListItem.qml</file>
+        <file alias="NetworkThumbnailItem.qml">network/qml/NetworkThumbnailItem.qml</file>
         <file alias="ServicesHomeDisplay.qml">network/qml/ServicesHomeDisplay.qml</file>
     </qresource>
     <qresource prefix="/medialibrary">