Merge lp:~ahayzen/music-app/fix-1482545-swipe-in-now-playing into lp:music-app

[Andrew Hayzen]

* Swipe left and right of album in full now playing now slide

* Swipe left and right of album in full now playing now slide

Note that this is broken in shuffle mode due to media-hub giving the wrong values (bug 1528072)

[Jenkins Bot (ubuntu-core-apps-jenkins-bot)]

PASSED: Continuous integration, rev:914
https://core-apps-jenkins.ubuntu.com/job/music-app-ci/31/
Executed test runs:
    None: https://core-apps-jenkins.ubuntu.com/job/generic-update-mp/269/console

Click here to trigger a rebuild:
https://core-apps-jenkins.ubuntu.com/job/music-app-ci/31/rebuild

review: Approve (continuous-integration)

[Andrew Hayzen (ahayzen)]

#blocked by bug 1528072

review: Disapprove

[Victor Thompson (vthompson)]

This change also isn't as nice on the desktop. Is there a way we could show the blurred bg and still support this animation?

review: Needs Information

[Andrew Hayzen (ahayzen)]

For the desktop I was assuming that it would have it's converged view, so haven't yet tested it on the desktop.

Unmerged revisions

914. By Andrew Hayzen on 2015-12-21

* Swipe left and right of album in full now playing now slide

=== modified file 'app/components/NowPlayingFullView.qml'
--- app/components/NowPlayingFullView.qml	2015-12-21 00:42:21 +0000
+++ app/components/NowPlayingFullView.qml	2015-12-21 00:42:22 +0000
@@ -39,20 +39,185 @@
         art: albumImage.firstSource
         height: parent.height - units.gu(7)
 
-        Item {
+        Row {
             id: albumImageContainer
             anchors {
-                horizontalCenter: parent.horizontalCenter
+                bottom: parent.bottom
                 top: parent.top
             }
-            height: parent.height
+            x: -parent.width
             width: parent.width
 
+            Loader {
+                id: previousCoverLoader
+                anchors {
+                    top: parent.top
+                }
+                asynchronous: true
+                height: parent.height
+                sourceComponent: CoverGrid {
+                    id: previousCover
+                    anchors {
+                        fill: parent
+                    }
+                    size: parent.width
+
+                    function setCover() {
+                        covers = [newPlayer.metaForSource(newPlayer.mediaPlayer.playlist.itemSource(newPlayer.mediaPlayer.playlist.previousIndex(1)))];
+                    }
+
+                    Connections {
+                        target: newPlayer.mediaPlayer.playlist
+                        onCurrentIndexChanged: previousCover.setCover()
+                        onItemInserted: previousCover.setCover()
+                        onItemChanged: previousCover.setCover()
+                        onItemRemoved: previousCover.setCover()
+                    }
+
+                    Component.onCompleted: previousCover.setCover()
+                }
+                width: parent.width
+
+                // How much of the previous cover has been shown
+                property double percentage: 1 - Math.abs(albumImageContainer.x / blurredBackground.width)
+            }
+
             CoverGrid {
                 id: albumImage
-                anchors.centerIn: parent
+                anchors {
+                    top: parent.top
+                }
                 covers: [newPlayer.currentMeta]
-                size: parent.height
+                size: parent.width
+            }
+
+            Loader {
+                id: nextCoverLoader
+                anchors {
+                    top: parent.top
+                }
+                asynchronous: true
+                height: parent.height
+                sourceComponent: CoverGrid {
+                    id: nextCover
+                    anchors {
+                        fill: parent
+                    }
+                    size: parent.width
+
+                    function setCover() {
+                        covers = [newPlayer.metaForSource(newPlayer.mediaPlayer.playlist.itemSource(newPlayer.mediaPlayer.playlist.nextIndex(1)))];
+                    }
+
+                    Connections {
+                        target: newPlayer.mediaPlayer.playlist
+                        onCurrentIndexChanged: nextCover.setCover()
+                        onItemInserted: nextCover.setCover()
+                        onItemChanged: nextCover.setCover()
+                        onItemRemoved: nextCover.setCover()
+                    }
+
+                    Component.onCompleted: nextCover.setCover()
+                }
+                width: parent.width
+
+                // How much of the next cover has been shown
+                property double percentage: Math.abs((albumImageContainer.x + blurredBackground.width) / blurredBackground.width)
+            }
+        }
+
+        MouseArea {
+            id: albumImageMouseArea
+            anchors {
+                fill: parent
+            }
+            drag.axis: Drag.XAxis
+            // Use maximum and minimum to restrict the canGoNext and canGoPrevious
+            drag.maximumX: newPlayer.mediaPlayer.playlist.canGoPrevious || animating ? 0 : -blurredBackground.width
+            drag.minimumX: newPlayer.mediaPlayer.playlist.canGoNext || animating ? -blurredBackground.width * 2 : -blurredBackground.width
+            drag.target: albumImageContainer
+
+            property bool animating: nextAnimation.running || previousAnimation.running || resetAnimation.running
+
+            onReleased: {
+                if (albumImageContainer.x < -blurredBackground.width) {
+                    // Drag direction is right to left
+                    // so check if has been dragged enough for activation
+
+                    if (nextCoverLoader.percentage > 0.4) {
+                        nextAnimation.start();
+                    } else {
+                        resetAnimation.start();
+                    }
+                } else if (albumImageContainer.x > -blurredBackground.width) {
+                    // Drag direction is left to right
+                    // so check if has been dragged enough for activation
+
+                    if (previousCoverLoader.percentage > 0.4) {
+                        previousAnimation.start();
+                    } else {
+                        resetAnimation.start();
+                    }
+                } else {
+                    resetAnimation.start();
+                }
+            }
+
+            SequentialAnimation {
+                id: nextAnimation
+                // Move to the next cover
+                NumberAnimation {
+                    duration: UbuntuAnimation.FastDuration
+                    property: "x"
+                    target: albumImageContainer
+                    to: -blurredBackground.width * 2
+                }
+                // Pause for a few frames (3+) to let animation finish
+                // other script action causes stutter
+                NumberAnimation {
+                    duration: 50
+                }
+                // Call next and jump back to the centre with the new
+                // cover to give the illusion of movement
+                ScriptAction {
+                    script: {
+                        newPlayer.mediaPlayer.playlist.next()
+                        albumImageContainer.x = -blurredBackground.width;
+                    }
+                }
+            }
+
+            SequentialAnimation {
+                id: previousAnimation
+                // Move to the previous cover
+                NumberAnimation {
+                    duration: UbuntuAnimation.FastDuration
+                    property: "x"
+                    target: albumImageContainer
+                    to: 0
+                }
+                // Pause for a few frames (3+) to let animation finish
+                // other script action causes stutter
+                NumberAnimation {
+                    duration: 50
+                }
+                // Call previous and jump back to the centre with the new
+                // cover to give the illusion of movement
+                ScriptAction {
+                    script: {
+                        newPlayer.mediaPlayer.playlist.previous()
+                        albumImageContainer.x = -blurredBackground.width;
+                    }
+                }
+            }
+
+            // Animation which resets to the centre when drag is not far enough
+            NumberAnimation {
+                id: resetAnimation
+                duration: 250
+                property: "x"
+                target: albumImageContainer
+                to: -blurredBackground.width
             }
         }
 
@@ -119,27 +284,6 @@
                 text: newPlayer.mediaPlayer.playlist.empty ? "" : newPlayer.currentMeta.author
             }
         }
-
-        /* Detect cover art swipe */
-        MouseArea {
-            anchors.fill: parent
-            property string direction: "None"
-            property real lastX: -1
-
-            onPressed: lastX = mouse.x
-
-            onReleased: {
-                var diff = mouse.x - lastX
-
-                if (Math.abs(diff) < units.gu(4)) {
-                    return;
-                } else if (diff < 0 && newPlayer.mediaPlayer.playlist.canGoNext) {
-                    newPlayer.mediaPlayer.playlist.next()
-                } else if (diff > 0 && newPlayer.mediaPlayer.playlist.canGoPrevious) {
-                    newPlayer.mediaPlayer.playlist.previous()
-                }
-            }
-        }
     }
 
     /* Background for progress bar component */

=== modified file 'debian/changelog'
--- debian/changelog	2015-12-21 00:42:21 +0000
+++ debian/changelog	2015-12-21 00:42:22 +0000
@@ -2,6 +2,7 @@
 
   [ Andrew Hayzen ]
   * Release 2.2ubuntu2 and start on 2.3
+  * Swipe left and right of album in full now playing now slide (LP: #1482545).
 
   [ Ken VanDine ]
   * Install the content-hub json file in the correct place for peer registry