qml: separate loading and empty component in BrowseTreeDisplay

modules/gui/qt/network/qml/BrowseTreeDisplay.qml

@@ -57,7 +57,7 @@ MainInterface.MainViewLoader {
     grid: gridComponent
     list: tableComponent
 
-    loadingComponent: emptyLabelComponent
+    loadingComponent: busyIndicatorComponent
 
     emptyLabel: emptyLabelComponent
 
@@ -313,98 +313,113 @@ MainInterface.MainViewLoader {
     Component {
         id: emptyLabelComponent
 
-        FocusScope {
-            id: focusScope
+        StandardView {
+            view: Widgets.EmptyLabelButton {
+                id: emptyLabel
 
-            // NOTE: This is required to pass the focusReason when the current view changes in
-            //       MainViewLoader.
-            property int focusReason: (header.activeFocus) ? header.focusReason
-                                                           : emptyLabel.focusReason
+                visible: !root.isLoading
 
-            Navigation.navigable: layout.Navigation.navigable || (emptyLabel.visible && emptyLabel.button.enabled)
+                // FIXME: find better cover
+                cover: VLCStyle.noArtVideoCover
+                coverWidth : VLCStyle.dp(182, VLCStyle.scale)
+                coverHeight: VLCStyle.dp(114, VLCStyle.scale)
 
-            // used by MainDisplay to transfer focus
-            function setCurrentItemFocus(reason) {
-                if (!Navigation.navigable)
-                    return
+                text: qsTr("Nothing to see here, go back.")
 
-                if (header.Navigation.navigable)
-                    Helpers.enforceFocus(header, reason)
-                else
-                    Helpers.enforceFocus(emptyLabel, reason)
-            }
+                button.iconTxt: VLCIcons.back
+                button.text: qsTr("Back")
+                button.enabled: !History.previousEmpty
+                button.width: button.implicitWidth
 
-            ColumnLayout {
-                id: layout
+                function onNavigate(reason) {
+                    History.previous(reason)
+                }
 
-                anchors.fill: parent
+                Layout.fillHeight: true
+                Layout.fillWidth: true
 
-                BrowseTreeHeader {
-                    id: header
+                Navigation.parentItem: root
+            }
+        }
+    }
+
+    Component {
+        id: busyIndicatorComponent
 
-                    focus: true
+        StandardView {
+            view: Item {
+                Navigation.navigable: false
 
-                    providerModel: root.model
+                visible: root.isLoading
 
-                    Layout.fillWidth: true
+                Layout.fillHeight: true
+                Layout.fillWidth: true
 
-                    Navigation.parentItem: root
-                    Navigation.downItem: emptyLabel
+                Widgets.BusyIndicatorExt {
+                    id: busyIndicator
+
+                    runningDelayed: root.isLoading
+                    anchors.centerIn: parent
+                    z: 1
                 }
+            }
+        }
+    }
 
-                Widgets.EmptyLabelButton {
-                    id: emptyLabel
+    // Helper view i.e a ColumnLayout with BrowseHeader
+    component StandardView : FocusScope {
+        required property Item view
 
-                    visible: !root.isLoading
+        // NOTE: This is required to pass the focusReason when the current view changes in
+        //       MainViewLoader.
+        property int focusReason: (header.activeFocus) ? header.focusReason
+                                                       : view?.focusReason ?? Qt.NoFocusReason
 
-                    // FIXME: find better cover
-                    cover: VLCStyle.noArtVideoCover
-                    coverWidth : VLCStyle.dp(182, VLCStyle.scale)
-                    coverHeight: VLCStyle.dp(114, VLCStyle.scale)
+        // used by MainDisplay to transfer focus
+        function setCurrentItemFocus(reason) {
+            if (!Navigation.navigable)
+                return
 
-                    text: qsTr("Nothing to see here, go back.")
+            if (header.Navigation.navigable)
+                Helpers.enforceFocus(header, reason)
+            else
+                Helpers.enforceFocus(view, reason)
+        }
 
-                    button.iconTxt: VLCIcons.back
-                    button.text: qsTr("Back")
-                    button.enabled: !History.previousEmpty
-                    button.width: button.implicitWidth
+        onViewChanged: {
+            if (layout.children.length === 2)
+                layout.children.pop()
 
-                    function onNavigate(reason) {
-                        History.previous(reason)
-                    }
+            layout.children.push(view)
+            view.Navigation.upAction = function () {
+                // FIXME: for some reason default navigation flow doesn't work
+                // i.e setting Navigtaion.upItem doesn't fallthrough to parent's
+                // action if it's navigable is false
 
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
+                if (header.Navigation.navigable)
+                    header.forceActiveFocus(Qt.BacktabFocusReason)
+                else
+                    return false // fallthrough default action
+            }
+        }
 
-                    Navigation.parentItem: root
-                    Navigation.upAction: function () {
-                        // FIXME: for some reason default navigation flow doesn't work
-                        // i.e setting Navigtaion.upItem doesn't fallthrough to parent's
-                        // action if Navigtaion.upItem.Navigtaion.navigble is false
+        ColumnLayout {
+            id: layout
 
-                        if (header.Navigation.navigable)
-                            header.forceActiveFocus(Qt.TabFocusReason)
-                        else
-                            return false // fallthrough default action
-                    }
-                }
+            anchors.fill: parent
 
-                Item {
-                    visible: root.isLoading
+            BrowseTreeHeader {
+                id: header
 
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
+                focus: true
 
-                    Widgets.BusyIndicatorExt {
-                        id: busyIndicator
+                providerModel: root.model
 
-                        runningDelayed: root.isLoading
-                        anchors.centerIn: parent
-                        z: 1
-                    }
-                }
+                Layout.fillWidth: true
+
+                Navigation.parentItem: root
+                Navigation.downItem: (view.Navigation.navigable) ? view : null
             }
         }
-
     }
 }