Initial prototype

Basic UI outline with keyboard control. Python database
object is exposed to QML and data can be queried from its methods.
This should provide a generic structure that different UI themes
can be built around.

layouts/components/Sidebar.qml

@@ -0,0 +1,38 @@
+import QtQuick 2.12
+
+import Ikinuki.Client 1.0
+
+Rectangle {
+    property var providers
+    default property int selectedElement: 2
+    property var max_elements: providers.length
+    width: parent.width * 0.3
+    height: parent.height
+    color: "#22282A"
+    Column {
+        anchors.fill: parent
+        // header
+        SidebarHeader {}
+        Repeater {
+            model: providers
+            SidebarElement {
+                name: modelData.Name
+                selected: (index == selectedElement) ? true : false
+            }
+        }
+
+    }
+    function mod(n, m) {
+        return ((n % m) + m) % m;
+    }
+    Keys.onPressed: (event)=> {
+        if (event.key == Qt.Key_Down) {
+            selectedElement = mod(selectedElement + 1, max_elements);
+        }
+        else if (event.key == Qt.Key_Up) {
+            selectedElement = mod(selectedElement - 1, max_elements);
+        }
+        console.log(selectedElement)
+        event.accepted = true;
+    }
+}

layouts/components/SidebarElement.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.12
+
+Rectangle {
+    property string name
+    default property bool selected: false
+    color: selected ? "#E4A10D" : "#22282A"
+    width: parent.width
+    height: parent.height * 0.08
+    Row {
+        anchors.verticalCenter: parent.verticalCenter
+        //Item { width: 50; height: 100}
+        Text {
+            font.pointSize: 15
+            text: name
+        }
+    }
+}

layouts/components/SidebarHeader.qml

@@ -0,0 +1,14 @@
+import QtQuick 2.12
+
+Rectangle {
+    width: parent.width
+    height: parent.height * 0.06
+    color: "#22282A"
+    Row {
+        spacing: parent.width * 0.2
+        anchors.verticalCenter: parent.verticalCenter
+        Text { text: "ohea0"}
+        Text { text: "ohea1"}
+        Text { text: "ohea2"}
+    }
+}

layouts/ikinuki-default.qml

@@ -0,0 +1,109 @@
+//import QtQuick 2.0
+//import QtQuick.Controls 2.15
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.Imagine 2.12
+import QtQuick.Window 2.0
+//import mpvtest 1.0
+
+import Ikinuki.Client 1.0
+
+import "./components"
+
+ApplicationWindow {
+    id: window
+    visible: true
+    Database {
+        id: database
+    }
+    //Column {
+    //    Repeater {
+    //        model: database.Providers
+    //        Text {
+    //            text: modelData.Name
+    //            //text: database.getString[0]
+    //        }
+    //    }
+    //}
+    Row {
+        anchors.fill: parent
+        Sidebar {
+            providers: database.Providers
+            focus: true
+        }
+        Column {
+            width: parent.width * 0.7
+            height: parent.height
+        }
+    }
+}
+
+
+
+
+    //Width: 1280
+    //height: 720
+
+//    MpvObject {
+//        id: renderer
+//        anchors.fill: parent
+//
+//        MouseArea {
+//            anchors.fill: parent
+//            onClicked: renderer.play("./matroska-test-files/test_files/test1.mkv")
+//        }
+//    }
+
+    //Rectangle {
+    //    id: labelFrame
+    //    anchors.margins: -50
+    //    radius: 5
+    //    color: "white"
+    //    border.color: "black"
+    //    opacity: 0.8
+    //    anchors.fill: box
+    //}
+
+    //Row {
+    //    id: box
+    //    anchors.bottom: renderer.bottom
+    //    anchors.left: renderer.left
+    //    anchors.right: renderer.right
+    //    anchors.margins: 100
+
+    //    Text {
+    //        anchors.margins: 10
+    //        wrapMode: Text.WordWrap
+    //        text: "QtQuick and mpv are both rendering stuff.\n
+    //               Click to load test.mkv"
+    //    }
+
+    //    // Don't take these controls too seriously. They're for testing.
+    //    Column {
+    //        CheckBox {
+    //            id: checkbox
+    //            anchors.margins: 10
+    //            // Heavily filtered means good, right?
+    //            text: "Make video look like on a Smart TV"
+    //            onClicked: {
+    //                if (checkbox.checked) {
+    //                    renderer.setProperty("sharpen", 5.0)
+    //                } else {
+    //                    renderer.setProperty("sharpen", 0)
+    //                }
+    //            }
+    //        }
+    //        Slider {
+    //            id: slider
+    //            anchors.margins: 10
+    //            anchors.left: checkbox.left
+    //            anchors.right: checkbox.right
+    //            minimumValue: -100
+    //            maximumValue:  100
+    //            value: 0
+    //            onValueChanged: renderer.setProperty("gamma", slider.value | 0)
+    //        }
+    //    }
+    //}
+//}