Refactor UI to add Mpv player widget with overlay

layouts/components/BrowserView.qml

@@ -0,0 +1,44 @@
+import QtQuick 2.12
+
+import "./BrowserView"
+
+Row {
+    anchors.fill: parent
+    property int selectedView: 0
+    Sidebar {
+        id: sidebar
+        maximized: parent.selectedView == 0
+        providers: database.Providers
+    }
+    ContentView {
+        id: view
+        providers: database.Providers
+    }
+    function mod(n, m) {
+        return ((n % m) + m) % m;
+    }
+    Keys.onPressed: (event)=> {
+        if (selectedView == 0) {
+            if (event.key == Qt.Key_Right) {
+                selectedView = 1;
+                view.viewSelected = true
+            }
+            sidebar.Keys.pressed(event);
+
+            if (event.key == Qt.Key_Down) {
+                view.currentIndex = mod(view.currentIndex + 1, view.providers.length)
+            } else if (event.key == Qt.Key_Up) {
+                view.currentIndex = mod(view.currentIndex - 1, view.providers.length)
+            }
+
+            if (event.key == Qt.Key_Return) {
+                console.log("Enter pressed")
+                mainTabView.currentIndex = 1
+                parent.children[1].children[0].play("./test1.mkv")
+            }
+        } else {
+            view.Keys.pressed(event);
+        }
+        event.accepted = true;
+    }
+}

layouts/components/PlayerView.qml

@@ -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"
+            }
+        }
+    }
+}

layouts/ikinuki-default.qml

@@ -1,4 +1,5 @@
 import QtQuick 2.12
+import QtQuick.Controls 1.4
 import QtQuick.Layouts 1.12
 import QtQuick.Controls 2.12
 import QtQuick.Controls.Imagine 2.12
@@ -9,45 +10,24 @@ import Ikinuki.Client 1.0
 import "./components"
 
 ApplicationWindow {
+    width: 1920
+    height: 1080
     id: window
     visible: true
     Database {
         id: database
     }
-    Row {
+    StackLayout {
+        id: mainTabView
         anchors.fill: parent
-        focus: true
+        currentIndex: 0
-        property int selectedView: 0
+        BrowserView {
-        Sidebar {
+            id: browserView
-            id: sidebar
+            focus: true
-            maximized: parent.selectedView == 0
-            providers: database.Providers
         }
-        ContentView {
+        PlayerView {
-            id: view
+            id: playerView
-            providers: database.Providers
+            anchors.fill: parent
-        }
-        function mod(n, m) {
-            return ((n % m) + m) % m;
-        }
-        Keys.onPressed: (event)=> {
-            if (selectedView == 0) {
-                if (event.key == Qt.Key_Right) {
-                    selectedView = 1;
-                    view.viewSelected = true
-                }
-                sidebar.Keys.pressed(event);
-
-                if (event.key == Qt.Key_Down) {
-                    view.currentIndex = mod(view.currentIndex + 1, view.providers.length)
-                } else if (event.key == Qt.Key_Up) {
-                    view.currentIndex = mod(view.currentIndex - 1, view.providers.length)
-                }
-                event.accepted = true;
-            } else {
-                view.Keys.pressed(event);
-            }
-            event.accepted = true;
         }
     }
 }