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

Proposed by Andrew Hayzen on 2015-12-21
Status: Needs review
Proposed branch: lp:~ahayzen/music-app/fix-1482545-swipe-in-now-playing
Merge into: lp:music-app
Prerequisite: lp:~music-app-dev/music-app/media-hub-bg-playlists-rework
Diff against target: 234 lines (+171/-26)
2 files modified
app/components/NowPlayingFullView.qml (+170/-26)
debian/changelog (+1/-0)
To merge this branch: bzr merge lp:~ahayzen/music-app/fix-1482545-swipe-in-now-playing
Reviewer Review Type Date Requested Status
Victor Thompson Needs Information on 2016-01-30
Andrew Hayzen Disapprove on 2015-12-21
Jenkins Bot continuous-integration Approve on 2015-12-21
Review via email: mp+281045@code.launchpad.net

Commit message

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

Description of the change

* 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)

To post a comment you must log in.
review: Approve (continuous-integration)
Andrew Hayzen (ahayzen) wrote :

#blocked by bug 1528072

review: Disapprove
Victor Thompson (vthompson) wrote :

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) wrote :

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

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'app/components/NowPlayingFullView.qml'
2--- app/components/NowPlayingFullView.qml 2015-12-21 00:42:21 +0000
3+++ app/components/NowPlayingFullView.qml 2015-12-21 00:42:22 +0000
4@@ -39,20 +39,185 @@
5 art: albumImage.firstSource
6 height: parent.height - units.gu(7)
7
8- Item {
9+ Row {
10 id: albumImageContainer
11 anchors {
12- horizontalCenter: parent.horizontalCenter
13+ bottom: parent.bottom
14 top: parent.top
15 }
16- height: parent.height
17+ x: -parent.width
18 width: parent.width
19
20+ Loader {
21+ id: previousCoverLoader
22+ anchors {
23+ top: parent.top
24+ }
25+ asynchronous: true
26+ height: parent.height
27+ sourceComponent: CoverGrid {
28+ id: previousCover
29+ anchors {
30+ fill: parent
31+ }
32+ size: parent.width
33+
34+ function setCover() {
35+ covers = [newPlayer.metaForSource(newPlayer.mediaPlayer.playlist.itemSource(newPlayer.mediaPlayer.playlist.previousIndex(1)))];
36+ }
37+
38+ Connections {
39+ target: newPlayer.mediaPlayer.playlist
40+ onCurrentIndexChanged: previousCover.setCover()
41+ onItemInserted: previousCover.setCover()
42+ onItemChanged: previousCover.setCover()
43+ onItemRemoved: previousCover.setCover()
44+ }
45+
46+ Component.onCompleted: previousCover.setCover()
47+ }
48+ width: parent.width
49+
50+ // How much of the previous cover has been shown
51+ property double percentage: 1 - Math.abs(albumImageContainer.x / blurredBackground.width)
52+ }
53+
54 CoverGrid {
55 id: albumImage
56- anchors.centerIn: parent
57+ anchors {
58+ top: parent.top
59+ }
60 covers: [newPlayer.currentMeta]
61- size: parent.height
62+ size: parent.width
63+ }
64+
65+ Loader {
66+ id: nextCoverLoader
67+ anchors {
68+ top: parent.top
69+ }
70+ asynchronous: true
71+ height: parent.height
72+ sourceComponent: CoverGrid {
73+ id: nextCover
74+ anchors {
75+ fill: parent
76+ }
77+ size: parent.width
78+
79+ function setCover() {
80+ covers = [newPlayer.metaForSource(newPlayer.mediaPlayer.playlist.itemSource(newPlayer.mediaPlayer.playlist.nextIndex(1)))];
81+ }
82+
83+ Connections {
84+ target: newPlayer.mediaPlayer.playlist
85+ onCurrentIndexChanged: nextCover.setCover()
86+ onItemInserted: nextCover.setCover()
87+ onItemChanged: nextCover.setCover()
88+ onItemRemoved: nextCover.setCover()
89+ }
90+
91+ Component.onCompleted: nextCover.setCover()
92+ }
93+ width: parent.width
94+
95+ // How much of the next cover has been shown
96+ property double percentage: Math.abs((albumImageContainer.x + blurredBackground.width) / blurredBackground.width)
97+ }
98+ }
99+
100+ MouseArea {
101+ id: albumImageMouseArea
102+ anchors {
103+ fill: parent
104+ }
105+ drag.axis: Drag.XAxis
106+ // Use maximum and minimum to restrict the canGoNext and canGoPrevious
107+ drag.maximumX: newPlayer.mediaPlayer.playlist.canGoPrevious || animating ? 0 : -blurredBackground.width
108+ drag.minimumX: newPlayer.mediaPlayer.playlist.canGoNext || animating ? -blurredBackground.width * 2 : -blurredBackground.width
109+ drag.target: albumImageContainer
110+
111+ property bool animating: nextAnimation.running || previousAnimation.running || resetAnimation.running
112+
113+ onReleased: {
114+ if (albumImageContainer.x < -blurredBackground.width) {
115+ // Drag direction is right to left
116+ // so check if has been dragged enough for activation
117+
118+ if (nextCoverLoader.percentage > 0.4) {
119+ nextAnimation.start();
120+ } else {
121+ resetAnimation.start();
122+ }
123+ } else if (albumImageContainer.x > -blurredBackground.width) {
124+ // Drag direction is left to right
125+ // so check if has been dragged enough for activation
126+
127+ if (previousCoverLoader.percentage > 0.4) {
128+ previousAnimation.start();
129+ } else {
130+ resetAnimation.start();
131+ }
132+ } else {
133+ resetAnimation.start();
134+ }
135+ }
136+
137+ SequentialAnimation {
138+ id: nextAnimation
139+ // Move to the next cover
140+ NumberAnimation {
141+ duration: UbuntuAnimation.FastDuration
142+ property: "x"
143+ target: albumImageContainer
144+ to: -blurredBackground.width * 2
145+ }
146+ // Pause for a few frames (3+) to let animation finish
147+ // other script action causes stutter
148+ NumberAnimation {
149+ duration: 50
150+ }
151+ // Call next and jump back to the centre with the new
152+ // cover to give the illusion of movement
153+ ScriptAction {
154+ script: {
155+ newPlayer.mediaPlayer.playlist.next()
156+ albumImageContainer.x = -blurredBackground.width;
157+ }
158+ }
159+ }
160+
161+ SequentialAnimation {
162+ id: previousAnimation
163+ // Move to the previous cover
164+ NumberAnimation {
165+ duration: UbuntuAnimation.FastDuration
166+ property: "x"
167+ target: albumImageContainer
168+ to: 0
169+ }
170+ // Pause for a few frames (3+) to let animation finish
171+ // other script action causes stutter
172+ NumberAnimation {
173+ duration: 50
174+ }
175+ // Call previous and jump back to the centre with the new
176+ // cover to give the illusion of movement
177+ ScriptAction {
178+ script: {
179+ newPlayer.mediaPlayer.playlist.previous()
180+ albumImageContainer.x = -blurredBackground.width;
181+ }
182+ }
183+ }
184+
185+ // Animation which resets to the centre when drag is not far enough
186+ NumberAnimation {
187+ id: resetAnimation
188+ duration: 250
189+ property: "x"
190+ target: albumImageContainer
191+ to: -blurredBackground.width
192 }
193 }
194
195@@ -119,27 +284,6 @@
196 text: newPlayer.mediaPlayer.playlist.empty ? "" : newPlayer.currentMeta.author
197 }
198 }
199-
200- /* Detect cover art swipe */
201- MouseArea {
202- anchors.fill: parent
203- property string direction: "None"
204- property real lastX: -1
205-
206- onPressed: lastX = mouse.x
207-
208- onReleased: {
209- var diff = mouse.x - lastX
210-
211- if (Math.abs(diff) < units.gu(4)) {
212- return;
213- } else if (diff < 0 && newPlayer.mediaPlayer.playlist.canGoNext) {
214- newPlayer.mediaPlayer.playlist.next()
215- } else if (diff > 0 && newPlayer.mediaPlayer.playlist.canGoPrevious) {
216- newPlayer.mediaPlayer.playlist.previous()
217- }
218- }
219- }
220 }
221
222 /* Background for progress bar component */
223
224=== modified file 'debian/changelog'
225--- debian/changelog 2015-12-21 00:42:21 +0000
226+++ debian/changelog 2015-12-21 00:42:22 +0000
227@@ -2,6 +2,7 @@
228
229 [ Andrew Hayzen ]
230 * Release 2.2ubuntu2 and start on 2.3
231+ * Swipe left and right of album in full now playing now slide (LP: #1482545).
232
233 [ Ken VanDine ]
234 * Install the content-hub json file in the correct place for peer registry

Subscribers

People subscribed via source and target branches