Restyle and refactor MinimizedPlayerControls

This commit is contained in:
Bart De Vries 2021-04-08 21:24:37 +02:00
parent e85a3068fc
commit 49e9e7e1e7
3 changed files with 51 additions and 37 deletions

View File

@ -15,8 +15,12 @@ import org.kde.kirigami 2.12 as Kirigami
import org.kde.alligator 1.0
Item {
anchors.right: parent.right
anchors.left: parent.left
anchors.bottom: parent.bottom
width: parent.width
height: (audio.entry == undefined || audio.playerOpen) ? 0 : (footerrowlayout.height + 3.0 * miniprogressbar.height)
//height: (audio.entry == undefined || audio.playerOpen) ? 0 : Kirigami.Units.gridUnit * 3.5 + (Kirigami.Units.gridUnit / 6)
height: Kirigami.Units.gridUnit * 3.5 + (Kirigami.Units.gridUnit / 6)
//margins.bottom: miniprogressbar.height
visible: (audio.entry !== undefined) && !audio.playerOpen
@ -40,31 +44,28 @@ Item {
RowLayout {
id: footerrowlayout
width: parent.width
anchors.margins: miniprogressbar.height
anchors.bottom: parent.bottom
spacing: Kirigami.Units.smallSpacing
anchors.topMargin: miniprogressbar.height
anchors.fill: parent
Item {
Layout.fillHeight: true
Layout.preferredWidth: parent.width - playButton.width
Layout.maximumWidth: parent.width - playButton.width
Layout.fillWidth: true
RowLayout {
Layout.fillHeight: true
Layout.fillWidth: true
anchors.fill: parent
Kirigami.Icon {
source: Fetcher.image(audio.entry.image)
Layout.preferredHeight: parent.height
Layout.alignment: Qt.AlignVCenter
Layout.leftMargin: Kirigami.Units.smallSpacing
Image {
asynchronous: true
source: audio.entry.image === "" ? "logo.png" : "file://"+Fetcher.image(audio.entry.image)
fillMode: Image.PreserveAspectFit
Layout.fillHeight: true
Layout.maximumWidth: height
}
// track information
ColumnLayout {
Layout.fillHeight: true
Layout.fillWidth: true
Layout.leftMargin: Kirigami.Units.smallSpacing
Controls.Label {
id: mainLabel
text: audio.entry.title
@ -95,18 +96,20 @@ Item {
id: trackClick
anchors.fill: parent
hoverEnabled: true
onClicked: pageStack.layers.push("qrc:/PlayerControls.qml") // playeroverlay.open()
//showPassiveNotification("Ping")
onClicked: pageStack.layers.push("qrc:/PlayerControls.qml")
}
}
Controls.Button {
id: playButton
icon.name: audio.playbackState === Audio.PlayingState ? "media-playback-pause" : "media-playback-start"
icon.height: Kirigami.Units.gridUnit * 2
icon.width: Kirigami.Units.gridUnit * 2
icon.height: Kirigami.Units.gridUnit * 2.5
icon.width: Kirigami.Units.gridUnit * 2.5
flat: true
Layout.fillHeight: true
Layout.maximumHeight: Kirigami.Units.gridUnit *3.5
Layout.maximumWidth: height
onClicked: audio.playbackState === Audio.PlayingState ? audio.pause() : audio.play()
Layout.alignment: Qt.AlignHCenter
Layout.alignment: Qt.AlignVCenter
}
}
}

View File

@ -46,18 +46,23 @@ Kirigami.Page {
anchors.left: parent.left
anchors.right: parent.right
Controls.Slider {
Layout.fillWidth: true
from: 0
to: audio.duration
value: audio.position
onMoved: audio.seek(value)
}
RowLayout {
id: controls
Layout.margins: 0
spacing: 0
Controls.Label {
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
}
Controls.Slider {
Item {
Layout.fillWidth: true
from: 0
to: audio.duration
value: audio.position
onMoved: audio.seek(value)
}
Controls.Label {
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
@ -67,6 +72,7 @@ Kirigami.Page {
RowLayout {
Layout.maximumWidth: Number.POSITIVE_INFINITY //TODO ?
Layout.fillWidth: true
property int buttonsize: Kirigami.Units.gridUnit * 2
Controls.Button {
text: audio.playbackRate + "x"
@ -83,8 +89,8 @@ Kirigami.Page {
}
Controls.Button {
icon.name: "media-seek-backward"
icon.height: Kirigami.Units.gridUnit * 2
icon.width: Kirigami.Units.gridUnit * 2
icon.height: parent.buttonsize
icon.width: parent.buttonsize
flat: true
Layout.alignment: Qt.AlignHCenter
onClicked: audio.seek(audio.position - 10000)
@ -92,24 +98,24 @@ Kirigami.Page {
Controls.Button {
id: playButton
icon.name: audio.playbackState === Audio.PlayingState ? "media-playback-pause" : "media-playback-start"
icon.height: Kirigami.Units.gridUnit * 2
icon.width: Kirigami.Units.gridUnit * 2
icon.height: parent.buttonsize
icon.width: parent.buttonsize
flat: true
onClicked: audio.playbackState === Audio.PlayingState ? audio.pause() : audio.play()
Layout.alignment: Qt.AlignHCenter
}
Controls.Button {
icon.name: "media-seek-forward"
icon.height: Kirigami.Units.gridUnit * 2
icon.width: Kirigami.Units.gridUnit * 2
icon.height: parent.buttonsize
icon.width: parent.buttonsize
flat: true
Layout.alignment: Qt.AlignHCenter
onClicked: audio.seek(audio.position + 10000)
}
Controls.Button {
icon.name: "media-skip-forward"
icon.height: Kirigami.Units.gridUnit * 2
icon.width: Kirigami.Units.gridUnit * 2
icon.height: parent.buttonsize
icon.width: parent.buttonsize
flat: true
Layout.alignment: Qt.AlignHCenter
onClicked: console.log("TODO")

View File

@ -81,12 +81,19 @@ Kirigami.ApplicationWindow {
property var entry
property bool playerOpen: false
source: "file://" + entry.enclosure.path
source: entry ? (entry.enclosure ? "file://" + entry.enclosure.path : "") : ""
//source: entry.enclosure.url
onError: console.debug(errorString)
//source: "gst-pipeline: playbin uri=file://" + entry.enclosure.path + " audio_sink=\"scaletempo ! audioconvert ! audioresample ! autoaudiosink\" video_sink=\"fakevideosink\""
}
footer: Loader {
active: (audio.entry !== undefined) && !audio.playerOpen
visible: (audio.entry !== undefined) && !audio.playerOpen
sourceComponent: MinimizedPlayerControls { }
}
/*
Loader {
id: footerLoader
@ -103,10 +110,8 @@ Kirigami.ApplicationWindow {
}
}
*/
footer: MinimizedPlayerControls { }
/*Item {
Item {
visible: (audio.entry !== undefined)
height: footerLoader.minimizedSize
}