qyouvideo/ViewVideoList.qml

import QtQuick 6.8
import QtQuick.Controls 6.8
import QtQuick.Layouts 6.8

import QYRComponents 1.0

ColumnLayout {
    anchors.fill: parent

    property bool loading: true
    property bool failed: false

    VideoPlayer {
        Layout.fillWidth: true
        Layout.fillHeight: false
    }

    GridView {
        Layout.fillWidth: true
        Layout.fillHeight: true
        // anchors.horizontalCenter: parent.horizontalCenter
        visible: !loading || !failed
        // anchors.fill: parent
        model: ListModel { id: model }
        clip: true

        cellWidth: 384
        cellHeight: 224

        delegate: VideoEntry {}

        Component.onCompleted: parent.fetchData()
    }

    BusyIndicator {
        anchors.centerIn: parent
        visible: loading
        running: loading
    }

    ColumnLayout {
        Layout.alignment: Qt.AlignVCenter
        anchors.centerIn: parent
        visible: failed

        Label {
            text: "Couldn't get videos!"
            heading: "h2"
            font.bold: true
        }

        Label {
            text: "This could mean that either your internet or YouVideo is down."
            heading: "h4"
        }

        Label {
            Layout.bottomMargin: 25
            text: "Check your network connection and try again!"
            heading: "h4"
        }

        Button {
            text: "Retry"
            onClicked: parent.fetchData()
        }
    }

    function fetchData() {
        model.clear();
        loading = true;
        failed = false;
        const xhr = new XMLHttpRequest;
        xhr.open("GET", "http://youvideo.nonamesoft.xyz/youvideo/api/videos");
        xhr.onreadystatechange = function() {
            if (xhr.readyState == XMLHttpRequest.DONE) {
                loading = false;
                if (xhr.status != 200) {
                    failed = true;
                    return;
                }
                const data = JSON.parse(xhr.responseText);
                data.forEach(video => {
                    model.append(video);
                });
            }
        }
        xhr.send();
    }
}