komplex-hub/KomplexHubContent/pages/HomePage.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Effects

import KomplexHub
import KomplexHub.Controls
import KomplexHub.Kero
import KomplexHubPlugin

Item
{
    readonly property bool searchable: false
    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

    id: homePageRoot

    NewestPacksModel
    {
        id: packsModel
        resultsPerPage: 0
    }

    FeaturedImagesModel
    {
        id: imagesModel
        resultsPerPage: 0
    }

    FeaturedVideosModel
    {
        id: videosModel
        resultsPerPage: 0
    }

    Rectangle
    {
        anchors.fill: parent
        color: palette.base

        ColumnLayout
        {
            id: resultsLayout
            visible: opacity > 0.01
            anchors.fill: parent
            anchors.margins: Constants.mediumMargin

            Text
            {
                Layout.alignment: Qt.AlignTop
                Layout.preferredHeight: 50

                color: palette.text
                font.pixelSize: Constants.h2Font.pixelSize
                font.bold: true
                text: qsTr("Newest Wallpaper Packs")
                verticalAlignment: Qt.AlignVCenter
            }

            HorizontalPaginator
            {
                id: packsPaginator
                Layout.fillWidth: true
                Layout.preferredHeight: 245
                Layout.alignment: Qt.AlignTop

                model: packsModel
                delegate: ItemDelegate
                {
                    width: resultWidth
                    height: resultHeight

                    required property string name
                    required property string author
                    required property string description
                    required property string uuid
                    required property string thumbnail
                    required property string authorId
                    required property int index

                    SearchResultItem
                    {
                        anchors.fill: parent
                        title: parent.name
                        author: parent.author
                        description: parent.description
                        thumbnail: parent.thumbnail
                        uuid: parent.uuid

                        selected: packsPaginator.currentIndex === parent.index

                        onTriggered: () => packsPaginator.currentIndex = parent.index

                        onViewMoreTriggered: () =>
                        {
                            showWallpaperPopup(parent.index)
                        }

                        onThumbnailChanged: () =>
                        {
                            console.log(index + " " + thumbnail + " " + parent.thumbnail)
                        }
                    }
                }

                onViewMoreTriggered: () =>
                {
                    showFeaturedPacksPage()
                }
            }

            Text
            {
                Layout.alignment: Qt.AlignTop
                Layout.preferredHeight: 50

                color: palette.text
                font.pixelSize: Constants.h2Font.pixelSize
                font.bold: true
                text: qsTr("Featured Images")
                verticalAlignment: Qt.AlignVCenter
            }

            HorizontalPaginator
            {
                id: imagesPaginator
                Layout.fillWidth: true
                Layout.preferredHeight: 245
                Layout.alignment: Qt.AlignTop

                model: imagesModel
                delegate: ItemDelegate
                {
                    width: resultWidth
                    height: resultHeight

                    required property string author
                    required property string description
                    required property string uuid
                    required property string thumbnail
                    required property string authorId
                    required property int index

                    SearchResultItem
                    {
                        anchors.fill: parent
                        title: parent.author
                        description: parent.description
                        thumbnail: parent.thumbnail
                        uuid: parent.uuid
                        pexels: true
                        selected: imagesPaginator.currentIndex === parent.index

                        onTriggered: () => imagesPaginator.currentIndex = parent.index

                        onViewMoreTriggered: () =>
                        {
                            showImagePopup(parent.index)
                        }
                    }
                }

                onViewMoreTriggered: () =>
                {
                    showFeaturedImagesPage()
                }
            }

            Text
            {
                Layout.alignment: Qt.AlignTop
                Layout.preferredHeight: 50

                color: palette.text
                font.pixelSize: Constants.h2Font.pixelSize
                font.bold: true
                text: qsTr("Popular Videos")
                verticalAlignment: Qt.AlignVCenter
            }

            HorizontalPaginator
            {
                id: videosPaginator
                Layout.fillWidth: true
                Layout.preferredHeight: 245
                Layout.alignment: Qt.AlignTop

                model: videosModel
                delegate: ItemDelegate
                {
                    width: resultWidth
                    height: resultHeight

                    required property string uuid
                    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
                        thumbnail: parent.thumbnail
                        uuid: parent.uuid
                        pexels: true
                        selected: videosPaginator.currentIndex === parent.index

                        onTriggered: () => videosPaginator.currentIndex = parent.index
                        onViewMoreTriggered:() => showVideoPopup(parent.index)
                    }
                }

                onViewMoreTriggered: () =>
                {
                    showFeaturedVideosPage()
                }
            }

            /* spacer */
            Item { Layout.fillHeight: true }
        }
    }

    Component.onCompleted: () =>
    {
        imagesModel.nextPage()
        videosModel.nextPage()
        packsModel.nextPage()
    }

    KeroLoadingAnimation
    {
        id: loadingAnimation
        anchors.fill: parent

        visible: opacity > 0
        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

            Behavior on opacity {
                NumberAnimation
                {
                    duration: 250
                }
            }
        }

        PackView
        {
            id: viewMoreWallpaperPopup
            anchors.fill: parent
            opacity: 0
            visible: opacity > 0.01

            Behavior on opacity {
                NumberAnimation
                {
                    duration: 250
                }
            }
        }

        Behavior on opacity {
            NumberAnimation
            {
                duration: 250
            }
        }
    }

    Component
    {
        id: featuredVideosComponent

        FeaturedVideosPage
        {
            id: featuredVideosPage
            anchors.fill: parent
            opacity: 0

            Behavior on opacity {
                NumberAnimation
                {
                    duration: 250
                }
            }

            Component.onCompleted: () => featuredVideosPage.opacity = 1
        }
    }

    Component
    {
        id: featuredPacksComponent

        FeaturedPacksPage
        {
            id: featuredPacksPage
            anchors.fill: parent
            opacity: 0

            Behavior on opacity
            {
                NumberAnimation
                {
                    duration: 250
                }
            }

            Component.onCompleted: () => featuredPacksPage.opacity = 1
        }
    }

    Component
    {
        id: featuredImagesComponent

        FeaturedImagesPage
        {
            id: featuredImagesPage
            anchors.fill: parent
            opacity: 0

            Behavior on opacity
            {
                NumberAnimation
                {
                    duration: 250
                }
            }

            Component.onCompleted: () => featuredImagesPage.opacity = 1
        }
    }

    Item
    {
        id: featuredLoaderItem
        anchors.fill: parent
        opacity: 0
        visible: opacity > 0.01
        enabled: visible

        Loader
        {
            id: featuredLoader
            anchors.fill: parent
        }
    }

    states: [
        State {
            name: "loading"
            when: homePageRoot.loading

            PropertyChanges
            {
                target: loadingAnimation
                opacity: 1
            }

            PropertyChanges
            {
                target: resultsLayout
                opacity: 0
            }

            PropertyChanges
            {
                target: popupContainer
                opacity: 0
            }
        },
        State {
            name: "idle"
            when: packsModel.state !== NewestPacksModel.Loading &&
                  imagesModel.state !== FeaturedImagesModel.Loading &&
                  videosModel.state !== FeaturedVideosModel.Loading;

            PropertyChanges
            {
                target: loadingAnimation
                opacity: 0
            }

            PropertyChanges
            {
                target: resultsLayout
                opacity: 1
            }
        }
    ]

    transitions: [
        Transition
        {
            from: "loading"
            to: "idle"
            NumberAnimation
            {
                target: loadingAnimation
                duration: 250
                property: "opacity";
            }
            NumberAnimation
            {
                target: resultsLayout
                duration: 250
                property: "opacity";
            }
        }
    ]

    function showFeaturedVideosPage()
    {
        resultsLayout.opacity = 0
        featuredLoaderItem.opacity = 1
        featuredLoader.sourceComponent = featuredVideosComponent
        popup = true
    }

    function showFeaturedPacksPage()
    {
        resultsLayout.opacity = 0
        featuredLoaderItem.opacity = 1
        featuredLoader.sourceComponent = featuredPacksComponent
        popup = true
    }

    function showFeaturedImagesPage()
    {
        resultsLayout.opacity = 0
        featuredLoaderItem.opacity = 1
        featuredLoader.sourceComponent = featuredImagesComponent
        popup = true
    }

    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()
    {
        if(featuredLoader.item && featuredLoader.item.popup)
        {
            featuredLoader.item.closePopup()
            return
        }

        featuredLoaderItem.opacity = 0
        viewMoreImagePopup.opacity = 0
        viewMoreVideoPopup.opacity = 0
        viewMoreWallpaperPopup.opacity = 0
        popupContainer.opacity = 0
        resultsLayout.opacity = 1
        homePageRoot.popup = false
    }
}