Refactor and redesign PlayerControls

This commit is contained in:
Bart De Vries 2021-04-08 22:53:33 +02:00
parent 49e9e7e1e7
commit 6cd88f5116

View File

@ -25,11 +25,33 @@ Kirigami.Page {
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
Kirigami.Icon { Controls.SwipeView {
source: Fetcher.image(audio.entry.image) id: swipeView
currentIndex: 0
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
Layout.preferredWidth: Math.min(parent.width, Kirigami.Units.iconSizes.enormous * 3) Layout.preferredWidth: parent.width
Layout.preferredHeight: Math.min(parent.height - 2*controls.height, Kirigami.Units.iconSizes.enormous * 3) Layout.preferredHeight: parent.height - media.height - indicator.height
Layout.margins: 0
Item {
Image {
asynchronous: true
source: audio.entry.image === "" ? "logo.png" : "file://"+Fetcher.image(audio.entry.image)
fillMode: Image.PreserveAspectFit
anchors.centerIn: parent
//Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
width: Math.min(parent.width, Kirigami.Units.iconSizes.enormous * 3)
height: Math.min(parent.height, Kirigami.Units.iconSizes.enormous * 3)
}
}
EntryPage { entry: audio.entry }
}
Controls.PageIndicator {
id: indicator
count:swipeView.count
currentIndex: swipeView.currentIndex
Layout.alignment: Qt.AlignHCenter
} }
Item { Item {
id: media id: media
@ -41,7 +63,7 @@ Kirigami.Page {
ColumnLayout { ColumnLayout {
id: mediaControls id: mediaControls
implicitHeight: controls.height //implicitHeight: controls.height
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
@ -55,23 +77,37 @@ Kirigami.Page {
} }
RowLayout { RowLayout {
id: controls id: controls
Layout.margins: 0 Layout.leftMargin: 0
spacing: 0 Layout.rightMargin: 0
Layout.fillWidth: true
Controls.Label { Controls.Label {
//anchor.left: parent.left
text: (Math.floor(audio.position/3600000) < 10 ? "0" : "") + Math.floor(audio.position/3600000) + ":" + (Math.floor(audio.position/60000) % 60 < 10 ? "0" : "") + Math.floor(audio.position/60000) % 60 + ":" + (Math.floor(audio.position/1000) % 60 < 10 ? "0" : "") + Math.floor(audio.position/1000) % 60 text: (Math.floor(audio.position/3600000) < 10 ? "0" : "") + Math.floor(audio.position/3600000) + ":" + (Math.floor(audio.position/60000) % 60 < 10 ? "0" : "") + Math.floor(audio.position/60000) % 60 + ":" + (Math.floor(audio.position/1000) % 60 < 10 ? "0" : "") + Math.floor(audio.position/1000) % 60
padding: Kirigami.Units.gridUnit
} }
Item { Item {
Layout.fillWidth: true Layout.fillWidth: true
} }
Controls.Label { Item {
text: (Math.floor(audio.duration/3600000) < 10 ? "0" : "") + Math.floor(audio.duration/3600000) + ":" + (Math.floor(audio.duration/60000) % 60 < 10 ? "0" : "") + Math.floor(audio.duration/60000) % 60 + ":" + (Math.floor(audio.duration/1000) % 60 < 10 ? "0" : "") + Math.floor(audio.duration/1000) % 60 Layout.preferredHeight: endLabel.implicitHeight + Kirigami.Units.gridUnit
padding: Kirigami.Units.gridUnit Layout.preferredWidth: endLabel.implicitWidth + Kirigami.Units.gridUnit
Controls.Label {
id: endLabel
property int toggle: 0
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
text: (toggle === 0) ? ((Math.floor(audio.duration/3600000) < 10 ? "0" : "") + Math.floor(audio.duration/3600000) + ":" + (Math.floor(audio.duration/60000) % 60 < 10 ? "0" : "") + Math.floor(audio.duration/60000) % 60 + ":" + (Math.floor(audio.duration/1000) % 60 < 10 ? "0" : "") + Math.floor(audio.duration/1000) % 60) : ((Math.floor((audio.duration-audio.position)/3600000) < 10 ? "-0" : "-") + Math.floor((audio.duration-audio.position)/3600000) + ":" + (Math.floor((audio.duration-audio.position)/60000) % 60 < 10 ? "0" : "") + Math.floor((audio.duration-audio.position)/60000) % 60 + ":" + (Math.floor((audio.duration-audio.position)/1000) % 60 < 10 ? "0" : "") + Math.floor((audio.duration-audio.position)/1000) % 60)
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onClicked: (endLabel.toggle === 0) ? endLabel.toggle=1 : endLabel.toggle=0
}
} }
} }
RowLayout { RowLayout {
Layout.maximumWidth: Number.POSITIVE_INFINITY //TODO ? Layout.maximumWidth: Number.POSITIVE_INFINITY //TODO ?
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Kirigami.Units.gridUnit * 2
property int buttonsize: Kirigami.Units.gridUnit * 2 property int buttonsize: Kirigami.Units.gridUnit * 2
Controls.Button { Controls.Button {