Refactor UI to add Mpv player widget with overlay

2022-09-03 00:54:20 -04:00
parent 9bcf042157
commit 628f02831e
11 changed files with 170 additions and 32 deletions
@@ -0,0 +1,114 @@
+import QtQuick 2.12
+
+import Ikinuki.Client 1.0
+
+Item {
+    anchors.fill: parent
+    Mpv {
+        id: mpvWidget
+        anchors.fill: parent
+    }
+    Column {
+        anchors.fill: parent
+        anchors.leftMargin: parent.width * 0.05
+        anchors.rightMargin: parent.width * 0.05
+        Item {
+            width: parent.width
+            height: parent.height * 0.05
+        }
+        Text { // clock
+            text: Qt.formatDateTime(new Date(), "h:mm:ss ap")
+            font.pointSize: 20
+            anchors.right: parent.right
+            height: parent.height * 0.1
+            color: "#99afb4"
+        }
+        Item {
+            width: parent.width
+            height: parent.height * 0.6
+        }
+        Text { // show title
+            text: "title"
+            font.pointSize: 40
+            color: "#cdd7d9"
+        }
+        Row { // show details
+            Text { // episode title
+                text: "episodeTitle"
+                font.pointSize: 20
+                color: "#99afb4"
+            }
+            Text {
+                text: " ● "
+                font.pointSize: 20
+                color: "#99afb4"
+            }
+            Text { // season number and episode number
+                text: "S01 E01"
+                font.pointSize: 20
+                color: "#99afb4"
+            }
+            Text {
+                text: " ● "
+                font.pointSize: 20
+                color: "#99afb4"
+            }
+            Text { // air date
+                text: Qt.formatDateTime(new Date(), "MMM d, yyyy")
+                font.pointSize: 20
+                color: "#99afb4"
+            }
+            Text {
+                text: " ● "
+                font.pointSize: 20
+                color: "#99afb4"
+            }
+            Text { // episode duration
+                text: "duration"
+                font.pointSize: 20
+                color: "#99afb4"
+            }
+        }
+        Item {
+            width: parent.width
+            height: parent.height * 0.01
+        }
+        Item { // playbar indicator bar
+            width: parent.width
+            height: parent.height * 0.01
+            Rectangle {  // total duration
+                color: "#99afb4"
+                opacity: 0.5
+                anchors.fill: parent
+                x: parent.x + parent.width * 0.05
+            }
+            Rectangle { // completed duration
+                color: "orange"
+                anchors.left: parent.left
+                width: parent.width * 0.4
+                height: parent.height
+                x: parent.x + parent.width * 0.05
+            }
+        }
+        Item {
+            width: parent.width
+            height: parent.height * 0.01
+        }
+        Item {
+            width: parent.width
+            height: parent.height * 0.01
+            Text { // time elapsed in episode
+                text: "timeElapsed"
+                font.pointSize: 20
+                anchors.left: parent.left
+                color: "#99afb4"
+            }
+            Text { // time remaninig in episode
+                text: "timeRemaining"
+                font.pointSize: 20
+                anchors.right: parent.right
+                color: "#99afb4"
+            }
+        }
+    }
+}