styled progress bar; moved to correct position

still todo: show time and lenght as formatted number
refactor MusicPlayer.qml into components
This commit is contained in:
Anika Raemer 2018-12-06 12:46:46 +01:00
parent b013b69e8d
commit 0b84a6e6b6
2 changed files with 88 additions and 84 deletions

View file

@ -40,37 +40,6 @@ Item{
}
}
ProgressBar{
anchors.top: parent.top
anchors.right: parent.right
anchors.margins: container.margins
/*anchors.bottom: buttons.top
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 40
anchors.rightMargin: 40
anchors.topMargin: 10
anchors.bottomMargin: 10
*/
z:99
value: musicModel.pProgress
style:ProgressBarStyle {
background: Rectangle {
radius: 2
color: "magenta"
border.color: "gray"
border.width: 1
implicitWidth: 200
implicitHeight: 24
}
progress: Rectangle {
color: "lightsteelblue"
border.color: "steelblue"
}
}
}
Rectangle {
id: controlPannel
@ -78,63 +47,95 @@ Item{
anchors.right: parent.right
anchors.bottom: parent.bottom
color: "#99ffffff"
height: 120
height: 140
Row{
id: buttons
spacing: 20
anchors.centerIn: parent
ProgressBar{
id: progress
anchors.top: parent.top
anchors.left: parent.left
anchors.margins: container.margins
RoundButton{
id: previous
anchors.verticalCenter: parent.verticalCenter
value: musicModel.pProgress
width: 60
imageSource: "qrc:/icon_previous"
enabled: musicModel.pHasPrevious
onClicked:{
musicModel.playPrevious();
style:ProgressBarStyle {
background: Rectangle {
radius: 5
color: "lightgrey"
border.color: "grey"
border.width: 1
implicitWidth: controlPannel.width - 2*container.margins
implicitHeight: 10
}
}
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();
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
}
}

View file

@ -62,13 +62,16 @@ void MusicModel::stopMusic()
{
if(mIsPlaying){
mIsPlaying = false;
emit isPlayingChanged();
mHasNext = false;
mHasPrevious = false;
mCurrentMediaItemProgress = 0.0;
emit progressChanged();
emit hasNextChanged();
emit hasPreviousChanged();
emit isPlayingChanged();
mCurrentMediaItemProgress = 0.0;
emit progressChanged();
emit stop();
}
}