lena_pi/LenaPi/MusicPlayer.qml
Anika Raemer 0b84a6e6b6 styled progress bar; moved to correct position
still todo: show time and lenght as formatted number
refactor MusicPlayer.qml into components
2018-12-06 12:46:46 +01:00

141 lines
3.8 KiB
QML

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0
Item{
id: container
property int margins: 20
Rectangle{
id: coverBorder
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: container.margins
height: parent.height-controlPannel.height-2*container.margins
width: height
color: "blue"
Image{
id: cover
anchors.centerIn: parent
height: parent.height-10
width: height
source: musicModel.pCurrentItem.pImageSource
fillMode: Image.PreserveAspectCrop
layer.enabled: true
layer.effect: OpacityMask{
maskSource: coverBorder
}
}
}
RoundButton{
id: backNavigation
anchors.left: parent.left
anchors.top: parent.top
anchors.margins: container.margins
onClicked: {
musicModel.navigateBack();
}
}
Rectangle {
id: controlPannel
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
color: "#99ffffff"
height: 140
ProgressBar{
id: progress
anchors.top: parent.top
anchors.left: parent.left
anchors.margins: container.margins
value: musicModel.pProgress
style:ProgressBarStyle {
background: Rectangle {
radius: 5
color: "lightgrey"
border.color: "grey"
border.width: 1
implicitWidth: controlPannel.width - 2*container.margins
implicitHeight: 10
}
progress: Rectangle {
color: "blue"
border.color: "blue"
radius: 5
implicitHeight: 8
}
}
}
Item{
anchors.left: parent.left
anchors.right: parent.right
anchors.top: progress.bottom
anchors.bottom: parent.bottom
Row{
id: buttons
spacing: 20
anchors.centerIn: parent
RoundButton{
id: previous
anchors.verticalCenter: parent.verticalCenter
width: 60
imageSource: "qrc:/icon_previous"
enabled: musicModel.pHasPrevious
onClicked:{
musicModel.playPrevious();
}
}
RoundButton{
id: playPause
anchors.verticalCenter: parent.verticalCenter
width: 80
imageSource: musicModel.pIsPlaying ? "qrc:/icon_pause" : "qrc:/icon_play"
onClicked:{
musicModel.playPause();
}
}
RoundButton{
id: stop
anchors.verticalCenter: parent.verticalCenter
width: 60
imageSource: "qrc:/icon_stop"
enabled: musicModel.pIsPlaying
onClicked:{
musicModel.stopMusic();
}
}
RoundButton{
id: next
anchors.verticalCenter: parent.verticalCenter
width: 60
imageSource: "qrc:/icon_next"
enabled: musicModel.pHasNext
onClicked:{
musicModel.playNext();
}
}
} //Row
}// Item
}
}