Refactor UI to add Mpv player widget with overlay
This commit is contained in:
@@ -0,0 +1,135 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 1.4
|
||||
|
||||
import Ikinuki.Client 1.0
|
||||
|
||||
import "./ContentView"
|
||||
|
||||
TabView {
|
||||
id: tabView
|
||||
property var providers
|
||||
property bool viewSelected: false
|
||||
state: viewSelected ? "selected" : "deselected"
|
||||
property int xSelect: 0
|
||||
property int ySelect: 0
|
||||
//width: viewSelected ? parent.width * 0.95 : parent.width * 0.8
|
||||
width: parent.width * viewSelected ? 0.95 : 0.8
|
||||
height: parent.height
|
||||
|
||||
property var maxElements: providers.length
|
||||
|
||||
tabsVisible: false
|
||||
Repeater {
|
||||
model: providers
|
||||
Tab {
|
||||
Rectangle {
|
||||
color: "#22282A"
|
||||
Row {
|
||||
Item {
|
||||
height: 10
|
||||
width: 40
|
||||
}
|
||||
Column {
|
||||
Row {
|
||||
Item {
|
||||
height: parent.height
|
||||
width: 16
|
||||
}
|
||||
Column {
|
||||
spacing: 20
|
||||
Item {
|
||||
height: 20
|
||||
width: parent.width
|
||||
}
|
||||
Text {
|
||||
text: elementColumn.children[ySelect].provider.getShow(xSelect).title
|
||||
font.pointSize: 30
|
||||
color: "#cdd7d9"
|
||||
}
|
||||
Text {
|
||||
text: elementColumn.children[ySelect].provider.getShow(xSelect).year
|
||||
font.pointSize: 15
|
||||
color: "#99afb4"
|
||||
}
|
||||
Text {
|
||||
text: elementColumn.children[ySelect].provider.getShow(xSelect).description
|
||||
font.pointSize: 13
|
||||
color: "#cdd7d9"
|
||||
width: tabView.parent.width * 0.6
|
||||
wrapMode: Text.WordWrap
|
||||
maximumLineCount: 4
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
}
|
||||
Item {
|
||||
height: 40
|
||||
width: parent.width
|
||||
}
|
||||
Column {
|
||||
id: elementColumn
|
||||
spacing: 20
|
||||
Element {
|
||||
title: "In Progress"
|
||||
provider: modelData
|
||||
repeaterModel: modelData.inProgress
|
||||
elemSelected: viewSelected && (0 == ySelect)
|
||||
xIndex: xSelect
|
||||
}
|
||||
Element {
|
||||
title: "Recently Added"
|
||||
provider: modelData
|
||||
repeaterModel: modelData.recentlyAdded
|
||||
elemSelected: viewSelected && (1 == ySelect)
|
||||
xIndex: xSelect
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
states: [
|
||||
State {
|
||||
name: "deselected"
|
||||
PropertyChanges {
|
||||
target: tabView
|
||||
width: parent.width * 0.8
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "selected"
|
||||
PropertyChanges {
|
||||
target: tabView
|
||||
width: parent.width * 0.95
|
||||
}
|
||||
}
|
||||
]
|
||||
transitions: [
|
||||
Transition {
|
||||
NumberAnimation {
|
||||
properties: "width"
|
||||
duration: 150
|
||||
easing.type: Easing.Linear
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
Keys.onPressed: (event)=> {
|
||||
console.log(Qt.Key_Left);
|
||||
if (event.key == Qt.Key_Left) {
|
||||
if (xSelect == 0) {
|
||||
viewSelected = false;
|
||||
parent.selectedView = 0;
|
||||
} else {
|
||||
xSelect--;
|
||||
}
|
||||
} else if (event.key == Qt.Key_Right) {
|
||||
xSelect++;
|
||||
} else if (event.key == Qt.Key_Down) {
|
||||
ySelect++;
|
||||
} else if (event.key == Qt.Key_Up) {
|
||||
ySelect--;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 1.4
|
||||
|
||||
|
||||
Column {
|
||||
property var title
|
||||
property var provider
|
||||
property var repeaterModel
|
||||
property bool elemSelected
|
||||
property int xIndex
|
||||
Item {
|
||||
width: 10
|
||||
height: 20
|
||||
}
|
||||
Row {
|
||||
Item {
|
||||
height: parent.height
|
||||
width: 16
|
||||
}
|
||||
Text {
|
||||
text: title
|
||||
font.pointSize: 15
|
||||
color: "#cdd7d9"
|
||||
}
|
||||
}
|
||||
Item {
|
||||
width: 10
|
||||
height: 15
|
||||
}
|
||||
Row {
|
||||
Repeater {
|
||||
id: repeater
|
||||
property var provider: modelData
|
||||
model: repeaterModel
|
||||
Show {
|
||||
show: provider.getShow(modelData)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 1.4
|
||||
import QtGraphicalEffects 1.12
|
||||
|
||||
Item {
|
||||
property var show
|
||||
property int baseHeight: 350
|
||||
property int childHeight: baseHeight
|
||||
property int childWidth: baseHeight * 0.68
|
||||
property int childHeightExpanded: baseHeight * 15 / 14
|
||||
property int childWidthExpanded: (baseHeight * 15 / 14) * 0.68
|
||||
property int borderWidth: 3
|
||||
property int borderRadius: 1
|
||||
property int borderRectHeight: childHeight + (borderWidth * 2)
|
||||
property int borderRectWidth: childWidth + (borderWidth * 2)
|
||||
property int borderRectHeightExpanded: childHeightExpanded + (borderWidth * 2)
|
||||
property int borderRectWidthExpanded: childWidthExpanded + (borderWidth * 2)
|
||||
|
||||
height: baseHeight
|
||||
width: (baseHeight * 8 / 7) * 0.68
|
||||
Item {
|
||||
id: parentElem
|
||||
state: (elemSelected && (index == xIndex)) ? "selected" : "deselected"
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.fill: parent
|
||||
DropShadow {
|
||||
id: dropShadow
|
||||
anchors.fill: img
|
||||
verticalOffset: 15
|
||||
samples: 80
|
||||
opacity: 0.5
|
||||
color: "black"
|
||||
source: img
|
||||
}
|
||||
Rectangle {
|
||||
id: rect
|
||||
color: "transparent"
|
||||
border.color: "orange"
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
radius: borderRadius
|
||||
}
|
||||
Image {
|
||||
id: img
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
source: show.poster
|
||||
mipmap: true
|
||||
}
|
||||
states: [
|
||||
State {
|
||||
name: "deselected"
|
||||
PropertyChanges {
|
||||
target: rect
|
||||
border.width: 0
|
||||
height: borderRectHeight
|
||||
width: borderRectWidth
|
||||
}
|
||||
PropertyChanges {
|
||||
target: dropShadow
|
||||
visible: false
|
||||
}
|
||||
PropertyChanges {
|
||||
target: img
|
||||
width: childWidth
|
||||
height: childHeight
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "selected"
|
||||
PropertyChanges {
|
||||
target: rect
|
||||
border.width: borderWidth
|
||||
height: borderRectHeightExpanded
|
||||
width: borderRectWidthExpanded
|
||||
}
|
||||
PropertyChanges {
|
||||
target: dropShadow
|
||||
visible: true
|
||||
}
|
||||
PropertyChanges {
|
||||
target: img
|
||||
width: childWidthExpanded
|
||||
height: childHeightExpanded
|
||||
}
|
||||
}
|
||||
]
|
||||
transitions: [
|
||||
Transition {
|
||||
NumberAnimation {
|
||||
properties: "border.width,width,height"
|
||||
duration: 100
|
||||
easing.type: Easing.Linear
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import QtQuick 2.12
|
||||
|
||||
import Ikinuki.Client 1.0
|
||||
|
||||
import "./Sidebar"
|
||||
|
||||
Rectangle {
|
||||
id: rect
|
||||
property var providers
|
||||
property bool maximized: true
|
||||
property int selectedElement: 0
|
||||
property var max_elements: providers.length
|
||||
width: parent.width * 0.2
|
||||
height: parent.height
|
||||
color: "#22282A"
|
||||
state: maximized ? "maximized" : "minimized"
|
||||
//color: "#0a3d4a"
|
||||
Column {
|
||||
anchors.fill: parent
|
||||
Header {}
|
||||
Repeater {
|
||||
id: sidebarElements
|
||||
model: providers
|
||||
Element {
|
||||
provider: modelData
|
||||
maximized: rect.maximized
|
||||
selected: (index == selectedElement) ? true : false
|
||||
}
|
||||
}
|
||||
}
|
||||
states: [
|
||||
State {
|
||||
name: "minimized"
|
||||
PropertyChanges {
|
||||
target: rect
|
||||
width: parent.width * 0.05
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "maximized"
|
||||
PropertyChanges {
|
||||
target: rect
|
||||
width: parent.width * 0.2
|
||||
}
|
||||
}
|
||||
]
|
||||
transitions: [
|
||||
Transition {
|
||||
NumberAnimation {
|
||||
properties: "width"
|
||||
duration: 150
|
||||
easing.type: Easing.Linear
|
||||
}
|
||||
}
|
||||
]
|
||||
function mod(n, m) {
|
||||
return ((n % m) + m) % m;
|
||||
}
|
||||
Keys.onPressed: (event)=> {
|
||||
// Handle scrolling
|
||||
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);
|
||||
}
|
||||
event.accepted = true;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
import QtQuick 2.12
|
||||
import QtGraphicalEffects 1.12
|
||||
|
||||
Item {
|
||||
property var provider
|
||||
property bool selected: false
|
||||
property bool maximized
|
||||
|
||||
width: parent.width * 0.9
|
||||
height: parent.height * 0.07
|
||||
anchors.right: parent.right
|
||||
DropShadow {
|
||||
anchors.fill: selector
|
||||
verticalOffset: 5
|
||||
//horizontalOffset: 5
|
||||
samples: 20
|
||||
color: "black"
|
||||
opacity: 0.5
|
||||
source: selector
|
||||
visible: selected && maximized
|
||||
}
|
||||
Rectangle {
|
||||
id: selector
|
||||
color: "white"
|
||||
height: parent.height
|
||||
width: parent.width * 0.95
|
||||
//anchors.fill: parent
|
||||
visible: selected && maximized
|
||||
radius: 10
|
||||
}
|
||||
Row {
|
||||
anchors.fill: parent
|
||||
Item {
|
||||
height: parent.height
|
||||
width: parent.width * 0.09
|
||||
}
|
||||
Item {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
height: 40
|
||||
width: 40
|
||||
Image {
|
||||
anchors.fill: parent
|
||||
id: logo
|
||||
source: provider.logo
|
||||
//y: parent.y + (parent.height / 2) - height / 2
|
||||
//anchors.top: parent.verticalCenter
|
||||
// anchors.verticalCenter: text.verticalCenter
|
||||
//sourceSize.height: 50
|
||||
//sourceSize.width: 50
|
||||
}
|
||||
ColorOverlay {
|
||||
anchors.fill: logo
|
||||
source: logo
|
||||
color: selected ? "#3c3c3c" : "#99afb4"
|
||||
}
|
||||
}
|
||||
Item {
|
||||
height: parent.height
|
||||
width: parent.width * 0.07
|
||||
}
|
||||
Text {
|
||||
id: text
|
||||
font.pointSize: 12
|
||||
text: provider.name
|
||||
color: selected ? "#3c3c3c" : "#99afb4"
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.verticalCenterOffset: 4
|
||||
visible: maximized
|
||||
//verticalAlignment: Text.AlignVCenter
|
||||
//height: parent.height
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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"}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user