modules/gui/qt/Makefile.am

@@ -860,6 +860,8 @@ libqt_plugin_la_QML = \
 	gui/qt/network/qml/NetworkListItem.qml \
 	gui/qt/network/qml/NetworkThumbnailItem.qml \
 	gui/qt/network/qml/ServicesHomeDisplay.qml \
+	gui/qt/network/qml/ServicesManage.qml \
+	gui/qt/network/qml/ServicesSources.qml \
 	gui/qt/player/qml/qmldir \
         gui/qt/player/qml/Bookmarks.qml \
 	gui/qt/player/qml/ControlBar.qml \

modules/gui/qt/network/qml/ServicesHomeDisplay.qml

@@ -37,10 +37,10 @@ Widgets.PageLoader {
 
     pageModel: [{
         name: "all",
-        component: allSourcesComponent
+        url: "qrc:///network/ServicesSources.qml"
     }, {
         name: "services_manage",
-        component: servicesManageComponent
+        url: "qrc:///network/ServicesManage.qml"
     }, {
         name: "source_root",
         component: sourceRootComponent
@@ -156,252 +156,4 @@ Widgets.PageLoader {
             }
         }
     }
-
-
-    Component {
-        id: servicesManageComponent
-
-        Widgets.KeyNavigableListView {
-            id: servicesView
-
-            readonly property bool isViewMultiView: false
-
-            model: discoveryFilterModel
-            topMargin: VLCStyle.margin_large
-            leftMargin: VLCStyle.margin_large
-            rightMargin: VLCStyle.margin_large
-            spacing: VLCStyle.margin_xsmall
-
-            // To get blur effect while scrolling in mainview
-            displayMarginEnd: g_mainDisplay.displayMargin
-
-            delegate: Rectangle {
-                width: servicesView.width - VLCStyle.margin_large * 2
-                height: row.implicitHeight + VLCStyle.margin_small * 2
-                color: VLCStyle.colors.bgAlt
-
-                onActiveFocusChanged: if (activeFocus) action_btn.forceActiveFocus()
-
-                RowLayout {
-                    id: row
-
-                    spacing: VLCStyle.margin_xsmall
-                    anchors.fill: parent
-                    anchors.margins: VLCStyle.margin_small
-
-                    Image {
-
-                        width: VLCStyle.icon_large
-                        height: VLCStyle.icon_large
-                        fillMode: Image.PreserveAspectFit
-                        source: model.artwork
-
-                        Layout.alignment: Qt.AlignLeft | Qt.AlignTop
-                    }
-
-                    ColumnLayout {
-                        id: content
-
-                        spacing: 0
-                        Layout.fillWidth: true
-                        Layout.fillHeight: true
-
-                        RowLayout {
-                            spacing: 0
-
-                            Layout.fillWidth: true
-                            Layout.fillHeight: true
-
-                            Column {
-                                Layout.fillWidth: true
-                                Layout.fillHeight: true
-
-                                Widgets.SubtitleLabel {
-                                    text: model.name
-                                    width: parent.width
-                                }
-
-                                Widgets.CaptionLabel {
-                                    color: VLCStyle.colors.text
-                                    text: model.author ? I18n.qtr("by <b>%1</b>").arg(model.author) : I18n.qtr("by <b>Unknown</b>")
-                                    topPadding: VLCStyle.margin_xxxsmall
-                                    width: parent.width
-                                }
-                            }
-
-                            Widgets.TabButtonExt {
-                                id: action_btn
-
-                                focus: true
-                                iconTxt: model.state === ServicesDiscoveryModel.INSTALLED ? VLCIcons.del : VLCIcons.add
-                                busy: model.state === ServicesDiscoveryModel.INSTALLING || model.state === ServicesDiscoveryModel.UNINSTALLING
-                                text: {
-                                    switch(model.state) {
-                                    case ServicesDiscoveryModel.INSTALLED:
-                                        return I18n.qtr("Remove")
-                                    case ServicesDiscoveryModel.NOTINSTALLED:
-                                        return I18n.qtr("Install")
-                                    case ServicesDiscoveryModel.INSTALLING:
-                                        return I18n.qtr("Installing")
-                                    case ServicesDiscoveryModel.UNINSTALLING:
-                                        return I18n.qtr("Uninstalling")
-                                    }
-                                }
-
-                                onClicked: {
-                                    if (model.state === ServicesDiscoveryModel.NOTINSTALLED)
-                                        discoveryModel.installService(discoveryFilterModel.mapIndexToSource(index))
-                                    else if (model.state === ServicesDiscoveryModel.INSTALLED)
-                                        discoveryModel.installService(discoveryFilterModel.mapIndexToSource(index))
-                                }
-                            }
-                        }
-
-                        Widgets.CaptionLabel {
-                            elide: Text.ElideRight
-                            text:  model.description || model.summary || I18n.qtr("No information available")
-                            topPadding: VLCStyle.margin_xsmall
-                            wrapMode: Text.WordWrap
-                            Layout.fillWidth: true
-                            Layout.preferredHeight: implicitHeight
-                        }
-
-                        Widgets.CaptionLabel {
-                            text: I18n.qtr("Score: %1/5  Downloads: %2").arg(model.score).arg(model.downloads)
-                            topPadding: VLCStyle.margin_xsmall
-                            Layout.fillWidth: true
-                        }
-                    }
-                }
-            }
-
-            Widgets.BusyIndicatorExt {
-                runningDelayed: discoveryModel.parsingPending
-                anchors.centerIn: parent
-                z: 1
-            }
-
-            ServicesDiscoveryModel {
-                id: discoveryModel
-
-                ctx: MainCtx
-            }
-
-            SortFilterProxyModel {
-                id: discoveryFilterModel
-
-                sourceModel: discoveryModel
-                searchRole: "name"
-            }
-
-        }
-    }
-
-    Component {
-        id: allSourcesComponent
-
-        MainInterface.MainGridView {
-            id: gridView
-
-            readonly property bool isViewMultiView: false
-
-            selectionDelegateModel: selectionModel
-            model: sourcesFilterModel
-            topMargin: VLCStyle.margin_large
-            cellWidth: VLCStyle.gridItem_network_width
-            cellHeight: VLCStyle.gridCover_network_height + VLCStyle.margin_xsmall + VLCStyle.fontHeight_normal
-
-            delegate: Widgets.GridItem {
-
-                property var model: ({})
-                property int index: -1
-                readonly property bool is_dummy: model.type === NetworkSourcesModel.TYPE_DUMMY
-
-                title: is_dummy ? I18n.qtr("Add a service") : model.long_name
-                subtitle: ""
-                pictureWidth: VLCStyle.colWidth(1)
-                pictureHeight: VLCStyle.gridCover_network_height
-                height: VLCStyle.gridCover_network_height + VLCStyle.margin_xsmall + VLCStyle.fontHeight_normal
-                playCoverBorderWidth: VLCStyle.gridCover_network_border
-                playCoverShowPlay: false
-                image: {
-                    if (is_dummy) {
-                        return SVGColorImage.colorize("qrc:///placeholder/add_service.svg")
-                            .color1(VLCStyle.colors.text)
-                            .accent(VLCStyle.colors.accent)
-                            .uri()
-                    } else if (model.artwork && model.artwork.toString() !== "") {
-                        //if the source is a qrc artwork, we should colorize it
-                        if (model.artwork.toString().match(/qrc:\/\/.*svg/))
-                        {
-                            return SVGColorImage.colorize(model.artwork)
-                                .color1(VLCStyle.colors.text)
-                                .accent(VLCStyle.colors.accent)
-                                .uri()
-                        }
-                        return model.artwork
-                    } else {
-                        return SVGColorImage.colorize("qrc:///sd/directory.svg")
-                                   .color1(VLCStyle.colors.text)
-                                   .uri()
-                    }
-                }
-
-                onItemDoubleClicked: {
-                    if (is_dummy)
-                        History.push(["mc", "discover", "services", "services_manage"]);
-                    else
-                        History.push(["mc", "discover", "services", "source_root",
-                                      { source_name: model.name }]);
-
-                    root.setCurrentItemFocus(Qt.MouseFocusReason);
-                }
-
-                onItemClicked : {
-                    selectionModel.updateSelection(modifier , gridView.currentIndex, index)
-                    gridView.currentIndex = index
-                    gridView.forceActiveFocus()
-                }
-            }
-
-            onActionAtIndex: {
-                var itemData = sourcesFilterModel.getDataAt(index);
-
-                if (itemData.type === NetworkSourcesModel.TYPE_DUMMY)
-                    History.push(["mc", "discover", "services", "services_manage"]);
-                else
-                    History.push(["mc", "discover", "services", "source_root",
-                                  { source_name: itemData.name }]);
-
-                root.setCurrentItemFocus(Qt.TabFocusReason);
-            }
-
-            Navigation.parentItem: root
-
-            Navigation.cancelAction: function() {
-                History.previous();
-
-                root.setCurrentItemFocus(Qt.TabFocusReason);
-            }
-
-            NetworkSourcesModel {
-                id: sourcesModel
-
-                ctx: MainCtx
-            }
-
-            Util.SelectableDelegateModel {
-                id: selectionModel
-
-                model: sourcesFilterModel
-            }
-
-            SortFilterProxyModel {
-                id: sourcesFilterModel
-
-                sourceModel: sourcesModel
-                searchRole: "name"
-            }
-        }
-    }
 }

modules/gui/qt/network/qml/ServicesManage.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.Layouts 1.11
+
+import org.videolan.vlc 0.1
+
+import "qrc:///widgets/" as Widgets
+import "qrc:///style/"
+
+Widgets.KeyNavigableListView {
+    id: servicesView
+
+    // required by g_root to indicate view with 'grid' or 'list' mode
+    readonly property bool isViewMultiView: false
+
+    model: discoveryFilterModel
+    topMargin: VLCStyle.margin_large
+    leftMargin: VLCStyle.margin_large
+    rightMargin: VLCStyle.margin_large
+    spacing: VLCStyle.margin_xsmall
+
+    // To get blur effect while scrolling in mainview
+    displayMarginEnd: g_mainDisplay.displayMargin
+
+    delegate: Rectangle {
+        width: servicesView.width - VLCStyle.margin_large * 2
+        height: row.implicitHeight + VLCStyle.margin_small * 2
+        color: VLCStyle.colors.bgAlt
+
+        onActiveFocusChanged: if (activeFocus) action_btn.forceActiveFocus()
+
+        RowLayout {
+            id: row
+
+            spacing: VLCStyle.margin_xsmall
+            anchors.fill: parent
+            anchors.margins: VLCStyle.margin_small
+
+            Image {
+
+                width: VLCStyle.icon_large
+                height: VLCStyle.icon_large
+                fillMode: Image.PreserveAspectFit
+                source: model.artwork
+
+                Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+            }
+
+            ColumnLayout {
+                id: content
+
+                spacing: 0
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+
+                RowLayout {
+                    spacing: 0
+
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+
+                    Column {
+                        Layout.fillWidth: true
+                        Layout.fillHeight: true
+
+                        Widgets.SubtitleLabel {
+                            text: model.name
+                            width: parent.width
+                        }
+
+                        Widgets.CaptionLabel {
+                            color: VLCStyle.colors.text
+                            textFormat: Text.StyledText
+                            text: model.author ? I18n.qtr("by <b>%1</b>").arg(model.author) : I18n.qtr("by <b>Unknown</b>")
+                            topPadding: VLCStyle.margin_xxxsmall
+                            width: parent.width
+                        }
+                    }
+
+                    Widgets.TabButtonExt {
+                        id: action_btn
+
+                        focus: true
+                        iconTxt: model.state === ServicesDiscoveryModel.INSTALLED ? VLCIcons.del : VLCIcons.add
+                        busy: model.state === ServicesDiscoveryModel.INSTALLING || model.state === ServicesDiscoveryModel.UNINSTALLING
+                        text: {
+                            switch(model.state) {
+                            case ServicesDiscoveryModel.INSTALLED:
+                                return I18n.qtr("Remove")
+                            case ServicesDiscoveryModel.NOTINSTALLED:
+                                return I18n.qtr("Install")
+                            case ServicesDiscoveryModel.INSTALLING:
+                                return I18n.qtr("Installing")
+                            case ServicesDiscoveryModel.UNINSTALLING:
+                                return I18n.qtr("Uninstalling")
+                            }
+                        }
+
+                        onClicked: {
+                            if (model.state === ServicesDiscoveryModel.NOTINSTALLED)
+                                discoveryModel.installService(discoveryFilterModel.mapIndexToSource(index))
+                            else if (model.state === ServicesDiscoveryModel.INSTALLED)
+                                discoveryModel.installService(discoveryFilterModel.mapIndexToSource(index))
+                        }
+                    }
+                }
+
+                Widgets.CaptionLabel {
+                    elide: Text.ElideRight
+                    text:  model.description || model.summary || I18n.qtr("No information available")
+                    topPadding: VLCStyle.margin_xsmall
+                    wrapMode: Text.WordWrap
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: implicitHeight
+                }
+
+                Widgets.CaptionLabel {
+                    text: I18n.qtr("Score: %1/5  Downloads: %2").arg(model.score).arg(model.downloads)
+                    topPadding: VLCStyle.margin_xsmall
+                    Layout.fillWidth: true
+                }
+            }
+        }
+    }
+
+    Widgets.BusyIndicatorExt {
+        runningDelayed: discoveryModel.parsingPending
+        anchors.centerIn: parent
+        z: 1
+    }
+
+    ServicesDiscoveryModel {
+        id: discoveryModel
+
+        ctx: MainCtx
+    }
+
+    SortFilterProxyModel {
+        id: discoveryFilterModel
+
+        sourceModel: discoveryModel
+        searchRole: "name"
+    }
+}

modules/gui/qt/network/qml/ServicesSources.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 QtQuick.Layouts 1.11
+
+import org.videolan.vlc 0.1
+
+import "qrc:///widgets/" as Widgets
+import "qrc:///util/" as Util
+import "qrc:///main/" as MainInterface
+import "qrc:///style/"
+
+MainInterface.MainGridView {
+    id: root
+
+    readonly property bool isViewMultiView: false
+
+    selectionDelegateModel: selectionModel
+    model: sourcesFilterModel
+    topMargin: VLCStyle.margin_large
+    cellWidth: VLCStyle.gridItem_network_width
+    cellHeight: VLCStyle.gridCover_network_height + VLCStyle.margin_xsmall + VLCStyle.fontHeight_normal
+
+    delegate: Widgets.GridItem {
+
+        property var model: ({})
+        property int index: -1
+        readonly property bool is_dummy: model.type === NetworkSourcesModel.TYPE_DUMMY
+
+        title: is_dummy ? I18n.qtr("Add a service") : model.long_name
+        subtitle: ""
+        pictureWidth: VLCStyle.colWidth(1)
+        pictureHeight: VLCStyle.gridCover_network_height
+        height: VLCStyle.gridCover_network_height + VLCStyle.margin_xsmall + VLCStyle.fontHeight_normal
+        playCoverBorderWidth: VLCStyle.gridCover_network_border
+        playCoverShowPlay: false
+        image: {
+            if (is_dummy) {
+                return SVGColorImage.colorize("qrc:///placeholder/add_service.svg")
+                    .color1(VLCStyle.colors.text)
+                    .accent(VLCStyle.colors.accent)
+                    .uri()
+            } else if (model.artwork && model.artwork.toString() !== "") {
+                //if the source is a qrc artwork, we should colorize it
+                if (model.artwork.toString().match(/qrc:\/\/.*svg/))
+                {
+                    return SVGColorImage.colorize(model.artwork)
+                        .color1(VLCStyle.colors.text)
+                        .accent(VLCStyle.colors.accent)
+                        .uri()
+                }
+                return model.artwork
+            } else {
+                return SVGColorImage.colorize("qrc:///sd/directory.svg")
+                           .color1(VLCStyle.colors.text)
+                           .uri()
+            }
+        }
+
+        onItemDoubleClicked: {
+            if (is_dummy)
+                History.push(["mc", "discover", "services", "services_manage"]);
+            else
+                History.push(["mc", "discover", "services", "source_root",
+                              { source_name: model.name }]);
+
+            root.setCurrentItemFocus(Qt.MouseFocusReason);
+        }
+
+        onItemClicked : {
+            selectionModel.updateSelection(modifier , root.currentIndex, index)
+            root.currentIndex = index
+            root.forceActiveFocus()
+        }
+    }
+
+    onActionAtIndex: {
+        var itemData = sourcesFilterModel.getDataAt(index);
+
+        if (itemData.type === NetworkSourcesModel.TYPE_DUMMY)
+            History.push(["mc", "discover", "services", "services_manage"]);
+        else
+            History.push(["mc", "discover", "services", "source_root",
+                          { source_name: itemData.name }]);
+
+        root.setCurrentItemFocus(Qt.TabFocusReason);
+    }
+
+    Navigation.parentItem: root
+
+    Navigation.cancelAction: function() {
+        History.previous();
+
+        root.setCurrentItemFocus(Qt.TabFocusReason);
+    }
+
+    NetworkSourcesModel {
+        id: sourcesModel
+
+        ctx: MainCtx
+    }
+
+    Util.SelectableDelegateModel {
+        id: selectionModel
+
+        model: sourcesFilterModel
+    }
+
+    SortFilterProxyModel {
+        id: sourcesFilterModel
+
+        sourceModel: sourcesModel
+        searchRole: "name"
+    }
+}

modules/gui/qt/vlc.qrc

@@ -231,6 +231,8 @@
         <file alias="NetworkThumbnailItem.qml">network/qml/NetworkThumbnailItem.qml</file>
         <file alias="NetworkAddressbar.qml">network/qml/NetworkAddressbar.qml</file>
         <file alias="ServicesHomeDisplay.qml">network/qml/ServicesHomeDisplay.qml</file>
+        <file alias="ServicesManage.qml">network/qml/ServicesManage.qml</file>
+        <file alias="ServicesSources.qml">network/qml/ServicesSources.qml</file>
     </qresource>
     <qresource prefix="/medialibrary">
         <file alias="EmptyLabel.qml">medialibrary/qml/EmptyLabel.qml</file>

modules/gui/qt/widgets/qml/TabButtonExt.qml

@@ -103,7 +103,7 @@ T.TabButton {
                 implicitWidth: VLCStyle.fontHeight_normal
                 implicitHeight: VLCStyle.fontHeight_normal
 
-                visible: (control.iconTxt !== "")
+                visible: (control.iconTxt !== "") || control.busy
 
                 Widgets.IconLabel {
                     id: icon
@@ -122,8 +122,11 @@ T.TabButton {
                     font.pixelSize: control.iconSize
                 }
 
+                // FIXME: use Control.Templates
                 BusyIndicator {
-                    anchors.centerIn: parent
+                    anchors.fill: parent
+
+                    padding: 0
 
                     running: control.busy
                 }