Bugfixes for displaying media hubs

package/contents/ui/PexelsImageHub.qml

@@ -3,21 +3,24 @@ import QtQuick.Controls
 import QtQuick.Dialogs
 import QtQuick.Layouts
 
-import Komplex.Pexels.Image as Pexels
+import com.github.digitalartifex.komplex as Komplex
 
 Item
 {
+    property alias selectedFile: searchModel.lastSavedFile
+
     id: mainItem
     anchors.fill: parent
 
-    Pexels.SearchModel
+    Komplex.PexelsImageSearchModel
     {
         id: searchModel
     }
 
     ColumnLayout
     {
-        anchors.fill: parent
+        width: mainItem.width
+        height: mainItem.height
 
         RowLayout
         {
@@ -193,10 +196,14 @@ Item
                             Button
                             {
                                 Layout.topMargin: 4
-                                Layout.alignment: Qt.AlignRight
+                                Layout.alignment: Qt.AlignHCenter
                                 Layout.preferredHeight: 32
-                                Layout.preferredWidth: 32
+                                Layout.fillWidth: true
-                                icon.name: "emblem-downloads"
+                                text: "Download & Preview"
+                                
+                                icon.source: "./icons/download.svg"
+                                icon.name: "download-symbolic"
+
                                 onClicked: {
                                     downloadDialog.imageHeight = entry.originalHeight
                                     downloadDialog.imageWidth = entry.originalWidth
@@ -272,8 +279,9 @@ Item
     Rectangle
     {
         color: palette.base
-        anchors.fill: parent
+        width: mainItem.width
-        visible: searchModel.status === Pexels.SearchModel.Searching
+        height: mainItem.height
+        visible: searchModel.status === Komplex.PexelsImageSearchModel.Searching
 
         RowLayout
         {
@@ -360,7 +368,11 @@ Item
             {
                 Layout.fillWidth: true
                 text: "Download (" + downloadDialog.imageWidth + "x" + downloadDialog.imageHeight + ")"
-                icon.name: "image-symbolic"
+                icon.source: "./icons/download.svg"
+                icon.name: "download-symbolic"
+                hoverEnabled: true
+                ToolTip.text: "Download"
+                ToolTip.visible: hovered
 
                 onClicked: () =>
                 {

package/contents/ui/PexelsVideoHub.qml

@@ -1,10 +1,11 @@
+
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Dialogs
 import QtQuick.Layouts
 import QtMultimedia
 
-import Komplex.Pexels.Video as Pexels
+import com.github.digitalartifex.komplex as Komplex
 
 Item
 {
@@ -13,7 +14,7 @@ Item
     id: mainItem
     anchors.fill: parent
 
-    Pexels.SearchModel
+    Komplex.PexelsVideoSearchModel
     {
         id: searchModel
     }
@@ -191,7 +192,8 @@ Item
                                 Layout.alignment: Qt.AlignRight
                                 Layout.preferredHeight: 32
                                 Layout.fillWidth: true
-                                icon.name: "emblem-downloads"
+                                icon.name: "download-symbolic"
+                                icon.source: "./icons/download.svg"
                                 text: qsTr("Preview & Download")
 
                                 onClicked: () =>
@@ -277,7 +279,7 @@ Item
     {
         color: palette.base
         anchors.fill: parent
-        visible: searchModel.status === Pexels.SearchModel.Searching
+        visible: searchModel.status === Komplex.PexelsVideoSearchModel.Searching
 
         RowLayout
         {
@@ -434,6 +436,10 @@ Item
                                 Layout.preferredHeight: 18
                                 Layout.preferredWidth: 18
                                 icon.name: mediaPlayer.playing ? "stop-symbolic" : "play-symbolic"
+                                hoverEnabled: true
+                                ToolTip.text: mediaPlayer.playing ? "Play" : "Stop"
+                                ToolTip.visible: hovered
+                                icon.source: mediaPlayer.playing ? "./icons/stop.svg" : "./icons/play.svg"
                                 icon.height: 16
                                 icon.width: 16
                                 onClicked: () =>
@@ -476,7 +482,11 @@ Item
                     enabled: downloadSelector.currentIndex >= 0
                     Layout.preferredHeight: downloadSelector.height
                     Layout.preferredWidth: downloadSelector.height
-                    icon.name: "image-symbolic"
+                    icon.source: "./icons/download.svg"
+                    icon.name: "download-symbolic"
+                    hoverEnabled: true
+                    ToolTip.text: "Download"
+                    ToolTip.visible: hovered
 
                     id: downloadButton
 

package/contents/ui/ShaderChannelConfiguration.qml

@@ -55,6 +55,7 @@ Item
     property string imageFolder: shaderPackModel.imagesPath
     property string videoFolder: shaderPackModel.videosPath
     property string cubemapFolder: shaderPackModel.cubeMapsPath
+    property string sceneFolder: shaderPackModel.scenesPath
 
     property alias tmp_source: sourceEdit.text
     property int tmp_type: 1
@@ -111,7 +112,7 @@ Item
         {
             file: true
             name: "Image"
-            icon: "./icons/image.svg"
+            icon: "./icons/camera.svg"
             title: "Select an Image File"
             filter: "Image Files (*.jpg *.jpeg *.png *.svg *.gif *.tiff *.webp)"
             type: ShaderChannel.Type.ImageChannel
@@ -123,7 +124,7 @@ Item
             name: "Scene"
             icon: "./icons/image.svg"
             title: "Select a scene file"
-            filter: "Image Files (*.qml)"
+            filter: "QML Scene Files (*.qml)"
             type: ShaderChannel.Type.SceneChannel
         }
 
@@ -213,29 +214,36 @@ Item
                     window.selectionTitle = parent.title
                     window.file = parent.file
 
+                    var source = ""
+
+                    if(parent.type === window.type)
+                        source = window.source
+
                     switch(parent.type) 
                     {
-                        // case ShaderChannel.Type.AudioChannel:
-                        //     break;
                         case ShaderChannel.Type.CubeMapChannel:
                             window.currentFolder = window.cubemapFolder
-                            window.tmp_source = ""
+                            window.tmp_source = source
                             break;
                         case ShaderChannel.Type.ImageChannel:
                             window.currentFolder = window.imageFolder
-                            window.tmp_source = ""
+                            window.tmp_source = source
                             break;
                         case ShaderChannel.Type.ShaderChannel:
                             window.currentFolder = window.shaderFolder
-                            window.tmp_source = ""
+                            window.tmp_source = source
                             break;
                         case ShaderChannel.Type.VideoChannel:
                             window.currentFolder = window.videoFolder
-                            window.tmp_source = ""
+                            window.tmp_source = source
+                            break;
+                        case ShaderChannel.Type.SceneChannel:
+                            window.currentFolder = window.sceneFolder
+                            window.tmp_source = source
                             break;
                         case ShaderChannel.Type.AudioChannel:
                             window.currentFolder = window.videoFolder
-                            window.tmp_source = "Audio Channel"
+                            window.tmp_source = "Desktop Audio Channel"
                             break;
                     }
                 }
@@ -321,6 +329,32 @@ Item
                         folderDialog.open()
                 }
             }
+
+            Button
+            {
+                visible: window.tmp_type === ShaderChannel.ImageChannel
+                icon.name: "network-symbolic"
+                Layout.preferredWidth: Kirigami.Units.gridUnit * 2
+                Layout.preferredHeight: Kirigami.Units.gridUnit * 2
+
+                onClicked: 
+                {
+                    pexelsImageDialog.open()
+                }
+            }
+
+            Button
+            {
+                visible: window.tmp_type === ShaderChannel.VideoChannel
+                icon.name: "network-symbolic"
+                Layout.preferredWidth: Kirigami.Units.gridUnit * 2
+                Layout.preferredHeight: Kirigami.Units.gridUnit * 2
+
+                onClicked: 
+                {
+                    pexelsVideoDialog.open()
+                }
+            }
         }
 
         CheckBox 
@@ -582,6 +616,58 @@ Item
         onAccepted: window.tmp_source = selectedFolder
     }
 
+    Kirigami.OverlaySheet
+    {
+        title: "Pexels Image Import"
+        id: pexelsImageDialog
+        implicitWidth: 960
+        implicitHeight: 480
+        parent: applicationWindow().overlay
+
+        PexelsImageHub
+        {
+            id: pexelsImageHub 
+            width: pexelsVideoDialog.width - 10
+            height: pexelsVideoDialog.height - 40
+
+            onSelectedFileChanged:
+            {
+                window.tmp_source = pexelsImageHub.selectedFile
+
+                if(selectedFile === "" || selectedFile === undefined)
+                    return;
+
+                pexelsImageDialog.close()
+            }
+        }
+    }
+
+    Kirigami.OverlaySheet
+    {
+        title: "Pexels Video Import"
+        id: pexelsVideoDialog
+        implicitWidth: 960
+        implicitHeight: 480
+        parent: applicationWindow().overlay
+
+        PexelsVideoHub
+        {
+            id: pexelsVideoHub 
+            width: pexelsVideoDialog.width - 10
+            height: pexelsVideoDialog.height - 40
+
+            onSelectedFileChanged:
+            {
+                window.tmp_source = pexelsVideoHub.selectedFile
+
+                if(selectedFile === "" || selectedFile === undefined)
+                    return;
+
+                pexelsVideoDialog.close()
+            }
+        }
+    }
+
     function accept()
     {
         // copy over temp values

package/contents/ui/ShaderToyHub.qml

@@ -5,22 +5,26 @@ import QtQuick.Dialogs
 import QtQuick.Layouts
 import QtMultimedia
 import QtWebView
+import org.kde.kirigami as Kirigami
 
-import Komplex.ShaderToy as ShaderToy
+import com.github.digitalartifex.komplex as Komplex
 
 Item
 {
     id: mainItem
-    anchors.fill: parent
+    //anchors.fill: parent
 
-    ShaderToy.SearchModel
+    signal accepted
+
+    Komplex.ShaderToySearchModel
     {
         id: searchModel
     }
 
     ColumnLayout
     {
-        anchors.fill: parent
+        width: mainItem.width
+        height: mainItem.height
 
         RowLayout
         {
@@ -180,7 +184,8 @@ Item
                                 Layout.alignment: Qt.AlignRight
                                 Layout.preferredHeight: 32
                                 Layout.fillWidth: true
-                                icon.name: "emblem-downloads"
+                                icon.source: "./icons/download.svg"
+                                icon.name: "download-symbolic"
                                 text: qsTr("Preview & Download")
                                 onClicked: () =>
                                 {
@@ -231,7 +236,8 @@ Item
                                 Button
                                 {
                                     Layout.fillWidth: true
-                                    icon.name: "image-symbolic"
+                                    icon.source: "./icons/download.svg"
+                                    icon.name: "download-symbolic"
 
                                     id: downloadButton
                                     text: qsTr("Convert to Komplex Pack")
@@ -324,8 +330,10 @@ Item
     Rectangle
     {
         color: palette.base
-        anchors.fill: parent
+
-        visible: searchModel.status === ShaderToy.SearchModel.Searching || searchModel.status === ShaderToy.SearchModel.Compiling
+        width: mainItem.width
+        height: mainItem.height
+        visible: searchModel.status === Komplex.ShaderToySearchModel.Searching || searchModel.status === Komplex.ShaderToySearchModel.Compiling
 
         RowLayout
         {
@@ -333,7 +341,7 @@ Item
 
             Image
             {
-                visible: searchModel.status === ShaderToy.SearchModel.Compiling
+                visible: searchModel.status === Komplex.ShaderToySearchModel.Compiling
                 Layout.fillHeight: true
                 Layout.fillWidth: true
 
@@ -347,7 +355,7 @@ Item
                 text: searchModel.statusMessage
                 color: palette.text
                 elide: Text.ElideRight
-                visible: searchModel.status === ShaderToy.SearchModel.Compiling
+                visible: searchModel.status === Komplex.ShaderToySearchModel.Compiling
             }
 
             ProgressBar
@@ -355,7 +363,7 @@ Item
                 id: totalProgress
                 Layout.fillWidth: true
                 Layout.preferredHeight: 6
-                visible: searchModel.status === ShaderToy.SearchModel.Compiling
+                visible: searchModel.status === Komplex.ShaderToySearchModel.Compiling
             }
 
             Text
@@ -364,7 +372,7 @@ Item
                 text: qsTr(searchModel.downloadText)
                 color: palette.text
                 elide: Text.ElideRight
-                visible: searchModel.totalDownloads > 0 && searchModel.status === ShaderToy.SearchModel.Compiling
+                visible: searchModel.totalDownloads > 0 && searchModel.status === Komplex.ShaderToySearchModel.Compiling
             }
 
             ProgressBar
@@ -375,7 +383,7 @@ Item
                 from: 0
                 to: searchModel.totalDownloads
                 value: searchModel.completedDownloads
-                visible: searchModel.totalDownloads > 0 && searchModel.status === ShaderToy.SearchModel.Compiling
+                visible: searchModel.totalDownloads > 0 && searchModel.status === Komplex.ShaderToySearchModel.Compiling
             }
         }
 
@@ -389,32 +397,36 @@ Item
         }
     }
 
-    Rectangle
+    Kirigami.OverlaySheet
     {
         property int totalVideos: searchModel.videoSelections.length
         property int selectedVideos: 0
+        title: "Select Media"
+
+
+        implicitWidth: mainItem.width
+        implicitHeight: mainItem.height
 
-        anchors.fill: parent
-        color: palette.base
-        visible: searchModel.status === ShaderToy.SearchModel.Compiled
         enabled: visible
 
         id: mediaSelectionItem
 
         signal accepted
 
+        Connections
+        {
+            target: searchModel
+
+            function onStatusChanged()
+            {
+                if(searchModel.status === Komplex.ShaderToySearchModel.Compiled)
+                    mediaSelectionItem.open()
+            }
+        }
+
         ColumnLayout
         {
             anchors.fill: parent
-            Text
-            {
-                Layout.margins: 6
-                Layout.alignment: Qt.AlignTop
-                Layout.fillWidth: true
-                Layout.preferredHeight: 50
-                color: palette.text
-                text: "<h2>Select Media</h2>";
-            }
 
             Text
             {
@@ -428,6 +440,7 @@ Item
 
             Repeater
             {
+                Layout.alignment: Qt.AlignTop
                 Layout.fillWidth: true
                 Layout.margins: 6
                 model: searchModel.videoSelections
@@ -481,17 +494,20 @@ Item
                         }
                     }
 
-                    Dialog
+                    Kirigami.OverlaySheet
                     {
-                        width: 640
+                        implicitWidth: 640
-                        height: 480
+                        implicitHeight: 480
                         id: pexelsDialog
+                        title: "Pexels Video Search"
 
                         parent: mainItem
                         anchors.centerIn: parent
 
                         PexelsVideoHub
                         {
+                            width: pexelsDialog.width - 10
+                            height: pexelsDialog.height - 40
                             onSelectedFileChanged:
                             {
                                 mediaSelectionField.text = selectedFile
@@ -517,6 +533,8 @@ Item
                 color: "transparent"
                 Layout.fillHeight: true
                 Layout.fillWidth: true
+                Layout.minimumHeight: 50
+                Layout.alignment: Qt.AlignCenter
             }
 
             Button
@@ -531,11 +549,35 @@ Item
         }
     }
 
-    MessageDialog
+    Dialog
     {
-        buttons: MessageDialog.Ok
+        width: 420
+        height: 105
+
         id: warningDialog
-        text: searchModel.statusMessage
+        ColumnLayout
+        {
+            Text
+            {
+                id: header
+                text: "Installation Error"
+                font.pointSize: 14
+                color: palette.text
+            }
+            Text
+            {
+                id: informative
+                text: searchModel.statusMessage
+                font.pointSize: 10
+                color: palette.text
+            }
+            DialogButtonBox
+            {
+                Layout.alignment: Qt.AlignRight
+                standardButtons: DialogButtonBox.Ok
+                onAccepted: messageDialog.close()
+            }
+        }
 
         Connections
         {
@@ -544,7 +586,7 @@ Item
             {
                 console.log("Search Model Status " + searchModel.status)
 
-                if(searchModel.status === ShaderToy.SearchModel.Error)
+                if(searchModel.status === Komplex.ShaderToySearchModel.Error)
                 {
                     warningDialog.open();
                 }
@@ -552,11 +594,39 @@ Item
         }
     }
 
-    MessageDialog
+    Dialog
     {
-        buttons: MessageDialog.Ok
+        width: 420
+        height: 105
+
         id: messageDialog
-        text: searchModel.statusMessage
+        ColumnLayout
+        {
+            Text
+            {
+                id: header2
+                text: "Shader Installation"
+                font.pointSize: 14
+                color: palette.text
+            }
+            Text
+            {
+                id: informative2
+                text: searchModel.statusMessage
+                font.pointSize: 10
+                color: palette.text
+            }
+            DialogButtonBox
+            {
+                Layout.alignment: Qt.AlignRight
+                standardButtons: DialogButtonBox.Ok
+                onAccepted: 
+                {
+                    messageDialog.close()
+                    mainItem.accepted()
+                }
+            }
+        }
 
         Connections
         {

package/contents/ui/config.qml

@@ -256,8 +256,11 @@ Kirigami.FormLayout
         {
             id: packFileButton
             icon.name: "folder-symbolic"
-            text: i18nd("@button:toggle_select_shader", "Select File")
+            hoverEnabled: true
-            Layout.preferredWidth: Kirigami.Units.gridUnit * 8.5
+
+            ToolTip.visible: hovered
+            ToolTip.text: i18nd("@button:toggle_select_shader", "Select File")
+            Layout.preferredWidth: selectedShaderPack.height
             Layout.preferredHeight: selectedShaderPack.height
             onClicked: 
             {
@@ -266,6 +269,24 @@ Kirigami.FormLayout
             }
         }
 
+        Button 
+        {
+            id: shaderToyHubButton
+            icon.name: "network-symbolic"
+            hoverEnabled: true
+
+            ToolTip.visible: hovered
+            ToolTip.text: i18nd("@button:toggle_select_shader", "ShaderToy Import")
+            Layout.preferredWidth: selectedShaderPack.height
+            Layout.preferredHeight: selectedShaderPack.height
+            onClicked: 
+            {
+                // packDialog.currentFolder = "file://" + shaderPackModel.shaderPackInstallPath;
+                // packDialog.open();
+                komplexHubDialog.open()
+            }
+        }
+
         FileDialog 
         {
             id: packDialog
@@ -282,7 +303,29 @@ Kirigami.FormLayout
                 shaderPackModel.loadMetadataFromFile(selectedFile)
             }
         }
+
+        Kirigami.OverlaySheet 
+        {
+            title: "ShaderToy Import"
+            parent: applicationWindow().overlay
+            implicitHeight: 420
+            implicitWidth: 960
+            id: komplexHubDialog
+
+            ShaderToyHub
+            {
+                width: komplexHubDialog.width - 10
+                height: komplexHubDialog.height - 40
+
+                onAccepted:
+                {
+                    komplexHubDialog.close()
+                    shaderPackModel.refreshShaderPacks()
+                }
+            }
+        }
     }
+
     Kirigami.Separator 
     {
         Kirigami.FormData.isSection: false
@@ -358,9 +401,11 @@ Kirigami.FormLayout
 
     Kirigami.OverlaySheet 
     {
+        title: "Channel Configuration"
         id: shaderChannelOverlay0
         parent: applicationWindow().overlay
         implicitHeight: 420
+        implicitWidth: 960
 
         ShaderChannelConfiguration
         {
@@ -410,6 +455,7 @@ Kirigami.FormLayout
 
     Kirigami.OverlaySheet 
     {
+        title: "Channel Configuration"
         id: shaderChannelOverlay1
         parent: applicationWindow().overlay
         implicitHeight: 420
@@ -461,6 +507,7 @@ Kirigami.FormLayout
 
     Kirigami.OverlaySheet 
     {
+        title: "Channel Configuration"
         id: shaderChannelOverlay2
         parent: applicationWindow().overlay
         implicitHeight: 420
@@ -511,6 +558,7 @@ Kirigami.FormLayout
 
     Kirigami.OverlaySheet 
     {
+        title: "Channel Configuration"
         id: shaderChannelOverlay3
         parent: applicationWindow().overlay
         implicitHeight: 420