Fixed sliding cache issue. fixes: #1 closes: #1

App/CMakeLists.txt

@@ -8,7 +8,8 @@ target_link_libraries(${CMAKE_PROJECT_NAME} PRIVATE
     Qt${QT_VERSION_MAJOR}::Gui
     Qt${QT_VERSION_MAJOR}::Widgets
     Qt${QT_VERSION_MAJOR}::Quick
-    Qt${QT_VERSION_MAJOR}::Qml)
+    Qt${QT_VERSION_MAJOR}::Qml
+)
 
 if(ENABLE_ASAN)
   message(STATUS "Building with AddressSanitizer")

App/main.cpp

@@ -3,6 +3,9 @@
 
 #include <QApplication>
 #include <QQmlApplicationEngine>
+#include <QQmlNetworkAccessManagerFactory>
+#include <QNetworkAccessManager>
+#include <QNetworkReply>
 #include <qobject.h>
 #include <qqml.h>
 #include <QPalette>
@@ -15,7 +18,34 @@
 #include <QQuickWindow>
 #include <QSurfaceFormat>
 #include <QSGRendererInterface>
+#include <QScreen>
 #include "autogen/environment.h"
+#include "KomplexHubPlugin/common/komplex_global.h"
+
+#ifdef KOMPLEX_LOCAL_DEV
+class DebugNetworkAccessManagerFactory : public QQmlNetworkAccessManagerFactory
+{
+public:
+    QNetworkAccessManager *create(QObject *parent) override;
+};
+
+QNetworkAccessManager *DebugNetworkAccessManagerFactory::create(QObject *parent)
+{
+    QNetworkAccessManager *nam = new QNetworkAccessManager(parent);
+
+    QObject::connect
+    (
+        nam,
+        &QNetworkAccessManager::sslErrors,
+        nam,
+        [] (QNetworkReply *reply, const QList<QSslError> &errors)
+        {
+            reply->ignoreSslErrors();
+        }
+    );
+    return nam;
+}
+#endif
 
 int main(int argc, char *argv[])
 {
@@ -35,6 +65,10 @@ int main(int argc, char *argv[])
             QCoreApplication::exit(-1);
     }, Qt::QueuedConnection);
 
+#ifdef KOMPLEX_LOCAL_DEV
+    engine.setNetworkAccessManagerFactory(new DebugNetworkAccessManagerFactory);
+#endif
+
     engine.addImportPath(QCoreApplication::applicationDirPath() + "/qml");
     engine.addImportPath(":/");
     engine.load(url);

CMakeLists.txt

@@ -3,7 +3,7 @@ cmake_minimum_required(VERSION 3.21.1)
 
 option(LINK_INSIGHT "Link Qt Insight Tracker library" ON)
 option(BUILD_QDS_COMPONENTS "Build design studio components" ON)
- 
+
 project(KomplexHub LANGUAGES CXX) 
 
 list(APPEND CMAKE_MODULE_PATH "${CMAKE_CURRENT_SOURCE_DIR}" "${CMAKE_CURRENT_SOURCE_DIR}/cmake")
@@ -59,6 +59,17 @@ qt_add_resources(${CMAKE_PROJECT_NAME} "app_images"
         "images/icons/icons8-view-more.svg"
         "images/icons/icons8-video.svg"
         "images/icons/pexels-icon-filled-256.svg"
+        "images/icons/icons8-trash.svg"
+        "images/icons/icons8-download.svg"
+        "images/icons/icons8-play.svg"
+        "images/icons/icons8-stop.svg"
+        "images/icons/icons8-codepen.svg"
+        "images/icons/icons8-cube.svg"
+        "images/icons/icons8-camera.svg"
+        "images/icons/icons8-audio.svg"
+        "images/icons/icons8-3d-model.svg"
+        "images/icons/icons8-3d-glasses.svg"
+        "images/icons/kofi.gif"
         "images/kero/kero_build_1.png"
         "images/kero/kero_build_2.png"
         "images/kero/kero_build_3.png"
@@ -75,9 +86,14 @@ qt_add_resources(${CMAKE_PROJECT_NAME} "app_images"
         "images/kero/kero_run_4.png"
         "images/kero/kero_success.png"
         "images/kero/kero_warning.png"
-        "images/icons/icons8-trash.svg"
     )
 
+  target_compile_definitions(
+    ${CMAKE_PROJECT_NAME}
+    PUBLIC
+      KOMPLEX_LOCAL_DEV
+  )
+
 include(qds)
 
 option(ENABLE_ASAN "Enable AddressSanitizer" OFF)
@@ -128,4 +144,4 @@ install(TARGETS ${CMAKE_PROJECT_NAME}
   BUNDLE DESTINATION .
   LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
   RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
-)
+)

KomplexHubContent/CMakeLists.txt

@@ -17,8 +17,7 @@ qt6_add_qml_module(KomplexHubContent
         "pages/SettingsPage.qml"
         "pages/UserProfilePage.qml"
         "pages/WallpaperSettingsPage.qml"
-        QML_FILES pages/VideoSearchPage.qml
+        "pages/VideoSearchPage.qml"
-        QML_FILES views/ImageView.qml
 )
 
 

KomplexHubContent/MainScreen.qml

@@ -14,6 +14,7 @@ import KomplexHubContent
 
 Rectangle {
     property MenuButton currentMenuButton
+    property bool popup: false
 
     id: windowRoot
 
@@ -35,8 +36,43 @@ Rectangle {
 
             color: palette.base.lighter()
 
-            ColumnLayout {
+            ColumnLayout
+            {
+                height: popup ? 64 : 0
+                opacity: popup ? 1 : 0
+
+                MenuButton
+                {
+                    Layout.alignment: Qt.AlignTop
+
+                    height: 64
+                    width: 100
+                    text: qsTr("Back")
+
+                    icon.height: 32
+                    icon.width: 32
+                    icon.url: "qrc:/images/icons/icons8-reply-arrow.svg"
+
+                    onTriggered: () => {
+                        pageLoader.item.closePopup()
+                        selected = false
+                    }
+
+                    Behavior on opacity {
+                        NumberAnimation
+                        {
+                            duration: 250
+                        }
+                    }
+                }
+            }
+
+            ColumnLayout
+            {
+                opacity: popup ? 0 : 1
+                visible: opacity > 0.01
                 id: windowMenuLayout
+                Layout.fillHeight: true
                 anchors.fill: parent
 
                 MenuButton {
@@ -51,7 +87,8 @@ Rectangle {
                     icon.width: 32
                     icon.url: "qrc:/images/icons/icons8-famous.svg"
 
-                    onTriggered: () => {
+                    onTriggered: () =>
+                    {
                         pageLoader.page = "pages/HomePage.qml"
 
                         if(currentMenuButton !== null)
@@ -62,10 +99,12 @@ Rectangle {
                         currentMenuButton = this
 
                         searchContainer.preferredHeight = 0
+                        searchContainer.reset()
                     }
                 }
 
-                MenuButton {
+                MenuButton
+                {
                     Layout.alignment: Qt.AlignTop
 
                     height: 64
@@ -83,10 +122,12 @@ Rectangle {
                         currentMenuButton = this
 
                         searchContainer.preferredHeight = 50
+                        searchContainer.reset()
                     }
                 }
 
-                MenuButton {
+                MenuButton
+                {
                     Layout.alignment: Qt.AlignTop
 
                     height: 64
@@ -104,10 +145,12 @@ Rectangle {
                         currentMenuButton = this
 
                         searchContainer.preferredHeight = 50
+                        searchContainer.reset()
                     }
                 }
 
-                MenuButton {
+                MenuButton
+                {
                     Layout.alignment: Qt.AlignTop
 
                     height: 64
@@ -125,11 +168,12 @@ Rectangle {
                         currentMenuButton = this
 
                         searchContainer.preferredHeight = 50
-                        // searchContainer.searchTerm = pageLoader.page.query
+                        searchContainer.reset()
                     }
                 }
 
-                MenuButton {
+                MenuButton
+                {
                     Layout.alignment: Qt.AlignTop
 
                     height: 64
@@ -147,14 +191,18 @@ Rectangle {
                         currentMenuButton = this
 
                         searchContainer.preferredHeight = 0
+                        searchContainer.reset()
                     }
                 }
 
-                Item {
+                Item
+                {
                     Layout.fillHeight: true
+                    Layout.minimumHeight: 100
                 }
 
-                MenuButton {
+                MenuButton
+                {
                     Layout.alignment: Qt.AlignBottom
 
                     height: 64
@@ -172,14 +220,22 @@ Rectangle {
                         currentMenuButton = this
 
                         searchContainer.preferredHeight = 0
+                        searchContainer.reset()
+                    }
+                }
+
+                Behavior on opacity
+                {
+                    NumberAnimation
+                    {
+                        duration: 250
                     }
                 }
             }
         }
 
-        Rectangle {
+        Rectangle
-
+        {
-            //Kirigami.Theme.colorSet: Kirigami.Theme.View
             id: windowContainer
 
             Layout.fillHeight: true
@@ -187,12 +243,14 @@ Rectangle {
 
             color: "transparent"
 
-            ColumnLayout {
+            ColumnLayout
+            {
                 id: windowContainerLayout
                 anchors.fill: parent
                 spacing: 0
 
-                SearchBar {
+                SearchBar
+                {
                     property int preferredHeight: 50
                     id: searchContainer
                     color: palette.base.lighter()
@@ -203,7 +261,8 @@ Rectangle {
 
                     icon: "qrc:/images/icons/icons8-search.svg"
 
-                    onSearchTermChanged: () => {
+                    onSearchTermChanged: () =>
+                    {
                         pageLoader.setSearchTerm()
                     }
 
@@ -212,7 +271,8 @@ Rectangle {
                     }
                 }
 
-                Rectangle {
+                Rectangle
+                {
                     id: windowContent
 
                     Layout.fillHeight: true
@@ -222,20 +282,23 @@ Rectangle {
 
                     color: palette.base.darker()
 
-                    Loader {
+                    Loader
+                    {
                         property bool loading: false
                         property string page
 
                         anchors.fill: parent
 
-                        onPageChanged: () => {
+                        onPageChanged: () =>
+                        {
                             loading = true
                             fadeOutPage()
                         }
 
                         id: pageLoader
 
-                        OpacityAnimator on opacity {
+                        OpacityAnimator on opacity
+                        {
                             id: pageLoaderAnimation
 
                             target: pageLoader
@@ -250,6 +313,7 @@ Rectangle {
                                 {
                                     pageLoader.loading = false
                                     pageLoader.updateSearchTerm();
+                                    popupConnection.target = pageLoader.item
                                 }
                             }
                         }
@@ -334,6 +398,17 @@ Rectangle {
         opacity: 0
     }
 
+    Connections
+    {
+        id: popupConnection
+        target: pageLoader.item
+
+        function onPopupChanged()
+        {
+            windowRoot.popup = pageLoader.item.popup
+        }
+    }
+
     Component.onCompleted: () => {
         homeMenubutton.selected = true
         currentMenuButton = homeMenubutton
@@ -359,6 +434,15 @@ Rectangle {
         },
         State {
             name: "build_complete"
+        },
+        State
+        {
+            name: "popup"
+            when: popup
+            PropertyChanges {
+                target: searchContainer
+                preferredHeight: 0
+            }
         }
 
     ]

KomplexHubContent/pages/HomePage.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.15
+import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Effects
@@ -14,6 +14,16 @@ Item
     property int resultsPerRow: (homePageRoot.width - (64 + Constants.largeMargin)) / (resultWidth + Constants.largeMargin) + 1
     property int resultWidth: 256
     property int resultHeight: 245
+    property bool popup: false
+    property bool loading: packsModel.state === NewestPacksModel.Loading ||
+                           imagesModel.state === FeaturedImagesModel.Loading ||
+                           videosModel.state === FeaturedVideosModel.Loading;
+
+    onWidthChanged:() => {
+        packsModel.resultsPerPage = resultsPerRow
+        imagesModel.resultsPerPage = resultsPerRow
+        videosModel.resultsPerPage = resultsPerRow
+    }
 
     clip: true
 
@@ -22,19 +32,19 @@ Item
     NewestPacksModel
     {
         id: packsModel
-        resultsPerPage: homePageRoot.resultsPerRow
+        resultsPerPage: 0
     }
 
     FeaturedImagesModel
     {
         id: imagesModel
-        resultsPerPage: homePageRoot.resultsPerRow
+        resultsPerPage: 0
     }
 
     FeaturedVideosModel
     {
         id: videosModel
-        resultsPerPage: homePageRoot.resultsPerRow
+        resultsPerPage: 0
     }
 
     Rectangle
@@ -45,6 +55,7 @@ Item
         ColumnLayout
         {
             id: resultsLayout
+            visible: opacity > 0.01
             anchors.fill: parent
             anchors.margins: Constants.mediumMargin
 
@@ -90,13 +101,19 @@ Item
                         thumbnail: parent.thumbnail
                         uuid: parent.uuid
 
-                        selected: parent.highlighted
+                        selected: packsPaginator.currentIndex === parent.index
-                    }
 
-                    MouseArea
+                        onTriggered: () => packsPaginator.currentIndex = parent.index
-                    {
+
-                        anchors.fill: parent
+                        onViewMoreTriggered: () =>
-                        onClicked: () => packsPaginator.currentIndex = index
+                        {
+                            showWallpaperPopup(parent.index)
+                        }
+
+                        onThumbnailChanged: () =>
+                        {
+                            console.log(index + " " + thumbnail + " " + parent.thumbnail)
+                        }
                     }
                 }
             }
@@ -131,6 +148,7 @@ Item
                     required property string uuid
                     required property string thumbnail
                     required property string authorId
+                    required property int index
 
                     SearchResultItem
                     {
@@ -140,13 +158,14 @@ Item
                         thumbnail: parent.thumbnail
                         uuid: parent.uuid
                         pexels: true
-                        selected: parent.highlighted
+                        selected: imagesPaginator.currentIndex === parent.index
-                    }
 
-                    MouseArea
+                        onTriggered: () => imagesPaginator.currentIndex = parent.index
-                    {
+
-                        anchors.fill: parent
+                        onViewMoreTriggered: () =>
-                        onClicked: () => imagesPaginator.currentIndex = index
+                        {
+                            showImagePopup(parent.index)
+                        }
                     }
                 }
             }
@@ -181,6 +200,7 @@ Item
                     required property string authorId
                     required property string authorUrl
                     required property string thumbnail
+                    required property int index
 
                     SearchResultItem
                     {
@@ -189,13 +209,10 @@ Item
                         thumbnail: parent.thumbnail
                         uuid: parent.uuid
                         pexels: true
-                        selected: parent.highlighted
+                        selected: videosPaginator.currentIndex === parent.index
-                    }
 
-                    MouseArea
+                        onTriggered: () => videosPaginator.currentIndex = parent.index
-                    {
+                        onViewMoreTriggered:() => showVideoPopup(parent.index)
-                        anchors.fill: parent
-                        onClicked: () => videosPaginator.currentIndex = index
                     }
                 }
             }
@@ -221,12 +238,73 @@ Item
         opacity: 1
     }
 
+    Rectangle
+    {
+        id: popupContainer
+        anchors.fill: parent
+        opacity: 0
+        visible: opacity > 0.01
+        color: palette.base
+
+        ImageView
+        {
+            id: viewMoreImagePopup
+            anchors.fill: parent
+            opacity: 0
+            visible: opacity > 0.01
+
+            Behavior on opacity {
+                NumberAnimation
+                {
+                    duration: 250
+                }
+            }
+        }
+
+        VideoView
+        {
+            id: viewMoreVideoPopup
+            anchors.fill: parent
+            opacity: 0
+            visible: opacity > 0.01
+            //model: videosModel.itemModel
+
+            Behavior on opacity {
+                NumberAnimation
+                {
+                    duration: 250
+                }
+            }
+        }
+
+        PackView
+        {
+            id: viewMoreWallpaperPopup
+            anchors.fill: parent
+            opacity: 0
+            visible: opacity > 0.01
+            //model: videosModel.itemModel
+
+            Behavior on opacity {
+                NumberAnimation
+                {
+                    duration: 250
+                }
+            }
+        }
+
+        Behavior on opacity {
+            NumberAnimation
+            {
+                duration: 250
+            }
+        }
+    }
+
     states: [
         State {
             name: "loading"
-            when: packsModel.state === NewestPacksModel.Loading ||
+            when: homePageRoot.loading
-                  imagesModel.state === FeaturedImagesModel.Loading ||
-                  videosModel.state === FeaturedVideosModel.Loading;
 
             PropertyChanges
             {
@@ -239,6 +317,12 @@ Item
                 target: resultsLayout
                 opacity: 0
             }
+
+            PropertyChanges
+            {
+                target: popupContainer
+                opacity: 0
+            }
         },
         State {
             name: "idle"
@@ -267,7 +351,7 @@ Item
             to: "idle"
             NumberAnimation
             {
-                target: loadingOverlay
+                target: loadingAnimation
                 duration: 250
                 property: "opacity";
             }
@@ -279,4 +363,63 @@ Item
             }
         }
     ]
+
+    function showImagePopup(index)
+    {
+        viewMoreImagePopup.author = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.AuthorRole)
+        viewMoreImagePopup.authorUrl = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.AuthorUrlRole)
+        viewMoreImagePopup.description = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.DescriptionRole)
+        viewMoreImagePopup.uuid = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.UuidRole)
+        viewMoreImagePopup.thumbnail = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.LargeThumbnailRole)
+        viewMoreImagePopup.original = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.OriginalUrlRole)
+        viewMoreImagePopup.portrait = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.PortraitUrlRole)
+        viewMoreImagePopup.landscape = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.LandscapeUrlRole)
+        viewMoreImagePopup.backgroundPortrait = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.BackgroundPortraitRole)
+        viewMoreImagePopup.backgroundLandscape = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.BackgroundLandscapeRole)
+        viewMoreImagePopup.fullScreen = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.ScreenUrlRole)
+        viewMoreImagePopup.portraitSize = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.PortraitSizeRole)
+        viewMoreImagePopup.landscapeSize = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.LandscapeSizeRole)
+        viewMoreImagePopup.fullScreenSize = imagesModel.data(imagesModel.index(index,0), FeaturedImagesModel.ScreenSizeRole)
+        viewMoreImagePopup.opacity = 1
+        popupContainer.opacity = 1
+        resultsLayout.opacity = 0
+        homePageRoot.popup = true
+    }
+
+    function showVideoPopup(index)
+    {
+        videosModel.setItem(index)
+        viewMoreVideoPopup.author = videosModel.data(videosModel.index(index,0), FeaturedVideosModel.AuthorRole)
+        viewMoreVideoPopup.authorUrl = videosModel.data(videosModel.index(index,0), FeaturedVideosModel.AuthorUrlRole)
+        viewMoreVideoPopup.uuid = videosModel.data(videosModel.index(index,0), FeaturedVideosModel.UuidRole)
+        viewMoreVideoPopup.thumbnail = videosModel.data(videosModel.index(index,0), FeaturedVideosModel.ThumbnailRole)
+        viewMoreVideoPopup.modelIndex = index
+        viewMoreVideoPopup.model = videosModel.itemModel
+        viewMoreVideoPopup.opacity = 1
+        resultsLayout.opacity = 0
+        popupContainer.opacity = 1
+        homePageRoot.popup = true
+    }
+
+    function showWallpaperPopup(index)
+    {
+        viewMoreWallpaperPopup.author = packsModel.data(packsModel.index(index,0), NewestPacksModel.AuthorRole)
+        viewMoreWallpaperPopup.authorId = packsModel.data(packsModel.index(index,0), NewestPacksModel.AuthorIdRole)
+        viewMoreWallpaperPopup.description = packsModel.data(packsModel.index(index,0), NewestPacksModel.DescriptionRole)
+        viewMoreWallpaperPopup.thumbnail = packsModel.data(packsModel.index(index,0), NewestPacksModel.ThumbnailRole)
+        viewMoreWallpaperPopup.opacity = 1
+        popupContainer.opacity = 1
+        resultsLayout.opacity = 0
+        homePageRoot.popup = true
+    }
+
+    function closePopup()
+    {
+        viewMoreImagePopup.opacity = 0
+        viewMoreVideoPopup.opacity = 0
+        viewMoreWallpaperPopup.opacity = 0
+        popupContainer.opacity = 0
+        resultsLayout.opacity = 1
+        homePageRoot.popup = false
+    }
 }

KomplexHubContent/pages/ImageSearchPage.qml

@@ -13,6 +13,9 @@ Item
 
     property string query
     readonly property bool searchable: paginator.searchable
+    property bool popup: false
+    property int resultWidth: 256
+    property int resultHeight: 245
 
     ImageSearchModel
     {
@@ -32,8 +35,8 @@ Item
         {
             id: resultDelegate
 
-            width: 256
+            width: resultWidth
-            height: 245
+            height: resultHeight
 
             required property string author
             required property string description
@@ -49,15 +52,75 @@ Item
                 description: parent.description
                 thumbnail: parent.thumbnail
                 uuid: parent.uuid
+                pexels: true
+                selected: paginator.currentIndex === parent.index
 
-                selected: resultDelegate.highlighted
+                onTriggered: () => paginator.currentIndex = parent.index
-            }
 
-            MouseArea
+                onViewMoreTriggered: () =>
-            {
+                {
-                anchors.fill: parent
+                    showImagePopup(parent.index)
-                onClicked: paginator.currentIndex = index
+                }
             }
         }
     }
+
+    Rectangle
+    {
+        id: popupContainer
+        anchors.fill: parent
+        opacity: 0
+        color: palette.base
+
+        ImageView
+        {
+            id: viewMoreImagePopup
+            anchors.fill: parent
+            opacity: 0
+
+            Behavior on opacity {
+                NumberAnimation
+                {
+                    duration: 250
+                }
+            }
+        }
+
+        Behavior on opacity {
+            NumberAnimation
+            {
+                duration: 250
+            }
+        }
+    }
+
+    function showImagePopup(index)
+    {
+        viewMoreImagePopup.author = searchModel.data(searchModel.index(index,0), ImageSearchModel.AuthorRole)
+        viewMoreImagePopup.authorUrl = searchModel.data(searchModel.index(index,0), ImageSearchModel.AuthorUrlRole)
+        viewMoreImagePopup.description = searchModel.data(searchModel.index(index,0), ImageSearchModel.DescriptionRole)
+        viewMoreImagePopup.uuid = searchModel.data(searchModel.index(index,0), ImageSearchModel.UuidRole)
+        viewMoreImagePopup.thumbnail = searchModel.data(searchModel.index(index,0), ImageSearchModel.LargeThumbnailRole)
+        viewMoreImagePopup.original = searchModel.data(searchModel.index(index,0), ImageSearchModel.OriginalUrlRole)
+        viewMoreImagePopup.portrait = searchModel.data(searchModel.index(index,0), ImageSearchModel.PortraitUrlRole)
+        viewMoreImagePopup.landscape = searchModel.data(searchModel.index(index,0), ImageSearchModel.LandscapeUrlRole)
+        viewMoreImagePopup.backgroundPortrait = searchModel.data(searchModel.index(index,0), ImageSearchModel.BackgroundPortraitRole)
+        viewMoreImagePopup.backgroundLandscape = searchModel.data(searchModel.index(index,0), ImageSearchModel.BackgroundLandscapeRole)
+        viewMoreImagePopup.fullScreen = searchModel.data(searchModel.index(index,0), ImageSearchModel.ScreenUrlRole)
+        viewMoreImagePopup.portraitSize = searchModel.data(searchModel.index(index,0), ImageSearchModel.PortraitSizeRole)
+        viewMoreImagePopup.landscapeSize = searchModel.data(searchModel.index(index,0), ImageSearchModel.LandscapeSizeRole)
+        viewMoreImagePopup.fullScreenSize = searchModel.data(searchModel.index(index,0), ImageSearchModel.ScreenSizeRole)
+        viewMoreImagePopup.opacity = 1
+        popupContainer.opacity = 1
+        paginator.opacity = 0
+        rootItem.popup = true
+    }
+
+    function closePopup()
+    {
+        viewMoreImagePopup.opacity = 0
+        popupContainer.opacity = 0
+        paginator.opacity = 1
+        rootItem.popup = false
+    }
 }

KomplexHubContent/pages/LiveSearchPage.qml

@@ -11,6 +11,9 @@ Item
 
     property string query
     readonly property bool searchable: paginator.searchable
+    property bool popup: false
+    property int resultWidth: 256
+    property int resultHeight: 245
 
     PackSearchModel
     {
@@ -39,6 +42,7 @@ Item
             required property string uuid
             required property string thumbnail
             required property string authorId
+            required property int index
 
             SearchResultItem
             {
@@ -47,15 +51,66 @@ Item
                 description: parent.description
                 thumbnail: parent.thumbnail
                 uuid: parent.uuid
+                selected: paginator.currentIndex === parent.index
 
-                selected: resultDelegate.highlighted
+                onTriggered: () => paginator.currentIndex = parent.index
-            }
 
-            MouseArea
+                onViewMoreTriggered: () =>
-            {
+                {
-                anchors.fill: parent
+                    showWallpaperPopup(parent.index)
-                onClicked: paginator.currentIndex = index
+                }
             }
         }
     }
+
+    Rectangle
+    {
+        id: popupContainer
+        anchors.fill: parent
+        opacity: 0
+        color: palette.base
+
+        PackView
+        {
+            id: viewMoreWallpaperPopup
+            anchors.fill: parent
+            opacity: 0
+            visible: opacity > 0.01
+            //model: videosModel.itemModel
+
+            Behavior on opacity {
+                NumberAnimation
+                {
+                    duration: 250
+                }
+            }
+        }
+
+        Behavior on opacity {
+            NumberAnimation
+            {
+                duration: 250
+            }
+        }
+    }
+
+    function closePopup()
+    {
+        viewMoreWallpaperPopup.opacity = 0
+        popupContainer.opacity = 0
+        paginator.opacity = 1
+        rootItem.popup = false
+    }
+
+    function showWallpaperPopup(index)
+    {
+        viewMoreWallpaperPopup.author = searchModel.data(searchModel.index(index,0), PackSearchModel.AuthorRole)
+        viewMoreWallpaperPopup.authorId = searchModel.data(searchModel.index(index,0), PackSearchModel.AuthorIdRole)
+        viewMoreWallpaperPopup.description = searchModel.data(searchModel.index(index,0), PackSearchModel.DescriptionRole)
+        viewMoreWallpaperPopup.thumbnail = searchModel.data(searchModel.index(index,0), PackSearchModel.ThumbnailRole)
+        viewMoreWallpaperPopup.opacity = 1
+        popupContainer.opacity = 1
+        paginator.opacity = 0
+        rootItem.popup = true
+    }
 }

KomplexHubContent/pages/VideoSearchPage.qml

@@ -13,6 +13,9 @@ Item
 
     property string query
     readonly property bool searchable: paginator.searchable
+    property bool popup: false
+    property int resultWidth: 256
+    property int resultHeight: 245
 
     VideoSearchModel
     {
@@ -27,37 +30,94 @@ Item
         anchors.fill: parent
         model: searchModel
         loading: model.state === VideoSearchModel.Loading
+        visible: opacity > 0.01
 
         delegate: ItemDelegate
         {
             id: resultDelegate
 
-            width: 256
+            width: resultWidth
-            height: 245
+            height: resultHeight
 
-            required property string author
-            required property string description
             required property string uuid
-            required property string thumbnail
+            required property string author
             required property string authorId
+            required property string authorUrl
+            required property string thumbnail
             required property int index
 
             SearchResultItem
             {
                 anchors.fill: parent
-                title: parent.author
+                author: parent.author
-                description: parent.description
+                description: qsTr("No description available")
                 thumbnail: parent.thumbnail
                 uuid: parent.uuid
+                pexels: true
+                selected: paginator.currentIndex === parent.index
 
-                selected: resultDelegate.highlighted
+                onTriggered: () => paginator.currentIndex = parent.index
-            }
 
-            MouseArea
+                onViewMoreTriggered: () =>
-            {
+                {
-                anchors.fill: parent
+                    showVideoPopup(parent.index)
-                onClicked: paginator.currentIndex = index
+                }
             }
         }
     }
+
+    Rectangle
+    {
+        id: popupContainer
+        anchors.fill: parent
+        opacity: 0
+        visible: opacity > 0.01
+        color: palette.base
+
+        VideoView
+        {
+            id: viewMoreVideoPopup
+            anchors.fill: parent
+            opacity: 0
+
+            Behavior on opacity
+            {
+                NumberAnimation
+                {
+                    duration: 250
+                }
+            }
+        }
+
+        Behavior on opacity
+        {
+            NumberAnimation
+            {
+                duration: 250
+            }
+        }
+    }
+
+    function showVideoPopup(index)
+    {
+        searchModel.setItem(index)
+        viewMoreVideoPopup.author = searchModel.data(searchModel.index(index,0), VideoSearchModel.AuthorRole)
+        viewMoreVideoPopup.authorUrl = searchModel.data(searchModel.index(index,0), VideoSearchModel.AuthorUrlRole)
+        viewMoreVideoPopup.uuid = searchModel.data(searchModel.index(index,0), VideoSearchModel.UuidRole)
+        viewMoreVideoPopup.thumbnail = searchModel.data(searchModel.index(index,0), VideoSearchModel.ThumbnailRole)
+        viewMoreVideoPopup.modelIndex = index
+        viewMoreVideoPopup.model = searchModel.itemModel
+        viewMoreVideoPopup.opacity = 1
+        paginator.opacity = 0
+        popupContainer.opacity = 1
+        rootItem.popup = true
+    }
+
+    function closePopup()
+    {
+        viewMoreVideoPopup.opacity = 0
+        popupContainer.opacity = 0
+        paginator.opacity = 1
+        rootItem.popup = false
+    }
 }

KomplexHubContent/views/ImageView.qml

@@ -1,98 +0,0 @@
-import QtQuick 2.15
-import QtQuick.Controls
-import QtQuick.Layouts
-import QtQuick.Effects
-
-import KomplexHub
-import KomplexHub.Controls
-import KomplexHub.Kero
-import KomplexHubPlugin
-
-Item
-{
-    property string uuid
-    property string author
-    property string authorUrl
-    property string description
-    property string thumbnail
-    property string portrait
-    property string landscape
-    property string small
-    property string original
-    property string medium
-    property string large
-    property string extraLarge
-    property string portraitSize
-    property string landscapeSize
-    property string smallSize
-    property string originalSize
-    property string mediumSize
-    property string largeSize
-    property string extraLargeSize
-
-    property int imageHeight
-    property int imageWidth
-
-    id: rootItem
-
-    Rectangle
-    {
-        anchors.fill: parent
-        color: palette.base
-
-        ColumnLayout
-        {
-            anchors.fill: parent
-            anchors.margins: Constants.largeMargin
-            spacing: Constants.largeMargin
-
-            RowLayout
-            {
-                Layout.fillWidth: true
-
-                /** Spacer **/
-                Item { Layout.fillWidth: true }
-
-                Image
-                {
-                    width: imageWidth
-                    height: imageHeight
-                    transform: Image.PreserveAspectFit
-                    source: "qrc:/images/icons/pexels-icon-filled-256.svg"
-                }
-
-                /** Spacer **/
-                Item { Layout.fillWidth: true }
-            }
-
-            Text
-            {
-                id: titleText
-                text: rootItem.author
-
-                font.bold: true
-                font.pixelSize: Constants.h3Font.pixelSize
-
-                Layout.fillWidth: true
-            }
-
-            Text
-            {
-                id: descriptionText
-                text: rootItem.description
-
-                font.pointSize: Constants.h4Font.pixelSize
-            }
-
-            Image
-            {
-                width: 64
-                height: 64
-                transform: Image.PreserveAspectFit
-                source: "qrc:/images/icons/pexels-icon-filled-256.svg"
-
-                Layout.alignment: Qt.AlignBottom | Qt.AlignRight
-            }
-        }
-    }
-}

KomplexHubModule/Controls/CMakeLists.txt

@@ -17,5 +17,9 @@ qt6_add_qml_module(KomplexHubModule_Controls
         QML_FILES PaginationBox.qml
         QML_FILES PaginatorGrid.qml
         QML_FILES HorizontalPaginator.qml
+        QML_FILES ImageView.qml
+        QML_FILES
+        QML_FILES VideoView.qml
+        QML_FILES PackView.qml
 )
 

KomplexHubModule/Controls/ImageView.qml

@@ -0,0 +1,195 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Effects
+
+import KomplexHub
+import KomplexHub.Controls
+import KomplexHub.Kero
+import KomplexHubPlugin
+
+Item
+{
+    property string uuid
+    property string author
+    property string authorUrl
+    property string description
+    property string thumbnail
+    property string portrait
+    property string landscape
+    property string original
+    property string fullScreen
+    property string portraitSize
+    property string landscapeSize
+    property string fullScreenSize
+    property string backgroundPortrait
+    property string backgroundLandscape
+
+    property int imageHeight
+    property int imageWidth
+
+    id: rootItem
+
+    Rectangle
+    {
+        anchors.fill: parent
+        color: palette.base
+
+        Image
+        {
+            id: backgroundImage
+            source: width > height ? backgroundLandscape : backgroundPortrait
+            transform: Image.PreserveAspectCrop
+            anchors.fill: parent
+            visible: false
+        }
+
+        MultiEffect
+        {
+            anchors.fill: backgroundImage
+            source: backgroundImage
+            blurEnabled: true
+            blurMax: 64
+            blur: 1.0
+            opacity: 0.25
+            saturation: -0.8
+        }
+
+        ColumnLayout
+        {
+            anchors.fill: parent
+            anchors.margins: Constants.largeMargin
+            spacing: Constants.largeMargin
+
+            RowLayout
+            {
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignTop| Qt.AlignHCenter
+                Layout.topMargin: 32
+
+                Rectangle
+                {
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: width / 1.77777777778
+                    Layout.maximumWidth: 800
+                    Layout.alignment: Qt.AlignHCenter
+                    color: palette.base.darker()
+
+                    Throbber
+                    {
+                        anchors.fill: parent
+                        id: loadingThrobber
+                        visible: viewImage.status === Image.Loading
+                    }
+
+                    Image
+                    {
+                        id: viewImage
+                        anchors.fill: parent
+                        transform: Image.PreserveAspectCrop
+                        source: rootItem.thumbnail
+                        visible: !(status === Image.Loading)
+                    }
+                }
+            }
+
+            Text
+            {
+                id: titleText
+                text: rootItem.author
+                color: palette.text
+                font.bold: true
+                font.pixelSize: Constants.h3Font.pixelSize
+                elide: Text.ElideRight
+
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignTop| Qt.AlignLeft
+            }
+
+            Text
+            {
+                id: descriptionText
+                text: rootItem.description
+                color: palette.text
+                font.pointSize: Constants.h4Font.pixelSize
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+
+                Layout.alignment: Qt.AlignTop| Qt.AlignLeft
+                Layout.fillWidth: true
+            }
+
+            /** Spacer **/
+            Item
+            {
+                Layout.fillWidth: true
+                Layout.preferredHeight: 32
+            }
+
+            Text
+            {
+                text: qsTr("Available Downloads")
+                color: palette.text
+                font.bold: true
+                font.pixelSize: Constants.h3Font.pixelSize
+                elide: Text.ElideRight
+
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignTop| Qt.AlignLeft
+            }
+
+            RowLayout
+            {
+                Layout.fillWidth: true
+
+                ComboBox
+                {
+                    id: downloadSelector
+                    model:[
+                        "Screen (" + fullScreenSize + ")",
+                        "Portrait (" + portraitSize + ")",
+                        "Landscape (" + landscapeSize + ")"
+                    ]
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 36
+                }
+                SquareButton
+                {
+                    Layout.preferredHeight: 36
+                    Layout.preferredWidth: 128
+                    text: qsTr("Download")
+                    icon.source: "qrc:/images/icons/icons8-download.svg"
+                }
+            }
+
+            /** Spacer **/
+            Item { Layout.fillWidth: true; Layout.fillHeight: true }
+
+            RowLayout
+            {
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignBottom
+
+                Text {
+                    text: qsTr("Images Provided Courtesy of Pexels")
+                    elide: Text.ElideLeft
+                    color: palette.text
+                    font.bold: true
+                    font.pixelSize: Constants.h6Font.pixelSize
+
+                    Layout.fillWidth: true
+                    Layout.alignment: Qt.AlignLeft
+                }
+
+                Image
+                {
+                    transform: Image.PreserveAspectFit
+                    source: "qrc:/images/icons/pexels-icon-filled-256.svg"
+
+                    Layout.alignment: Qt.AlignRight
+                    Layout.preferredHeight: 32
+                    Layout.preferredWidth: 32
+                }
+            }
+        }
+    }
+}

KomplexHubModule/Controls/LineEdit.qml

@@ -62,10 +62,12 @@ Item {
 
     id: lineEditRoot
 
-    ColumnLayout {
+    ColumnLayout
+    {
         anchors.fill: parent
 
-        Rectangle {
+        Rectangle
+        {
             id: lineEditBackground
 
             border.color: lineEditRoot.border.color
@@ -87,7 +89,8 @@ Item {
             topLeftRadius: lineEditRoot.radius.topLeft
             topRightRadius: lineEditRoot.radius.topRight
 
-            TextInput {
+            TextInput
+            {
                 id: lineEditInput
                 anchors.fill: parent
                 color: lineEditRoot.color
@@ -101,6 +104,14 @@ Item {
                 onAccepted: () => lineEditRoot.accepted()
                 onTextChanged: () => lineEditRoot.text = lineEditInput.text
                 onEditingFinished: () => lineEditRoot.editingFinished()
+
+                MouseArea
+                {
+                    anchors.fill: parent
+                    cursorShape: Qt.IBeamCursor
+
+                    onClicked: () => lineEditInput.focus = true
+                }
             }
 
             states: [

KomplexHubModule/Controls/PackView.qml

@@ -0,0 +1,177 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Effects
+
+import KomplexHub
+import KomplexHub.Controls
+import KomplexHub.Kero
+import KomplexHubPlugin
+
+Item
+{
+    property string uuid
+    property string author
+    property string authorId
+    property string description
+    property string thumbnail
+
+    property int imageHeight
+    property int imageWidth
+
+    id: rootItem
+
+    Rectangle
+    {
+        anchors.fill: parent
+        color: palette.base
+
+        Image
+        {
+            id: backgroundImage
+            source: thumbnail
+            transform: Image.PreserveAspectCrop
+            anchors.fill: parent
+            visible: false
+        }
+
+        MultiEffect
+        {
+            anchors.fill: backgroundImage
+            source: backgroundImage
+            blurEnabled: true
+            blurMax: 64
+            blur: 1.0
+            opacity: 0.25
+            saturation: -0.8
+        }
+
+        ColumnLayout
+        {
+            anchors.fill: parent
+            anchors.margins: Constants.largeMargin
+            spacing: Constants.largeMargin
+
+            RowLayout
+            {
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignTop| Qt.AlignHCenter
+                Layout.topMargin: 32
+
+                Rectangle
+                {
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: width / 1.77777777778
+                    Layout.maximumWidth: 800
+                    Layout.alignment: Qt.AlignHCenter
+                    color: palette.base.darker()
+
+                    Throbber
+                    {
+                        anchors.fill: parent
+                        id: loadingThrobber
+                        visible: viewImage.status === Image.Loading
+                    }
+
+                    Image
+                    {
+                        id: viewImage
+                        anchors.fill: parent
+                        transform: Image.PreserveAspectCrop
+                        source: rootItem.thumbnail
+                        visible: !(status === Image.Loading)
+                    }
+                }
+            }
+
+            Text
+            {
+                id: titleText
+                text: rootItem.author
+                color: palette.text
+                font.bold: true
+                font.pixelSize: Constants.h3Font.pixelSize
+                elide: Text.ElideRight
+
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignTop| Qt.AlignLeft
+            }
+
+            Text
+            {
+                id: descriptionText
+                text: rootItem.description
+                color: palette.text
+                font.pointSize: Constants.h4Font.pixelSize
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+
+                Layout.alignment: Qt.AlignTop| Qt.AlignLeft
+                Layout.fillWidth: true
+            }
+
+            /** Spacer **/
+            Item
+            {
+                Layout.fillWidth: true
+                Layout.preferredHeight: 32
+            }
+
+            // Text
+            // {
+            //     text: qsTr("Available Downloads")
+            //     color: palette.text
+            //     font.bold: true
+            //     font.pixelSize: Constants.h3Font.pixelSize
+            //     elide: Text.ElideRight
+
+            //     Layout.fillWidth: true
+            //     Layout.alignment: Qt.AlignTop| Qt.AlignLeft
+            // }
+
+            RowLayout
+            {
+                Layout.fillWidth: true
+
+                Item { Layout.fillWidth: true }
+
+                SquareButton
+                {
+                    Layout.preferredHeight: 36
+                    Layout.preferredWidth: 128
+                    text: qsTr("Download")
+                    icon.source: "qrc:/images/icons/icons8-download.svg"
+                }
+            }
+
+            /** Spacer **/
+            Item { Layout.fillWidth: true; Layout.fillHeight: true }
+
+            RowLayout
+            {
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignBottom
+
+                Text {
+                    text: qsTr("Shaders Provided Courtesy of ShaderToy and Their Respective Authors")
+                    elide: Text.ElideLeft
+                    color: palette.text
+                    font.bold: true
+                    font.pixelSize: Constants.h6Font.pixelSize
+
+                    Layout.fillWidth: true
+                    Layout.alignment: Qt.AlignLeft
+                }
+
+                Image
+                {
+                    transform: Image.PreserveAspectFit
+                    source: "qrc:/images/icons/pexels-icon-filled-256.svg"
+
+                    Layout.alignment: Qt.AlignRight
+                    Layout.preferredHeight: 32
+                    Layout.preferredWidth: 32
+                }
+            }
+        }
+    }
+}

KomplexHubModule/Controls/PaginatorGrid.qml

@@ -335,12 +335,14 @@ Item
                 target: noResultsOverlay
                 duration: 250
                 property: "opacity";
+                easing.type: Easing.InOutQuad
             }
             NumberAnimation
             {
                 target: loadingOverlay
                 duration: 250
                 property: "opacity";
+                easing.type: Easing.InOutQuad
             }
         },
         Transition
@@ -352,12 +354,14 @@ Item
                 target: noSearchOverlay
                 duration: 250
                 property: "opacity";
+                easing.type: Easing.InOutQuad
             }
             NumberAnimation
             {
                 target: loadingOverlay
                 duration: 250
                 property: "opacity";
+                easing.type: Easing.InOutQuad
             }
         },
         Transition
@@ -369,12 +373,14 @@ Item
                 target: noSearchOverlay
                 duration: 250
                 property: "opacity";
+                easing.type: Easing.InOutQuad
             }
             NumberAnimation
             {
                 target: loadingOverlay
                 duration: 250
                 property: "opacity";
+                easing.type: Easing.InOutQuad
             }
         },
         Transition
@@ -386,12 +392,14 @@ Item
                 target: noResultsOverlay
                 duration: 250
                 property: "opacity";
+                easing.type: Easing.InOutQuad
             }
             NumberAnimation
             {
                 target: loadingOverlay
                 duration: 250
                 property: "opacity";
+                easing.type: Easing.InOutQuad
             }
         },
         Transition
@@ -403,12 +411,14 @@ Item
                 target: loadingOverlay
                 duration: 250
                 property: "opacity";
+                easing.type: Easing.InOutQuad
             }
             NumberAnimation
             {
                 target: resultsView
                 duration: 250
                 property: "opacity";
+                easing.type: Easing.InOutQuad
             }
         }
     ]

KomplexHubModule/Controls/SearchBar.qml

@@ -9,7 +9,8 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import KomplexHub
 
-Item {
+Item
+{
     property string searchTerm: ""
     property string icon: ""
     property color color: "transparent"
@@ -17,15 +18,18 @@ Item {
     id: searchBarRootItem
     clip: true
 
-    Rectangle {
+    Rectangle
+    {
         color: searchBarRootItem.color
         anchors.fill: parent
 
-        RowLayout {
+        RowLayout
+        {
             id: searchContainerLayout
             anchors.fill: parent
 
-            LineEdit {
+            LineEdit
+            {
                 id: searchEdit
                 Layout.fillHeight: true
                 Layout.fillWidth: true
@@ -40,7 +44,8 @@ Item {
                 onAccepted: () => searchBarRootItem.searchTerm = text
             }
 
-            SquareButton {
+            SquareButton
+            {
                 id: searchButton
 
                 Layout.fillHeight: searchEdit.height
@@ -67,4 +72,9 @@ Item {
             }
         }
     ]
+
+    function reset()
+    {
+        searchEdit.text = ""
+    }
 }

KomplexHubModule/Controls/SearchResultItem.qml

@@ -14,8 +14,9 @@ Item {
     property bool pexels: false
 
     signal triggered
+    signal viewMoreTriggered
 
-    id: searchResultItemRoot
+    id: mainItem
     width: 256
     height: 256
     clip: true
@@ -24,11 +25,34 @@ Item {
     {
         id: searchResultItemContainer
         anchors.fill: parent
-
         border.color: palette.alternateBase.lighter(1.75)
-
         color: palette.alternateBase.lighter(1.25)
 
+        MouseArea
+        {
+            property string lastState
+            id: mouseArea
+
+            anchors.fill: parent
+            hoverEnabled: true
+
+            onEntered: () => {
+                states.hovered = true
+            }
+
+            onExited: () => {
+                if(!viewMoreButton.hovered)
+                    states.hovered = false
+            }
+
+            onReleased: () => {
+                if(!states.selected)
+                {
+                    mainItem.triggered()
+                }
+            }
+        }
+
         ColumnLayout
         {
             anchors.fill: parent
@@ -44,12 +68,35 @@ Item {
 
                 color: palette.base.lighter(1.25)
 
-                Image
+                Throbber
                 {
                     anchors.fill: parent
+                    id: loadingThrobber
+                    visible: viewImage.status === Image.Loading
+                }
+
+                Image
+                {
+                    property int retries: 0
+                    id: viewImage
+                    anchors.fill: parent
+                    source: mainItem.thumbnail
+                    visible: !(status === Image.Loading)
                     fillMode: Image.PreserveAspectCrop
-                    id: thumnailImage
+
-                    source: searchResultItemRoot.thumbnail
+                    onStatusChanged: () =>
+                    {
+                        // if(status === Image.Error)
+                        // {
+                        //     if(retries <= 3)
+                        //     {
+                        //         ++retries
+                        //         let src = source
+                        //         source = ""
+                        //         source = src
+                        //     }
+                        // }
+                    }
                 }
 
                 Image
@@ -65,13 +112,14 @@ Item {
                     opacity: 0.5
                     source: "qrc:/images/icons/pexels-icon-filled-256.svg"
 
-                    visible: searchResultItemRoot.pexels
+                    visible: mainItem.pexels
                 }
             }
 
-            Text {
+            Text
+            {
                 color: palette.text
-                text: searchResultItemRoot.title
+                text: mainItem.title
 
                 font.pixelSize: 16
                 font.bold: true
@@ -83,82 +131,82 @@ Item {
 
             Item { Layout.fillHeight: true }
 
-            Text {
+            Text
+            {
                 color: palette.text
                 font.pixelSize: 12
-                text: "By: " + searchResultItemRoot.author
+                text: "By: " + mainItem.author
                 leftPadding: 12
 
                 Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
                 Layout.preferredWidth: 250
-                visible: !searchResultItemRoot.pexels
+                visible: !mainItem.pexels
             }
 
-            Text {
+            Text
+            {
+                id: descriptionText
                 clip: true
                 color: palette.text
                 font.pixelSize: 12
-                text: searchResultItemRoot.description
+                text: mainItem.description
                 wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                 textFormat: Text.PlainText
-                Layout.maximumHeight: 32
-                Layout.preferredHeight: 32
                 elide: Text.ElideRight
 
                 Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                Layout.maximumHeight: 32
+                Layout.preferredHeight: 32
                 Layout.preferredWidth: 236
                 Layout.maximumWidth: 236
                 Layout.bottomMargin: 3
             }
 
-            Item { Layout.fillHeight: true }
+            SquareButton
-        }
+            {
+                id: viewMoreButton
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                Layout.maximumHeight: 50
+                Layout.preferredHeight: 32
+                Layout.preferredWidth: 236
+                Layout.maximumWidth: 236
+                Layout.bottomMargin: 3
 
-        Behavior on color {
+                text: qsTr("View More")
-            ColorAnimation { duration: 200 }
+                opacity: 0
+
+                onTriggered: () => {
+                    mainItem.viewMoreTriggered()
+                }
+            }
+
+            Item { Layout.fillHeight: true }
         }
     }
 
-    MouseArea
+    QtObject
     {
-        property string lastState
+        id: states
-        id: mouseArea
+        property bool clicked: false
+        property bool hovered: false
+        property alias selected: mainItem.selected
+        property bool idle: true
 
-        anchors.fill: parent
+        onIdleChanged: () =>
-        hoverEnabled: true
+        {
-
+            if(idle)
-        onEntered: () => {
+            {
-            if(!selected)
+                clicked = false
-                searchResultItemRoot.state = "hovered"
+                hovered = false
-        }
+                selected = false
-
-        onExited: () => {
-            lastState = ""
-
-            if(selected)
-                searchResultItemRoot.state = "selected"
-            else
-                searchResultItemRoot.state = ""
-        }
-
-        onPressed: () => {
-            if(!selected) {
-                lastState = searchResultItemRoot.state
-                searchResultItemRoot.state = "clicked"
             }
         }
-
-        onReleased: () => {
-            if(!mouseArea.containsMouse)
-                return;
-
-            selected = !selected
-        }
     }
 
     states: [
         State {
             name: "hovered"
+            when: states.hovered && !states.selected
 
             PropertyChanges {
                 target: searchResultItemContainer
@@ -168,14 +216,140 @@ Item {
                                       0.5, // Set custom lightness
                                       1.0)
             }
+
+            PropertyChanges
+            {
+                target: viewMoreButton
+                opacity: 0
+
+                Layout.preferredHeight: 0
+            }
+
+            PropertyChanges
+            {
+                target: descriptionText
+                opacity: 1
+
+                Layout.preferredHeight: 32
+            }
         },
         State {
             name: "selected"
+            when: states.selected && !states.hovered
 
-            PropertyChanges {
+            PropertyChanges
+            {
                 target: searchResultItemContainer
                 color: palette.accent
             }
+        },
+        State
+        {
+            name: "view_more"
+            when: states.selected && states.hovered
+
+            PropertyChanges
+            {
+                target: viewMoreButton
+                opacity: 1
+
+                Layout.preferredHeight: 32
+            }
+
+            PropertyChanges
+            {
+                target: descriptionText
+                opacity: 0
+
+                Layout.preferredHeight: 0
+            }
+        },
+
+        State
+        {
+            name: "default"
+            when: states.idle
+
+            PropertyChanges
+            {
+                target: viewMoreButton
+                opacity: 0
+
+                Layout.preferredHeight: 0
+            }
+
+            PropertyChanges
+            {
+                target: descriptionText
+                opacity: 1
+
+                Layout.preferredHeight: 32
+            }
+        }
+
+    ]
+
+    transitions:
+    [
+        Transition
+        {
+            to: "selected"
+
+            ColorAnimation
+            {
+                target: searchResultItemContainer
+                duration: 250
+            }
+        },
+
+        Transition
+        {
+            from: "selected"
+            to: "view_more"
+
+            NumberAnimation
+            {
+                target: viewMoreButton
+                property: "opacity"
+                duration: 250
+                easing.type: Easing.InOutQuad
+            }
+        },
+
+        Transition
+        {
+            from: "view_more"
+            to: "selected"
+
+            NumberAnimation
+            {
+                target: descriptionText
+                property: "opacity"
+                duration: 250
+                easing.type: Easing.InOutQuad
+            }
+        },
+
+        Transition
+        {
+            to: "default"
+
+            ColorAnimation
+            {
+                target: searchResultItemContainer
+                duration: 250
+            }
+        },
+
+        Transition
+        {
+            to: "hovered"
+
+            ColorAnimation
+            {
+                target: searchResultItemContainer
+                duration: 250
+            }
         }
     ]
 }

KomplexHubModule/Controls/SquareButton.qml

@@ -12,6 +12,7 @@ Item {
     property color color: palette.button
     property Gradient gradient: defaultGradient
     property BorderSettings border: BorderSettings {}
+    readonly property bool hovered: state === "hovered"
 
     signal triggered
 
@@ -24,7 +25,7 @@ Item {
     component IconSettings: QtObject {
         property int width: 16
         property int height: 16
-        property string source: "images/icons/icons8-next.svg"
+        property string source: "qrc:/images/icons/icons8-next.svg"
     }
 
     component BorderSettings: QtObject {
@@ -106,10 +107,6 @@ Item {
         Behavior on color {
             ColorAnimation { duration: 250 }
         }
-
-        // Behavior on gradient {
-        //     PropertyAnimation { duration: 250 }
-        // }
     }
 
     MouseArea {
@@ -216,7 +213,5 @@ Item {
                 color: palette.text.darker()
             }
         }
-
     ]
-
 }

KomplexHubModule/Controls/Throbber.qml

@@ -1,126 +1,159 @@
 import QtQuick
 import QtQuick.Shapes
 import QtQuick.Effects
+import QtQuick.Layouts
 
 Item {
     id: throbberRoot
 
-    Rectangle {
+    onHeightChanged: () => {
-        anchors.fill: parent
+        if(height > width)
-        color: "transparent"
-
-        Item
         {
-            id: outerRing
+            layout.throbberSize = width - 24
-            anchors.fill: parent
-
-            Shape
-            {
-                anchors.fill: parent
-                asynchronous: true
-
-                ShapePath
-                {
-                    property double progress: 0
-                    property int dashSpaceLength: 15
-                    property int dashLength: 1
-
-                    id: outerRingPath
-                    strokeColor: palette.accent.darker(1 + (progress - 0.25))
-                    fillColor: "transparent"
-                    strokeWidth: 3
-                    strokeStyle: ShapePath.DashLine
-
-                    startX: 0
-                    startY: outerRing.height * 0.5
-
-                    dashPattern: [
-                        dashSpaceLength - (dashSpaceLength * progress),
-                        dashSpaceLength * progress
-                    ]
-
-                    PathArc
-                    {
-                        x: outerRing.width
-                        y: outerRing.height * 0.5
-
-                        radiusX: outerRing.width / 2
-                        radiusY: outerRing.height / 2
-
-                        useLargeArc: false
-                    }
-
-                    PathArc
-                    {
-                        x: 0
-                        y: outerRing.height * 0.5
-
-                        radiusX: outerRing.width / 2
-                        radiusY: outerRing.height / 2
-
-                        useLargeArc: false
-                    }
-                }
-            }
-
-            transform: Rotation {
-                id: outerRingRotation
-                origin.x: outerRing.width / 2
-                origin.y: outerRing.height / 2
-            }
-
-            NumberAnimation {
-                property bool reverse: false
-
-                target: outerRingPath
-                property: "progress"
-                duration: 1600
-                //easing.type: Easing.InOutQuad
-
-                from: 0
-                to: 1
-                loops: 1
-                running: true
-
-                onFinished: () => {
-                    if(reverse)
-                    {
-                        from = 0
-                        to = 1
-                        start()
-                    }
-                    else
-                    {
-                        from = 1
-                        to = 0
-                        start()
-                    }
-
-                    reverse = !reverse
-                }
-            }
-
-            NumberAnimation {
-                target: outerRingRotation
-                property: "angle"
-                duration: 16000
-                easing.type: Easing.InOutQuad
-
-                from: 0
-                to: (360 * 4)
-                loops: NumberAnimation.Infinite
-                running: true
-            }
         }
+        else
+        {
+            layout.throbberSize = height - 24
+        }
+    }
 
-        MultiEffect {
+    onWidthChanged: () => {
-            source: outerRing
+        if(height > width)
-            anchors.fill: outerRing
+        {
-            brightness: 0.4
+            layout.throbberSize = width - 24
-            saturation: 0.2
+        }
-            blurEnabled: true
+        else
-            blurMax: 64
+        {
-            blur: 1.0
+            layout.throbberSize = height - 24
+        }
+    }
+
+    RowLayout
+    {
+        property int throbberSize
+        id: layout
+        anchors.fill: parent
+        Rectangle
+        {
+            Layout.alignment: Qt.AlignHCenter
+            Layout.preferredHeight: parent.throbberSize
+            Layout.preferredWidth: parent.throbberSize
+
+            color: "transparent"
+
+            Item
+            {
+                id: outerRing
+                anchors.fill: parent
+
+                Shape
+                {
+                    anchors.fill: parent
+                    asynchronous: true
+
+                    ShapePath
+                    {
+                        property double progress: 0
+                        property int dashSpaceLength: 15
+                        property int dashLength: 1
+
+                        id: outerRingPath
+                        strokeColor: palette.accent.darker(1 + (progress - 0.25))
+                        fillColor: "transparent"
+                        strokeWidth: 3
+                        strokeStyle: ShapePath.DashLine
+
+                        startX: 0
+                        startY: outerRing.height * 0.5
+
+                        dashPattern: [
+                            dashSpaceLength - (dashSpaceLength * progress),
+                            dashSpaceLength * progress
+                        ]
+
+                        PathArc
+                        {
+                            x: outerRing.width
+                            y: outerRing.height * 0.5
+
+                            radiusX: outerRing.width / 2
+                            radiusY: outerRing.height / 2
+
+                            useLargeArc: false
+                        }
+
+                        PathArc
+                        {
+                            x: 0
+                            y: outerRing.height * 0.5
+
+                            radiusX: outerRing.width / 2
+                            radiusY: outerRing.height / 2
+
+                            useLargeArc: false
+                        }
+                    }
+                }
+
+                transform: Rotation {
+                    id: outerRingRotation
+                    origin.x: outerRing.width / 2
+                    origin.y: outerRing.height / 2
+                }
+
+                NumberAnimation {
+                    property bool reverse: false
+
+                    target: outerRingPath
+                    property: "progress"
+                    duration: 1600
+                    //easing.type: Easing.InOutQuad
+
+                    from: 0
+                    to: 1
+                    loops: 1
+                    running: true
+
+                    onFinished: () => {
+                        if(reverse)
+                        {
+                            from = 0
+                            to = 1
+                            start()
+                        }
+                        else
+                        {
+                            from = 1
+                            to = 0
+                            start()
+                        }
+
+                        reverse = !reverse
+                    }
+                }
+
+                NumberAnimation {
+                    target: outerRingRotation
+                    property: "angle"
+                    duration: 16000
+                    easing.type: Easing.InOutQuad
+
+                    from: 0
+                    to: (360 * 4)
+                    loops: NumberAnimation.Infinite
+                    running: true
+                }
+            }
+
+            MultiEffect {
+                source: outerRing
+                anchors.fill: outerRing
+                brightness: 0.4
+                saturation: 0.2
+                blurEnabled: true
+                blurMax: 64
+                blur: 1.0
+            }
         }
     }
 }

KomplexHubModule/Controls/VideoView.qml

@@ -0,0 +1,191 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import QtQuick.Effects
+
+import KomplexHub
+import KomplexHub.Controls
+import KomplexHub.Kero
+import KomplexHubPlugin
+
+Item
+{
+    property string uuid
+    property string author
+    property string authorUrl
+    property string thumbnail
+    property alias model: downloadSelector.model
+    property int modelIndex
+
+    property int imageHeight
+    property int imageWidth
+
+    visible: opacity > 0.01
+    onVisibleChanged: () =>
+    {
+        if(!visible)
+        {
+            model = null
+        }
+    }
+
+    Connections
+    {
+        target: model
+
+        function onRowCountChanged()
+        {
+            downloadSelector.currentIndex = 0
+        }
+    }
+
+    id: rootItem
+
+    Rectangle
+    {
+        anchors.fill: parent
+        color: palette.base
+
+        Image
+        {
+            id: backgroundImage
+            source: thumbnail
+            anchors.fill: parent
+            visible: false
+            fillMode: Image.PreserveAspectFit
+        }
+
+        MultiEffect
+        {
+            anchors.fill: backgroundImage
+            source: backgroundImage
+            blurEnabled: true
+            blurMax: 64
+            blur: 1.0
+            opacity: 0.25
+            saturation: -0.8
+        }
+
+        ColumnLayout
+        {
+            anchors.fill: parent
+            anchors.margins: Constants.largeMargin
+            spacing: Constants.largeMargin
+
+            RowLayout
+            {
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignTop| Qt.AlignHCenter
+                Layout.topMargin: 32
+
+                Rectangle
+                {
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: width / 1.77777777778
+                    Layout.maximumWidth: 800
+                    Layout.alignment: Qt.AlignHCenter
+                    color: palette.base.darker()
+
+                    Throbber
+                    {
+                        anchors.fill: parent
+                        id: loadingThrobber
+                        visible: viewImage.status === Image.Loading
+                    }
+
+                    Image
+                    {
+                        id: viewImage
+                        anchors.fill: parent
+                        source: rootItem.thumbnail
+                        visible: !(status === Image.Loading)
+                        fillMode: Image.PreserveAspectCrop
+                    }
+                }
+            }
+
+            Text
+            {
+                id: titleText
+                text: rootItem.author
+                color: palette.text
+                font.bold: true
+                font.pixelSize: Constants.h3Font.pixelSize
+                elide: Text.ElideRight
+
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignTop| Qt.AlignLeft
+            }
+
+            /** Spacer **/
+            Item
+            {
+                Layout.fillWidth: true
+                Layout.preferredHeight: 32
+            }
+
+            Text
+            {
+                text: qsTr("Available Downloads")
+                color: palette.text
+                font.bold: true
+                font.pixelSize: Constants.h3Font.pixelSize
+                elide: Text.ElideRight
+
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignTop| Qt.AlignLeft
+            }
+
+            RowLayout
+            {
+                Layout.fillWidth: true
+
+                ComboBox
+                {
+                    id: downloadSelector
+                    textRole: "text"
+                    valueRole: "url"
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 36
+                }
+                SquareButton
+                {
+                    Layout.preferredHeight: 36
+                    Layout.preferredWidth: 128
+                    text: qsTr("Download")
+                    icon.source: "qrc:/images/icons/icons8-download.svg"
+                }
+            }
+
+            /** Spacer **/
+            Item { Layout.fillWidth: true; Layout.fillHeight: true }
+
+            RowLayout
+            {
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignBottom
+
+                Text {
+                    text: qsTr("Videos Provided Courtesy of Pexels and Their Respective Authors")
+                    elide: Text.ElideLeft
+                    color: palette.text
+                    font.bold: true
+                    font.pixelSize: Constants.h6Font.pixelSize
+
+                    Layout.fillWidth: true
+                    Layout.alignment: Qt.AlignLeft
+                }
+
+                Image
+                {
+                    transform: Image.PreserveAspectFit
+                    source: "qrc:/images/icons/pexels-icon-filled-256.svg"
+
+                    Layout.alignment: Qt.AlignRight
+                    Layout.preferredHeight: 32
+                    Layout.preferredWidth: 32
+                }
+            }
+        }
+    }
+}

KomplexHubPlugin/CMakeLists.txt

@@ -25,45 +25,53 @@ qt_add_qml_module(
         common/logging.h
         common/fetchresult.h
         paginators/newestpackspaginator.h
-        SOURCES paginators/featuredpackspaginator.h
+        paginators/featuredpackspaginator.h
-        SOURCES paginators/featuredimagespaginator.h
+        paginators/featuredimagespaginator.h
-        SOURCES paginators/wallpaperpaginator.h
+        paginators/wallpaperpaginator.h
-        SOURCES paginators/packsearchpaginator.h
+        paginators/packsearchpaginator.h
-        SOURCES paginators/imagesearchpaginator.h
+        paginators/imagesearchpaginator.h
-        SOURCES paginators/newestshaderspaginator.h
+        paginators/newestshaderspaginator.h
-        SOURCES paginators/newestcubemapspaginator.h
+        paginators/newestcubemapspaginator.h
-        SOURCES paginators/featuredshaderspaginator.h
+        paginators/featuredshaderspaginator.h
-        SOURCES paginators/featuredcubemapspaginator.h
+        paginators/featuredcubemapspaginator.h
-        SOURCES paginators/searchshaderspaginator.h
+        paginators/searchshaderspaginator.h
-        SOURCES paginators/searchcubemapspaginator.h
+        paginators/searchcubemapspaginator.h
-        SOURCES paginators/videosearchpaginator.h
+        paginators/videosearchpaginator.h
-        SOURCES featuredpacksmodel.h
+        featuredpacksmodel.h
-        SOURCES featuredpacksmodel.cpp
+        featuredpacksmodel.cpp
-        SOURCES featuredimagesmodel.h
+        featuredimagesmodel.h
-        SOURCES featuredimagesmodel.cpp
+        featuredimagesmodel.cpp
-        SOURCES featuredvideosmodel.h
+        featuredvideosmodel.h
-        SOURCES featuredvideosmodel.cpp
+        featuredvideosmodel.cpp
-        SOURCES paginators/featuredvideospaginator.h
+        paginators/featuredvideospaginator.h
-        SOURCES common/imagecache.h
+        common/imagecache.h
-        SOURCES paginators/imagepaginator.h
+        paginators/imagepaginator.h
-        SOURCES common/videocache.h
+        common/videocache.h
-        SOURCES paginators/videopaginator.h
+        paginators/videopaginator.h
-        SOURCES imagesearchmodel.cpp
+        imagesearchmodel.cpp
-        SOURCES imagesearchmodel.h
+        imagesearchmodel.h
-        SOURCES videosearchmodel.h
+        videosearchmodel.h
-        SOURCES videosearchmodel.cpp
+        videosearchmodel.cpp
-        SOURCES
+        packsearchmodel.cpp
-        SOURCES
+        packsearchmodel.h
-        SOURCES packsearchmodel.cpp
+        videoitemmodel.h
-        SOURCES packsearchmodel.h
+        videoitemmodel.cpp
-
+        downloadmanager.h downloadmanager.cpp
+        common/exceptions.h
+        common/shadertoymetadata.h
+        common/shaderpack.h
+        SOURCES packcompiler.h packcompiler.cpp
 )
 
 target_compile_definitions(
     KomplexHubPlugin
     PUBLIC
         KOMPLEX_PLUGIN
-        KOMPLEX_LOCAL_DEV
+)
+
+target_link_libraries(KomplexHubPlugin PRIVATE
+    Qt${QT_VERSION_MAJOR}::Core
+    Qt${QT_VERSION_MAJOR}::Gui
 )
 
 if(ENABLE_ASAN)

KomplexHubPlugin/common/coreservices.cpp

@@ -12,6 +12,7 @@ auto CoreServices::networkAccessManager() -> QWeakPointer<QNetworkAccessManager>
     if(!s_networkAccessPointer)
     {
         s_networkAccessManager = new QNetworkAccessManager;
+        s_networkAccessManager->setAutoDeleteReplies(true);
 
         QObject::connect(
             s_networkAccessManager,
@@ -50,3 +51,15 @@ auto CoreServices::sessionToken() -> QByteArray
         {}
     );
 }
+
+auto CoreServices::screenSize() -> QSize
+{
+    QScreen *screen = QGuiApplication::primaryScreen();
+
+    if(screen == nullptr)
+    {
+        return QSize(0,0);
+    }
+
+    return screen->size();
+}

KomplexHubPlugin/common/coreservices.h

@@ -24,6 +24,7 @@
 #include <QNetworkReply>
 #include <QSharedPointer>
 #include <QWeakPointer>
+#include <QScreen>
 #include <QMutex>
 #include <QMutexLocker>
 
@@ -45,6 +46,8 @@ public:
      */
     static auto sessionToken() -> QByteArray;
 
+    static auto screenSize() -> QSize;
+
 private:
 
     CoreServices() = default;

KomplexHubPlugin/common/exceptions.h

@@ -0,0 +1,34 @@
+#ifndef EXCEPTIONS_H
+#define EXCEPTIONS_H
+#include <QString>
+#include <exception>
+#include "komplex_global.h"
+
+struct KOMPLEX_EXPORT Exception : std::exception
+{
+    explicit Exception(const QString &message, quint16 errorCode = 0)
+        : std::exception(), message(message), errorCode(errorCode){}
+
+    const QString message;
+    const quint16 errorCode;
+};
+
+struct NetworkException : Exception
+{
+    NetworkException(const QString &message, qsizetype errorCode = 0) : Exception(message, errorCode) {}
+};
+struct FileException : Exception
+{
+    FileException(const QString &message, qsizetype errorCode = 0) : Exception(message, errorCode) {}
+};
+struct SqlException : Exception
+{
+    SqlException(const QString &message, qsizetype errorCode = 0) : Exception(message, errorCode) {}
+};
+
+
+struct KOMPLEX_EXPORT ShaderCompilerException : Exception
+{
+    ShaderCompilerException(const QString &message, qsizetype errorCode = 0) : Exception(message, errorCode) {}
+};
+#endif // EXCEPTIONS_H

KomplexHubPlugin/common/komplex_global.h

@@ -31,11 +31,12 @@
 #define SLIDING_CACHE_PREFETCH_THRESHOLD 20
 
 #define NETWORK_TIMEOUT 10000
+#define NETWORK_RETRY_LIMIT 3
 
 #ifdef KOMPLEX_LOCAL_DEV
 #define KOMPLEX_API_HOST                        "https://komplexapi.hlab"
 #else
-#define KOMPLEX_API_HOST                        "https://komplex.digitalartifex.dev"
+#define KOMPLEX_API_HOST                        "https://api.komplex.dev"
 #endif
 
 #define KOMPLEX_API_VERSION                     "v2"

KomplexHubPlugin/common/paginator.h

@@ -23,6 +23,9 @@
 #include <QMutex>
 #include <QMutexLocker>
 #include <qdebug.h>
+#include <QNetworkReply>
+#include <QJsonDocument>
+#include <QJsonParseError>
 
 #include "komplex_global.h"
 #include "slidingcachecontroller.h"
@@ -47,6 +50,7 @@ signals:
     auto pageChanged() -> void;
     auto countChanged() -> void;
     auto queryChanged() -> void;
+    auto uriChanged() -> void;
 };
 
 /**
@@ -168,6 +172,34 @@ public:
         setOffset(0);
     }
 
+    /**
+     * @brief uri
+     * URI of the API Endpoint. This is set by the child class
+     * @return
+     */
+    [[nodiscard]]
+    auto uri() const -> QString
+    {
+        return m_uri;
+    }
+
+    /**
+     * @brief setUri
+     * Sets the API Endpoint URI to fetch from
+     * @param uri
+     */
+    auto setUri(const QString &uri) -> void
+    {
+        if(uri == m_uri)
+        {
+            return;
+        }
+
+        m_uri = uri;
+
+        Q_EMIT uriChanged();
+    }
+
     /**
      * @brief data
      * @return
@@ -321,6 +353,31 @@ protected:
         controller()->reset();
     }
 
+    /**
+     * @brief getDocument
+     * Extracts the JSON document from the server reply and deletes the reply
+     * object.
+     * @param reply
+     * @return
+     */
+    [[nodiscard]]
+    auto getDocument(QNetworkReply *reply) const -> QJsonDocument
+    {
+        QByteArray data = reply->readAll();
+        QJsonParseError documentError;
+        QJsonDocument document = QJsonDocument::fromJson(data, &documentError);
+
+        reply->deleteLater();
+
+        LOG_ERROR_X(documentError.error != QJsonParseError::NoError,
+            "NewestPacksPaginator::getDocument",
+            documentError.errorString().toStdString().c_str(),
+            {}
+        );
+
+        return document;
+    }
+
 private:
 
     /**
@@ -377,6 +434,12 @@ private:
      * Controls the queryable state of the paginator
      */
     bool m_queryable = false;
+
+    /**
+     * @brief m_uri
+     * API Endpoint URI
+     */
+    QString m_uri;
 };
 
 #endif // PAGINATOR_H

KomplexHubPlugin/common/shaderpack.h

@@ -0,0 +1,612 @@
+#ifndef SHADERPACK_H
+#define SHADERPACK_H
+
+#include <QObject>
+#include <QString>
+#include <QFile>
+#include <QFileInfo>
+#include <QJsonDocument>
+#include <QJsonObject>
+#include <QJsonArray>
+#include <QJsonParseError>
+#include <QStandardPaths>
+#include <QDir>
+#include <QMap>
+#include <QProcess>
+#include <QEventLoop>
+#include <QtQml/qqmlregistration.h>
+
+#include "komplex_global.h"
+
+class KOMPLEX_EXPORT ShaderChannel : public QObject
+{
+    Q_OBJECT
+    QML_ELEMENT
+
+public:
+    enum Type
+    {
+        Image,
+        Video,
+        Shader,
+        Cubemap,
+        Audio,
+        Scene,
+        Model
+    };
+    Q_ENUM(Type)
+
+    enum MirrorMode
+    {
+        MirrorVertical,
+        MirrorHorizontal,
+        NoMirror
+    };
+    Q_ENUM(MirrorMode)
+
+    enum Format
+    {
+        RGB8A,
+        RGB16F,
+        RGB32F
+    };
+    Q_ENUM(Format)
+
+    enum TextureRepeat
+    {
+        ClampToEdge,
+        RepeatVertically,
+        RepeatHorizontally,
+        Repeat
+    };
+    Q_ENUM(TextureRepeat)
+
+    inline auto source() const -> QString { return m_source; }
+    inline auto setSource(const QString &source) -> void
+    {
+        if(source == this->source())
+        {
+            return;
+        }
+
+        m_source = source;
+        Q_EMIT sourceChanged();
+    }
+
+    inline auto type() const -> Type { return m_type; }
+    inline auto setType(Type type) -> void
+    {
+        if(type == this->type())
+        {
+            return;
+        }
+
+        m_type = type;
+        Q_EMIT typeChanged();
+    }
+
+    inline auto mirrorMode() const -> MirrorMode { return m_mirrorMode; }
+    inline auto setMirrorMode(MirrorMode mode)
+    {
+        if(mirrorMode() == mode)
+        {
+            return;
+        }
+
+        m_mirrorMode = mode;
+        Q_EMIT mirrorModeChanged();
+    }
+
+    inline auto textureRepeat() const -> TextureRepeat { return m_textureRepeat; }
+    inline auto setTextureRepeat(TextureRepeat mode) -> void
+    {
+        if(textureRepeat() == mode)
+        {
+            return;
+        }
+
+        m_textureRepeat = mode;
+        Q_EMIT textureRepeatChanged();
+    }
+
+    inline auto resolutionY() const -> qsizetype { return m_resolutionY; }
+    inline auto setResolutionY(qsizetype resolution)
+    {
+        if(resolutionY() == resolution)
+        {
+            return;
+        }
+
+        m_resolutionY = resolution;
+        Q_EMIT resolutionYChanged();
+    }
+
+    inline auto resolutionX() const -> qsizetype { return m_resolutionX; }
+    inline auto setResolutionX(qsizetype resolution)
+    {
+        if(resolutionX() == resolution)
+        {
+            return;
+        }
+
+        m_resolutionX = resolution;
+        Q_EMIT resolutionXChanged();
+    }
+
+    inline auto resolutionScale() const -> qreal { return m_resolutionScale; }
+    inline auto setResolutionScale(qreal scale)
+    {
+        if(qFuzzyCompare(resolutionScale(), scale))
+        {
+            return;
+        }
+
+        m_resolutionScale = scale;
+        Q_EMIT resolutionScaledChanged();
+    }
+
+    inline auto speed() const -> qreal { return m_speed; }
+    inline auto setSpeed(qreal speed)
+    {
+        if(qFuzzyCompare(this->speed(), speed))
+        {
+            return;
+        }
+
+        m_speed = speed;
+        Q_EMIT speedChanged();
+    }
+
+    inline auto mouseSpeedBias() const -> qreal { return m_mouseSpeedBias; }
+    inline auto setMouseSpeedBias(qreal bias)
+    {
+        if(qFuzzyCompare(mouseSpeedBias(), bias))
+        {
+            return;
+        }
+
+        m_mouseSpeedBias = bias;
+        Q_EMIT mouseSpeedBiasChanged();
+    }
+
+    inline auto bufferA() const -> ShaderChannel* { return m_bufferA; }
+    inline auto setBufferA(ShaderChannel *buffer) -> void
+    {
+        if (m_bufferA == buffer)
+        {
+            return;
+        }
+
+        m_bufferA = buffer;
+        Q_EMIT bufferAChanged();
+    }
+
+    inline auto bufferB() const -> ShaderChannel* { return m_bufferB; }
+    inline auto setBufferB(ShaderChannel *buffer) -> void
+    {
+        if (m_bufferB == buffer)
+        {
+            return;
+        }
+
+        m_bufferB = buffer;
+        Q_EMIT bufferBChanged();
+    }
+
+    inline auto bufferC() const -> ShaderChannel* { return m_bufferC; }
+    inline auto setBufferC(ShaderChannel *buffer) -> void
+    {
+        if (m_bufferC == buffer)
+        {
+            return;
+        }
+
+        m_bufferC = buffer;
+        Q_EMIT bufferCChanged();
+    }
+
+    inline auto bufferD() const -> ShaderChannel* { return m_bufferD; }
+    inline auto setBufferD(ShaderChannel *buffer) -> void
+    {
+        if (m_bufferD == buffer)
+        {
+            return;
+        }
+
+        m_bufferD = buffer;
+        Q_EMIT bufferDChanged();
+    }
+
+    inline auto channel0() const -> ShaderChannel* { return m_channel0; }
+    inline auto setChannel0(ShaderChannel *channel) -> void
+    {
+        if (m_channel0 == channel)
+        {
+            return;
+        }
+
+        m_channel0 = channel;
+        Q_EMIT channel0Changed();
+    }
+
+    inline auto channel1() const -> ShaderChannel* { return m_channel1; }
+    inline auto setChannel1(ShaderChannel *channel) -> void
+    {
+        if (m_channel1 == channel)
+        {
+            return;
+        }
+
+        m_channel1 = channel;
+        Q_EMIT channel1Changed();
+    }
+
+    inline auto channel2() const -> ShaderChannel* { return m_channel2; }
+    inline auto setChannel2(ShaderChannel *channel) -> void
+    {
+        if (m_channel2 == channel)
+        {
+            return;
+        }
+
+        m_channel2 = channel;
+        Q_EMIT channel2Changed();
+    }
+
+    inline auto channel3() const -> ShaderChannel* { return m_channel3; }
+    inline auto setChannel3(ShaderChannel *channel) -> void
+    {
+        if (m_channel3 == channel)
+        {
+            return;
+        }
+
+        m_channel3 = channel;
+        Q_EMIT channel3Changed();
+    }
+
+    inline auto frameBufferChannel() const -> qint8 { return m_frameBufferChannel; };
+    inline auto setFrameBufferChannel(qint8 frameBufferChannel) -> void
+    {
+        if (m_frameBufferChannel == frameBufferChannel)
+        {
+            return;
+        }
+
+        m_frameBufferChannel = frameBufferChannel;
+        Q_EMIT frameBufferChannelChanged();
+    }
+
+    inline auto invert() const -> bool { return m_invert; }
+    inline auto setInvert(bool invert) -> void
+    {
+        if (m_invert == invert)
+        {
+            return;
+        }
+
+        m_invert = invert;
+        emit invertChanged();
+    }
+
+    inline auto mipmap() const -> bool { return m_mipmap; }
+    inline auto setMipmap(bool on)
+    {
+        if(on == mipmap())
+        {
+            return;
+        }
+
+        m_mipmap = on;
+        Q_EMIT mipmapChanged();
+    }
+
+    inline auto format() const -> Format { return m_format; }
+    inline auto setFormat(Format format)
+    {
+        if(this->format() == format)
+        {
+            return;
+        }
+
+        m_format = format;
+        Q_EMIT formatChanged();
+    }
+
+Q_SIGNALS:
+    auto sourceChanged() -> void;
+    auto typeChanged() -> void;
+    auto mirrorModeChanged() -> void;
+    auto textureRepeatChanged() -> void;
+    auto resolutionXChanged() -> void;
+    auto resolutionYChanged() -> void;
+    auto resolutionScaledChanged() -> void;
+    auto speedChanged() -> void;
+    auto mouseSpeedBiasChanged() -> void;
+    auto bufferAChanged() -> void;
+    auto bufferBChanged() -> void;
+    auto bufferCChanged() -> void;
+    auto bufferDChanged() -> void;
+    auto channel0Changed() -> void;
+    auto channel1Changed() -> void;
+    auto channel2Changed() -> void;
+    auto channel3Changed() -> void;
+    auto resolutionScaleChanged() -> void;
+    auto frameBufferChannelChanged() -> void;
+    auto invertChanged() -> void;
+    auto mipmapChanged() -> void;
+    auto formatChanged() -> void;
+
+private:
+    ShaderChannel *m_bufferA = nullptr;
+    ShaderChannel *m_bufferB = nullptr;
+    ShaderChannel *m_bufferC = nullptr;
+    ShaderChannel *m_bufferD = nullptr;
+
+    ShaderChannel *m_channel0 = nullptr;
+    ShaderChannel *m_channel1 = nullptr;
+    ShaderChannel *m_channel2 = nullptr;
+    ShaderChannel *m_channel3 = nullptr;
+
+    QString m_source;
+    Type m_type = Image;
+    MirrorMode m_mirrorMode = MirrorVertical;
+    TextureRepeat m_textureRepeat = ClampToEdge;
+    Format m_format = RGB8A;
+
+    qsizetype m_resolutionX = 0;
+    qsizetype m_resolutionY = 0;
+    qreal m_resolutionScale = 1.0;
+    qreal m_speed = 1.0;
+    qreal m_mouseSpeedBias = 1.0;
+
+    qint8 m_frameBufferChannel = -1;
+    bool m_invert = false;
+    bool m_mipmap = false;
+
+    Q_PROPERTY(ShaderChannel *bufferA READ bufferA WRITE setBufferA NOTIFY bufferAChanged FINAL)
+    Q_PROPERTY(ShaderChannel *bufferB READ bufferB WRITE setBufferB NOTIFY bufferBChanged FINAL)
+    Q_PROPERTY(ShaderChannel *bufferC READ bufferC WRITE setBufferC NOTIFY bufferCChanged FINAL)
+    Q_PROPERTY(ShaderChannel *bufferD READ bufferD WRITE setBufferD NOTIFY bufferDChanged FINAL)
+    Q_PROPERTY(ShaderChannel *channel0 READ channel0 WRITE setChannel0 NOTIFY channel0Changed FINAL)
+    Q_PROPERTY(ShaderChannel *channel1 READ channel1 WRITE setChannel1 NOTIFY channel1Changed FINAL)
+    Q_PROPERTY(ShaderChannel *channel2 READ channel2 WRITE setChannel2 NOTIFY channel2Changed FINAL)
+    Q_PROPERTY(ShaderChannel *channel3 READ channel3 WRITE setChannel3 NOTIFY channel3Changed FINAL)
+    Q_PROPERTY(QString source READ source WRITE setSource NOTIFY sourceChanged FINAL)
+    Q_PROPERTY(Type type READ type WRITE setType NOTIFY typeChanged FINAL)
+    Q_PROPERTY(MirrorMode mirrorMode READ mirrorMode WRITE setMirrorMode NOTIFY mirrorModeChanged FINAL)
+    Q_PROPERTY(TextureRepeat textureRepeat READ textureRepeat WRITE setTextureRepeat NOTIFY textureRepeatChanged FINAL)
+    Q_PROPERTY(qsizetype resolutionX READ resolutionX WRITE setResolutionX NOTIFY resolutionXChanged FINAL)
+    Q_PROPERTY(qsizetype resolutionY READ resolutionY WRITE setResolutionY NOTIFY resolutionYChanged FINAL)
+    Q_PROPERTY(qreal resolutionScale READ resolutionScale WRITE setResolutionScale NOTIFY resolutionScaleChanged FINAL)
+    Q_PROPERTY(qreal speed READ speed WRITE setSpeed NOTIFY speedChanged FINAL)
+    Q_PROPERTY(qreal mouseSpeedBias READ mouseSpeedBias WRITE setMouseSpeedBias NOTIFY mouseSpeedBiasChanged FINAL)
+    Q_PROPERTY(qint8 frameBufferChannel READ frameBufferChannel WRITE setFrameBufferChannel NOTIFY frameBufferChannelChanged FINAL)
+    Q_PROPERTY(bool invert READ invert WRITE setInvert NOTIFY invertChanged FINAL)
+    Q_PROPERTY(bool mipmap READ mipmap WRITE setMipmap NOTIFY mipmapChanged FINAL)
+    Q_PROPERTY(Format format READ format WRITE setFormat NOTIFY formatChanged FINAL)
+};
+
+Q_DECLARE_METATYPE(ShaderChannel)
+
+class KOMPLEX_EXPORT ShaderPack : public ShaderChannel
+{
+    Q_OBJECT
+    QML_ELEMENT
+
+    QString m_author;
+    QString m_description;
+    QString m_engine;
+    QString m_file;
+    QString m_id;
+    QString m_license;
+    QString m_name;
+    QString m_version;
+
+    Q_PROPERTY(QString author READ author WRITE setAuthor NOTIFY authorChanged)
+    Q_PROPERTY(QString description READ description WRITE setDescription NOTIFY descriptionChanged)
+    Q_PROPERTY(QString engine READ engine WRITE setEngine NOTIFY engineChanged)
+    Q_PROPERTY(QString file READ file WRITE setFile NOTIFY fileChanged)
+    Q_PROPERTY(QString id READ id WRITE setId NOTIFY idChanged)
+    Q_PROPERTY(QString license READ license WRITE setLicense NOTIFY licenseChanged)
+    Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)
+    Q_PROPERTY(QString version READ version WRITE setVersion NOTIFY versionChanged)
+
+Q_SIGNALS:
+    void authorChanged();
+    void descriptionChanged();
+    void engineChanged();
+    void idChanged();
+    void licenseChanged();
+    void nameChanged();
+    void versionChanged();
+    void fileChanged();
+
+public:
+
+    QString author() const { return m_author; }
+    void setAuthor(const QString& author)
+    {
+        if(author != m_author)
+        {
+            m_author = author;
+            Q_EMIT authorChanged();
+        }
+    }
+
+    QString description() const { return m_description; }
+    void setDescription(const QString& description)
+    {
+        if(description != m_description)
+        {
+            m_description = description;
+            Q_EMIT descriptionChanged();
+        }
+    }
+
+    QString engine() const { return m_engine; }
+    void setEngine(const QString& engine)
+    {
+        if(engine != m_engine)
+        {
+            m_engine = engine;
+            Q_EMIT engineChanged();
+        }
+    }
+
+    QString file() const { return m_file; }
+    void setFile(const QString& file)
+    {
+        if(file != m_file)
+        {
+            m_file = file;
+            Q_EMIT fileChanged();
+        }
+    }
+
+    QString id() const { return m_id; }
+    void setId(const QString& id)
+    {
+        if(id != m_id)
+        {
+            m_id = id;
+            Q_EMIT idChanged();
+        }
+    }
+
+    QString license() const { return m_license; }
+    void setLicense(const QString& license)
+    {
+        if(license != m_license)
+        {
+            m_license = license;
+            Q_EMIT licenseChanged();
+        }
+    }
+
+    QString name() const { return m_name; }
+    void setName(const QString& name)
+    {
+        if(name != m_name)
+        {
+            m_name = name;
+            Q_EMIT nameChanged();
+        }
+    }
+
+    QString version() const { return m_version; }
+    void setVersion(const QString& version)
+    {
+        if(version != m_version)
+        {
+            m_version = version;
+            Q_EMIT versionChanged();
+        }
+    }
+
+    auto json() -> QJsonDocument
+    {
+        QJsonObject rootObject;
+
+        rootObject[QStringLiteral("author")] = author();
+        rootObject[QStringLiteral("version")] = version();
+        rootObject[QStringLiteral("name")] = name();
+        rootObject[QStringLiteral("id")] = id();
+        rootObject[QStringLiteral("engine")] = engine();
+        rootObject[QStringLiteral("license")] = license();
+
+        QJsonObject bufferObject = bufferJson(this);
+        const QStringList bufferKeys = bufferObject.keys();
+        for(const QString &key : bufferKeys)
+        {
+            rootObject[key] = bufferObject[key];
+        }
+
+        QJsonObject channelObject = channelJson(this);
+        const QStringList channelKeys = channelObject.keys();
+        for(const QString &key : channelKeys)
+        {
+            rootObject[key] = channelObject[key];
+        }
+
+        return QJsonDocument
+        {
+            rootObject
+        };
+    }
+
+private:
+
+    auto bufferJson(ShaderChannel *channel) -> QJsonObject
+    {
+        QJsonObject channelObject;
+
+        if(channel->bufferA())
+        {
+            channelObject[QStringLiteral("bufferA")] = channelJson(channel->bufferA());
+        }
+        if(channel->bufferB())
+        {
+            channelObject[QStringLiteral("bufferB")] = channelJson(channel->bufferB());
+        }
+        if(channel->bufferC())
+        {
+            channelObject[QStringLiteral("bufferC")] = channelJson(channel->bufferC());
+        }
+        if(channel->bufferD())
+        {
+            channelObject[QStringLiteral("bufferD")] = channelJson(channel->bufferD());
+        }
+
+        return channelObject;
+    }
+
+    auto channelJson(ShaderChannel *channel) -> QJsonObject
+    {
+        if(channel == nullptr)
+        {
+            return {};
+        }
+
+        QJsonObject channelObject;
+
+        if(channel->channel0() != nullptr)
+        {
+            channelObject[QStringLiteral("channel0")] = channelJson(channel->channel0());
+        }
+
+        if(channel->channel1() != nullptr)
+        {
+            channelObject[QStringLiteral("channel1")] = channelJson(channel->channel1());
+        }
+
+        if(channel->channel2() != nullptr)
+        {
+            channelObject[QStringLiteral("channel2")] = channelJson(channel->channel2());
+        }
+
+        if(channel->channel3() != nullptr)
+        {
+            channelObject[QStringLiteral("channel3")] = channelJson(channel->channel3());
+        }
+
+        channelObject[QStringLiteral("source")] = channel->source();
+        channelObject[QStringLiteral("type")] = channel->type();
+        channelObject[QStringLiteral("texture_mirroring")] = channel->mirrorMode();
+        channelObject[QStringLiteral("wrap_mode")] = channel->textureRepeat();
+        channelObject[QStringLiteral("invert")] = channel->invert();
+        channelObject[QStringLiteral("time_scale")] = channel->speed();
+        channelObject[QStringLiteral("resolution_scale")] = channel->resolutionScale();
+        channelObject[QStringLiteral("mouse_scale")] = channel->mouseSpeedBias();
+        channelObject[QStringLiteral("resolution_x")] = channel->resolutionX();
+        channelObject[QStringLiteral("resolution_y")] = channel->resolutionY();
+        channelObject[QStringLiteral("frame_buffer_channel")] = channel->frameBufferChannel();
+        channelObject[QStringLiteral("format")] = channel->format();
+        channelObject[QStringLiteral("mipmap")] = channel->mipmap();
+
+        return channelObject;
+    }
+};
+
+Q_DECLARE_METATYPE(ShaderPack)
+#endif

KomplexHubPlugin/common/shadertoymetadata.h

@@ -0,0 +1,108 @@
+#ifndef SHADERTOYMETADATA_H
+#define SHADERTOYMETADATA_H
+#include <QObject>
+#include <QDateTime>
+#include <QNetworkReply>
+#include <QNetworkRequest>
+#include <QStandardPaths>
+#include <QUuid>
+#include <QProcess>
+#include <QTimer>
+#include <QMutex>
+#include <QDir>
+#include <QEventLoop>
+#include <QJsonDocument>
+#include <QJsonParseError>
+#include <QJsonObject>
+#include <QJsonArray>
+#include <QJsonValue>
+#include <QNetworkAccessManager>
+#include <QPixmap>
+#include <qqmlintegration.h>
+
+#include "komplex_global.h"
+
+struct KOMPLEX_EXPORT ShaderToyMetadata
+{
+    QDateTime date;
+    QString description;
+    quint64 flags = 0;
+    bool hasLiked = false;
+    QString id;
+    quint64 likes = 0;
+    QString name;
+    quint64 published = 0;
+    QStringList tags;
+    bool usePreview = false;
+    QString username;
+    QString version;
+    quint64 views = 0;
+};
+
+struct KOMPLEX_EXPORT ShaderToyRenderInput
+{
+    quint8 channel = 0;
+    QString ctype;
+    QString filter;
+    quint64 id = 0;
+    QString internal;
+    bool published = false;
+    QString source;
+    bool srgb = false;
+    bool verticalFlip = false;
+    QString wrap;
+};
+
+struct KOMPLEX_EXPORT ShaderToyRenderOutput
+{
+    const quint8 channel = 0;
+    const quint64 id = 0;
+};
+
+struct KOMPLEX_EXPORT ShaderToyRenderPass
+{
+    QByteArray code;
+    QString description;
+    QList<ShaderToyRenderInput> inputs;
+    QString name;
+    QList<ShaderToyRenderOutput> outputs;
+    QString type;
+};
+
+enum KOMPLEX_EXPORT ShaderToyErrorCode
+{
+    NoError = 0,
+    NetworkError = (0x10 << 24),
+    MediaError = (0x20 << 24),
+    DiskError = (0x30 << 24),
+    CompileError = (0x40 << 24)
+};
+
+struct KOMPLEX_EXPORT ShaderToyError
+{
+    QString message;
+    ShaderToyErrorCode code;
+};
+
+struct KOMPLEX_EXPORT ShaderToyEntry
+{
+    enum Status
+    {
+        Idle,
+        Loading,
+        Compiling,
+        Compiled,
+        Error
+    };
+
+    ShaderToyMetadata metadata;
+    QList<ShaderToyRenderPass> renderPasses;
+    QByteArray data;
+    ShaderToyError error;
+    QStringList videoSelections;
+    Status status = Idle;
+};
+
+Q_DECLARE_METATYPE(ShaderToyEntry)
+Q_DECLARE_METATYPE(ShaderToyError)
+#endif // SHADERTOYMETADATA_H

KomplexHubPlugin/common/slidingcachecontroller.h

@@ -96,7 +96,6 @@ public:
     auto at(qsizetype index) const -> const T&
     {
         QMutexLocker cacheLocker(&m_cacheMutex);
-        T defaultValue;
 
         if(!externalBoundaryCheck(index))
         {
@@ -110,12 +109,12 @@ public:
 
         qsizetype internalIndex = this->internalIndex(index);
 
-        if(!internalBoundaryCheck(index))
+        if(!internalBoundaryCheck(internalIndex))
         {
             return defaultValue;
         }
 
-        return m_cache.at(index);
+        return m_cache.at(internalIndex);
     }
 
     /**
@@ -143,17 +142,17 @@ public:
 
         qsizetype internalIndex = this->internalIndex(index);
 
-        if(!internalBoundaryCheck(index))
+        if(!internalBoundaryCheck(internalIndex))
         {
             return {};
         }
 
         if(!internalBoundaryCheck(count - 1))
         {
-            count = m_cache.count() - index;
+            count = m_cache.count() - internalIndex;
         }
 
-        return m_cache.mid(index, count);
+        return m_cache.mid(internalIndex, count);
     }
 
     /**
@@ -203,7 +202,7 @@ public:
             return;
         }
 
-        if(!externalBoundaryCheck(index + count))
+        if(externalBoundaryCheck(index + count))
         {
             slideWindow(index);
         }
@@ -236,7 +235,8 @@ public:
             return;
         }
 
-
+        m_windowSize = windowSize;
+        Q_EMIT windowSizeChanged();
     }
 
 protected:
@@ -319,7 +319,7 @@ private:
         );
 
         bool safe = false;
-        ((safe = index >= 0 && index < m_cache.count()), ...);
+        ((safe = ((index >= 0) && (index < m_cache.count()))), ...);
         return safe;
     }
 
@@ -345,7 +345,7 @@ private:
             }
         }
 
-        while (index <= m_windowOffset - (SLIDING_CACHE_WINDOW_SIZE - SLIDING_CACHE_PREFETCH_THRESHOLD))
+        while (index < m_windowOffset)
         {
             if(!slideBackward())
             {
@@ -588,7 +588,9 @@ private:
      * @brief m_windowSize
      * Override for window size
      */
-    qsizetype m_windowSize = nullsize;
+    qsizetype m_windowSize = SLIDING_CACHE_WINDOW_SIZE;
+
+    T defaultValue;
 };
 
 #endif // SLIDINGCACHECONTROLLER_H

KomplexHubPlugin/downloadmanager.cpp

@@ -0,0 +1,736 @@
+#include "downloadmanager.h"
+#include "common/coreservices.h"
+#include "common/exceptions.h"
+#include "common/shaderpack.h"
+
+DownloadManager::DownloadManager(QObject *parent)
+    : QObject{parent}
+{
+    m_compiler = new PackCompiler(this);
+
+    QObject::connect
+    (
+        m_compiler,
+        &PackCompiler::progressChanged,
+        this,
+        &DownloadManager::compileProgressChanged
+    );
+
+    QObject::connect
+    (
+        m_compiler,
+        &PackCompiler::currentStepChanged,
+        this,
+        &DownloadManager::compileStepsCompletedChanged
+    );
+
+    QObject::connect
+    (
+        m_compiler,
+        &PackCompiler::totalStepsChanged,
+        this,
+        &DownloadManager::compileStepsChanged
+    );
+}
+
+/**
+ * [1] Download image from endpoint
+ * [2] Apply generic single-media template, with an image source
+ * [3] Optionally ask user if they would like to apply manipulative shader
+ * [4] Install locally
+ */
+auto DownloadManager::downloadImage(const QString &author, const QString &authorId, const QString &description, const QUrl &url) noexcept(false) -> void
+{
+    QFuture future = QtConcurrent::run
+    (
+        [this, url, author, authorId, description]()
+        {
+            QNetworkRequest request(url);
+            QString id = QUuid::createUuidV7().toString(QUuid::WithoutBraces);
+
+            QFuture<QUrl> downloadUri = download(request, id);
+
+            downloadUri
+                .then
+                (
+                    [this, author, description, id](QUrl result) -> QUrl
+                    {
+                        ShaderPack metadata;
+                        metadata.setAuthor(author);
+                        metadata.setDescription(description);
+                        metadata.setName(QStringLiteral("Pexels Image (%1)").arg(id));
+
+                        QUrl packUri
+                        (
+                            QStringLiteral("%1/%2").arg
+                            (
+                                QStandardPaths::writableLocation(QStandardPaths::TempLocation),
+                                id
+                            )
+                        );
+
+                        QUrl packImageUri
+                        (
+                            QStringLiteral("%1/%2/images/%3").arg
+                            (
+                                QStandardPaths::writableLocation(QStandardPaths::TempLocation),
+                                id,
+                                result.fileName()
+                            )
+                        );
+
+                        QDir packDirectory(packUri.toLocalFile());
+                        packDirectory.mkpath(packUri.toLocalFile());
+                        packDirectory.mkdir(QStringLiteral("images"));
+
+                        QFile::rename(result.toLocalFile(), packImageUri.toLocalFile());
+
+                        QFile packFile
+                        (
+                            packDirectory.absoluteFilePath
+                            (
+                                QStringLiteral("pack.json")
+                            )
+                        );
+
+                        if(!packFile.open(QFile::ReadWrite))
+                        {
+                            setError(QStringLiteral("File Error"), packFile.errorString());
+                            throw FileException(packFile.errorString());
+                        }
+
+                        QByteArray data = metadata.json().toJson(QJsonDocument::Compact);
+
+                        if(packFile.write(data) != data.length())
+                        {
+                            setError(QStringLiteral("File Error"), packFile.errorString());
+                            throw FileException(packFile.errorString());
+                        }
+
+                        packFile.close();
+
+                        return packUri;
+                    }
+                )
+                .then
+                (
+                    [this](QUrl result)
+                    {
+                        install(result);
+                    }
+                )
+                .onCanceled
+                (
+                    [this]()
+                    {
+                        reset();
+                    }
+                )
+                .onFailed
+                (
+                    [this] ()
+                    {
+                        reset();
+                    }
+                );
+        }
+    );
+}
+
+auto DownloadManager::downloadVideo(const QString &author, const QString &authorId, const QString &description, const QUrl &url) noexcept(false) -> void
+{
+    QFuture future = QtConcurrent::run
+    (
+        [this, url, author, authorId, description]()
+        {
+            QNetworkRequest request(url);
+            QString id = QUuid::createUuidV7().toString(QUuid::WithoutBraces);
+
+            QFuture<QUrl> downloadUri = download(request, id);
+
+            downloadUri
+                .then
+                (
+                    [this, author, description, id](QUrl result) -> QUrl
+                    {
+                        ShaderPack metadata;
+                        metadata.setAuthor(author);
+                        metadata.setDescription(description);
+                        metadata.setName(QStringLiteral("Pexels Video (%1)").arg(id));
+                        metadata.setType(ShaderPack::Video);
+
+                        QUrl packUri
+                        (
+                            QStringLiteral("%1/%2").arg
+                            (
+                                QStandardPaths::writableLocation(QStandardPaths::TempLocation),
+                                id
+                            )
+                        );
+
+                        QUrl packImageUri
+                        (
+                            QStringLiteral("%1/%2/images/%3").arg
+                            (
+                                QStandardPaths::writableLocation(QStandardPaths::TempLocation),
+                                id,
+                                result.fileName()
+                            )
+                        );
+
+                        QDir packDirectory(packUri.toLocalFile());
+                        packDirectory.mkpath(packUri.toLocalFile());
+                        packDirectory.mkdir(QStringLiteral("images"));
+
+                        QFile::rename(result.toLocalFile(), packImageUri.toLocalFile());
+
+                        QFile packFile
+                        (
+                            packDirectory.absoluteFilePath
+                            (
+                                QStringLiteral("pack.json")
+                            )
+                        );
+
+                        if(!packFile.open(QFile::ReadWrite))
+                        {
+                            setError(QStringLiteral("File Error"), packFile.errorString());
+                            throw FileException(packFile.errorString());
+                        }
+
+                        QByteArray data = metadata.json().toJson(QJsonDocument::Compact);
+
+                        if(packFile.write(data) != data.length())
+                        {
+                            setError(QStringLiteral("File Error"), packFile.errorString());
+                            throw FileException(packFile.errorString());
+                        }
+
+                        packFile.close();
+
+                        return packUri;
+                    }
+                )
+                .then
+                (
+                    [this](QUrl result)
+                    {
+                        install(result);
+                    }
+                )
+                .onCanceled
+                (
+                    [this]()
+                    {
+                        reset();
+                    }
+                )
+                .onFailed
+                (
+                    [this] ()
+                    {
+                        reset();
+                    }
+                );
+        }
+    );
+}
+
+auto DownloadManager::downloadPack(const QString &id) noexcept(false) -> void
+{
+    QFuture aether = QtConcurrent::run
+    (
+        [this, id]()
+        {
+            QUrl downloadUrl = QUrl
+            (
+                QStringLiteral("%1/%2/%3").arg
+                (
+                    KOMPLEX_API_HOST,
+                    KOMPLEX_API_VERSION,
+                    KOMPLEX_ENDPOINT_PACKS_ITEM
+                )
+            );
+
+            QNetworkRequest request(downloadUrl);
+            request.setRawHeader(QByteArray("uuid"), id.toUtf8());
+
+            QFuture<QUrl> downloadUri = download(request, id, Post);
+
+            downloadUri
+                .then
+                (
+                    [this](QUrl result) -> QUrl
+                    {
+                        return m_compiler->process(result).result();
+                    }
+                )
+                .then
+                (
+                    [this](QUrl result)
+                    {
+                        install(result);
+                    }
+                )
+                .onFailed
+                (
+                    [this]()
+                    {
+                        reset();
+                        setError(m_compiler->errorTitle(), m_compiler->errorMessage());
+                    }
+                )
+                .onCanceled
+                (
+                    [this]()
+                    {
+                        reset();
+                    }
+                );
+        }
+    );
+}
+
+auto DownloadManager::reset() -> void
+{
+    setError(QString(), QString());
+    setState(Idle);
+}
+
+auto DownloadManager::compileProgress() -> qreal
+{
+    if(m_compiler == nullptr)
+    {
+        return 0;
+    }
+
+    return m_compiler->progress();
+}
+
+auto DownloadManager::compileSteps() -> qint64
+{
+    if(m_compiler == nullptr)
+    {
+        return 0;
+    }
+
+    return m_compiler->totalSteps();
+}
+
+auto DownloadManager::compileStepsCompleted() -> qint64
+{
+    if(nullptr == m_compiler)
+    {
+        return 0;
+    }
+
+    return m_compiler->currentStep();
+}
+
+auto DownloadManager::setError(const QString &title, const QString &message) -> void
+{
+    if(title == m_errorTitle && message == m_errorMessage)
+    {
+        return;
+    }
+
+    m_errorMessage = std::move(message);
+    m_errorTitle = std::move(title);
+    Q_EMIT errorChanged();
+}
+
+void DownloadManager::setCompilerOutput(const QString &compilerOutput)
+{
+    if (m_compilerOutput == compilerOutput)
+    {
+        return;
+    }
+
+    m_compilerOutput = compilerOutput;
+    emit compilerOutputChanged();
+}
+
+auto DownloadManager::setState(State state) -> void
+{
+    if(state == m_state)
+    {
+        return;
+    }
+
+    m_state = state;
+    Q_EMIT stateChanged();
+
+    return;
+}
+
+auto DownloadManager::setDownloadProgress(qreal progress) -> void
+{
+    if(qFuzzyCompare(progress, m_downloadProgress))
+    {
+        return;
+    }
+
+    m_downloadProgress = progress;
+    Q_EMIT downloadProgressChanged();
+}
+
+auto DownloadManager::install(const QUrl &uri) noexcept(false) -> QUrl
+{
+    if(!uri.isLocalFile())
+    {
+        throw FileException(QStringLiteral("URI is not a local file"));
+    }
+
+    QDir tempDirectory(uri.toLocalFile());
+
+    QString installLocation = QStringLiteral("%1/.local/share/komplex/packs/%2").arg
+    (
+        QStandardPaths::writableLocation(QStandardPaths::HomeLocation),
+        tempDirectory.dirName()
+    );
+
+    QDir installDirectory(installLocation);
+
+    if(installDirectory.exists())
+        installDirectory.removeRecursively();
+
+    QProcess process;
+
+    QObject::connect
+    (
+        &process,
+        &QProcess::readyReadStandardOutput,
+        this,
+        [this, &process]()
+        {
+            QByteArray processData = process.readAllStandardOutput();
+
+            if(!processData.isValidUtf8())
+            {
+                qWarning() << QStringLiteral("Process output not valid UTF8 data");
+                return;
+            }
+
+            setCompilerOutput(m_compilerOutput + processData);
+        }
+    );
+
+    QObject::connect
+    (
+        &process,
+        &QProcess::readyReadStandardError,
+        this,
+        [this, &process]()
+        {
+            QByteArray processData = process.readAllStandardError();
+
+            if(!processData.isValidUtf8())
+            {
+                qWarning() << QStringLiteral("Process output not valid UTF8 data");
+                return;
+            }
+
+            setCompilerOutput(m_compilerOutput + processData);
+        }
+    );
+
+    QStringList arguments = QStringList
+    {
+        QStringLiteral("-R"),
+        uri.toLocalFile(),
+        installLocation
+    };
+
+    process.start(QStringLiteral("cp"), arguments);
+
+    if(!process.waitForStarted(3000))
+    {
+        qWarning() << QStringLiteral("Could not start copy process: %1").arg(process.readAllStandardError());
+        throw FileException(QStringLiteral("Could not start install process"));
+    }
+
+    if(!process.waitForFinished())
+    {
+        qWarning() << QStringLiteral("Copy process took longer than expected (>30s)");
+        throw FileException(QStringLiteral("Install process took longer than expected (>30s)"));
+    }
+
+    QUrl installUri(installLocation);
+    installUri.setScheme(QStringLiteral("file://"));
+
+    return installUri;
+}
+
+auto DownloadManager::download(const QNetworkRequest &request, const QString &id, RequestType type) -> QFuture<QUrl>
+{
+    return QtConcurrent::run
+    (
+        [this, request, id]() -> QUrl
+        {
+            QEventLoop loop;
+            QString filename = id;
+
+            if(filename.isEmpty())
+            {
+                filename = QUuid::createUuidV7().toString();
+            }
+
+            QUrl downloadUri = QStringLiteral("%1/%2").arg
+            (
+                QStandardPaths::writableLocation(QStandardPaths::TempLocation),
+                filename
+            );
+
+            auto manager = CoreServices::networkAccessManager().toStrongRef();
+
+            if(manager == nullptr)
+            {
+                throw NetworkException
+                {
+                    QStringLiteral("Network Manager reference has already been deleted")
+                };
+            }
+
+            QFile downloadFile(downloadUri.toLocalFile());
+
+            if(!downloadFile.open(QFile::ReadWrite))
+            {
+                throw FileException(QStringLiteral("Could not open temp file location"));
+            }
+
+            QNetworkReply *reply = manager->post(request, nullptr);
+
+            QObject::connect
+            (
+                reply,
+                &QNetworkReply::finished,
+                &loop,
+                &QEventLoop::quit
+            );
+
+            QObject::connect
+            (
+                reply,
+                &QNetworkReply::errorOccurred,
+                &loop,
+                [&loop](QNetworkReply::NetworkError error) -> void
+                {
+                    loop.quit();
+
+                    throw NetworkException
+                    (
+                        QStringLiteral("Network Error %1").arg
+                        (
+                            QString::number(static_cast<qint64>(error))
+                        )
+                    );
+                }
+            );
+
+            QObject::connect
+            (
+                reply,
+                &QNetworkReply::downloadProgress,
+                this,
+                [this](qint64 bytesDownloaded, qint64 bytesTotal)
+                {
+                    setDownloadSize(bytesTotal);
+                    setDownloadedBytes(bytesDownloaded);
+                    setDownloadProgress(static_cast<qreal>(bytesDownloaded) / bytesTotal);
+                }
+            );
+
+            QObject::connect
+            (
+                reply,
+                &QNetworkReply::readyRead,
+                this,
+                [this, &downloadFile, &reply]()
+                {
+                    if(!downloadFile.isOpen())
+                    {
+                        return;
+                    }
+
+                    quint64 bytes = reply->bytesAvailable();
+                    quint64 bytesWritten = downloadFile.write(reply->read(bytes));
+
+                    if(bytesWritten != bytes)
+                    {
+                        throw FileException(QStringLiteral("Could not write temp file data"));
+                    }
+                }
+            );
+
+            if(!reply->isFinished())
+            {
+                loop.exec();
+            }
+
+            if(reply->bytesAvailable() > 0)
+            {
+                quint64 bytes = reply->bytesAvailable();
+                quint64 bytesWritten = downloadFile.write(reply->read(bytes));
+
+                if(bytesWritten != bytes)
+                {
+                    throw FileException(QStringLiteral("Could not write temp file data"));
+                }
+            }
+
+            downloadFile.close();
+            manager.clear();
+
+            return downloadUri;
+        }
+    );
+}
+
+auto DownloadManager::readShaderToyEntry(const QUrl &uri) noexcept(false) -> ShaderToyEntry
+{
+    if(!uri.isLocalFile())
+    {
+        throw FileException(QStringLiteral("URI is not a local file"));
+    }
+
+    QDir packDir(uri.toLocalFile());
+
+    if(!packDir.exists(QStringLiteral("pack.json")))
+    {
+        throw FileException(QStringLiteral("Pack file not found"));
+    }
+
+    QFile packFile(packDir.absoluteFilePath(QStringLiteral("pack.json")));
+
+    if(!packFile.open(QFile::ReadOnly))
+    {
+        throw FileException
+        (
+            QStringLiteral("Could not open pack file: %1").arg
+            (
+                packFile.errorString()
+            )
+        );
+    }
+
+    QByteArray data = packFile.readAll();
+    QJsonParseError jsonError;
+
+    QJsonDocument document = QJsonDocument::fromJson(data, &jsonError);
+
+    if(jsonError.error != QJsonParseError::NoError)
+    {
+        throw FileException
+        (
+            QStringLiteral("Could parse pack file: %1").arg
+            (
+                jsonError.errorString()
+            )
+        );
+    }
+
+    QJsonObject documentObject = document.object();
+    QJsonObject rootObject = documentObject[QStringLiteral("Shader")].toObject();
+    QJsonObject infoObject = rootObject[QStringLiteral("info")].toObject();
+    QJsonArray tagsArray = infoObject[QStringLiteral("tags")].toArray();
+
+    QStringList tags;
+
+    for(const QJsonValue &tag : std::as_const(tagsArray))
+        tags += tag.toString();
+
+    ShaderToyEntry entry;
+
+    entry.metadata = ShaderToyMetadata
+    {
+        QDateTime::fromSecsSinceEpoch(infoObject[QStringLiteral("date")].toInt()),
+        infoObject[QStringLiteral("description")].toString(),
+        static_cast<quint64>(infoObject[QStringLiteral("flags")].toInt()),
+        static_cast<bool>(infoObject[QStringLiteral("hasLiked")].toInt()),
+        infoObject[QStringLiteral("id")].toString(),
+        static_cast<quint64>(infoObject[QStringLiteral("likes")].toInt()),
+        infoObject[QStringLiteral("name")].toString(),
+        static_cast<quint64>(infoObject[QStringLiteral("published")].toInt()),
+        tags,
+        static_cast<bool>(infoObject[QStringLiteral("usePreview")].toInt()),
+        infoObject[QStringLiteral("username")].toString(),
+        rootObject[QStringLiteral("ver")].toString(),
+        static_cast<quint64>(infoObject[QStringLiteral("views")].toInt())
+    };
+
+    QJsonArray ShaderToyRenderPassArray = rootObject[QStringLiteral("renderpass")].toArray();
+
+    for(const QJsonValue &ShaderToyRenderPassValue : std::as_const(ShaderToyRenderPassArray))
+    {
+        QJsonArray inputArray = ShaderToyRenderPassValue[QStringLiteral("inputs")].toArray();
+        QJsonArray outputArray = ShaderToyRenderPassValue[QStringLiteral("outputs")].toArray();
+        QList<ShaderToyRenderInput> inputs;
+        QList<ShaderToyRenderOutput> outputs;
+
+        for(const QJsonValue &inputValue : std::as_const(inputArray))
+        {
+            QJsonObject samplerObject = inputValue[QStringLiteral("sampler")].toObject();
+            inputs.append
+            (
+                ShaderToyRenderInput
+                {
+                    static_cast<quint8>(inputValue[QStringLiteral("channel")].toInt()),
+                    inputValue[QStringLiteral("ctype")].toString(),
+                    samplerObject[QStringLiteral("filter")].toString(),
+                    static_cast<quint64>(inputValue[QStringLiteral("id")].toInt()),
+                    samplerObject[QStringLiteral("internal")].toString(),
+                    static_cast<bool>(inputValue[QStringLiteral("published")].toInt()),
+                    inputValue[QStringLiteral("src")].toString(),
+                    samplerObject[QStringLiteral("srgb")].toBool(),
+                    samplerObject[QStringLiteral("verticalFlip")].toBool(),
+                    samplerObject[QStringLiteral("wrap")].toString()
+                }
+            );
+        }
+
+        for(const QJsonValue &outputValue : std::as_const(outputArray))
+        {
+            outputs.append
+            (
+                ShaderToyRenderOutput
+                {
+                    static_cast<quint8>(outputValue[QStringLiteral("channel")].toInt()),
+                    static_cast<quint64>(outputValue[QStringLiteral("id")].toInt())
+                }
+            );
+        }
+
+        entry.renderPasses.append
+        (
+            ShaderToyRenderPass
+            {
+                ShaderToyRenderPassValue[QStringLiteral("code")].toVariant().toByteArray(),
+                ShaderToyRenderPassValue[QStringLiteral("description")].toString(),
+                inputs,
+                ShaderToyRenderPassValue[QStringLiteral("name")].toString(),
+                outputs,
+                ShaderToyRenderPassValue[QStringLiteral("type")].toString()
+            }
+        );
+    }
+
+    return std::move(entry);
+}
+
+auto DownloadManager::setDownloadedBytes(qint64 downloadedBytes) -> void
+{
+    if (m_downloadedBytes == downloadedBytes)
+        return;
+
+    m_downloadedBytes = downloadedBytes;
+    emit downloadedBytesChanged();
+}
+
+auto DownloadManager::setDownloadSize(qint64 downloadSize) -> void
+{
+    if (m_downloadSize == downloadSize)
+        return;
+
+    m_downloadSize = downloadSize;
+    emit downloadSizeChanged();
+}

KomplexHubPlugin/downloadmanager.h

@@ -0,0 +1,154 @@
+#ifndef DOWNLOADMANAGER_H
+#define DOWNLOADMANAGER_H
+
+#include <QObject>
+#include <QNetworkAccessManager>
+#include <QNetworkReply>
+#include <QNetworkRequest>
+#include <QFileInfo>
+#include <QUuid>
+#include <QQmlEngine>
+#include <QProcess>
+#include <QDir>
+#include <QStandardPaths>
+#include <QUuid>
+#include <QtConcurrent/QtConcurrentRun>
+
+#include "common/komplex_global.h"
+#include "common/shadertoymetadata.h"
+#include "common/shaderpack.h"
+#include "packcompiler.h"
+
+class KOMPLEX_EXPORT DownloadManager : public QObject
+{
+    Q_OBJECT
+    QML_ELEMENT
+public:
+
+    enum State
+    {
+        Idle,
+        Downloading,
+        Compiling,
+        Installing,
+        Complete,
+        Error
+    };
+    Q_ENUM(State)
+
+    enum RequestType
+    {
+        Get,
+        Post
+    };
+
+    explicit DownloadManager(QObject *parent = nullptr);
+
+    /**
+     * @brief downloadImage
+     * Downloads the image to tmp from the given url and generates a pack
+     * out of it
+     * @param url
+     */
+    auto downloadImage
+    (
+        const QString &author,
+        const QString &authorId,
+        const QString &description,
+        const QUrl &url
+    ) noexcept(false) -> void;
+
+    /**
+     * @brief downloadVideo
+     * Downloads the video to tmp from the given url and generates a pack
+     * out of it
+     * @param author
+     * @param authorId
+     * @param description
+     * @param url
+     */
+    auto downloadVideo
+    (
+        const QString &author,
+        const QString &authorId,
+        const QString &description,
+        const QUrl &url
+    ) noexcept(false) -> void;
+
+    /**
+     * @brief downloadPack
+     * Attempts to download, compile and install the wallpaper
+     * pack from the komplex endpoint.
+     * @param id
+     * @return File info of the installed pack
+     */
+    auto downloadPack(const QString &id) noexcept(false) -> void;
+
+    auto compilerOutput() const -> const QString & { return m_compilerOutput; }
+    auto errorTitle() const -> const QString & { return m_errorTitle; }
+    auto errorMessage() const -> const QString & { return m_errorMessage; }
+    auto state() const -> State { return m_state; }
+    auto reset() -> void;
+    auto downloadProgress() -> qreal { return m_downloadProgress; }
+    auto compileProgress() -> qreal;
+    auto compileSteps() -> qint64;
+    auto compileStepsCompleted() -> qint64;
+
+    auto downloadSize() const -> qint64 { return m_downloadSize; }
+    auto setDownloadSize(qint64 downloadSize) -> void;
+
+    auto downloadedBytes() const -> qint64 { return m_downloadedBytes; }
+    auto setDownloadedBytes(qint64 downloadedBytes) -> void;
+
+protected:
+    auto setError(const QString &title, const QString &message) -> void;
+    auto setCompilerOutput(const QString &compilerOutput) -> void;
+    auto setState(State state) -> void;
+    auto setDownloadProgress(qreal progress) -> void;
+
+signals:
+    auto compilerOutputChanged() -> void;
+    auto errorChanged() -> void;
+    auto stateChanged() -> void;
+    auto downloadProgressChanged() -> void;
+    auto compileProgressChanged() -> void;
+    auto downloadComplete(const QString &uri) -> void;
+    auto downloadSizeChanged() -> void;
+    auto downloadedBytesChanged() -> void;
+    auto compileStepsChanged() -> void;
+    auto compileStepsCompletedChanged() -> void;
+
+private:
+    auto compile(const QUrl &uri) noexcept(false) -> QUrl;
+    auto install(const QUrl &uri) noexcept(false) -> QUrl;
+    auto download(const QNetworkRequest &request, const QString &id, RequestType type = Get) -> QFuture<QUrl>;
+    auto readShaderToyEntry(const QUrl &uri) noexcept(false) -> ShaderToyEntry;
+
+    QString m_compilerOutput;
+    QString m_errorTitle;
+    QString m_errorMessage;
+
+    qreal m_downloadProgress = 0;
+    qint64 m_downloadSize = 0;
+    qint64 m_downloadedBytes = 0;
+    qreal m_compileProgress = 0;
+    State m_state;
+
+    QMutex m_downloadMutex;
+
+    PackCompiler *m_compiler = nullptr;
+
+    Q_PROPERTY(QString compilerOutput READ compilerOutput WRITE setCompilerOutput NOTIFY compilerOutputChanged FINAL)
+    Q_PROPERTY(QString errorTitle READ errorTitle NOTIFY errorChanged FINAL)
+    Q_PROPERTY(QString errorMessage READ errorMessage NOTIFY errorChanged FINAL)
+    Q_PROPERTY(qreal downloadProgress READ downloadProgress NOTIFY downloadProgressChanged FINAL)
+    Q_PROPERTY(qreal compileProgress READ compileProgress NOTIFY compileProgressChanged FINAL)
+    Q_PROPERTY(State state READ state NOTIFY stateChanged FINAL)
+    Q_PROPERTY(qint64 downloadSize READ downloadSize WRITE setDownloadSize NOTIFY downloadSizeChanged FINAL)
+    Q_PROPERTY(qint64 downloadedBytes READ downloadedBytes WRITE setDownloadedBytes NOTIFY downloadedBytesChanged FINAL)
+    Q_PROPERTY(qint64 compileSteps READ compileSteps NOTIFY compileStepsChanged FINAL)
+    Q_PROPERTY(qint64 compileStepsCompleted READ compileStepsCompleted NOTIFY compileStepsCompletedChanged FINAL)
+};
+Q_DECLARE_METATYPE(DownloadManager)
+
+#endif // DOWNLOADMANAGER_H

KomplexHubPlugin/featuredimagesmodel.cpp

@@ -55,6 +55,14 @@ FeaturedImagesModel::FeaturedImagesModel(QObject *parent) : QAbstractListModel{p
     );
 }
 
+FeaturedImagesModel::~FeaturedImagesModel()
+{
+    if(m_paginator)
+    {
+        delete m_paginator;
+    }
+}
+
 auto FeaturedImagesModel::rowCount(const QModelIndex &) const -> int
 {
     if(m_paginator != nullptr)
@@ -94,28 +102,36 @@ auto FeaturedImagesModel::data(const QModelIndex &index, int role) const -> QVar
         data = dataPoint.altText;
         break;
     case ThumbnailRole:
-        data = dataPoint.sources.value(QString::fromUtf8("tiny"));
+        data = dataPoint.sources.value(QString::fromUtf8("thumbnail"));
+        break;
+    case LargeThumbnailRole:
+        data = dataPoint.sources.value(QString::fromUtf8("largeThumbnail"));
         break;
     case PortraitUrlRole:
         data = dataPoint.sources.value(QString::fromUtf8("portrait"));
         break;
-    case LandscapeUrlRole:
+    case PortraitSizeRole:
-        data = dataPoint.sources.value(QString::fromUtf8("landscape"));
+        data = dataPoint.sourceSizes.value(QString::fromUtf8("portrait"));
         break;
-    case SmallUrlRole:
+    case ScreenUrlRole:
-        data = dataPoint.sources.value(QString::fromUtf8("small"));
+        data = dataPoint.sources.value(QString::fromUtf8("screen"));
+        break;
+    case ScreenSizeRole:
+        data = dataPoint.sourceSizes.value(QString::fromUtf8("screen"));
         break;
     case OriginalUrlRole:
         data = dataPoint.sources.value(QString::fromUtf8("original"));
         break;
-    case MediumUrlRole:
+    case LandscapeUrlRole:
-        data = dataPoint.sources.value(QString::fromUtf8("medium"));
+        data = dataPoint.sources.value(QString::fromUtf8("landscape"));
         break;
-    case LargeUrlRole:
+    case LandscapeSizeRole:
-        data = dataPoint.sources.value(QString::fromUtf8("large"));
+        data = dataPoint.sourceSizes.value(QString::fromUtf8("landscape"));
         break;
-    case ExtraLargeUrlRole:
+    case BackgroundPortraitRole:
-        data = dataPoint.sources.value(QString::fromUtf8("large2x"));
+        data = dataPoint.sources.value(QString::fromUtf8("backgroundPortrait"));
+    case BackgroundLandscapeRole:
+        data = dataPoint.sources.value(QString::fromUtf8("backgroundLandscape"));
         break;
     }
 
@@ -229,13 +245,43 @@ auto FeaturedImagesModel::resultsPerPage() const -> qsizetype
 
 auto FeaturedImagesModel::setResultsPerPage(qsizetype resultsPerPage) -> void
 {
+
     if(m_paginator != nullptr)
     {
         QFuture<void> future = QtConcurrent::run
         (
             [this, resultsPerPage]
             {
+                qsizetype difference = resultsPerPage - m_paginator->resultsPerPage();
                 m_paginator->setResultsPerPage(resultsPerPage);
+
+                if(difference > 0)
+                {
+                    qsizetype firstIndex = m_paginator->resultsPerPage() - difference;
+
+                    beginInsertRows
+                    (
+                        QModelIndex(),
+                        firstIndex,
+                        m_paginator->count() - 1
+                    );
+
+                    endInsertRows();
+                }
+
+                else if(difference < 0)
+                {
+                    qsizetype firstIndex = m_paginator->resultsPerPage();
+
+                    beginRemoveRows
+                    (
+                        QModelIndex(),
+                        firstIndex,
+                        firstIndex - difference
+                    );
+
+                    endRemoveRows();
+                }
             }
         );
     }

KomplexHubPlugin/featuredimagesmodel.h

@@ -69,17 +69,21 @@ public:
         AuthorUrlRole,
         DescriptionRole,
         ThumbnailRole,
+        LargeThumbnailRole,
+        OriginalUrlRole,
+        ScreenUrlRole,
         PortraitUrlRole,
         LandscapeUrlRole,
-        SmallUrlRole,
+        ScreenSizeRole,
-        OriginalUrlRole,
+        PortraitSizeRole,
-        MediumUrlRole,
+        LandscapeSizeRole,
-        LargeUrlRole,
+        BackgroundPortraitRole,
-        ExtraLargeUrlRole
+        BackgroundLandscapeRole
     };
     Q_ENUM(DataRole)
 
     explicit FeaturedImagesModel(QObject *parent = nullptr);
+    ~FeaturedImagesModel();
 
     auto rowCount(const QModelIndex &parent = QModelIndex()) const -> int override;
 
@@ -288,6 +292,14 @@ private:
             static_cast<int>(ThumbnailRole),
             QByteArray("thumbnail")
         },
+        {
+            static_cast<int>(LargeThumbnailRole),
+            QByteArray("largeThumbnail")
+        },
+        {
+            static_cast<int>(OriginalUrlRole),
+            QByteArray("original")
+        },
         {
             static_cast<int>(PortraitUrlRole),
             QByteArray("portrait")
@@ -297,24 +309,28 @@ private:
             QByteArray("landscape")
         },
         {
-            static_cast<int>(SmallUrlRole),
+            static_cast<int>(BackgroundPortraitRole),
-            QByteArray("small")
+            QByteArray("backgroundPortrait")
         },
         {
-            static_cast<int>(OriginalUrlRole),
+            static_cast<int>(BackgroundLandscapeRole),
-            QByteArray("original")
+            QByteArray("backgroundLandscape")
         },
         {
-            static_cast<int>(MediumUrlRole),
+            static_cast<int>(ScreenUrlRole),
-            QByteArray("medium")
+            QByteArray("fullScreen")
         },
         {
-            static_cast<int>(LargeUrlRole),
+            static_cast<int>(ScreenSizeRole),
-            QByteArray("large")
+            QByteArray("fullScreenSize")
         },
         {
-            static_cast<int>(ExtraLargeUrlRole),
+            static_cast<int>(PortraitSizeRole),
-            QByteArray("extraLarge")
+            QByteArray("portraitSize")
+        },
+        {
+            static_cast<int>(LandscapeSizeRole),
+            QByteArray("landscapeSize")
         }
     };
     State m_state = Idle;

KomplexHubPlugin/featuredpacksmodel.cpp

@@ -56,6 +56,14 @@ FeaturedPacksModel::FeaturedPacksModel(QObject *parent) : QAbstractListModel{par
     );
 }
 
+FeaturedPacksModel::~FeaturedPacksModel()
+{
+    if(m_paginator)
+    {
+        delete m_paginator;
+    }
+}
+
 auto FeaturedPacksModel::rowCount(const QModelIndex &) const -> int
 {
     if(m_paginator != nullptr)
@@ -181,6 +189,16 @@ auto FeaturedPacksModel::onPaginatorFetching() -> void
     setState(Loading);
 }
 
+auto FeaturedPacksModel::boundaryCheck(qsizetype index) const -> bool
+{
+    if(index < 0 || m_paginator == nullptr || index >= m_paginator->count())
+    {
+        return false;
+    }
+
+    return true;
+}
+
 auto FeaturedPacksModel::roleNames() const -> QHash<int, QByteArray>
 {
     return m_dataRoles;
@@ -220,7 +238,36 @@ auto FeaturedPacksModel::setResultsPerPage(qsizetype resultsPerPage) -> void
         (
             [this, resultsPerPage]
             {
+                qsizetype difference = resultsPerPage - m_paginator->resultsPerPage();
                 m_paginator->setResultsPerPage(resultsPerPage);
+
+                if(difference > 0)
+                {
+                    qsizetype firstIndex = m_paginator->resultsPerPage() - difference;
+
+                    beginInsertRows
+                    (
+                        QModelIndex(),
+                        firstIndex,
+                        m_paginator->count() - 1
+                    );
+
+                    endInsertRows();
+                }
+
+                else if(difference < 0)
+                {
+                    qsizetype firstIndex = m_paginator->resultsPerPage();
+
+                    beginRemoveRows
+                    (
+                        QModelIndex(),
+                        firstIndex,
+                        firstIndex - difference
+                    );
+
+                    endRemoveRows();
+                }
             }
         );
     }

KomplexHubPlugin/featuredpacksmodel.h

@@ -78,6 +78,7 @@ public:
     Q_ENUM(DataRole)
 
     explicit FeaturedPacksModel(QObject *parent = nullptr);
+    ~FeaturedPacksModel();
 
     auto rowCount(const QModelIndex &parent = QModelIndex()) const -> int override;
 
@@ -239,6 +240,14 @@ signals:
     auto totalPagesChanged() -> void;
 
 private:
+    /**
+     * @brief boundaryCheck
+     * Helper function to check the requested index boundary
+     * @param index
+     * @return
+     */
+    auto boundaryCheck(qsizetype index) const -> bool;
+
     /**
      * @brief m_dataRoles
      * Data role map that connects ImageSearchModel::DataRole to it's QML accessor name

KomplexHubPlugin/featuredvideosmodel.cpp

@@ -3,6 +3,8 @@
 
 FeaturedVideosModel::FeaturedVideosModel(QObject *parent) : QAbstractListModel{parent}
 {
+    m_itemModel = new VideoItemModel(this);
+
     m_paginator = new FeaturedVideosPaginator(this);
     PaginationNotifier *notifier = static_cast<PaginationNotifier*>(m_paginator);
 
@@ -56,6 +58,19 @@ FeaturedVideosModel::FeaturedVideosModel(QObject *parent) : QAbstractListModel{p
     );
 }
 
+FeaturedVideosModel::~FeaturedVideosModel()
+{
+    if(m_paginator)
+    {
+        delete m_paginator;
+    }
+
+    if(m_itemModel)
+    {
+        delete m_itemModel;
+    }
+}
+
 auto FeaturedVideosModel::rowCount(const QModelIndex &) const -> int
 {
     if(m_paginator != nullptr)
@@ -68,7 +83,7 @@ auto FeaturedVideosModel::rowCount(const QModelIndex &) const -> int
 
 auto FeaturedVideosModel::data(const QModelIndex &index, int role) const -> QVariant
 {
-    if(index.row() < 0 || m_paginator == nullptr || index.row() >= m_paginator->count())
+    if(!boundaryCheck(index.row()))
     {
         return {};
     }
@@ -115,12 +130,7 @@ auto FeaturedVideosModel::index(int row, int column, const QModelIndex &parent)
 {
     Q_UNUSED(parent)
 
-    if(m_paginator == nullptr)
+    if(!boundaryCheck(row))
-    {
-        return {};
-    }
-
-    if(row < 0 || row >= m_paginator->count())
     {
         return {};
     }
@@ -180,6 +190,21 @@ auto FeaturedVideosModel::onPaginatorFetching() -> void
     setState(Loading);
 }
 
+auto FeaturedVideosModel::boundaryCheck(qsizetype index) const -> bool
+{
+    if(index < 0 || m_paginator == nullptr || index >= m_paginator->count())
+    {
+        return false;
+    }
+
+    return true;
+}
+
+auto FeaturedVideosModel::itemModel() const -> VideoItemModel*
+{
+    return m_itemModel;
+}
+
 auto FeaturedVideosModel::roleNames() const -> QHash<int, QByteArray>
 {
     return m_dataRoles;
@@ -219,7 +244,36 @@ auto FeaturedVideosModel::setResultsPerPage(qsizetype resultsPerPage) -> void
         (
             [this, resultsPerPage]
             {
+                qsizetype difference = resultsPerPage - m_paginator->resultsPerPage();
                 m_paginator->setResultsPerPage(resultsPerPage);
+
+                if(difference > 0)
+                {
+                    qsizetype firstIndex = m_paginator->resultsPerPage() - difference;
+
+                    beginInsertRows
+                    (
+                        QModelIndex(),
+                        firstIndex,
+                        m_paginator->count() - 1
+                    );
+
+                    endInsertRows();
+                }
+
+                else if(difference < 0)
+                {
+                    qsizetype firstIndex = m_paginator->resultsPerPage();
+
+                    beginRemoveRows
+                    (
+                        QModelIndex(),
+                        firstIndex,
+                        firstIndex - difference
+                    );
+
+                    endRemoveRows();
+                }
             }
         );
     }
@@ -263,6 +317,17 @@ auto FeaturedVideosModel::previousPage() -> void
     }
 }
 
+auto FeaturedVideosModel::setItem(qint64 index) -> bool
+{
+    if(!boundaryCheck(index))
+    {
+        return false;
+    }
+
+    m_itemModel->setDataEntry(m_paginator->at(index));
+    return true;
+}
+
 qsizetype FeaturedVideosModel::page() const
 {
     if(m_paginator != nullptr)

KomplexHubPlugin/featuredvideosmodel.h

@@ -38,6 +38,7 @@
 #include <QtConcurrent/QtConcurrentRun>
 
 #include "paginators/featuredvideospaginator.h"
+#include "videoitemmodel.h"
 
 /**
  * @brief The FeaturedVideosModel class
@@ -76,6 +77,7 @@ public:
     Q_ENUM(DataRole)
 
     explicit FeaturedVideosModel(QObject *parent = nullptr);
+    ~FeaturedVideosModel();
 
     auto rowCount(const QModelIndex &parent = QModelIndex()) const -> int override;
 
@@ -205,6 +207,16 @@ public:
      */
     Q_INVOKABLE auto previousPage() -> void;
 
+    /**
+     * @brief setItem
+     * Sets the current itemModel to the item at the specified index
+     * @param index
+     * @return
+     */
+    Q_INVOKABLE auto setItem(qint64 index) -> bool;
+
+    VideoItemModel *itemModel() const;
+
 protected:
     /**
      * @brief setErrorString
@@ -237,6 +249,14 @@ signals:
     auto totalPagesChanged() -> void;
 
 private:
+    /**
+     * @brief boundaryCheck
+     * Helper function to check the requested index boundary
+     * @param index
+     * @return
+     */
+    auto boundaryCheck(qsizetype index) const -> bool;
+
     /**
      * @brief m_dataRoles
      * Data role map that connects ImageSearchModel::DataRole to it's QML accessor name
@@ -285,6 +305,7 @@ private:
     QString m_errorString = QString();
 
     FeaturedVideosPaginator *m_paginator = nullptr;
+    VideoItemModel *m_itemModel = nullptr;
 
     Q_PROPERTY(State state READ state WRITE setState RESET resetState NOTIFY stateChanged FINAL)
     Q_PROPERTY(QString errorString READ errorString WRITE setErrorString NOTIFY errorStringChanged FINAL)
@@ -292,6 +313,7 @@ private:
     Q_PROPERTY(qsizetype totalResults READ totalResults NOTIFY totalResultsChanged FINAL)
     Q_PROPERTY(qsizetype totalPages READ totalPages NOTIFY totalPagesChanged FINAL)
     Q_PROPERTY(qsizetype page READ page NOTIFY pageChanged FINAL)
+    Q_PROPERTY(VideoItemModel *itemModel READ itemModel CONSTANT FINAL)
 };
 Q_DECLARE_METATYPE(FeaturedVideosModel)
 

KomplexHubPlugin/imagesearchmodel.cpp

@@ -109,49 +109,36 @@ auto ImageSearchModel::data(const QModelIndex &index, int role) const -> QVarian
         data = dataPoint.altText;
         break;
     case ThumbnailRole:
-        data = dataPoint.sources.value(QString::fromUtf8("tiny"));
+        data = dataPoint.sources.value(QString::fromUtf8("thumbnail"));
+        break;
+    case LargeThumbnailRole:
+        data = dataPoint.sources.value(QString::fromUtf8("largeThumbnail"));
         break;
     case PortraitUrlRole:
         data = dataPoint.sources.value(QString::fromUtf8("portrait"));
         break;
-    case LandscapeUrlRole:
+    case PortraitSizeRole:
-        data = dataPoint.sources.value(QString::fromUtf8("landscape"));
+        data = dataPoint.sourceSizes.value(QString::fromUtf8("portrait"));
         break;
-    case SmallUrlRole:
+    case ScreenUrlRole:
-        data = dataPoint.sources.value(QString::fromUtf8("small"));
+        data = dataPoint.sources.value(QString::fromUtf8("screen"));
+        break;
+    case ScreenSizeRole:
+        data = dataPoint.sourceSizes.value(QString::fromUtf8("screen"));
         break;
     case OriginalUrlRole:
         data = dataPoint.sources.value(QString::fromUtf8("original"));
         break;
-    case MediumUrlRole:
+    case LandscapeUrlRole:
-        data = dataPoint.sources.value(QString::fromUtf8("medium"));
+        data = dataPoint.sources.value(QString::fromUtf8("landscape"));
-        break;
-    case LargeUrlRole:
-        data = dataPoint.sources.value(QString::fromUtf8("large"));
-        break;
-    case ExtraLargeUrlRole:
-        data = dataPoint.sources.value(QString::fromUtf8("large2x"));
-        break;
-    case PortraitSizeRole:
-        data = dataPoint.sourceSizes.value(QString::fromUtf8("portrait"));
         break;
     case LandscapeSizeRole:
         data = dataPoint.sourceSizes.value(QString::fromUtf8("landscape"));
         break;
-    case SmallSizeRole:
+    case BackgroundPortraitRole:
-        data = dataPoint.sourceSizes.value(QString::fromUtf8("small"));
+        data = dataPoint.sources.value(QString::fromUtf8("backgroundPortrait"));
-        break;
+    case BackgroundLandscapeRole:
-    case OriginalSizeRole:
+        data = dataPoint.sources.value(QString::fromUtf8("backgroundLandscape"));
-        data = dataPoint.sourceSizes.value(QString::fromUtf8("original"));
-        break;
-    case MediumSizeRole:
-        data = dataPoint.sourceSizes.value(QString::fromUtf8("medium"));
-        break;
-    case LargeSizeRole:
-        data = dataPoint.sourceSizes.value(QString::fromUtf8("large"));
-        break;
-    case ExtraLargeSizeRole:
-        data = dataPoint.sourceSizes.value(QString::fromUtf8("large2x"));
         break;
     }
 
@@ -222,6 +209,16 @@ auto ImageSearchModel::onPaginatorFetching() -> void
     setState(Loading);
 }
 
+auto ImageSearchModel::boundaryCheck(qsizetype index) const -> bool
+{
+    if(index < 0 || m_paginator == nullptr || index >= m_paginator->count())
+    {
+        return false;
+    }
+
+    return true;
+}
+
 auto ImageSearchModel::hasNextPage() const -> bool
 {
     return m_paginator->page() < m_paginator->totalPages();

KomplexHubPlugin/imagesearchmodel.h

@@ -69,20 +69,16 @@ public:
         AuthorUrlRole,
         DescriptionRole,
         ThumbnailRole,
+        LargeThumbnailRole,
+        OriginalUrlRole,
+        ScreenUrlRole,
         PortraitUrlRole,
         LandscapeUrlRole,
-        SmallUrlRole,
+        ScreenSizeRole,
-        OriginalUrlRole,
-        MediumUrlRole,
-        LargeUrlRole,
-        ExtraLargeUrlRole,
         PortraitSizeRole,
         LandscapeSizeRole,
-        SmallSizeRole,
+        BackgroundPortraitRole,
-        OriginalSizeRole,
+        BackgroundLandscapeRole
-        MediumSizeRole,
-        LargeSizeRole,
-        ExtraLargeSizeRole
     };
     Q_ENUM(DataRole)
 
@@ -322,93 +318,85 @@ signals:
     auto queryChanged() -> void;
 
 private:
+    /**
+     * @brief boundaryCheck
+     * Helper function to check the requested index boundary
+     * @param index
+     * @return
+     */
+    auto boundaryCheck(qsizetype index) const -> bool;
+
     /**
      * @brief m_dataRoles
      * Data role map that connects ImageSearchModel::DataRole to it's QML accessor name
      */
     static inline const QHash<int, QByteArray> m_dataRoles =
-    {
         {
-            static_cast<int>(UuidRole),
+            {
-            QByteArray("uuid")
+                static_cast<int>(UuidRole),
-        },
+                QByteArray("uuid")
-        {
+            },
-            static_cast<int>(AuthorRole),
+            {
-            QByteArray("author")
+                static_cast<int>(AuthorRole),
-        },
+                QByteArray("author")
-        {
+            },
-            static_cast<int>(AuthorIdRole),
+            {
-            QByteArray("authorId")
+                static_cast<int>(AuthorIdRole),
-        },
+                QByteArray("authorId")
-        {
+            },
-            static_cast<int>(AuthorUrlRole),
+            {
-            QByteArray("authorUrl")
+                static_cast<int>(AuthorUrlRole),
-        },
+                QByteArray("authorUrl")
-        {
+            },
-            static_cast<int>(DescriptionRole),
+            {
-            QByteArray("description")
+                static_cast<int>(DescriptionRole),
-        },
+                QByteArray("description")
-        {
+            },
-            static_cast<int>(ThumbnailRole),
+            {
-            QByteArray("thumbnail")
+                static_cast<int>(ThumbnailRole),
-        },
+                QByteArray("thumbnail")
-        {
+            },
-            static_cast<int>(PortraitUrlRole),
+            {
-            QByteArray("portrait")
+                static_cast<int>(LargeThumbnailRole),
-        },
+                QByteArray("largeThumbnail")
-        {
+            },
-            static_cast<int>(LandscapeUrlRole),
+            {
-            QByteArray("landscape")
+                static_cast<int>(OriginalUrlRole),
-        },
+                QByteArray("original")
-        {
+            },
-            static_cast<int>(SmallUrlRole),
+            {
-            QByteArray("small")
+                static_cast<int>(PortraitUrlRole),
-        },
+                QByteArray("portrait")
-        {
+            },
-            static_cast<int>(OriginalUrlRole),
+            {
-            QByteArray("original")
+                static_cast<int>(LandscapeUrlRole),
-        },
+                QByteArray("landscape")
-        {
+            },
-            static_cast<int>(MediumUrlRole),
+            {
-            QByteArray("medium")
+                static_cast<int>(BackgroundPortraitRole),
-        },
+                QByteArray("backgroundPortrait")
-        {
+            },
-            static_cast<int>(LargeUrlRole),
+            {
-            QByteArray("large")
+                static_cast<int>(BackgroundLandscapeRole),
-        },
+                QByteArray("backgroundLandscape")
-        {
+            },
-            static_cast<int>(ExtraLargeUrlRole),
+            {
-            QByteArray("extraLarge")
+                static_cast<int>(ScreenUrlRole),
-        },
+                QByteArray("fullScreen")
-        {
+            },
-            static_cast<int>(PortraitSizeRole),
+            {
-            QByteArray("portraitSize")
+                static_cast<int>(ScreenSizeRole),
-        },
+                QByteArray("fullScreenSize")
-        {
+            },
-            static_cast<int>(LandscapeSizeRole),
+            {
-            QByteArray("landscapeSize")
+                static_cast<int>(PortraitSizeRole),
-        },
+                QByteArray("portraitSize")
-        {
+            },
-            static_cast<int>(SmallSizeRole),
+            {
-            QByteArray("smallSize")
+                static_cast<int>(LandscapeSizeRole),
-        },
+                QByteArray("landscapeSize")
-        {
+            }
-            static_cast<int>(OriginalSizeRole),
+        };
-            QByteArray("originalSize")
-        },
-        {
-            static_cast<int>(MediumSizeRole),
-            QByteArray("mediumSize")
-        },
-        {
-            static_cast<int>(LargeSizeRole),
-            QByteArray("largeSize")
-        },
-        {
-            static_cast<int>(ExtraLargeSizeRole),
-            QByteArray("extraLargeSize")
-        }
-    };
     State m_state = Idle;
 
     QString m_errorString = QString();

KomplexHubPlugin/newestpacksmodel.cpp

@@ -58,6 +58,14 @@ NewestPacksModel::NewestPacksModel(QObject *parent) : QAbstractListModel{parent}
     );
 }
 
+NewestPacksModel::~NewestPacksModel()
+{
+    if(m_paginator)
+    {
+        delete m_paginator;
+    }
+}
+
 auto NewestPacksModel::rowCount(const QModelIndex &) const -> int
 {
     if(m_paginator != nullptr)
@@ -216,7 +224,42 @@ auto NewestPacksModel::setResultsPerPage(qsizetype resultsPerPage) -> void
 {
     if(m_paginator != nullptr)
     {
-        m_paginator->setResultsPerPage(resultsPerPage);
+        QFuture<void> future = QtConcurrent::run
+        (
+            [this, resultsPerPage]
+            {
+                qsizetype difference = resultsPerPage - m_paginator->resultsPerPage();
+                m_paginator->setResultsPerPage(resultsPerPage);
+
+                if(difference > 0)
+                {
+                    qsizetype firstIndex = m_paginator->resultsPerPage() - difference;
+
+                    beginInsertRows
+                    (
+                        QModelIndex(),
+                        firstIndex,
+                        m_paginator->count() - 1
+                    );
+
+                    endInsertRows();
+                }
+
+                else if(difference < 0)
+                {
+                    qsizetype firstIndex = m_paginator->resultsPerPage();
+
+                    beginRemoveRows
+                    (
+                        QModelIndex(),
+                        firstIndex,
+                        firstIndex - difference
+                    );
+
+                    endRemoveRows();
+                }
+            }
+        );
     }
 }
 

KomplexHubPlugin/newestpacksmodel.h

@@ -78,6 +78,7 @@ public:
     Q_ENUM(DataRole)
 
     explicit NewestPacksModel(QObject *parent = nullptr);
+    ~NewestPacksModel();
 
     /**
      * @brief rowCount
@@ -249,6 +250,18 @@ signals:
     auto totalPagesChanged() -> void;
 
 private:
+    /**
+     * @brief boundaryCheck
+     * Helper function to check the requested index boundary
+     * @param index
+     * @return
+     */
+    auto boundaryCheck(qsizetype index) const -> bool;
+
+    /**
+     * @brief m_dataRoles
+     * Data role map that connects ImageSearchModel::DataRole to it's QML accessor name
+     */
     static inline const QHash<int, QByteArray> m_dataRoles =
     {
         {

KomplexHubPlugin/packcompiler.cpp

@@ -0,0 +1,942 @@
+#include "packcompiler.h"
+#include "common/exceptions.h"
+#include <utility>
+
+PackCompiler::PackCompiler(QObject *parent)
+    : QObject(parent)
+{
+    if(m_variableExpressions.isEmpty())
+    {
+        for(const QString &variable : m_updateVariables)
+        {
+            m_variableExpressions.append
+            (
+                QRegularExpression
+                (
+                    QStringLiteral("\\b(?<!ubuf\\.)%1\\b").arg
+                    (
+                        variable
+                    )
+                )
+            );
+        }
+    }
+}
+
+PackCompiler::~PackCompiler() = default;
+
+auto PackCompiler::reset() -> void
+{
+    setError({}, {});
+    setProgress(std::numeric_limits<qreal>::infinity());
+    setTotalSteps(0);
+    setCurrentStep(0);
+    setCompilerOutput({});
+    setStatus({});
+    setState(Idle);
+}
+
+auto PackCompiler::process(const QUrl &uri) -> QFuture<QUrl>
+{
+    return QtConcurrent::run
+    (
+        [this, uri] () -> QUrl
+        {
+            if(!uri.isLocalFile())
+            {
+                setError
+                (
+                    QStringLiteral("File Error"),
+                    QStringLiteral("URI %1 is not a local file").arg
+                    (
+                        uri.toString()
+                    )
+                );
+
+                return {};
+            }
+
+            reset();
+            setStatus(QStringLiteral("Compiling %1").arg(uri.fileName()));
+            setState(Compiling);
+
+            if(!validateDirectory(uri))
+            {
+                throw FileException
+                (
+                    QStringLiteral("Source directory is invalid")
+                );
+            }
+
+            QUrl buildUri
+            (
+                QStringLiteral("file://%1/komplex/build/%2").arg
+                (
+                    QStandardPaths::writableLocation
+                    (
+                        QStandardPaths::TempLocation
+                    ),
+                    uri.fileName()
+                )
+            );
+
+            try
+            {
+                extract(uri, buildUri);
+                prepareShaders(buildUri);
+                compile(buildUri);
+            }
+            catch (FileException e)
+            {
+                removeDirectory(buildUri);
+                setError(QStringLiteral("File Error"), e.message);
+                throw e;
+            }
+            catch (ShaderCompilerException e)
+            {
+                removeDirectory(buildUri);
+                setError(QStringLiteral("Compiler Error"), e.message);
+                throw e;
+            }
+
+            return buildUri;
+        }
+    );
+}
+
+auto PackCompiler::prepareShaders(const QUrl &uri) noexcept(false) -> void
+{
+    if(!uri.isLocalFile())
+    {
+        throw FileException
+        (
+            QStringLiteral("URI %1 is not a local file uri").arg
+            (
+                uri.toString()
+            )
+        );
+    }
+
+    QDir sourceDirectory(uri.toLocalFile());
+    QDir shaderDirectory
+    (
+        sourceDirectory.absoluteFilePath
+        (
+            QStringLiteral("shaders")
+        )
+    );
+
+    QStringList entries = shaderDirectory.entryList
+    (
+        QDir::NoDotAndDotDot | QDir::Files
+    );
+
+    setTotalSteps(entries.count() * 2);
+    setProgress(0);
+
+    QByteArray commonFragmentData = loadCommonFragmentData(uri);
+
+    if(commonFragmentData.length() > 0)
+    {
+        setTotalSteps(m_totalSteps -= 1);
+        incrementCompileStep();
+    }
+
+    QByteArray commonVertexData = loadCommonVertexData(uri);
+
+    if(commonVertexData.length() > 0)
+    {
+        setTotalSteps(m_totalSteps -= 1);
+        incrementCompileStep();
+    }
+
+    QByteArray globalData = loadGlobalData(uri);
+
+    if(globalData.length() > 0)
+    {
+        setTotalSteps(m_totalSteps -= 1);
+        incrementCompileStep();
+    }
+
+    for(const QString &entry : std::as_const(entries))
+    {
+        auto commonFragMatch = m_commonFragmentExpression.match(entry);
+        auto commonVertMatch = m_commonVertexExpression.match(entry);
+
+        if(commonFragMatch.hasMatch() || commonVertMatch.hasMatch())
+        {
+            continue;
+        }
+
+        auto fragMatch = m_fragmentExpression.match(entry);
+        auto vertMatch = m_vertexExpression.match(entry);
+
+        QFile file(shaderDirectory.absoluteFilePath(entry));
+
+        if(!file.open(QFile::ReadWrite))
+        {
+            throw FileException
+            (
+                QStringLiteral("Could not open file %1 for preperation").arg
+                (
+                    shaderDirectory.absoluteFilePath(entry)
+                )
+            );
+        }
+
+        QByteArray fileData = file.readAll();
+
+        if(fileData.length() != file.size())
+        {
+            throw FileException
+            (
+                QStringLiteral("Could not read file %1 for preperation").arg
+                (
+                    shaderDirectory.absoluteFilePath(entry)
+                )
+            );
+        }
+
+        file.close();
+
+        QByteArray commonData;
+
+        if(fragMatch.hasMatch())
+        {
+            commonData = commonFragmentData;
+        }
+        else if(vertMatch.hasMatch())
+        {
+            commonData = commonVertexData;
+        }
+        else
+        {
+            throw FileException
+            (
+                QStringLiteral("File %1 is an unrecognized shader type (frag/vert)").arg
+                (
+                    shaderDirectory.absoluteFilePath(entry)
+                )
+            );
+        }
+
+        QByteArray combinedData = QByteArray
+        (
+            globalData + QByteArray("\n") +
+            commonData + QByteArray("\n") +
+            fileData
+        );
+
+        for(const QRegularExpression &expression : std::as_const(m_variableExpressions))
+        {
+            auto match = expression.match(combinedData);
+
+            if(match.hasMatch())
+            {
+                QByteArray replacement = QByteArray("ubuf.") + match.captured().toLocal8Bit();
+                combinedData.replace(match.captured().toLocal8Bit(), replacement);
+            }
+        }
+
+        QByteArray preparedData = QByteArray
+        (
+            m_header.toLocal8Bit() + QByteArray("\n") +
+            combinedData + QByteArray("\n") +
+            m_footer.toLocal8Bit()
+        );
+
+        if(!file.open(QFile::ReadWrite | QFile::Truncate))
+        {
+            throw FileException
+            (
+                QStringLiteral("Could not open file %1 for writing preperation").arg
+                (
+                    shaderDirectory.absoluteFilePath(entry)
+                )
+            );
+        }
+
+        if(file.write(preparedData) != preparedData.length())
+        {
+            throw FileException
+            (
+                QStringLiteral("Could not write file %1 preperation").arg
+                (
+                    shaderDirectory.absoluteFilePath(entry)
+                )
+            );
+        }
+
+        file.close();
+        incrementCompileStep();
+    }
+}
+
+auto PackCompiler::loadCommonFragmentData(const QUrl &uri) -> QByteArray
+{
+    if(!uri.isLocalFile())
+    {
+        throw FileException
+        (
+            QStringLiteral("URI %1 is not a local file uri").arg
+            (
+                uri.toString()
+            )
+        );
+    }
+
+    QDir sourceDirectory
+    (
+        QStringLiteral("%1/shaders/").arg
+        (
+            uri.toLocalFile()
+        )
+    );
+
+    const QStringList entries = sourceDirectory.entryList
+    (
+        QDir::NoDotAndDotDot | QDir::Files
+    );
+
+    QByteArray data;
+
+    for(const QString &entry : entries)
+    {
+        if (entry.toLower() != QStringLiteral("common.frag"))
+        {
+            continue;
+        }
+
+        QFile file(sourceDirectory.absoluteFilePath(entry));
+
+        if(!file.open(QFile::ReadWrite))
+        {
+            throw FileException(QStringLiteral("Could not open common shader data"));
+        }
+
+        data = file.readAll();
+
+        if(data.length() != file.size())
+        {
+            throw FileException(QStringLiteral("Common fragment shader file read error"));
+        }
+
+        file.close();
+        break;
+    }
+
+    return data;
+}
+
+auto PackCompiler::loadCommonVertexData(const QUrl &uri) -> QByteArray
+{
+    if(!uri.isLocalFile())
+    {
+        throw FileException
+        (
+            QStringLiteral("URI %1 is not a local file uri").arg
+            (
+                uri.toString()
+            )
+        );
+    }
+
+    QDir sourceDirectory
+    (
+        QStringLiteral("%1/shaders/").arg
+        (
+            uri.toLocalFile()
+        )
+    );
+
+    const QStringList entries = sourceDirectory.entryList
+    (
+        QDir::NoDotAndDotDot | QDir::Files
+    );
+
+    QByteArray data;
+
+    for(const QString &entry : entries)
+    {
+        if (entry.toLower() != QStringLiteral("common.vert"))
+        {
+            continue;
+        }
+
+        QFile file(sourceDirectory.absoluteFilePath(entry));
+
+        if(!file.open(QFile::ReadWrite))
+        {
+            throw FileException(QStringLiteral("Could not open common vertex shader data"));
+        }
+
+        data = file.readAll();
+
+        if(data.length() != file.size())
+        {
+            throw FileException(QStringLiteral("Common vertex shader file read error"));
+        }
+
+        file.close();
+        break;
+    }
+
+    return data;
+}
+
+auto PackCompiler::loadGlobalData(const QUrl &uri) -> QByteArray
+{
+    if(!uri.isLocalFile())
+    {
+        throw FileException
+        (
+            QStringLiteral("URI %1 is not a local file uri").arg
+            (
+                uri.toString()
+            )
+        );
+    }
+
+    QDir sourceDirectory
+    (
+        QStringLiteral("%1/shaders/").arg
+        (
+            uri.toLocalFile()
+        )
+    );
+
+    const QStringList entries = sourceDirectory.entryList
+    (
+        QDir::NoDotAndDotDot | QDir::Files
+    );
+
+    QByteArray data;
+
+    for(const QString &entry : entries)
+    {
+        if (entry.toLower() != QStringLiteral("global.glsl"))
+        {
+            continue;
+        }
+
+        QFile file(sourceDirectory.absoluteFilePath(entry));
+
+        if(!file.open(QFile::ReadWrite))
+        {
+            throw FileException
+            (
+                QStringLiteral("Could not open global shader data")
+            );
+        }
+
+        data = file.readAll();
+
+        if(data.length() != file.size())
+        {
+            throw FileException
+            (
+                QStringLiteral("Global shader file read error")
+            );
+        }
+
+        file.close();
+        break;
+    }
+
+    return data;
+}
+
+auto PackCompiler::validateDirectory(const QUrl &uri) -> bool
+{
+    QDir directory(uri.toLocalFile());
+
+    return
+    (
+        directory.exists(QStringLiteral("shaders")) &&
+        directory.exists(QStringLiteral("pack.json"))
+    );
+}
+
+auto PackCompiler::extract(const QUrl &sourceUri, const QUrl &destinationUri) noexcept(false) -> void
+{
+    if(!sourceUri.isLocalFile() || !sourceUri.isValid())
+    {
+        throw FileException(QStringLiteral("Uri needs to be a local file"), 0);
+    }
+
+    QUrl outputUri
+    (
+        QStringLiteral("file://%1_proc").arg
+        (
+            sourceUri.toLocalFile()
+        )
+    );
+
+    QStringList arguments =
+    {
+        QStringLiteral("-xzf"),
+        sourceUri.toLocalFile(),
+        QStringLiteral("-C"),
+        outputUri.toLocalFile()
+    };
+
+    QProcess *process = new QProcess(this);
+
+    QObject::connect
+    (
+        process,
+        &QProcess::readyReadStandardOutput,
+        this,
+        [this, process]()
+        {
+            QByteArray processData = process->readAllStandardOutput();
+            setCompilerOutput(m_compilerOutput + processData);
+        }
+    );
+
+    QObject::connect
+    (
+        process,
+        &QProcess::readyReadStandardError,
+        this,
+        [this, process]()
+        {
+            QByteArray processData = process->readAllStandardError();
+
+            if(!processData.isValidUtf8())
+            {
+                qWarning() << QStringLiteral("Process output not valid UTF8 data");
+                return;
+            }
+
+            setCompilerOutput(m_compilerOutput + processData);
+        }
+    );
+
+    process->start(QStringLiteral("tar"), arguments);
+
+    if(!process->waitForStarted(3000))
+    {
+        process->deleteLater();
+        throw FileException(QStringLiteral("Could not start preprocessor"));
+    }
+
+    if(!process->waitForFinished())
+    {
+        process->deleteLater();
+        throw FileException(QStringLiteral("Preprocessor timeout"));
+    }
+
+    if(process->exitCode() != 0)
+    {
+        process->deleteLater();
+        throw ShaderCompilerException(m_compilerOutput);
+    }
+
+    process->deleteLater();
+}
+
+auto PackCompiler::copyFile(const QUrl &sourceUri, const QUrl &destinationUri) noexcept(false) -> void
+{
+    if(!QFile::exists(sourceUri.toLocalFile()))
+    {
+        return;
+    }
+
+    if(!QFile::copy(sourceUri.toLocalFile(), destinationUri.toLocalFile()))
+    {
+        throw FileException(QStringLiteral("Could not copy file"));
+    }
+}
+
+auto PackCompiler::compile(const QUrl &uri) noexcept(false) -> void
+{
+    if(!uri.isLocalFile() || !uri.isValid())
+    {
+        throw FileException(QStringLiteral("Uri needs to be a local file"), 0);
+    }
+
+    setState(Compiling);
+
+    QDir packDirectory(uri.toLocalFile());
+    QDir shaderDirectory
+    (
+        packDirectory.absoluteFilePath
+        (
+            QStringLiteral("shaders")
+        )
+    );
+
+    shaderDirectory.setNameFilters
+    (
+        {
+            QStringLiteral("*.frag"),
+            QStringLiteral("*.vert")
+        }
+    );
+
+    const QStringList shaders = shaderDirectory.entryList
+    (
+        QDir::Files | QDir::NoDotAndDotDot
+    );
+
+    for(const QString &shader : shaders)
+    {
+        if(shader.startsWith(QStringLiteral("common."), Qt::CaseInsensitive))
+        {
+            continue;
+        }
+
+        QUrl shaderUri
+        (
+            QStringLiteral("file://%1").arg
+            (
+                shaderDirectory.absoluteFilePath(shader)
+            )
+        );
+
+        preprocess(shaderUri);
+        appendVersion(shaderUri);
+        compileShader(shaderUri);
+
+        incrementCompileStep();
+    }
+}
+
+auto PackCompiler::preprocess(const QUrl &uri) noexcept(false) -> void
+{
+    if(!uri.isLocalFile() || !uri.isValid())
+    {
+        throw FileException(QStringLiteral("Uri needs to be a local file"), 0);
+    }
+
+    QUrl outputUri
+    (
+        QStringLiteral("file://%1_proc").arg
+        (
+            uri.toLocalFile()
+        )
+    );
+
+    QStringList arguments =
+    {
+        QStringLiteral("-P"),
+        uri.toLocalFile(),
+        outputUri.toLocalFile()
+    };
+
+    QProcess *process = new QProcess(this);
+
+    QObject::connect
+    (
+        process,
+        &QProcess::readyReadStandardOutput,
+        this,
+        [this, process]()
+        {
+            QByteArray processData = process->readAllStandardOutput();
+            setCompilerOutput(m_compilerOutput + processData);
+        }
+    );
+
+    QObject::connect
+    (
+        process,
+        &QProcess::readyReadStandardError,
+        this,
+        [this, process]()
+        {
+            QByteArray processData = process->readAllStandardError();
+
+            if(!processData.isValidUtf8())
+            {
+                qWarning() << QStringLiteral("Process output not valid UTF8 data");
+                return;
+            }
+
+            setCompilerOutput(m_compilerOutput + processData);
+        }
+    );
+
+    process->start(QStringLiteral("cpp"), arguments);
+
+    if(!process->waitForStarted(3000))
+    {
+        process->deleteLater();
+        throw FileException(QStringLiteral("Could not start preprocessor"));
+    }
+
+    if(!process->waitForFinished())
+    {
+        process->deleteLater();
+        throw FileException(QStringLiteral("Preprocessor timeout"));
+    }
+
+    if(process->exitCode() != 0)
+    {
+        process->deleteLater();
+        throw ShaderCompilerException(m_compilerOutput);
+    }
+
+    process->deleteLater();
+
+    QFile::remove(uri.toLocalFile());
+    QFile::rename(outputUri.toLocalFile(), uri.toLocalFile());
+}
+
+auto PackCompiler::appendVersion(const QUrl &uri) noexcept(false) -> void
+{
+    if(!uri.isValid() || !uri.isLocalFile())
+    {
+        throw FileException(QStringLiteral("File is not a valid local file"));
+    }
+
+    QFile file(uri.toLocalFile());
+
+    if(!file.open(QFile::ReadWrite))
+    {
+        throw FileException(QStringLiteral("Could not open file for appending"));
+    }
+
+    QByteArray data = file.readAll();
+
+    file.seek(0);
+
+    file.write(m_version);
+    file.write(QByteArray("\n\n"));
+    file.write(data);
+
+    file.close();
+}
+
+auto PackCompiler::compileShader(const QUrl &uri) noexcept(false) -> void
+{
+    if(!uri.isLocalFile())
+    {
+        throw FileException
+        (
+            QStringLiteral("Uri needs to be a local file")
+        );
+    }
+
+    QString qsb = QStringLiteral("/usr/lib/qt6/bin/qsb");
+
+    if(!QFile::exists(qsb))
+    {
+        throw FileException(QStringLiteral("QSB missing"));
+    }
+
+    QUrl outputUri
+    (
+        QStringLiteral("file://%1.qsb").arg
+        (
+            uri.toLocalFile()
+        )
+    );
+
+    QStringList arguments =
+    {
+        QStringLiteral("--glsl"),
+        QStringLiteral("330es, 330, 440"),
+        QStringLiteral("-o"),
+        outputUri.toLocalFile(),
+        uri.toLocalFile()
+    };
+
+    QProcess *process = new QProcess(this);
+    QString path = uri.toDisplayString(QUrl::RemoveFilename | QUrl::RemoveScheme).remove(QStringLiteral("//"));
+    process->setWorkingDirectory(path);
+
+    QObject::connect
+    (
+        process,
+        &QProcess::readyReadStandardOutput,
+        this,
+        [this, process]()
+        {
+            QByteArray processData = process->readAllStandardOutput();
+            setCompilerOutput(m_compilerOutput + processData);
+        }
+    );
+
+    QObject::connect
+    (
+        process,
+        &QProcess::readyReadStandardError,
+        this,
+        [this, process]()
+        {
+            QByteArray processData = process->readAllStandardError();
+
+            if(!processData.isValidUtf8())
+            {
+                qWarning() << QStringLiteral("Process output not valid UTF8 data");
+                return;
+            }
+
+            setCompilerOutput(m_compilerOutput + processData);
+        }
+    );
+
+    process->start(qsb, arguments);
+
+    if(!process->waitForStarted(3000))
+    {
+        process->deleteLater();
+        throw FileException(QStringLiteral("Could not start shader compiler"));
+    }
+
+    if(!process->waitForFinished())
+    {
+        process->deleteLater();
+        throw FileException(QStringLiteral("Shader compiler timeout"));
+    }
+
+    if(process->exitCode() != 0)
+    {
+        process->deleteLater();
+        throw ShaderCompilerException(m_compilerOutput);
+    }
+
+    process->deleteLater();
+
+    if(!QFile::remove(uri.toLocalFile()))
+    {
+        throw FileException(QStringLiteral("Could not clean up"));
+    }
+}
+
+auto PackCompiler::removeDirectory(const QUrl &uri) -> bool
+{
+    QStringList arguments =
+    {
+        QStringLiteral("-rf"),
+        uri.toLocalFile()
+    };
+
+    QProcess *process = new QProcess(this);
+
+    process->start(QStringLiteral("rm"), arguments);
+
+    if(!process->waitForStarted(3000))
+    {
+        process->deleteLater();
+        return false;
+    }
+
+    if(!process->waitForFinished())
+    {
+        process->deleteLater();
+        return false;
+    }
+
+    if(process->exitCode() != 0)
+    {
+        process->deleteLater();
+        return false;
+    }
+
+    process->deleteLater();
+    return true;
+}
+
+auto PackCompiler::setProgress(qreal progress) -> void
+{
+    if(qFuzzyCompare(progress, m_progress))
+    {
+        return;
+    }
+
+    m_progress = progress;
+    Q_EMIT progressChanged();
+}
+
+void PackCompiler::setCompilerOutput(const QString &compilerOutput)
+{
+    if (m_compilerOutput == compilerOutput)
+    {
+        return;
+    }
+
+    m_compilerOutput = compilerOutput;
+    emit compilerOutputChanged();
+}
+
+auto PackCompiler::setError(const QString &title, const QString &message, const QUrl &uri) -> void
+{
+    if(title == m_errorTitle && message == m_errorMessage)
+    {
+        return;
+    }
+
+    m_errorMessage = std::move(message);
+    m_errorTitle = std::move(title);
+
+    if(uri.isValid() && uri.isLocalFile())
+    {
+        QFile errorFile(uri.toLocalFile());
+
+        if(errorFile.open(QFile::ReadWrite | QFile::Append))
+        {
+            errorFile.write(message.toLocal8Bit() + QByteArray("\n"));
+        }
+    }
+
+    Q_EMIT errorTitleChanged();
+    Q_EMIT errorMessageChanged();
+    Q_EMIT errorOcurred();
+}
+
+auto PackCompiler::setState(State state) -> void
+{
+    if(state == m_state)
+    {
+        return;
+    }
+
+    m_state = state;
+    Q_EMIT stateChanged();
+}
+
+auto PackCompiler::setStatus(const QString &status) -> void
+{
+    if (m_status == status)
+    {
+        return;
+    }
+
+    m_status = status;
+    Q_EMIT statusChanged();
+}
+
+auto PackCompiler::setTotalSteps(qint64 steps) -> void
+{
+    if(steps == m_totalSteps)
+    {
+        return;
+    }
+
+    m_totalSteps = steps;
+    Q_EMIT totalStepsChanged();
+}
+
+auto PackCompiler::setCurrentStep(qint64 step) -> void
+{
+    if(step == m_currentStep)
+    {
+        return;
+    }
+
+    m_currentStep = step;
+    Q_EMIT currentStepChanged();
+}
+
+auto PackCompiler::incrementCompileStep() -> void
+{
+    setCurrentStep(m_currentStep + 1);
+
+    setProgress
+    (
+        static_cast<qreal>(m_currentStep) / m_totalSteps
+    );
+}

KomplexHubPlugin/packcompiler.h

@@ -0,0 +1,248 @@
+#ifndef PACKCOMPILER_H
+#define PACKCOMPILER_H
+
+#include <QDir>
+#include <QFile>
+#include <QFuture>
+#include <QtConcurrent/QtConcurrentRun>
+#include <QStandardPaths>
+#include <QProcess>
+#include <QRegularExpression>
+#include <QMutex>
+#include <QMutexLocker>
+#include <QImage>
+#include <QRgb>
+#include <QColor>
+#include <QtQuick/QQuickItem>
+#include <qdir.h>
+#include <qobject.h>
+#include <qtmetamacros.h>
+#include <QPainter>
+#include <QtConcurrent/qtconcurrentrun.h>
+#include <qcontainerfwd.h>
+#include <qmargins.h>
+#include <qstandardpaths.h>
+#include <qtmetamacros.h>
+#include <qurl.h>
+#include "common/komplex_global.h"
+/**
+ * @brief The PackCompiler class
+ * [1] Extract Pack (GZip)
+ * [2] Verify directory is a pack and has shaders
+ * [3] Load shader code
+ * [4] Append Common and Global files, if they exist
+ * [5] Add uniform and replace variable use
+ * [6] Run C Preprocessor (cpp -P) to process macros
+ * [7] Append version macro
+ * [8] Compile with Qt Shader Baker
+ */
+class KOMPLEX_EXPORT PackCompiler : public QObject
+{
+    Q_OBJECT
+    QML_ELEMENT
+public:
+
+    enum State
+    {
+        Idle,
+        Compiling,
+        Complete,
+        Error
+    };
+    Q_ENUM(State)
+
+    explicit PackCompiler(QObject *parent = nullptr);
+    ~PackCompiler() override;
+
+    auto compilerOutput() const -> const QString & { return m_compilerOutput; }
+    auto progress() -> qreal { return m_progress; }
+    auto currentStep() -> qint64 { return m_currentStep; }
+    auto totalSteps() -> qint64 { return m_totalSteps; }
+    auto errorTitle() const -> const QString & { return m_errorTitle; }
+    auto errorMessage() const -> const QString & { return m_errorMessage; }
+    auto reset() -> void;
+
+    auto process(const QUrl &uri) -> QFuture<QUrl>;
+
+    auto status() const -> const QString & { return m_status; }
+    auto state() const -> State { return m_state; }
+
+protected:
+    /**
+     * @brief prepareShaders
+     * Scans the pack's shader directory and sends each file to
+     * prepareFile()
+     * @param uri
+     * Directory to prepare
+     */
+    auto prepareShaders(const QUrl &uri) noexcept(false) -> void;
+
+    /**
+     * @brief prepareFile
+     * Prepares the individual file by appending the header, footer,
+     * common files and replacing standard variable names
+     * @param uri
+     */
+    auto prepareFile(const QUrl &uri) noexcept(false) -> void;
+
+    /**
+     * @brief validateDirectory
+     *
+     * @param uri
+     * @return true
+     * @return false
+     */
+    auto validateDirectory(const QUrl &uri) -> bool;
+
+    auto extract(const QUrl &sourceUri, const QUrl &destinationUri) noexcept(false) -> void;
+    auto copyFile(const QUrl &sourceUri, const QUrl &destinationUri) noexcept(false) -> void;
+    auto compile(const QUrl &uri) noexcept(false) -> void;
+    auto preprocess(const QUrl &uri) noexcept(false) -> void;
+    auto appendVersion(const QUrl &uri) noexcept(false) -> void;
+    auto compileShader(const QUrl &uri) noexcept(false) -> void;
+    auto loadCommonFragmentData(const QUrl &uri) -> QByteArray;
+    auto loadCommonVertexData(const QUrl &uri) -> QByteArray;
+    auto loadGlobalData(const QUrl &uri) -> QByteArray;
+
+    auto setError(const QString &title, const QString &message, const QUrl &uri = {}) -> void;
+    auto setCompilerOutput(const QString &compilerOutput) -> void;
+    auto setState(State state) -> void;
+    auto setProgress(qreal progress) -> void;
+    auto setTotalSteps(qint64 steps) -> void;
+    auto setCurrentStep(qint64 step) -> void;
+
+    auto setStatus(const QString &status) -> void;
+
+    auto incrementCompileStep() -> void;
+
+    auto removeDirectory(const QUrl &uri) -> bool;
+
+signals:
+    auto compilerOutputChanged() -> void;
+    auto errorOcurred() -> void;
+    auto errorTitleChanged() -> void;
+    auto errorMessageChanged() -> void;
+    auto stateChanged() -> void;
+    auto progressChanged() -> void;
+    auto currentStepChanged() -> void;
+    auto totalStepsChanged() -> void;
+
+    auto compileComplete(const QUrl &uri) -> void;
+
+    auto statusChanged() -> void;
+    auto packReady(const QString &) -> void;
+    auto errorStepChanged() -> void;
+    auto errorRatingChanged() -> void;
+
+private:
+    static inline const QStringList m_updateVariables
+        {
+            QStringLiteral("iTime"),
+            QStringLiteral("iTimeDelta"),
+            QStringLiteral("iFrameRate"),
+            QStringLiteral("iSampleRate"),
+            QStringLiteral("iFrame"),
+            QStringLiteral("iDate"),
+            QStringLiteral("iMouse"),
+            QStringLiteral("iResolution"),
+            QStringLiteral("iColorTheme"),
+            QStringLiteral("iChannelTime"),
+            QStringLiteral("iChannelResolution")
+        };
+
+    static inline const QByteArray m_version
+        {
+            R"(#version 450)"
+        };
+
+    static inline const QString m_header
+        {
+            R"(layout(location = 0) in vec2 qt_TexCoord0;
+layout(location = 0) out vec4 fragColor;
+
+layout(std140, binding = 0) uniform buf {
+    mat4 qt_Matrix;
+    float qt_Opacity;
+    float iTime;
+    float iTimeDelta;
+    float iFrameRate;
+    float iSampleRate;
+    int iFrame;
+    vec4 iDate;
+    vec4 iMouse;
+    vec3 iResolution;
+    float iChannelTime[4];
+    vec3 iChannelResolution[4];
+    vec4 iColorTheme[4];
+} ubuf;
+
+layout(binding = 1) uniform sampler2D iChannel0;
+layout(binding = 2) uniform sampler2D iChannel1;
+layout(binding = 3) uniform sampler2D iChannel2;
+layout(binding = 4) uniform sampler2D iChannel3;
+
+vec2 fragCoord = vec2(qt_TexCoord0.x, 1.0 - qt_TexCoord0.y) * ubuf.iResolution.xy;)"
+        };
+
+    static inline const QString m_footer
+        {
+            R"(void main() {
+    vec4 color = vec4(0.0);
+    mainImage(color, fragCoord);
+    fragColor = color;
+})"
+        };
+
+    QString m_compilerOutput;
+    QString m_errorMessage;
+    QString m_errorTitle;
+    QString m_status;
+
+    State m_state;
+
+    qreal m_currentStep = 0;
+    qreal m_progress = 0;
+    qreal m_totalSteps = 0;
+
+    QMutex m_downloadMutex;
+
+    static inline QList<QRegularExpression> m_variableExpressions;
+
+    static inline const QRegularExpression m_commonFragmentExpression = QRegularExpression
+    (
+        QString("^common\\.frag$"),
+        QRegularExpression::CaseInsensitiveOption
+    );
+
+    static inline const QRegularExpression m_commonVertexExpression = QRegularExpression
+    (
+        QString("^common\\.vert$"),
+        QRegularExpression::CaseInsensitiveOption
+    );
+
+    static inline const QRegularExpression m_fragmentExpression = QRegularExpression
+    (
+        QString("^.{1,}\\.frag$"),
+        QRegularExpression::CaseInsensitiveOption |
+            QRegularExpression::DotMatchesEverythingOption
+    );
+
+    static inline const QRegularExpression m_vertexExpression = QRegularExpression
+    (
+        QString("^.{1,}\\.vert$"),
+        QRegularExpression::CaseInsensitiveOption |
+            QRegularExpression::DotMatchesEverythingOption
+    );
+
+    Q_PROPERTY(QString compilerOutput READ compilerOutput WRITE setCompilerOutput NOTIFY compilerOutputChanged FINAL)
+    Q_PROPERTY(QString errorTitle READ errorTitle NOTIFY errorTitleChanged FINAL)
+    Q_PROPERTY(QString errorMessage READ errorMessage NOTIFY errorMessageChanged FINAL)
+    Q_PROPERTY(qreal progress READ progress NOTIFY progressChanged FINAL)
+    Q_PROPERTY(qint64 totalSteps READ totalSteps NOTIFY totalStepsChanged FINAL)
+    Q_PROPERTY(qint64 currentStep READ currentStep NOTIFY currentStepChanged FINAL)
+    Q_PROPERTY(QString status READ status WRITE setStatus NOTIFY statusChanged FINAL)
+    Q_PROPERTY(State state READ state NOTIFY stateChanged FINAL)
+};
+
+Q_DECLARE_METATYPE(PackCompiler)
+#endif // PackCompiler_H

KomplexHubPlugin/packsearchmodel.cpp

@@ -62,6 +62,14 @@ PackSearchModel::PackSearchModel(QObject *parent) : QAbstractListModel{parent}
     );
 }
 
+PackSearchModel::~PackSearchModel()
+{
+    if(m_paginator)
+    {
+        delete m_paginator;
+    }
+}
+
 auto PackSearchModel::rowCount(const QModelIndex &) const -> int
 {
     if(m_paginator != nullptr)
@@ -185,6 +193,16 @@ auto PackSearchModel::resetDataModel() -> void
     endInsertRows();
 }
 
+auto PackSearchModel::boundaryCheck(qsizetype index) const -> bool
+{
+    if(index < 0 || m_paginator == nullptr || index >= m_paginator->count())
+    {
+        return false;
+    }
+
+    return true;
+}
+
 auto PackSearchModel::hasNextPage() const -> bool
 {
     return m_paginator->page() < m_paginator->totalPages();
@@ -239,7 +257,36 @@ auto PackSearchModel::setResultsPerPage(qsizetype resultsPerPage) -> void
         (
             [this, resultsPerPage]
             {
+                qsizetype difference = resultsPerPage - m_paginator->resultsPerPage();
                 m_paginator->setResultsPerPage(resultsPerPage);
+
+                if(difference > 0)
+                {
+                    qsizetype firstIndex = m_paginator->resultsPerPage() - difference;
+
+                    beginInsertRows
+                    (
+                        QModelIndex(),
+                        firstIndex,
+                        m_paginator->count() - 1
+                    );
+
+                    endInsertRows();
+                }
+
+                else if(difference < 0)
+                {
+                    qsizetype firstIndex = m_paginator->resultsPerPage();
+
+                    beginRemoveRows
+                    (
+                        QModelIndex(),
+                        firstIndex,
+                        firstIndex - difference
+                    );
+
+                    endRemoveRows();
+                }
             }
         );
     }

KomplexHubPlugin/packsearchmodel.h

@@ -78,6 +78,7 @@ public:
     Q_ENUM(DataRole)
 
     explicit PackSearchModel(QObject *parent = nullptr);
+    ~PackSearchModel();
 
     auto rowCount(const QModelIndex &parent = QModelIndex()) const -> int override;
 
@@ -311,6 +312,14 @@ signals:
     auto queryChanged() -> void;
 
 private:
+    /**
+     * @brief boundaryCheck
+     * Helper function to check the requested index boundary
+     * @param index
+     * @return
+     */
+    auto boundaryCheck(qsizetype index) const -> bool;
+
     /**
      * Data role map that connects PackSearchModel::DataRole to it's QML accessor name
      */

KomplexHubPlugin/paginators/featuredpackspaginator.h

@@ -40,7 +40,7 @@ public:
             QString::fromUtf8(KOMPLEX_ENDPOINT_PACKS_FEATURED)
         );
 
-        controller()->setWindowSize(20);
+        controller()->setWindowSize(32);
     }
 };
 

KomplexHubPlugin/paginators/imagepaginator.h

@@ -152,30 +152,121 @@ protected:
 
             const QVariantMap sources = resultObject.value(QString::fromUtf8("src")).toObject().toVariantMap();
             QMap<QString, QString> sourceMap;
-            QMap<QString, QString> sizeMap;
 
             QMapIterator<QString,QVariant> sourceIterator(sources);
+            QString original;
 
             while(sourceIterator.hasNext())
             {
                 sourceIterator.next();
 
-                QString url = sourceIterator.value().toString();
+                if(sourceIterator.key().toLower() == QString::fromUtf8("original"))
-                sourceMap.insert(sourceIterator.key(), url);
-
-                auto matches = s_sizeExpression.match(url);
-
-                if(matches.hasMatch())
                 {
-                    QString size = matches.captured();
+                    original = sourceIterator.value().toString();
-                    size.remove(QString::fromUtf8("w="));
+                    break;
-                    size.remove(QString::fromUtf8("h="));
-                    size.replace(QLatin1Char('&'), QLatin1Char('x'));
-
-                    sizeMap.insert(sourceIterator.key(), std::move(size));
                 }
             }
 
+            QSize screenSize = CoreServices::screenSize();
+            QSize portraitSize(screenSize.height(),screenSize.width());
+            QSize landscapeSize(screenSize.width(),screenSize.height());
+
+            if(screenSize.height() > screenSize.width())
+            {
+                portraitSize = screenSize;
+                landscapeSize = QSize(screenSize.height(),screenSize.width());
+            }
+
+            sourceMap.clear();
+            sourceMap = QMap<QString,QString>
+            {
+                {
+                    QString::fromUtf8("original"),
+                    original
+                },
+                {
+                    QString::fromUtf8("screen"),
+                    QString::fromUtf8("%1?auto=compress&cs=tinysrgb&fit=crop&h=%2&w=%3").arg(
+                        original,
+                        QString::number(screenSize.height()),
+                        QString::number(screenSize.width())
+                    )
+                },
+                {
+                    QString::fromUtf8("portrait"),
+                    QString::fromUtf8("%1?auto=compress&cs=tinysrgb&fit=crop&h=%2&w=%3").arg(
+                        original,
+                        QString::number(portraitSize.height()),
+                        QString::number(portraitSize.width())
+                    )
+                },
+                {
+                    QString::fromUtf8("landscape"),
+                    QString::fromUtf8("%1?auto=compress&cs=tinysrgb&fit=crop&h=%2&w=%3").arg(
+                        original,
+                        QString::number(landscapeSize.height()),
+                        QString::number(landscapeSize.width())
+                    )
+                },
+                {
+                    QString::fromUtf8("backgroundPortrait"),
+                    QString::fromUtf8("%1?auto=compress&cs=tinysrgb&fit=crop&h=%2&w=%3").arg(
+                        original,
+                        QString::number(portraitSize.height() / 2),
+                        QString::number(portraitSize.width() / 2)
+                    )
+                },
+                {
+                    QString::fromUtf8("backgroundLandscape"),
+                    QString::fromUtf8("%1?auto=compress&cs=tinysrgb&fit=crop&h=%2&w=%3").arg(
+                        original,
+                        QString::number(landscapeSize.height() / 2),
+                        QString::number(landscapeSize.width() / 2)
+                    )
+                },
+                {
+                    QString::fromUtf8("thumbnail"),
+                    QString::fromUtf8("%1?auto=compress&cs=tinysrgb&fit=crop&h=144&w=256%3").arg(
+                        original
+                    )
+                },
+                {
+                    QString::fromUtf8("largeThumbnail"),
+                    QString::fromUtf8("%1?auto=compress&cs=tinysrgb&fit=crop&h=450&w=800%3").arg(
+                        original
+                    )
+                }
+            };
+
+            QMap<QString, QString> sizeMap =
+            {
+                {
+                    QString::fromUtf8("original"),
+                    QString()
+                },
+                {
+                    QString::fromUtf8("screen"),
+                    QString::fromUtf8("%1x%2").arg(
+                        QString::number(screenSize.width()),
+                        QString::number(screenSize.height())
+                    )
+                },
+                {
+                    QString::fromUtf8("portrait"),
+                    QString::fromUtf8("%1x%2").arg(
+                        QString::number(portraitSize.width()),
+                        QString::number(portraitSize.height())
+                    )
+                },
+                {
+                    QString::fromUtf8("landscape"),
+                    QString::fromUtf8("%1x%2").arg(
+                        QString::number(landscapeSize.width()),
+                        QString::number(landscapeSize.height())
+                    )
+                }
+            };
+
             fetchedResults.append(
                 {
                     resultObject.value(QString::fromUtf8("alt")).toString(),
@@ -214,8 +305,8 @@ protected:
     auto getNetworkReply(const QNetworkRequest &request) const -> QNetworkReply*
     {
         QEventLoop loop;
-        QWeakPointer<QNetworkAccessManager> managerReference = CoreServices::networkAccessManager();
 
+        QWeakPointer<QNetworkAccessManager> managerReference = CoreServices::networkAccessManager();
         QSharedPointer<QNetworkAccessManager> manager = managerReference.toStrongRef();
 
         LOG_ERROR_X(!manager,
@@ -238,6 +329,8 @@ protected:
             loop.exec();
         }
 
+        manager.clear();
+
         LOG_ERROR_X(reply->error() != QNetworkReply::NoError,
             "NewestPacksPaginator::getNetworkReply",
             reply->errorString().toStdString().c_str(),
@@ -247,28 +340,6 @@ protected:
         return reply;
     }
 
-    /**
-     * @brief getDocument
-     * Extracts the JSON document from the server reply
-     * @param reply
-     * @return
-     */
-    [[nodiscard]]
-    auto getDocument(QNetworkReply *reply) const -> QJsonDocument
-    {
-        QByteArray data = reply->readAll();
-        QJsonParseError documentError;
-        QJsonDocument document = QJsonDocument::fromJson(data, &documentError);
-
-        LOG_ERROR_X(documentError.error != QJsonParseError::NoError,
-            "NewestPacksPaginator::getDocument",
-            documentError.errorString().toStdString().c_str(),
-            {}
-        );
-
-        return document;
-    }
-
     /**
      * @brief setUri
      * Sets the API Endpoint URI to fetch from

KomplexHubPlugin/paginators/videopaginator.h

@@ -254,28 +254,6 @@ protected:
         return reply;
     }
 
-    /**
-     * @brief getDocument
-     * Extracts the JSON document from the server reply
-     * @param reply
-     * @return
-     */
-    [[nodiscard]]
-    auto getDocument(QNetworkReply *reply) const -> QJsonDocument
-    {
-        QByteArray data = reply->readAll();
-        QJsonParseError documentError;
-        QJsonDocument document = QJsonDocument::fromJson(data, &documentError);
-
-        LOG_ERROR_X(documentError.error != QJsonParseError::NoError,
-            "NewestPacksPaginator::getDocument",
-            documentError.errorString().toStdString().c_str(),
-            {}
-        );
-
-        return document;
-    }
-
     /**
      * @brief setUri
      * Sets the API Endpoint URI to fetch from

KomplexHubPlugin/paginators/wallpaperpaginator.h

@@ -62,35 +62,35 @@ public:
         return m_uri;
     }
 
-    /**
+    // /**
-     * @brief query
+    //  * @brief query
-     * Current query string, if the API Endpoint supports queries
+    //  * Current query string, if the API Endpoint supports queries
-     * @return
+    //  * @return
-     */
+    //  */
-    [[nodiscard]]
+    // [[nodiscard]]
-    auto query() const -> QString
+    // auto query() const -> QString
-    {
+    // {
-        return m_query;
+    //     return m_query;
-    }
+    // }
 
-    /**
+    // /**
-     * @brief setQuery
+    //  * @brief setQuery
-     * Sets the new query string and updates the controller
+    //  * Sets the new query string and updates the controller
-     * @param query
+    //  * @param query
-     */
+    //  */
-    auto setQuery(const QString &query) -> void
+    // auto setQuery(const QString &query) -> void
-    {
+    // {
-        if(query == m_query)
+    //     if(query == m_query)
-        {
+    //     {
-            return;
+    //         return;
-        }
+    //     }
 
-        m_query = query;
+    //     m_query = query;
-        Q_EMIT queryChanged();
+    //     Q_EMIT queryChanged();
 
-        reset();
+    //     reset();
-        setOffset(0);
+    //     setOffset(0);
-    }
+    // }
 
 signals:
     /**
@@ -120,7 +120,7 @@ protected:
             {}
         );
 
-        if(queryable() && query().isEmpty())
+         if(queryable() && query().isEmpty())
         {
             return {};
         }
@@ -139,7 +139,7 @@ protected:
                 {
                     {
                         QByteArray("query"),
-                        m_query.toUtf8()
+                        query().toUtf8()
                     },
                     {
                         QByteArray("offset"),
@@ -303,11 +303,11 @@ private:
      */
     QString m_uri;
 
-    /**
+    // /**
-     * @brief m_query
+    //  * @brief m_query
-     * The query string used in fetch operations
+    //  * The query string used in fetch operations
-     */
+    //  */
-    QString m_query;
+    // QString m_query;
 };
 
 #endif // WALLPAPERPAGINATOR_H

KomplexHubPlugin/videoitemmodel.cpp

@@ -0,0 +1,203 @@
+#include "videoitemmodel.h"
+
+VideoItemModel::VideoItemModel(QObject *parent) : QAbstractListModel{parent}
+{
+    QObject::connect(
+        this,
+        &VideoItemModel::dataEntryChanged,
+        this,
+        &VideoItemModel::resetDataModel
+    );
+}
+
+auto VideoItemModel::rowCount(const QModelIndex &) const -> int
+{
+    return m_dataEntry.files.count();
+}
+
+auto VideoItemModel::data(const QModelIndex &index, int role) const -> QVariant
+{
+    if(!boundaryCheck(index.row()))
+    {
+        return {};
+    }
+
+    VideoEntry dataPoint = m_dataEntry.files.at(index.row());
+
+    QVariant data;
+
+    switch(static_cast<DataRole>(role))
+    {
+        case UuidRole:
+            data = dataPoint.id;
+            break;
+        case UrlRole:
+            data = dataPoint.url;
+            break;
+        case HeightRole:
+            data = dataPoint.height;
+            break;
+        case WidthRole:
+            data = dataPoint.width;
+            break;
+        case FileTypeRole:
+            data = dataPoint.type;
+            break;
+        case FpsRole:
+            data = dataPoint.fps;
+            break;
+        case SizeRole:
+            data = dataPoint.size;
+            break;
+        case QualityRole:
+            data = dataPoint.quality;
+            break;
+        case TextRole:
+            data = friendlyText(dataPoint);
+            break;
+    }
+
+    return data;
+}
+
+auto VideoItemModel::index(int row, int column, const QModelIndex &parent) const -> QModelIndex
+{
+    Q_UNUSED(parent)
+
+    if(!boundaryCheck(row))
+    {
+        return {};
+    }
+
+    return createIndex(row, column, &m_dataEntry.files[row]);
+}
+
+auto VideoItemModel::columnCount(const QModelIndex &) const -> int
+{
+    return 0;
+}
+
+auto VideoItemModel::parent(const QModelIndex &) const -> QModelIndex
+{
+    return {};
+}
+
+auto VideoItemModel::setData(const QModelIndex &, const QVariant &, int) -> bool
+{
+    return false;
+}
+
+auto VideoItemModel::state() const -> VideoItemModel::State
+{
+    return m_state;
+}
+
+auto VideoItemModel::setState(State state) -> void
+{
+    if (m_state == state)
+    {
+        return;
+    }
+
+    m_state = state;
+    emit stateChanged();
+}
+
+auto VideoItemModel::resetState() -> void
+{
+    setState(Idle);
+}
+
+auto VideoItemModel::resetDataModel() -> void
+{
+    if(m_lastCount > 0)
+    {
+        //invalidate previous model data
+        beginRemoveRows(QModelIndex(), 0, m_lastCount - 1);
+        endRemoveRows();
+    }
+
+    m_lastCount = m_dataEntry.files.count();
+
+    //signal new data
+    beginInsertRows(QModelIndex(), 0, m_dataEntry.files.count() - 1);
+    endInsertRows();
+}
+
+auto VideoItemModel::boundaryCheck(qsizetype index) const -> bool
+{
+    if(index < 0 || index >= m_dataEntry.files.count())
+    {
+        return false;
+    }
+
+    return true;
+}
+
+auto VideoItemModel::setDataEntry(const VideoCache &entry) -> void
+{
+    if(entry == m_dataEntry)
+    {
+        return;
+    }
+
+    m_dataEntry = entry;
+    Q_EMIT dataEntryChanged();
+}
+
+auto VideoItemModel::friendlyText(const VideoEntry &video) const -> QString
+{
+    qint64 size = video.size;
+    qint64 sizeIndex = 0;
+
+    while(size >= 1000)
+    {
+        size = static_cast<qint64>(std::ceil(static_cast<qreal>(size) / 1000));
+        ++sizeIndex;
+    }
+
+    if(!video.quality.isEmpty())
+    {
+        return QString("%1/%2 [%3x%4 %5FPS] (%6%7)").arg
+        (
+            video.quality.toUpper(),
+            video.type.toUpper(),
+            QString::number(video.width),
+            QString::number(video.height),
+            QString::number(video.fps),
+            QString::number(size),
+            m_sizeTexts[sizeIndex]
+        );
+    }
+
+    return QString("%1 [%2x%3 %4FPS] (%5%6)").arg
+    (
+        video.type.toUpper(),
+        QString::number(video.width),
+        QString::number(video.height),
+        QString::number(video.fps),
+        QString::number(size),
+        m_sizeTexts[sizeIndex]
+    );
+}
+
+auto VideoItemModel::roleNames() const -> QHash<int, QByteArray>
+{
+    return m_dataRoles;
+}
+
+auto VideoItemModel::errorString() const -> QString
+{
+    return m_errorString;
+}
+
+auto VideoItemModel::setErrorString(const QString &errorString) -> void
+{
+    if (m_errorString == errorString)
+    {
+        return;
+    }
+
+    m_errorString = errorString;
+    emit errorStringChanged();
+}

KomplexHubPlugin/videoitemmodel.h

@@ -0,0 +1,294 @@
+/*
+ *  Komplex Wallpaper Engine
+ *  Copyright (C) 2026 @DigitalArtifex
+ *  https://digitalartifex.dev - https://github.com/DigitalArtifex
+ *
+ *  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 3 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, see <https://www.gnu.org/licenses/>
+ */
+#ifndef VideoItemModel_H
+#define VideoItemModel_H
+#include <QObject>
+#include <QQmlEngine>
+#include <QList>
+#include <QStandardPaths>
+#include <QDir>
+#include <QFile>
+#include <QFileInfo>
+#include <QJsonParseError>
+#include <QJsonDocument>
+#include <QJsonObject>
+#include <QJsonArray>
+#include <QAbstractListModel>
+#include <QProcess>
+#include <QNetworkAccessManager>
+#include <QNetworkReply>
+#include <QNetworkRequest>
+#include <QEventLoop>
+#include <QtConcurrent/QtConcurrentRun>
+
+#include "common/komplex_global.h"
+#include "common/videocache.h"
+
+/**
+ * @brief The VideoItemModel class
+ */
+class KOMPLEX_EXPORT VideoItemModel : public QAbstractListModel
+{
+    Q_OBJECT
+    QML_ELEMENT
+public:
+
+    /**
+     * @brief Used to control the UI state
+     */
+    enum State
+    {
+        Idle,
+        Loading,
+        Error
+    };
+    Q_ENUM(State)
+
+    /**
+     * @brief Data roles used by the view to request data
+     */
+    enum DataRole {
+        UuidRole = Qt::UserRole + 1,
+        FileTypeRole,
+        FpsRole,
+        HeightRole,
+        WidthRole,
+        SizeRole,
+        UrlRole,
+        QualityRole,
+        TextRole
+    };
+    Q_ENUM(DataRole)
+
+    explicit VideoItemModel(QObject *parent = nullptr);
+
+    auto rowCount(const QModelIndex &parent = QModelIndex()) const -> int override;
+
+    /**
+     * @brief data
+     * Used by the view to pull data from the model.
+     * Required by QAbstractListModel
+     * @param index
+     * @param role
+     * @return
+     */
+    auto data(
+        const QModelIndex &index,
+        int role = Qt::DisplayRole
+    ) const -> QVariant override;
+
+    /**
+     * @brief index
+     * Used by the view to create an index for the data point.
+     * Required by QAbstractListModel
+     * @param row
+     * @param column
+     * @param parent
+     * @return
+     */
+    auto index(
+        int row,
+        int column,
+        const QModelIndex &parent = QModelIndex()
+    ) const -> QModelIndex override;
+
+    /**
+     * @brief columnCount
+     * Required by QAbstractListModel, but just returns 0
+     * since we dont use cols
+     * @param parent
+     * @return
+     */
+    auto columnCount(
+        const QModelIndex &parent = QModelIndex()
+    ) const -> int override;
+
+    /**
+     * @brief parent
+     * @param index
+     * @return
+     */
+    auto parent(const QModelIndex &index) const -> QModelIndex override;
+
+    /**
+     * @brief setData
+     * Required by QAbstractListModel but not used
+     * @param index
+     * @param value
+     * @param role
+     * @return true always
+     */
+    auto setData(
+        const QModelIndex &index,
+        const QVariant &value,
+        int role = Qt::EditRole
+    ) -> bool override;
+
+    /**
+     * @brief state
+     * Current Model State
+     * @return
+     */
+    auto state() const -> State;
+
+    /**
+     * @brief roleNames
+     * Used to tell the view what data roles are available
+     * and their QML friendly names
+     * @return
+     */
+    auto roleNames() const -> QHash<int, QByteArray> override;
+
+    /**
+     * @brief errorString
+     * User-friendly error string to be reported to the user
+     * @return
+     */
+    auto errorString() const -> QString;
+
+    /**
+     * @brief setDataEntry
+     * Set the dataEntry from the Search or List model
+     * @param entry
+     */
+    auto setDataEntry(const VideoCache &entry) -> void;
+
+    /**
+     * @brief friendlyText
+     * Generates the friendly text for comboboxes and the like
+     * @param video
+     * @return
+     */
+    auto friendlyText(const VideoEntry &video) const -> QString;
+
+protected:
+
+    /**
+     * @brief setErrorString
+     * @param errorString
+     */
+    auto setErrorString(const QString &errorString) -> void;
+
+    /**
+     * @brief setState
+     * @param state
+     */
+    auto setState(State state) -> void;
+
+    /**
+     * @brief resetState
+     */
+    auto resetState() -> void;
+
+    /**
+     * @brief resetDataModel
+     * Clears the data model and creates a new one if data exists
+     */
+    auto resetDataModel() -> void;
+
+signals:
+    auto dataEntryChanged() -> void;
+
+    /**
+     * @brief stateChanged
+     * Signaled when reported state changes
+     */
+    auto stateChanged() -> void;
+
+    /**
+     * @brief errorStringChanged
+     * Signaled when reported error message changes
+     */
+    auto errorStringChanged() -> void;
+
+private:
+    /**
+     * @brief boundaryCheck
+     * Helper function to check the requested index boundary
+     * @param index
+     * @return
+     */
+    auto boundaryCheck(qsizetype index) const -> bool;
+
+    /**
+     * Size texts used in friendlyText()
+     */
+    QStringList m_sizeTexts
+    {
+        QString::fromUtf8("B"),
+        QString::fromUtf8("KB"),
+        QString::fromUtf8("MB"),
+        QString::fromUtf8("GB")
+    };
+
+    /**
+     * Data role map that connects VideoItemModel::DataRole to it's QML accessor name
+     */
+    static inline const QHash<int, QByteArray> m_dataRoles =
+    {
+        {
+           static_cast<int>(UuidRole),
+           QByteArray("uuid")
+        },
+        {
+           static_cast<int>(FileTypeRole),
+           QByteArray("fileType")
+        },
+        {
+           static_cast<int>(FpsRole),
+           QByteArray("fps")
+        },
+        {
+           static_cast<int>(HeightRole),
+           QByteArray("height")
+        },
+        {
+           static_cast<int>(WidthRole),
+           QByteArray("width")
+        },
+        {
+           static_cast<int>(SizeRole),
+           QByteArray("size")
+        },
+        {
+           static_cast<int>(UrlRole),
+           QByteArray("url")
+        },
+        {
+            static_cast<int>(QualityRole),
+            QByteArray("quality")
+        },
+        {
+            static_cast<int>(TextRole),
+            QByteArray("text")
+        }
+    };
+
+    State m_state = Idle;
+    QString m_errorString = QString();
+
+    VideoCache m_dataEntry;
+    qint64 m_lastCount = 0;
+
+    Q_PROPERTY(State state READ state WRITE setState RESET resetState NOTIFY stateChanged FINAL)
+    Q_PROPERTY(QString errorString READ errorString WRITE setErrorString NOTIFY errorStringChanged FINAL)
+};
+Q_DECLARE_METATYPE(VideoItemModel)
+
+#endif // VideoItemModel_H

KomplexHubPlugin/videosearchmodel.cpp

@@ -2,6 +2,7 @@
 
 VideoSearchModel::VideoSearchModel(QObject *parent) : QAbstractListModel{parent}
 {
+    m_itemModel = new VideoItemModel(this);
     m_paginator = new VideoSearchPaginator(this);
     PaginationNotifier *notifier = static_cast<PaginationNotifier*>(m_paginator);
 
@@ -62,6 +63,19 @@ VideoSearchModel::VideoSearchModel(QObject *parent) : QAbstractListModel{parent}
     );
 }
 
+VideoSearchModel::~VideoSearchModel()
+{
+    if(m_paginator)
+    {
+        delete m_paginator;
+    }
+
+    if(m_itemModel)
+    {
+        delete m_itemModel;
+    }
+}
+
 auto VideoSearchModel::rowCount(const QModelIndex &) const -> int
 {
     if(m_paginator != nullptr)
@@ -74,18 +88,12 @@ auto VideoSearchModel::rowCount(const QModelIndex &) const -> int
 
 auto VideoSearchModel::data(const QModelIndex &index, int role) const -> QVariant
 {
-    if(m_paginator == nullptr)
+    if(!boundaryCheck(index.row()))
-    {
-        return {};
-    }
-
-    if(index.row() < 0 || index.row() >= m_paginator->count() )
     {
         return {};
     }
 
     VideoCache dataPoint = m_paginator->at(index.row());
-
     QVariant data;
 
     switch(static_cast<DataRole>(role))
@@ -126,8 +134,10 @@ auto VideoSearchModel::index(int row, int column, const QModelIndex &parent) con
 {
     Q_UNUSED(parent)
 
-    if(row < 0 || row >= m_paginator->count())
+    if(!boundaryCheck(row))
+    {
         return {};
+    }
 
     return createIndex(row, column, &m_paginator[row]);
 }
@@ -171,14 +181,45 @@ auto VideoSearchModel::resetState() -> void
 auto VideoSearchModel::resetDataModel() -> void
 {
     //invalidate previous model data
-    beginRemoveRows(QModelIndex(), 0, m_paginator->count());
+    if(m_lastCount > 0)
-    endRemoveRows();
+    {
+        beginRemoveRows(QModelIndex(), 0, m_lastCount - 1);
+        endRemoveRows();
+    }
+
+    m_lastCount = m_paginator->count();
 
     //signal new data
     beginInsertRows(QModelIndex(), 0, m_paginator->count() - 1);
     endInsertRows();
 }
 
+auto VideoSearchModel::setItem(qint64 index) -> bool
+{
+    if(!boundaryCheck(index))
+    {
+        return false;
+    }
+
+    m_itemModel->setDataEntry(m_paginator->at(index));
+    return true;
+}
+
+auto VideoSearchModel::boundaryCheck(qsizetype index) const -> bool
+{
+    if(index < 0 || m_paginator == nullptr || index >= m_paginator->count())
+    {
+        return false;
+    }
+
+    return true;
+}
+
+auto VideoSearchModel::itemModel() const -> VideoItemModel*
+{
+    return m_itemModel;
+}
+
 auto VideoSearchModel::hasNextPage() const -> bool
 {
     return m_paginator->page() < m_paginator->totalPages();
@@ -233,7 +274,37 @@ auto VideoSearchModel::setResultsPerPage(qsizetype resultsPerPage) -> void
         (
             [this, resultsPerPage]
             {
+                qsizetype difference = resultsPerPage - m_paginator->resultsPerPage();
                 m_paginator->setResultsPerPage(resultsPerPage);
+                m_lastCount = m_paginator->resultsPerPage();
+
+                if(difference > 0)
+                {
+                    qsizetype firstIndex = m_paginator->resultsPerPage() - difference;
+
+                    beginInsertRows
+                    (
+                        QModelIndex(),
+                        firstIndex,
+                        m_paginator->count() - 1
+                    );
+
+                    endInsertRows();
+                }
+
+                else if(difference < 0)
+                {
+                    qsizetype firstIndex = m_paginator->resultsPerPage();
+
+                    beginRemoveRows
+                    (
+                        QModelIndex(),
+                        firstIndex,
+                        firstIndex - difference
+                    );
+
+                    endRemoveRows();
+                }
             }
         );
     }

KomplexHubPlugin/videosearchmodel.h

@@ -38,6 +38,7 @@
 #include <QtConcurrent/QtConcurrentRun>
 
 #include "paginators/videosearchpaginator.h"
+#include "videoitemmodel.h"
 
 /**
  * @brief The VideoSearchModel class
@@ -76,6 +77,7 @@ public:
     Q_ENUM(DataRole)
 
     explicit VideoSearchModel(QObject *parent = nullptr);
+    ~VideoSearchModel();
 
     auto rowCount(const QModelIndex &parent = QModelIndex()) const -> int override;
 
@@ -233,6 +235,16 @@ public:
      */
     auto hasPreviousPage() const -> bool;
 
+    /**
+     * @brief setItem
+     * Sets the current itemModel to the item at the specified index
+     * @param index
+     * @return
+     */
+    Q_INVOKABLE auto setItem(qint64 index) -> bool;
+
+    VideoItemModel *itemModel() const;
+
 protected:
 
     /**
@@ -309,6 +321,14 @@ signals:
     auto queryChanged() -> void;
 
 private:
+    /**
+     * @brief boundaryCheck
+     * Helper function to check the requested index boundary
+     * @param index
+     * @return
+     */
+    auto boundaryCheck(qsizetype index) const -> bool;
+
     /**
      * Data role map that connects VideoSearchModel::DataRole to it's QML accessor name
      */
@@ -356,6 +376,9 @@ private:
     QString m_errorString = QString();
 
     VideoSearchPaginator *m_paginator = nullptr;
+    VideoItemModel *m_itemModel = nullptr;
+
+    qint64 m_lastCount = 0;
 
     Q_PROPERTY(State state READ state WRITE setState RESET resetState NOTIFY stateChanged FINAL)
     Q_PROPERTY(QString errorString READ errorString WRITE setErrorString NOTIFY errorStringChanged FINAL)
@@ -366,6 +389,7 @@ private:
     Q_PROPERTY(bool hasNextPage READ hasNextPage NOTIFY pageChanged FINAL)
     Q_PROPERTY(bool hasPreviousPage READ hasPreviousPage NOTIFY pageChanged FINAL)
     Q_PROPERTY(QString query READ query WRITE setQuery NOTIFY queryChanged FINAL)
+    Q_PROPERTY(VideoItemModel *itemModel READ itemModel CONSTANT FINAL)
 };
 Q_DECLARE_METATYPE(VideoSearchModel)
 

README.md

@@ -21,7 +21,7 @@
             <img src="https://git.digitalartifex.dev/digitalartifex/komplex-hub/raw/branch/main/images/screenshots/screenshot_04_videos.png" />
         </td>
         <td>
-            <img src="" />
+            <img src="https://git.digitalartifex.dev/digitalartifex/komplex-hub/raw/branch/main/images/screenshots/screenshot_05_live.png" />
         </td>
     </tr>
     <tr>
@@ -74,4 +74,4 @@ Content purchases will be processed through the website using Paypal as will art
 
 ## Status
 
-This app is currently under development and is pre-alpha. During this phase, the new API is only hosted locally and not yet available on digitalartifex.dev
+This app is currently under development and is pre-alpha. The API is now being hosted on https://komplex.dev. However, there is no download functionality as of yet. BETA should be here within a few weeks.

images/icons/icons8-3d-glasses.svg

@@ -0,0 +1 @@
+<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 14 10 C 12.128906 10 8.585938 12.070313 2.3125 21.925781 C 1.996094 22.421875 1.929688 23.023438 2.097656 23.574219 C 2.035156 23.707031 2 23.851563 2 24 L 2 39 C 2 40.070313 2.863281 41 3.957031 41 L 19.992188 41 C 21.109375 41 22.125 40.332031 22.605469 39.324219 C 22.617188 39.300781 22.628906 39.277344 22.636719 39.25 L 24.523438 34.324219 C 24.648438 34.066406 24.8125 34 25 34 C 25.1875 34 25.351563 34.066406 25.476563 34.324219 L 27.363281 39.25 C 27.371094 39.277344 27.382813 39.300781 27.394531 39.324219 C 27.875 40.332031 28.890625 41 30.007813 41 L 46.042969 41 C 47.136719 41 48 40.070313 48 39 L 48 24 C 48 23.855469 47.96875 23.714844 47.90625 23.582031 C 48.0625 23.074219 48.015625 22.519531 47.753906 22.042969 C 44.757813 16.550781 40.460938 10 37 10 C 32 10 32 15.269531 32 17 C 32 17.027344 32 17.054688 32 17.082031 C 32.066406 18.65625 33.1875 21 36 21 C 36.496094 21 36.972656 20.851563 37.386719 20.578125 C 37.585938 21.382813 37.773438 22.203125 37.949219 23 L 28.828125 23 C 28.007813 23 27.441406 23.355469 26.941406 23.605469 C 26.445313 23.855469 26.007813 24 25.953125 24 L 24.042969 24 C 23.992188 24 23.554688 23.855469 23.058594 23.605469 C 22.558594 23.355469 21.992188 23 21.171875 23 L 12.121094 23 C 12.441406 22.0625 12.777344 21.097656 13.125 20.171875 C 13.5625 20.6875 14.164063 21 15 21 C 17.8125 21 18.933594 18.65625 19 17.082031 C 19 17.054688 19 17.027344 19 17 C 19 15.269531 19 10 14 10 Z M 14 12 C 17 12 17 15.082031 17 17 C 17 17 16.917969 19 15 19 C 14 19 14 15.582031 14 14 C 13.003906 14 10 23 10 23 L 4 23 C 4 23 11 12 14 12 Z M 37 12 C 40 12 46 23 46 23 L 40 23 C 40 23 38.082031 14 37 14 C 37 15.582031 37.082031 19 36 19 C 34.082031 19 34 17 34 17 C 34 15.082031 34 12 37 12 Z M 4 25 L 21.171875 25 C 21.226563 25 21.660156 25.144531 22.160156 25.394531 C 22.660156 25.644531 23.226563 26 24.042969 26 L 25.953125 26 C 26.773438 26 27.339844 25.644531 27.839844 25.394531 C 28.335938 25.144531 28.773438 25 28.828125 25 L 46 25 L 46 39 L 30.007813 39 C 29.679688 39 29.371094 38.808594 29.203125 38.464844 L 27.316406 33.535156 C 27.308594 33.511719 27.296875 33.484375 27.285156 33.460938 C 26.839844 32.53125 25.910156 32 25 32 C 24.089844 32 23.160156 32.53125 22.714844 33.460938 C 22.703125 33.484375 22.691406 33.511719 22.683594 33.535156 L 20.796875 38.464844 C 20.628906 38.808594 20.320313 39 19.992188 39 L 4 39 Z M 6.976563 27.03125 C 6.421875 27.03125 5.96875 27.464844 5.96875 28 L 5.96875 36.011719 C 5.96875 36.515625 6.480469 37.011719 7 37.011719 L 18 37.011719 C 18.507813 37.011719 18.839844 36.386719 19.035156 36.011719 C 19.964844 33.976563 20.230469 31.71875 21.21875 28.296875 C 21.410156 27.707031 21.261719 27.03125 19.988281 27.03125 Z M 29.972656 27.03125 C 28.699219 27.03125 28.550781 27.707031 28.746094 28.296875 C 29.734375 31.71875 29.996094 33.976563 30.925781 36.011719 C 31.121094 36.386719 31.457031 37.011719 31.964844 37.011719 L 42.964844 37.011719 C 43.484375 37.011719 43.996094 36.515625 43.996094 36.011719 L 43.996094 28 C 43.996094 27.464844 43.539063 27.03125 42.984375 27.03125 Z"/></svg>

images/icons/icons8-3d-model.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px">    <path d="M15,29h13V16H15V29z M23.167,9c0.238,0,0.47,0.085,0.65,0.241L29.37,14H46L34.418,3.256C34.234,3.091,33.997,3,33.75,3 H4.357l5.5,6H23.167z M8,24.167V10c0-0.016,0.006-0.03,0.007-0.046c0-0.004-0.001-0.009-0.001-0.013L3,4.48v30.27 c0,0.23,0.08,0.454,0.226,0.632L13,47V30.369l-4.759-5.552C8.085,24.636,8,24.405,8,24.167z M30,16v5h9.586l-1.293-1.293 c-0.391-0.391-0.391-1.023,0-1.414s1.023-0.391,1.414,0l3,3c0.391,0.391,0.391,1.023,0,1.414l-3,3C39.512,25.902,39.256,26,39,26 s-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414L39.586,23H30v7c0,0.552-0.447,1-1,1h-7v9.586l1.293-1.293 c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-3,3C21.512,43.902,21.256,44,21,44s-0.512-0.098-0.707-0.293l-3-3 c-0.391-0.391-0.391-1.023,0-1.414s1.023-0.391,1.414,0L20,40.586V31h-5v17h31c0.553,0,1-0.448,1-1V16H30z M10,23.796l3,3.5V15.414 l-3-3V23.796z M22.797,11H11.69l2.75,3h11.857L22.797,11z"/></svg>

images/icons/icons8-audio.svg

@@ -0,0 +1 @@
+<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 12.78125 5.96875 C 11.75 6.082031 10.976563 6.964844 11 8 L 11 42 C 10.988281 42.722656 11.367188 43.390625 11.992188 43.753906 C 12.613281 44.121094 13.386719 44.121094 14.007813 43.753906 C 14.632813 43.390625 15.011719 42.722656 15 42 L 15 8 C 15.007813 7.457031 14.796875 6.9375 14.414063 6.554688 C 14.03125 6.171875 13.511719 5.960938 12.96875 5.96875 C 12.90625 5.964844 12.84375 5.964844 12.78125 5.96875 Z M 36.78125 5.96875 C 35.75 6.082031 34.976563 6.964844 35 8 L 35 42 C 34.988281 42.722656 35.367188 43.390625 35.992188 43.753906 C 36.613281 44.121094 37.386719 44.121094 38.007813 43.753906 C 38.632813 43.390625 39.011719 42.722656 39 42 L 39 8 C 39.007813 7.457031 38.796875 6.9375 38.414063 6.554688 C 38.03125 6.171875 37.511719 5.960938 36.96875 5.96875 C 36.90625 5.964844 36.84375 5.964844 36.78125 5.96875 Z M 6.78125 14.96875 C 5.75 15.082031 4.976563 15.964844 5 17 L 5 33 C 4.988281 33.722656 5.367188 34.390625 5.992188 34.753906 C 6.613281 35.121094 7.386719 35.121094 8.007813 34.753906 C 8.632813 34.390625 9.011719 33.722656 9 33 L 9 17 C 9.007813 16.457031 8.796875 15.9375 8.414063 15.554688 C 8.03125 15.171875 7.511719 14.960938 6.96875 14.96875 C 6.90625 14.964844 6.84375 14.964844 6.78125 14.96875 Z M 42.78125 14.96875 C 41.75 15.082031 40.976563 15.964844 41 17 L 41 33 C 40.988281 33.722656 41.367188 34.390625 41.992188 34.753906 C 42.613281 35.121094 43.386719 35.121094 44.007813 34.753906 C 44.632813 34.390625 45.011719 33.722656 45 33 L 45 17 C 45.007813 16.457031 44.796875 15.9375 44.414063 15.554688 C 44.03125 15.171875 43.511719 14.960938 42.96875 14.96875 C 42.90625 14.964844 42.84375 14.964844 42.78125 14.96875 Z M 18.78125 15.96875 C 17.75 16.082031 16.976563 16.964844 17 18 L 17 32 C 16.988281 32.722656 17.367188 33.390625 17.992188 33.753906 C 18.613281 34.121094 19.386719 34.121094 20.007813 33.753906 C 20.632813 33.390625 21.011719 32.722656 21 32 L 21 18 C 21.007813 17.457031 20.796875 16.9375 20.414063 16.554688 C 20.03125 16.171875 19.511719 15.960938 18.96875 15.96875 C 18.90625 15.964844 18.84375 15.964844 18.78125 15.96875 Z M 30.78125 15.96875 C 29.75 16.082031 28.976563 16.964844 29 18 L 29 32 C 28.988281 32.722656 29.367188 33.390625 29.992188 33.753906 C 30.613281 34.121094 31.386719 34.121094 32.007813 33.753906 C 32.632813 33.390625 33.011719 32.722656 33 32 L 33 18 C 33.007813 17.457031 32.796875 16.9375 32.414063 16.554688 C 32.03125 16.171875 31.511719 15.960938 30.96875 15.96875 C 30.90625 15.964844 30.84375 15.964844 30.78125 15.96875 Z M 0.90625 20.96875 C 0.863281 20.976563 0.820313 20.988281 0.78125 21 C 0.316406 21.105469 -0.0117188 21.523438 0 22 L 0 28 C -0.00390625 28.359375 0.183594 28.695313 0.496094 28.878906 C 0.808594 29.058594 1.191406 29.058594 1.503906 28.878906 C 1.816406 28.695313 2.003906 28.359375 2 28 L 2 22 C 2.011719 21.710938 1.894531 21.433594 1.6875 21.238281 C 1.476563 21.039063 1.191406 20.941406 0.90625 20.96875 Z M 24.78125 20.96875 C 23.75 21.082031 22.976563 21.964844 23 23 L 23 27 C 22.988281 27.722656 23.367188 28.390625 23.992188 28.753906 C 24.613281 29.121094 25.386719 29.121094 26.007813 28.753906 C 26.632813 28.390625 27.011719 27.722656 27 27 L 27 23 C 27.007813 22.457031 26.796875 21.9375 26.414063 21.554688 C 26.03125 21.171875 25.511719 20.960938 24.96875 20.96875 C 24.90625 20.964844 24.84375 20.964844 24.78125 20.96875 Z M 48.90625 20.96875 C 48.863281 20.976563 48.820313 20.988281 48.78125 21 C 48.316406 21.105469 47.988281 21.523438 48 22 L 48 28 C 47.996094 28.359375 48.183594 28.695313 48.496094 28.878906 C 48.808594 29.058594 49.191406 29.058594 49.503906 28.878906 C 49.816406 28.695313 50.003906 28.359375 50 28 L 50 22 C 50.011719 21.710938 49.894531 21.433594 49.6875 21.238281 C 49.476563 21.039063 49.191406 20.941406 48.90625 20.96875 Z"/></svg>

images/icons/icons8-camera.svg

@@ -0,0 +1 @@
+<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="100px" height="100px"><path d="M 19.09375 5 C 18.097656 5 17.1875 5.53125 16.5625 6.46875 L 14.9375 9 L 6 9 C 3.242188 9 1 11.242188 1 14 L 1 38 C 1 40.757813 3.242188 43 6 43 L 44 43 C 46.757813 43 49 40.757813 49 38 L 49 14 C 49 11.242188 46.757813 9 44 9 L 34.9375 9 L 33.34375 6.4375 C 32.730469 5.519531 31.808594 5 30.8125 5 Z M 10 14 C 11.101563 14 12 14.898438 12 16 C 12 17.101563 11.101563 18 10 18 C 8.898438 18 8 17.101563 8 16 C 8 14.898438 8.898438 14 10 14 Z M 25 15 C 31.066406 15 36 19.933594 36 26 C 36 32.066406 31.066406 37 25 37 C 18.933594 37 14 32.066406 14 26 C 14 19.933594 18.933594 15 25 15 Z M 25 17 C 20.039063 17 16 21.039063 16 26 C 16 30.964844 20.039063 35 25 35 C 29.964844 35 34 30.964844 34 26 C 34 21.039063 29.964844 17 25 17 Z"/></svg>

images/icons/icons8-codepen.svg

@@ -0,0 +1 @@
+<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 25 4 L 4 17.34375 L 4 32.652344 L 25 46 L 46 32.65625 L 46 17.34375 Z M 25 29.183594 L 19.066406 25.070313 L 25 21.023438 L 30.933594 25.070313 Z M 27 17.605469 L 27 9.949219 L 40.429688 18.484375 L 34.410156 22.65625 Z M 23 17.605469 L 15.589844 22.65625 L 9.570313 18.484375 L 23 9.949219 Z M 12.09375 25.042969 L 8 27.832031 L 8 22.203125 Z M 15.570313 27.453125 L 23 32.605469 L 23 40.050781 L 9.589844 31.527344 Z M 27 32.605469 L 34.429688 27.453125 L 40.410156 31.527344 L 27 40.050781 Z M 37.90625 25.042969 L 42 22.203125 L 42 27.832031 Z"/></svg>

images/icons/icons8-cube.svg

@@ -0,0 +1 @@
+<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M25 23.844l18.096-10.447L25.504 3.136c-.311-.182-.697-.182-1.008 0L6.905 13.397 25 23.844zM24 25.577L6 15.185V35.5c0 .355.188.685.496.864L24 46.575V25.577zM26 25.577v20.998l17.504-10.211C43.812 36.185 44 35.855 44 35.5V15.186L26 25.577z"/></svg>

images/icons/icons8-download.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 30 30" width="100px" height="100px">    <path d="M 15 1 C 14.448 1 14 1.448 14 2 L 14 6 L 16 6 L 16 2 C 16 1.448 15.552 1 15 1 z M 16 6 L 16 18.585938 L 18.292969 16.292969 C 18.683969 15.901969 19.316031 15.901969 19.707031 16.292969 C 20.098031 16.683969 20.098031 17.316031 19.707031 17.707031 L 15.707031 21.707031 C 15.512031 21.902031 15.256 22 15 22 C 14.744 22 14.487969 21.902031 14.292969 21.707031 L 10.292969 17.707031 C 9.9019687 17.316031 9.9019688 16.683969 10.292969 16.292969 C 10.683969 15.901969 11.316031 15.901969 11.707031 16.292969 L 14 18.585938 L 14 6 L 6 6 C 4.895 6 4 6.895 4 8 L 4 25 C 4 26.105 4.895 27 6 27 L 24 27 C 25.105 27 26 26.105 26 25 L 26 8 C 26 6.895 25.105 6 24 6 L 16 6 z"/></svg>

images/icons/icons8-play.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 30 30" width="100px" height="100px">    <path d="M 6 3 A 1 1 0 0 0 5 4 A 1 1 0 0 0 5 4.0039062 L 5 15 L 5 25.996094 A 1 1 0 0 0 5 26 A 1 1 0 0 0 6 27 A 1 1 0 0 0 6.5800781 26.8125 L 6.5820312 26.814453 L 26.416016 15.908203 A 1 1 0 0 0 27 15 A 1 1 0 0 0 26.388672 14.078125 L 6.5820312 3.1855469 L 6.5800781 3.1855469 A 1 1 0 0 0 6 3 z"/></svg>

images/icons/icons8-stop.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 30 30" width="100px" height="100px">    <path d="M22,6H8C6.895,6,6,6.895,6,8v14c0,1.105,0.895,2,2,2h14c1.105,0,2-0.895,2-2V8C24,6.895,23.105,6,22,6z"/></svg>