Merge lp:~kill-animals/music-app/remix-now-playing-main-view-with-controls into lp:~vthompson/music-app/remix-now-playing-main-view

[Kill Animals]

* Add play controls to the full view of the Now Playing page

This adds the controls to the main view, and looks like this:

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

There it is a sub component of that page, and is anchored to the bottom of the blurred image, with a units.gu(6) margin.

The visibility of the bottom toolbar has been tied to the

isListView bool property

Note: There is a bug pertaining to this, as I will point out in his merge.

[lp:~kill-animals/music-app/remix-now-playing-main-view-with-controls]

646. By Akiva Avraham <akiva@akiva-ThinkPad-X230> on 2014-10-03

Removed Custom Slider, replaced it with the proper one. SIGNIFICANTLY improved how this thing works.

[Victor Thompson (vthompson)]

This is how the changes look on a Nexus 4: http://i.imgur.com/Olz9OIT.png

In my merge proposal I'm going to make the blurred background used on the Now Playing page smaller. That should help you a bit.

One thing you'll need to fix, or I'll need to work around temporarily, is that if the user switches to the "full view" and hits back, the tool bar is hidden when it shouldn't be.

review: Needs Fixing

[Victor Thompson (vthompson)]

Actually, perhaps I'll merge this in as requested and tweak as necessary. Thanks!

review: Approve

[Kill Animals (kill-animals)]

Hey come on irc; I am still working on the patch, eliminating a few more components.

#ubuntu-app-devel akiva-thinkpad

=== modified file 'MusicNowPlaying.qml'
--- MusicNowPlaying.qml	2014-10-03 05:08:08 +0000
+++ MusicNowPlaying.qml	2014-10-03 12:19:14 +0000
@@ -110,6 +110,271 @@
                                            "&album=" + player.currentMetaAlbum)
                       : player.currentMetaArt
         }
+
+        /* Full toolbar */
+        Item {
+            id: musicToolbarFullContainer
+            anchors.top: blurredBackground.bottom
+            anchors.topMargin: units.gu(6)
+            width: blurredBackground.width
+
+            /* Column for labels in wideAspect */
+            Column {
+                id: nowPlayingWideAspectLabels
+                anchors {
+                    horizontalCenter: parent.horizontalCenter
+                    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
+                }
+
+                /* Album of track */
+                Label {
+                    id: nowPlayingWideAspectAlbum
+                    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.currentMetaAlbum
+                }
+            }
+
+            /* 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)
+                width: parent.width
+                z: 1
+
+                /* Position label */
+                Label {
+                    id: musicToolbarFullPositionLabel
+                    anchors.top: progressSliderMusic.bottom
+                    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
+                    function formatValue(v) { return durationToString(v) }
+
+                    property bool seeking: false
+
+                    onSeekingChanged: {
+                        if (seeking === false) {
+                            musicToolbarFullPositionLabel.text = durationToString(player.position)
+                        }
+                    }
+
+                    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);
+                        }
+                    }
+                }
+
+                /* Duration label */
+                Label {
+                    id: musicToolbarFullDurationLabel
+                    anchors.top: progressSliderMusic.bottom
+                    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)
+                }
+            }
+
+            /* Repeat button */
+            MouseArea {
+                id: nowPlayingRepeatButton
+                objectName: "repeatShape"
+                anchors.right: nowPlayingPreviousButton.left
+                anchors.rightMargin: units.gu(1)
+                anchors.verticalCenter: nowPlayingPlayButton.verticalCenter
+                height: units.gu(6)
+                opacity: player.repeat && !emptyPage.noMusic ? 1 : .4
+                width: height
+                onClicked: player.repeat = !player.repeat
+
+                Image {
+                    id: repeatIcon
+                    height: units.gu(3)
+                    width: height
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    source: Qt.resolvedUrl("images/media-playlist-repeat.svg")
+                    verticalAlignment: Text.AlignVCenter
+                    opacity: player.repeat && !emptyPage.noMusic ? 1 : .4
+                }
+            }
+
+            /* Previous button */
+            MouseArea {
+                id: nowPlayingPreviousButton
+                anchors.right: nowPlayingPlayButton.left
+                anchors.rightMargin: units.gu(1)
+                anchors.verticalCenter: nowPlayingPlayButton.verticalCenter
+                height: units.gu(6)
+                objectName: "previousShape"
+                opacity: trackQueue.model.count === 0  ? .4 : 1
+                width: height
+                onClicked: player.previousSong()
+
+                Image {
+                    id: nowPlayingPreviousIndicator
+                    height: units.gu(3)
+                    width: height
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.verticalCenter: parent.verticalCenter
+                    source: Qt.resolvedUrl("images/media-skip-backward.svg")
+                    opacity: 1
+                }
+            }
+
+            /* Play/Pause button */
+            MouseArea {
+                id: nowPlayingPlayButton
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.top:musicToolbarFullProgressContainer.bottom
+                anchors.topMargin: units.gu(2)
+                height: units.gu(12)
+                objectName: "playShape"
+                width: height
+                onClicked: player.toggle()
+
+                Image {
+                    id: nowPlayingPlayIndicator
+                    height: units.gu(6)
+                    width: height
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.verticalCenter: parent.verticalCenter
+                    opacity: emptyPage.noMusic ? .4 : 1
+                    source: player.playbackState === MediaPlayer.PlayingState ?
+                                Qt.resolvedUrl("images/media-playback-pause.svg") : Qt.resolvedUrl("images/media-playback-start.svg")
+                }
+            }
+
+            /* Next button */
+            MouseArea {
+                id: nowPlayingNextButton
+                anchors.left: nowPlayingPlayButton.right
+                anchors.leftMargin: units.gu(1)
+                anchors.verticalCenter: nowPlayingPlayButton.verticalCenter
+                height: units.gu(6)
+                objectName: "forwardShape"
+                opacity: trackQueue.model.count === 0 ? .4 : 1
+                width: height
+                onClicked: player.nextSong()
+
+                Image {
+                    id: nowPlayingNextIndicator
+                    height: units.gu(3)
+                    width: height
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.verticalCenter: parent.verticalCenter
+                    source: Qt.resolvedUrl("images/media-skip-forward.svg")
+                    opacity: 1
+                }
+            }
+
+            /* Shuffle button */
+            MouseArea {
+                id: nowPlayingShuffleButton
+                objectName: "shuffleShape"
+                anchors.left: nowPlayingNextButton.right
+                anchors.leftMargin: units.gu(1)
+                anchors.verticalCenter: nowPlayingPlayButton.verticalCenter
+                height: units.gu(6)
+                opacity: player.shuffle && !emptyPage.noMusic ? 1 : .4
+                width: height
+                onClicked: player.shuffle = !player.shuffle
+
+                Image {
+                    id: shuffleIcon
+                    height: units.gu(3)
+                    width: height
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    source: Qt.resolvedUrl("images/media-playlist-shuffle.svg")
+                    opacity: player.shuffle && !emptyPage.noMusic ? 1 : .4
+                }
+            }
+        }
     }
 
     ListView {
 
=== modified file 'music-app.qml'
--- music-app.qml	2014-10-01 04:55:18 +0000
+++ music-app.qml	2014-10-03 12:19:14 +0000
@@ -979,6 +979,7 @@
 
     MusicToolbar {
         id: musicToolbar
+        visible: nowPlaying.isListView
         objectName: "musicToolbarObject"
         z: 200  // put on top of everything else
     }