fist comin

ViewVideoList.qml

@@ -0,0 +1,85 @@
+import QtQuick 6.8
+import QtQuick.Controls 6.8
+import QtQuick.Layouts 6.8
+
+import QYRComponents 1.0
+
+Item {
+    anchors.fill: parent
+
+    property bool loading: true
+    property bool failed: false
+
+    VideoPlayer {}
+
+    GridView {
+        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();
+    }
+}