Merge lp:~kill-animals/music-app/remix-nowplaying-code-refinement+proper-scaling into lp:music-app/remix

[Kill Animals]

Reduced and cleaned up code. Added flickables to the labels.
+++++++++++++++++++=

    Shrunk Icons as per suggestion.
    Heightened the bottom margin
    Slightly reduced the spacing expansion for the controls; thus they will Not spread so far apart when expanded.
    Changed duration labels to small
    Took out anchors in MusicPage because they were screwing up the header. MusicPage can probably be taken out.
    Set the blurred image height to 33 gu, so it is seemless with the album page.

Reduced and cleaned up code. Added flickables to the labels.
+++++++++++++++++++=

    Shrunk Icons as per suggestion.
    Heightened the bottom margin
    Slightly reduced the spacing expansion for the controls; thus they will Not spread so far apart when expanded.
    Changed duration labels to small
    Took out anchors in MusicPage because they were screwing up the header. MusicPage can probably be taken out.
    Set the blurred image height to 33 gu, so it is seemless with the album page.

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:652
http://91.189.93.70:8080/job/music-app-remix-ci/44/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/752
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/752/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-ci/44

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/music-app-remix-ci/44/rebuild

review: Approve (continuous-integration)

[lp:~kill-animals/music-app/remix-nowplaying-code-refinement+proper-scaling]

653. By Kill Animals on 2014-10-07

took out a debug and a commented out line

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:653
http://91.189.93.70:8080/job/music-app-remix-ci/45/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/753
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/753/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-ci/45

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/music-app-remix-ci/45/rebuild

review: Approve (continuous-integration)

[Victor Thompson (vthompson)]

Thanks Akiva! Please see some initial inline comments (6 in total). I'll try to review more in depth in around 6 hours.

review: Needs Fixing

[Victor Thompson (vthompson)]

In terms of the UI elements as displayed on the device (see: http://i.imgur.com/daNXXMQ.png):
1. The size of the blurred background, and corresponding inside cover art need to be shrank to be what it was. My inline comment on this may be of use (wide mode).
2. The spacing between elements needs to be restored to what it was before.
3. The labels are incorrect for Artist and Album.
4. The text for the progress bar appears too large.
5. The icons for the controls are too large and need more spacing in between them and at the bottom.

In terms of the UI elements as displayed on the desktop (see: http://i.imgur.com/k15ifrw.png):
1. The controls were more appealing when they were grouped and smaller previously. Could they remain as they were just anchored to the bottom?

review: Needs Fixing

[Victor Thompson (vthompson)]

Additional inline comment.

[Kill Animals (kill-animals)]

> The size of the blurred background, and corresponding inside cover art need to be shrank to be what it was. My inline comment on this may be of use (wide mode).

I'd like to see the album blurred image height and the now playing blurred image height to be uniform, as I presume that this was what the design spec was going for. Its not clear though whether these heights you listed were the intent, or if it was the porportion of the screen these should take up. Can I try to attempt this?

> 2. The spacing between elements needs to be restored to what it was before.

> 3. The labels are incorrect for Artist and Album.

Presuming we take out the album label; This is now not such a sure thing. I briefly discussed this with ahayzen, where the issue is in cases where no album art exists at all; not informing the user what album he is currently listening to. It will have to be brought up with the designer I think, if he has time. If not, I will revert it without argument. I personally like the bold labels, but if we don't get any input; I'll take them out and replace them with spaces (so the column does not contract)

> 4. The text for the progress bar appears too large.

Mmmm this was actually a bit hard; I was going by eyeballing the text size provided in the design spec. The actual size sits somewhere between small and medium. I just went for medium so people would see it easier. I can make it small if you want.

As you can see though from this image: http://i.imgur.com/sq9vgsh.jpg The text is clearly larger in the spec.

> 5. The icons for the controls are too large and need more spacing in between them and at the bottom.

Can I do something where the size scales up with the window? On a large screen or tablet, the icon sizes provided in the spec are far too small. Just to compare the current sizes: http://imgur.com/ObFm9xW - I'll try to make them a bit more accurate either way.

> In terms of the UI elements as displayed on the desktop (see: http://i.imgur.com/k15ifrw.png):
1. The controls were more appealing when they were grouped and smaller previously. Could they remain as they were just anchored to the bottom?

I somewhat disagree, but I think it is a non issue given the desktop version will likely look like something more than just an expanded phone version, where a playlist or something else would cover up the side, and the controls would then not span the whole width of the bottom. I agree with you to an extent, but what I would like to keep the controls width scaled with the progress bar, so it appears more uniform.

[Kill Animals (kill-animals)]

comments.

[lp:~kill-animals/music-app/remix-nowplaying-code-refinement+proper-scaling]

654. By Kill Animals on 2014-10-09

merge with trunk

655. By Kill Animals on 2014-10-09

Merged with Remix Trunk

Shrunk Icons as per suggestion.
Heightened the bottom margin
Slightly reduced the spacing expansion for the controls; thus they will Not spread so far apart when expanded.
Changed duration labels to small
Took out anchors in MusicPage because they were screwing up the header. MusicPage can probably be taken out.
Set the blurred image height to 33 gu, so it is seemless with the album page.

656. By Kill Animals on 2014-10-09

Minor Adjustments

657. By Kill Animals on 2014-10-09

Minor adjustments

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

FAILED: Continuous integration, rev:657
http://91.189.93.70:8080/job/music-app-remix-ci/61/
Executed test runs:
    UNSTABLE: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/797
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/797/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-ci/61

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/music-app-remix-ci/61/rebuild

review: Needs Fixing (continuous-integration)

[Victor Thompson (vthompson)]

Akiva, this is what the view looks like on the Nexus 4 now: http://i.imgur.com/D0a3Ymy.png

[Kill Animals (kill-animals)]

Bah this is annoying; sorry about that; I know it wastes time...

This last one should be fine; i'll anchors the controls to the bottom like you wanted, and have the expansion bar and labels expand within that framework.

[lp:~kill-animals/music-app/remix-nowplaying-code-refinement+proper-scaling]

658. By Kill Animals on 2014-10-11

http://i.imgur.com/YhewwHc.png

Anchored the labels to be situated in between the controls/slider, and the blurred image. The app should now scale well for portrait configurations. I also made the album label only visible, if there is enough space to fit it. This is just in case of a smaller device using this.

659. By Kill Animals on 2014-10-11

Recommit to use a proper screenshot: http://i.imgur.com/WqIBBs9.png
Tested on Emulator

As said, If the labels start touching eachother, the album label hides. So smaller devices have a bit more wiggle room with portrait mode before things start looking off.

The controls are anchored to the bottom, and the labels are evenly spaced out in between (with proper margins)

[Kill Animals (kill-animals)]

let me merge with trunk.

[Kill Animals (kill-animals)]

http://i.imgur.com/WqIBBs9.png

[lp:~kill-animals/music-app/remix-nowplaying-code-refinement+proper-scaling]

660. By Kill Animals on 2014-10-11

Merged with :submit

[Victor Thompson (vthompson)]

Please fix: http://i.imgur.com/R80u1Vn.png

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

FAILED: Continuous integration, rev:660
http://91.189.93.70:8080/job/music-app-remix-ci/72/
Executed test runs:
    UNSTABLE: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/878
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/878/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-ci/72

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/music-app-remix-ci/72/rebuild

review: Needs Fixing (continuous-integration)

[lp:~kill-animals/music-app/remix-nowplaying-code-refinement+proper-scaling]

661. By Kill Animals on 2014-10-11

Added visible: !isListView

Thanks vic!

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

FAILED: Continuous integration, rev:661
http://91.189.93.70:8080/job/music-app-remix-ci/73/
Executed test runs:
    UNSTABLE: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/879
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/879/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-ci/73

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/music-app-remix-ci/73/rebuild

review: Needs Fixing (continuous-integration)

[Kill Animals (kill-animals)]

autopilot.exceptions.StateNotFoundError: Object not found with name '*' and properties {'objectName': 'progressSliderShape'}.

ProgressSliderShape was taken out afaik when the app was still attempting to build a slider manually.

[lp:~kill-animals/music-app/remix-nowplaying-code-refinement+proper-scaling]

662. By Kill Animals on 2014-10-15

Deprecated a test that relied on ubuntuSliderShape, as that no longer exists, now that we are using a slider. I commented it out, and appended a Fixme. The test was seeking, and I tested that myself, to which it is working. I also merged with trunk.

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

FAILED: Continuous integration, rev:662
http://91.189.93.70:8080/job/music-app-remix-ci/95/
Executed test runs:
    FAILURE: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/950/console
    FAILURE: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-ci/95/console

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/music-app-remix-ci/95/rebuild

review: Needs Fixing (continuous-integration)

[lp:~kill-animals/music-app/remix-nowplaying-code-refinement+proper-scaling]

663. By Kill Animals on 2014-10-15

fixed python syntax

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

FAILED: Continuous integration, rev:663
http://91.189.93.70:8080/job/music-app-remix-ci/96/
Executed test runs:
    FAILURE: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/951/console
    FAILURE: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-ci/96/console

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/music-app-remix-ci/96/rebuild

review: Needs Fixing (continuous-integration)

[lp:~kill-animals/music-app/remix-nowplaying-code-refinement+proper-scaling]

664. By Kill Animals on 2014-10-15

took out the commented code altogether; the syntax issues behoove me.

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

FAILED: Continuous integration, rev:664
http://91.189.93.70:8080/job/music-app-remix-ci/97/
Executed test runs:
    FAILURE: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/953/console
    FAILURE: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-ci/97/console

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/music-app-remix-ci/97/rebuild

review: Needs Fixing (continuous-integration)

[lp:~kill-animals/music-app/remix-nowplaying-code-refinement+proper-scaling]

665. By Kill Animals on 2014-10-15

wrestling with syntax. Sorry jenkins.

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

FAILED: Continuous integration, rev:665
http://91.189.93.70:8080/job/music-app-remix-ci/98/
Executed test runs:
    UNSTABLE: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/955
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/955/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-ci/98

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/music-app-remix-ci/98/rebuild

review: Needs Fixing (continuous-integration)

[Victor Thompson (vthompson)]

Akiva, would you mind dropping this MP as it isn't providing any benefit to RTM for devices? Andrew and myself do not have the time to help with correcting the issues you are trying to fix. Additionally, the desktop/tablet layout of this view will change once the design team comes up with it's specifications. Perhaps you could help with implementing the tablet designs when or if they come in? If you still do want to help in the near term, you can probably either pick something from the blueprint or we can find you something. Thanks.

review: Disapprove

[Kill Animals (kill-animals)]

> Akiva, would you mind dropping this MP as it isn't providing any benefit to
> RTM for devices? Andrew and myself do not have the time to help with
> correcting the issues you are trying to fix. Additionally, the desktop/tablet
> layout of this view will change once the design team comes up with it's
> specifications. Perhaps you could help with implementing the tablet designs
> when or if they come in? If you still do want to help in the near term, you
> can probably either pick something from the blueprint or we can find you
> something. Thanks.

I disagree. The design is clearly better than what you have in there right now; The only thing that is failing is a bunch of deprecated tests. Rather than telling me to drop all this work I've done, how about you just tell me to get jenkins to pass it? Otherwise this is wasted effort.

[Victor Thompson (vthompson)]

The tests are in no way deprecated and the seek_to() function should not be removed. The Slider component in your MP needs to have an objectName so the function will find it.

[Kill Animals (kill-animals)]

> The tests are in no way deprecated and the seek_to() function should not be
> removed. The Slider component in your MP needs to have an objectName so the
> function will find it.

Yah I talked to ahayzen before about this; I will have to go through it some more. Mihir earlier today walked me through working on the tests and autopilot3.

Look; I won't take up any of your guys's time; I get that you are on a deadline. If I can get all the tests working again, and commit to a high quality branch, will you accept it provided it doesnt have you committing a significant amount of resources to it?

[Victor Thompson (vthompson)]

If we don't regress on either the device or desktop/tablet view and the change in UI for the desktop is modest then it's possible. Our team really should be focusing on RTM changes only, though. Regardless, if you want to proceed we may want to run the changes by the Design team to see if they agree with the visual improvement. However, if we redesign how the app behaves for tablets/desktop in the future, I'd imagine we'd be pulling the MusicNowPlaying.qml file into many separate components, which will probably remove any layout driven changes you are making here.

I just want to make sure that you are aware that you will have more luck trying to make improvements that directly affect RTM.

[Kill Animals (kill-animals)]

 >I just want to make sure that you are aware that you will have more luck trying to make improvements that directly affect RTM.

You would be better off just saying, "Let us know when you fix or re-write the tests in question, and have Jenkins passing them without a hitch. Just make sure you that you do not steal time away from Myself or Andrew, as we need to concentrate on the Remix."

Otherwise you made it appear that I am better off not contributing to the project at all, and I am fairly certain that is not the case. Anyways, I'll probably be bent out of shape about this for at least a day more or two, so I'll be concentrating on the other projects in the meantime. Don't take it personally or anything; its just that rejection coming out of the blue like that was really a shot to the gut; I'm sure that reaction is common. Anyways good luck with the RTM; You and Andrew do good work.

Unmerged revisions

665. By Kill Animals on 2014-10-15

wrestling with syntax. Sorry jenkins.

664. By Kill Animals on 2014-10-15

took out the commented code altogether; the syntax issues behoove me.

663. By Kill Animals on 2014-10-15

fixed python syntax

662. By Kill Animals on 2014-10-15

Deprecated a test that relied on ubuntuSliderShape, as that no longer exists, now that we are using a slider. I commented it out, and appended a Fixme. The test was seeking, and I tested that myself, to which it is working. I also merged with trunk.

661. By Kill Animals on 2014-10-11

Added visible: !isListView

Thanks vic!

660. By Kill Animals on 2014-10-11

Merged with :submit

659. By Kill Animals on 2014-10-11

Recommit to use a proper screenshot: http://i.imgur.com/WqIBBs9.png
Tested on Emulator

As said, If the labels start touching eachother, the album label hides. So smaller devices have a bit more wiggle room with portrait mode before things start looking off.

The controls are anchored to the bottom, and the labels are evenly spaced out in between (with proper margins)

658. By Kill Animals on 2014-10-11

http://i.imgur.com/YhewwHc.png

Anchored the labels to be situated in between the controls/slider, and the blurred image. The app should now scale well for portrait configurations. I also made the album label only visible, if there is enough space to fit it. This is just in case of a smaller device using this.

657. By Kill Animals on 2014-10-09

Minor adjustments

656. By Kill Animals on 2014-10-09

Minor Adjustments

=== modified file 'MusicNowPlaying.qml'
--- MusicNowPlaying.qml	2014-10-13 12:36:59 +0000
+++ MusicNowPlaying.qml	2014-10-15 10:54:55 +0000
@@ -78,204 +78,209 @@
         queuelist.positionViewAtIndex(index, ListView.Center);
     }
 
-    Rectangle {
-        id: fullview
-        anchors.fill: parent
-        color: "transparent"
-        visible: !isListView
-
-        BlurredBackground {
-            id: blurredBackground
-            anchors.top: parent.top
-            anchors.topMargin: mainView.header.height
-            height: units.gu(27)
-            art: albumImage.source
-
-            Image {
-                id: albumImage
-                anchors.centerIn: parent
-                width: units.gu(18)
-                height: width
-                smooth: true
-                source: player.currentMetaArt === "" ?
-                            decodeURIComponent("image://albumart/artist=" +
-                                               player.currentMetaArtist +
-                                               "&album=" + player.currentMetaAlbum)
-                          : player.currentMetaArt
-            }
-        }
-
-        /* Full toolbar */
-        Item {
-            id: musicToolbarFullContainer
-            anchors.top: blurredBackground.bottom
-            anchors.topMargin: units.gu(4)
-            width: blurredBackground.width
-
-            /* Column for labels in wideAspect */
-            Column {
-                id: nowPlayingWideAspectLabels
-                spacing: units.gu(1)
-                anchors {
-                    left: parent.left
-                    leftMargin: units.gu(2)
-                    right: parent.right
-                    rightMargin: units.gu(2)
-                }
-
-                /* Title of track */
-                Label {
-                    id: nowPlayingWideAspectTitle
-                    anchors {
-                        left: parent.left
-                        leftMargin: units.gu(1)
-                        right: parent.right
-                        rightMargin: units.gu(1)
-                    }
-                    color: styleMusic.playerControls.labelColor
-                    elide: Text.ElideRight
-                    fontSize: "x-large"
-                    objectName: "playercontroltitle"
-                    text: trackQueue.model.count === 0 ? "" : player.currentMetaTitle === "" ? player.currentMetaFile : player.currentMetaTitle
-                }
-
-                /* Artist of track */
-                Label {
-                    id: nowPlayingWideAspectArtist
-                    anchors {
-                        left: parent.left
-                        leftMargin: units.gu(1)
-                        right: parent.right
-                        rightMargin: units.gu(1)
-                    }
-                    color: styleMusic.nowPlaying.labelSecondaryColor
-                    elide: Text.ElideRight
-                    fontSize: "small"
-                    text: trackQueue.model.count === 0 ? "" : player.currentMetaArtist
-                }
-            }
-
-            /* Progress bar component */
-            MouseArea {
-                id: musicToolbarFullProgressContainer
-                anchors.left: parent.left
-                anchors.leftMargin: units.gu(3)
-                anchors.right: parent.right
-                anchors.rightMargin: units.gu(3)
-                anchors.top: nowPlayingWideAspectLabels.bottom
-                anchors.topMargin: units.gu(3)
-                height: units.gu(3)
+    BlurredBackground {
+        id: blurredBackground
+        height: units.gu(33)
+        art: albumImage.source
+        visible: !isListView
+
+        Image {
+            id: albumImage
+            anchors.centerIn: parent
+            width: parent.height * 0.666
+            height: width
+            smooth: true
+            source: player.currentMetaArt === "" ?
+                        decodeURIComponent("image://albumart/artist=" +
+                                           player.currentMetaArtist +
+                                           "&album=" + player.currentMetaAlbum)
+                      : player.currentMetaArt
+        }
+    }
+
+    /* Track Labels */
+    Item {
+        visible: !isListView
+        anchors {
+            top: blurredBackground.bottom
+            topMargin: units.gu(2.5)
+            bottom: progressSliderMusic.top
+            left: parent.left
+            right: parent.right
+        }
+        /* Title of track */
+        Flickable {
+            anchors {
+                top: parent.top
+                left: parent.left
+                leftMargin: units.gu(2)
+                right: parent.right
+            }
+            height: parent.height/3
+            contentWidth: nowPlayingWideAspectTitle.width
+            boundsBehavior: Flickable.StopAtBounds
+
+            Label {
+                id: nowPlayingWideAspectTitle
+                anchors.verticalCenter: parent.verticalCenter
+                color: styleMusic.playerControls.labelColor
+                fontSize: "x-large"
+                objectName: "playercontroltitle"
+                text: trackQueue.model.count === 0 ? "" : player.currentMetaTitle === "" ? player.currentMetaFile : player.currentMetaTitle
+                onTextChanged: parent.x = 0
+            }
+        }
+
+        /* Artist of track */
+        Flickable {
+            anchors {
+                verticalCenter: nowPlayingWideAspectAlbum.visible ? parent.verticalCenter : parent.bottom
+                left: parent.left
+                leftMargin: units.gu(2)
+                right: parent.right
+            }
+            visible: parent.height > height
+            height: parent.height/3
+            contentWidth: nowPlayingWideAspectAlbum.width
+            boundsBehavior: Flickable.StopAtBounds
+
+            Label {
+                id: nowPlayingWideAspectArtist
+                anchors.verticalCenter: parent.verticalCenter
+                color: styleMusic.nowPlaying.labelSecondaryColor
+                fontSize: "small"
+                text: " " + player.currentMetaArtist //The space is to make sure the string does not contract.
+                onTextChanged: parent.x = 0
+            }
+        }
+
+        /* Album of track */
+        Flickable {
+            anchors {
+                bottom: parent.bottom
+                left: parent.left
+                leftMargin: units.gu(2)
+                right: parent.right
+            }
+            height: parent.height/3
+            contentWidth: nowPlayingWideAspectArtist.width
+            boundsBehavior: Flickable.StopAtBounds
+            visible: parent.height > height
+
+            Label {
+                id: nowPlayingWideAspectAlbum
+                anchors.verticalCenter: parent.verticalCenter
+                color: styleMusic.nowPlaying.labelSecondaryColor
+                fontSize: "small"
+                text: " " + player.currentMetaAlbum
+                onTextChanged: parent.x = 0
+                visible: parent.height > height
+            }
+        }
+    }
+
+    /* Progress Bar */
+    Slider {
+            id: progressSliderMusic
+            visible: !isListView
+            anchors {
+                bottom: row.top
+                bottomMargin: units.gu(2)
+                left: parent.left
+                leftMargin: units.gu(2)
+                right: parent.right
+                rightMargin: units.gu(2)
+            }
+
+            function formatValue(v) { return durationToString(v) }
+
+            property bool seeking: false
+
+            onSeekingChanged: {
+                if (seeking === false) {
+                    musicToolbarFullPositionLabel.text = durationToString(player.position)
+                }
+            }
+
+            Component.onCompleted: {
+                Theme.palette.selected.foreground = UbuntuColors.blue
+            }
+
+            onPressedChanged: {
+                seeking = pressed
+                if (!pressed) {
+                   player.seek(value)
+               }
+            }
+
+            Connections {
+                target: player
+                onDurationChanged: {
+                    musicToolbarFullDurationLabel.text = durationToString(player.duration)
+                    progressSliderMusic.maximumValue = player.duration
+                }
+                onPositionChanged: {
+                    if (progressSliderMusic.seeking === false) {
+                        progressSliderMusic.value = player.position
+                        musicToolbarFullPositionLabel.text = durationToString(player.position)
+                        musicToolbarFullDurationLabel.text = durationToString(player.duration)
+                    }
+                }
+                onStopped: {
+                    musicToolbarFullPositionLabel.text = durationToString(0);
+                    musicToolbarFullDurationLabel.text = durationToString(0);
+                }
+            }
+
+            Row {
+                anchors.verticalCenter: parent.bottom
                 width: parent.width
-
+                spacing: width - musicToolbarFullPositionLabel.width - musicToolbarFullDurationLabel.width
                 /* Position label */
                 Label {
                     id: musicToolbarFullPositionLabel
-                    anchors.top: progressSliderMusic.bottom
-                    anchors.topMargin: units.gu(-2)
-                    anchors.left: parent.left
                     color: styleMusic.nowPlaying.labelSecondaryColor
                     fontSize: "small"
-                    height: parent.height
-                    horizontalAlignment: Text.AlignHCenter
                     text: durationToString(player.position)
-                    verticalAlignment: Text.AlignVCenter
-                    width: units.gu(3)
-                }
-
-                Slider {
-                    id: progressSliderMusic
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    objectName: "progressSliderShape"
-
-                    function formatValue(v) {
-                        if (seeking) {  // update position label while dragging
-                            musicToolbarFullPositionLabel.text = durationToString(v)
-                        }
-
-                        return durationToString(v)
-                    }
-
-                    property bool seeking: false
-                    property bool seeked: false
-
-                    onSeekingChanged: {
-                        if (seeking === false) {
-                            musicToolbarFullPositionLabel.text = durationToString(player.position)
-                        }
-                    }
-
-                    Component.onCompleted: {
-                        Theme.palette.selected.foreground = UbuntuColors.blue
-                    }
-
-                    onPressedChanged: {
-                        seeking = pressed
-                        if (!pressed) {
-                            seeked = true
-                            player.seek(value)
-                       }
-                    }
-
-                    Connections {
-                        target: player
-                        onDurationChanged: {
-                            musicToolbarFullDurationLabel.text = durationToString(player.duration)
-                            progressSliderMusic.maximumValue = player.duration
-                        }
-                        onPositionChanged: {
-                            // seeked is a workaround for bug 1310706 as the first position after a seek is sometimes invalid (0)
-                            if (progressSliderMusic.seeking === false && !progressSliderMusic.seeked) {
-                                progressSliderMusic.value = player.position
-                                musicToolbarFullPositionLabel.text = durationToString(player.position)
-                                musicToolbarFullDurationLabel.text = durationToString(player.duration)
-                            }
-
-                            progressSliderMusic.seeked = false;
-                        }
-                        onStopped: {
-                            musicToolbarFullPositionLabel.text = durationToString(0);
-                            musicToolbarFullDurationLabel.text = durationToString(0);
-                        }
-                    }
                 }
 
                 /* Duration label */
                 Label {
                     id: musicToolbarFullDurationLabel
-                    anchors.top: progressSliderMusic.bottom
-                    anchors.topMargin: units.gu(-2)
-                    anchors.right: parent.right
                     color: styleMusic.nowPlaying.labelSecondaryColor
                     fontSize: "small"
-                    height: parent.height
-                    horizontalAlignment: Text.AlignHCenter
                     text: durationToString(player.duration)
-                    verticalAlignment: Text.AlignVCenter
-                    width: units.gu(3)
                 }
             }
-
+        }
+
+    /* Player Buttons */
+    Row {
+            id: row
+            anchors {
+                bottom: parent.bottom
+                bottomMargin: units.gu(2.5)
+                horizontalCenter: parent.horizontalCenter
+            }
+
+            visible: !isListView
+            spacing: ( parent.width - units.gu(21) ) / 5 // 21 is the width of the components
             /* Repeat button */
             MouseArea {
                 id: nowPlayingRepeatButton
-                anchors.right: nowPlayingPreviousButton.left
-                anchors.rightMargin: units.gu(1)
+                objectName: "repeatShape"
+                height: units.gu(3.5)
+                width: height
                 anchors.verticalCenter: nowPlayingPlayButton.verticalCenter
-                height: units.gu(6)
+
                 opacity: player.repeat && !emptyPage.noMusic ? 1 : .4
-                width: height
                 onClicked: player.repeat = !player.repeat
 
                 Icon {
                     id: repeatIcon
-                    height: units.gu(3)
-                    width: height
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.fill: parent
                     color: "white"
                     name: "media-playlist-repeat"
-                    objectName: "repeatShape"
                     opacity: player.repeat && !emptyPage.noMusic ? 1 : .4
                 }
             }
@@ -283,23 +288,19 @@
             /* Previous button */
             MouseArea {
                 id: nowPlayingPreviousButton
-                anchors.right: nowPlayingPlayButton.left
-                anchors.rightMargin: units.gu(1)
+                height: units.gu(3.5)
+                width: height
                 anchors.verticalCenter: nowPlayingPlayButton.verticalCenter
-                height: units.gu(6)
+
+                objectName: "previousShape"
                 opacity: trackQueue.model.count === 0  ? .4 : 1
-                width: height
                 onClicked: player.previousSong()
 
                 Icon {
                     id: nowPlayingPreviousIndicator
-                    height: units.gu(3)
-                    width: height
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.fill: parent
                     color: "white"
                     name: "media-skip-backward"
-                    objectName: "previousShape"
                     opacity: 1
                 }
             }
@@ -307,46 +308,35 @@
             /* Play/Pause button */
             MouseArea {
                 id: nowPlayingPlayButton
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.top: musicToolbarFullProgressContainer.bottom
-                anchors.topMargin: units.gu(2)
-                height: units.gu(12)
+                height: units.gu(7)
                 width: height
+                objectName: "playShape"
                 onClicked: player.toggle()
 
                 Icon {
                     id: nowPlayingPlayIndicator
-                    height: units.gu(6)
-                    width: height
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.fill: parent
                     opacity: emptyPage.noMusic ? .4 : 1
                     color: "white"
                     name: player.playbackState === MediaPlayer.PlayingState ? "media-playback-pause" : "media-playback-start"
-                    objectName: "playShape"
                 }
             }
 
             /* Next button */
             MouseArea {
                 id: nowPlayingNextButton
-                anchors.left: nowPlayingPlayButton.right
-                anchors.leftMargin: units.gu(1)
+                height: units.gu(3.5)
+                width: height
                 anchors.verticalCenter: nowPlayingPlayButton.verticalCenter
-                height: units.gu(6)
+                objectName: "forwardShape"
                 opacity: trackQueue.model.count === 0 ? .4 : 1
-                width: height
                 onClicked: player.nextSong()
 
                 Icon {
                     id: nowPlayingNextIndicator
-                    height: units.gu(3)
-                    width: height
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.fill: parent
                     color: "white"
                     name: "media-skip-forward"
-                    objectName: "forwardShape"
                     opacity: 1
                 }
             }
@@ -354,28 +344,22 @@
             /* Shuffle button */
             MouseArea {
                 id: nowPlayingShuffleButton
-                anchors.left: nowPlayingNextButton.right
-                anchors.leftMargin: units.gu(1)
+                objectName: "shuffleShape"
+                height: units.gu(3.5)
+                width: height
                 anchors.verticalCenter: nowPlayingPlayButton.verticalCenter
-                height: units.gu(6)
                 opacity: player.shuffle && !emptyPage.noMusic ? 1 : .4
-                width: height
                 onClicked: player.shuffle = !player.shuffle
 
                 Icon {
                     id: shuffleIcon
-                    height: units.gu(3)
-                    width: height
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.fill: parent
                     color: "white"
                     name: "media-playlist-shuffle"
-                    objectName: "shuffleShape"
                     opacity: player.shuffle && !emptyPage.noMusic ? 1 : .4
                 }
             }
         }
-    }
 
     ListView {
         id: queuelist
@@ -461,7 +445,6 @@
 
                     queuelist.model.move(from, to, 1);
 
-
                     // Maintain currentIndex with current song
                     if (from === player.currentIndex) {
                         player.currentIndex = to;

=== modified file 'common/MusicPage.qml'
--- common/MusicPage.qml	2014-10-06 02:18:23 +0000
+++ common/MusicPage.qml	2014-10-15 10:54:55 +0000
@@ -23,10 +23,6 @@
 // generic page for music, could be useful for bottomedge implementation
 Page {
     id: thisPage
-    anchors {
-        bottomMargin: musicToolbar.visible ? musicToolbar.currentHeight : 0
-        fill: parent
-    }
 
     onVisibleChanged: {
         if (visible) {

=== modified file 'tests/autopilot/music_app/__init__.py'
--- tests/autopilot/music_app/__init__.py	2014-10-13 16:56:55 +0000
+++ tests/autopilot/music_app/__init__.py	2014-10-15 10:54:55 +0000
@@ -277,17 +277,6 @@
                 objectName="nowPlayingListItem" + str(i)))
 
     @ensure_now_playing_full
-    def seek_to(self, percentage):
-        progress_bar = self.wait_select_single(
-            "*", objectName="progressSliderShape")
-
-        x1, y1, width, height = progress_bar.globalRect
-        y1 += height // 2
-
-        x2 = x1 + int(width * percentage / 100)
-
-        self.pointing_device.drag(x1, y1, x2, y1)
-
     def set_repeat(self, state):
         if self.player.repeat != state:
             self.click_repeat_button()

=== modified file 'tests/autopilot/music_app/tests/test_music.py'
--- tests/autopilot/music_app/tests/test_music.py	2014-10-07 15:24:08 +0000
+++ tests/autopilot/music_app/tests/test_music.py	2014-10-15 10:54:55 +0000
@@ -171,8 +171,6 @@
         logger.debug("Next Song %s, %s" % (self.player.currentMetaTitle,
                                            self.player.currentMetaArtist))
 
-        now_playing_page.seek_to(0)  # seek to 0 (start)
-
         # select previous and ensure the track is playing
         now_playing_page.click_previous_button()
         self.assertThat(self.player.isPlaying, Eventually(Equals(True)))