pretty minor case of suffering

Main.qml

@@ -11,10 +11,10 @@ ApplicationWindow {
     height: 800
     title: qsTr("QYouVideo")
 
-    ColumnLayout {
+    flags: Qt.Dialog
-        anchors.fill: parent
+    modality: Qt.ApplicationModal
 
-        Rectangle {
+    header: Rectangle {
         Layout.fillWidth: true
         height: 43
 
@@ -30,68 +30,68 @@ ApplicationWindow {
                 heading: "h1"
             }
 
+            Button {
+                visible: stack.currentItem.StackView.index > 0
+                text: "Back"
+                onClicked: stack.popCurrentItem()
+            }
+
+            Label {
+                heading: "h2"
+                text: stack.currentItem.StackView.index
+            }
+
+            Label {
+                heading: "h2"
+                text: stack.depth
+            }
+
             Item {
                 Layout.fillWidth: true
             }
 
-                TabBar {
+            Button {
-                    id: tabbar
-                    spacing: 10
-
-                    background: Item{}
-
-                    TabButton {
                 text: qsTr("Videos")
                 outlined: true
                 implicitWidth: 80
+                onClicked: if (stack.currentItem.StackView.index > 0) stack.push(stackVideoList)
             }
-                    TabButton {
+            Button {
                 text: qsTr("About")
                 outlined: true
                 implicitWidth: 80
             }
-                    TabButton {
+            Button {
                 text: qsTr("Upload")
             }
         }
     }
+
+    StackView {
+        id: stack
+
+        anchors.fill: parent
+        anchors.margins: 20
+
+        initialItem: ViewVideoList {
+            id: stackVideoList
         }
 
-        SwipeView {
+        function openVideo(id) {
-            Layout.fillWidth: true
+            // if (stack.find((item, index) => {
-            Layout.fillHeight: true
+            //     // If found player instance
-            Layout.margins: 20
+            //     if (item.id == id) {
-
+            //         // stack.pop(index, StackView.Immediate);
-            interactive: false
+            //         stack.push(item)
-            currentIndex: tabbar.currentIndex
+            //         return true;
-
+            //     }
-            Loader {
+            //     return false;
-                // active: tabbar.currentIndex == 0
+            // }) == null) {
-                active: true
+                // If didn't find player instance
-                asynchronous: true
+                const component = Qt.createComponent("VideoPlayer.qml");
-                visible: status == Loader.Ready
+                const item = component.createObject(stack, {id: id})
-                source: "ViewVideoList.qml"
+                stack.push(item);
-            }
+            // }
-            Loader {
-                // active: tabbar.currentIndex == 1
-                active: true
-                asynchronous: true
-                visible: status == Loader.Ready
-                source: "ViewAbout.qml" 
-            }
-            Loader {
-                // active: tabbar.currentIndex == 2
-                active: true
-                asynchronous: true
-                visible: status == Loader.Ready
-                sourceComponent: Label {
-                    heading: "h1"
-                    text: "No idea if I'll ever implement this so don't worry >w<"
-                    font.bold: true
-                }
-            }
-
-            Component.onCompleted: contentItem.highlightMoveDuration = 160;
         }
     }
 }

VideoEntry.qml

@@ -75,6 +75,6 @@ Rectangle {
         anchors.fill: parent
         id: area
         hoverEnabled: true
-        onClicked: Player.loadVideo(parent.id)
+        onClicked: stack.openVideo(parent.id)
     }
 }

VideoPlayer.qml

@@ -5,36 +5,34 @@ import QtQuick.Layouts 6.8
 
 import QYRComponents 1.0
 
-Rectangle {
+Item {
-    visible: Player.active
+    // color: Colors.surface1
-    color: Colors.surface1
+    // radius: 10
-    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;
-            }
-        }
-    }
 
     ColumnLayout {
+        visible: !loading && !failed
         anchors.fill: parent
 
-        Item {
+        Image {
-            visible: unrolled
+            Layout.fillWidth: true
-            Layout.fillHeight: 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
+                to: parent.parent.parent.duration
-                value: Player.position
+                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();
     }
 }

ViewVideoList.qml

@@ -7,14 +7,14 @@ import QYRComponents 1.0
 Item {
     anchors.fill: parent
 
-
     property bool loading: true
     property bool failed: false
 
     GridView {
+        width: Math.floor(cellWidth / parent.width) * cellWidth
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.top: parent.top
-        anchors.topMargin: Player.active ? 96 : 0
+        // anchors.topMargin: Player.active ? 96 : 0
         visible: !loading || !failed
         anchors.fill: parent
         model: ListModel { id: model }
@@ -24,6 +24,8 @@ Item {
         cellHeight: 224
 
         delegate: VideoEntry {}
+
+        Component.onCompleted:         console.log(cellWidth / parent.width)
     }
 
     BusyIndicator {
@@ -71,7 +73,7 @@ Item {
         loading = true;
         failed = false;
         const xhr = new XMLHttpRequest;
-        xhr.open("GET", "http://youvideo.nonamesoft.xyz/youvideo/api/videos");
+        xhr.open("GET", "https://youvideo.nonamesoft.xyz/youvideo/api/videos");
         xhr.onreadystatechange = function() {
             if (xhr.readyState == XMLHttpRequest.DONE) {
                 loading = false;
@@ -94,11 +96,4 @@ Item {
         }
         xhr.send();
     }
-
-    VideoPlayer {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: parent.top
-        Layout.fillWidth: true
-    }
 }