pretty minor case of suffering

VideoPlayer.qml

@@ -5,36 +5,34 @@ import QtQuick.Layouts 6.8
 
 import QYRComponents 1.0
 
-Rectangle {
-    visible: Player.active
-    color: Colors.surface1
-    radius: 10
+Item {
+    // color: Colors.surface1
+    // radius: 10
 
-    property bool unrolled: true
+    required property string id
+    property bool hasThumbnail: false
+    property bool loading: true
+    property bool failed: false
+    property string title
+    property string description
+    property string extension
+    property real position: 0
+    property real duration: 0
+    property real ratio
 
-    // width: childrenRect.width
-    height: unrolled ? 560 : 96
-
-    MouseArea {
-        anchors.fill: parent
-        height: 20
-        hoverEnabled: true
-        propagateComposedEvents: true
-
-        onClicked: unrolled = true;
-        onContainsMouseChanged: function() {
-            if (!containsMouse) {
-                unrolled = false;
-            }
-        }
-    }
+    anchors.fill: parent
 
     ColumnLayout {
+        visible: !loading && !failed
         anchors.fill: parent
 
-        Item {
-            visible: unrolled
-            Layout.fillHeight: true
+        Image {
+            Layout.fillWidth: true
+            height: width * parent.parent.ratio
+            asynchronous: true
+            cache: true
+            source: parent.parent.hasThumbnail ? ("https://youvideo.nonamesoft.xyz/thumbnails/" + parent.parent.id) : "https://youvideo.nonamesoft.xyz/thumbnails/audio.png"
+            fillMode: Image.PreserveAspectFit
         }
 
         RowLayout {
@@ -64,15 +62,15 @@ Rectangle {
             Slider {
                 Layout.fillWidth: true
                 from: 0
-                to: Player.duration
-                value: Player.position
+                to: parent.parent.parent.duration
+                value: parent.parent.parent.position
                 buffered: Player.buffered
                 onMoved: Player.position = value
             }
 
             Label {
                 heading: "h4"
-                text: new Date(Player.duration).toISOString().slice(14, 19)
+                text: new Date(parent.parent.parent.duration).toISOString().slice(14, 19)
             }
 
             Label {
@@ -91,19 +89,92 @@ Rectangle {
             Layout.fillWidth: true
             wrapMode: Text.WordWrap
             clip: true
-            text: Player.title
+            text: parent.parent.title
             heading: "h2"
             font.bold: true
         }
 
         Label {
-            visible: unrolled
             Layout.fillWidth: true
             wrapMode: Text.WordWrap
             clip: true
-            text: Player.description
+            text: parent.parent.description
             heading: "h4"
             font.bold: true
         }
+
+        Item {
+            Layout.fillHeight: true
+        }
+    }
+
+    BusyIndicator {
+        anchors.centerIn: parent
+        visible: loading
+        running: loading
+    }
+
+    ColumnLayout {
+        Layout.alignment: Qt.AlignVCenter
+        anchors.centerIn: parent
+        visible: failed
+
+        Label {
+            text: "Couldn't get video details!"
+            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()
+        }
+    }
+
+    Timer {
+        interval: 1000
+        running: true
+        onTriggered: parent.fetchData()
+    }
+
+    function fetchData() {
+        loading = true;
+        failed = false;
+        const xhr = new XMLHttpRequest;
+        xhr.open("GET", "https://youvideo.nonamesoft.xyz/youvideo/video/" + id);
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState == XMLHttpRequest.DONE) {
+                loading = false;
+                if (xhr.status != 200) {
+                    console.log("Invalid response");
+                    failed = true;
+                    return;
+                }
+                const data = JSON.parse(xhr.responseText);
+                console.log("Received video metadata");
+                title = data.name;
+                description = data.description;
+                extension = data.extension;
+                ratio = data.metadata.size[0] / data.metadata.size[1];
+                console.log(ratio);
+            }
+        }
+        xhr.ontimeout = function() {
+            loading = false;
+            failed = true;
+            console.log("Request timed out");
+        }
+        xhr.send();
     }
 }