Ubuntu Music App

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

  1. remix-now-playing-main-view-with-controls
  2. Merge into remix-now-playing-main-view
Proposed by Kill Animals
Status: Merged
Approved by: Victor Thompson
Approved revision: 646
Merge reported by: Victor Thompson
Merged at revision: not available
Proposed branch: lp:~kill-animals/music-app/remix-now-playing-main-view-with-controls
Merge into: lp:~vthompson/music-app/remix-now-playing-main-view
Diff against target: 287 lines (+266/-0)
2 files modified
MusicNowPlaying.qml (+265/-0)
music-app.qml (+1/-0)
To merge this branch: bzr merge lp:~kill-animals/music-app/remix-now-playing-main-view-with-controls
Reviewer Review Type Date Requested Status
Victor Thompson Approve
Review via email: mp+237024@code.launchpad.net

Commit message

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

Description of the change

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.

To post a comment you must log in.
lp:~kill-animals/music-app/remix-now-playing-main-view-with-controls updated
646. By Akiva Avraham <akiva@akiva-ThinkPad-X230>

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

Revision history for this message
Victor Thompson (vthompson) wrote :

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
Revision history for this message
Victor Thompson (vthompson) wrote :

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

review: Approve
Revision history for this message
Kill Animals (kill-animals) wrote :

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

#ubuntu-app-devel akiva-thinkpad

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'MusicNowPlaying.qml'
2--- MusicNowPlaying.qml 2014-10-03 05:08:08 +0000
3+++ MusicNowPlaying.qml 2014-10-03 12:19:14 +0000
4@@ -110,6 +110,271 @@
5 "&album=" + player.currentMetaAlbum)
6 : player.currentMetaArt
7 }
8+
9+ /* Full toolbar */
10+ Item {
11+ id: musicToolbarFullContainer
12+ anchors.top: blurredBackground.bottom
13+ anchors.topMargin: units.gu(6)
14+ width: blurredBackground.width
15+
16+ /* Column for labels in wideAspect */
17+ Column {
18+ id: nowPlayingWideAspectLabels
19+ anchors {
20+ horizontalCenter: parent.horizontalCenter
21+ left: parent.left
22+ leftMargin: units.gu(2)
23+ right: parent.right
24+ rightMargin: units.gu(2)
25+ }
26+
27+ /* Title of track */
28+ Label {
29+ id: nowPlayingWideAspectTitle
30+ anchors {
31+ left: parent.left
32+ leftMargin: units.gu(1)
33+ right: parent.right
34+ rightMargin: units.gu(1)
35+ }
36+ color: styleMusic.playerControls.labelColor
37+ elide: Text.ElideRight
38+ fontSize: "x-large"
39+ objectName: "playercontroltitle"
40+ text: trackQueue.model.count === 0 ? "" : player.currentMetaTitle === "" ? player.currentMetaFile : player.currentMetaTitle
41+ }
42+
43+ /* Artist of track */
44+ Label {
45+ id: nowPlayingWideAspectArtist
46+ anchors {
47+ left: parent.left
48+ leftMargin: units.gu(1)
49+ right: parent.right
50+ rightMargin: units.gu(1)
51+ }
52+ color: styleMusic.nowPlaying.labelSecondaryColor
53+ elide: Text.ElideRight
54+ fontSize: "small"
55+ text: trackQueue.model.count === 0 ? "" : player.currentMetaArtist
56+ }
57+
58+ /* Album of track */
59+ Label {
60+ id: nowPlayingWideAspectAlbum
61+ anchors {
62+ left: parent.left
63+ leftMargin: units.gu(1)
64+ right: parent.right
65+ rightMargin: units.gu(1)
66+ }
67+ color: styleMusic.nowPlaying.labelSecondaryColor
68+ elide: Text.ElideRight
69+ fontSize: "small"
70+ text: trackQueue.model.count === 0 ? "" : player.currentMetaAlbum
71+ }
72+ }
73+
74+ /* Progress bar component */
75+ MouseArea {
76+ id: musicToolbarFullProgressContainer
77+ anchors.left: parent.left
78+ anchors.leftMargin: units.gu(3)
79+ anchors.right: parent.right
80+ anchors.rightMargin: units.gu(3)
81+ anchors.top: nowPlayingWideAspectLabels.bottom
82+ anchors.topMargin: units.gu(3)
83+ height: units.gu(3)
84+ width: parent.width
85+ z: 1
86+
87+ /* Position label */
88+ Label {
89+ id: musicToolbarFullPositionLabel
90+ anchors.top: progressSliderMusic.bottom
91+ anchors.left: parent.left
92+ color: styleMusic.nowPlaying.labelSecondaryColor
93+ fontSize: "small"
94+ height: parent.height
95+ horizontalAlignment: Text.AlignHCenter
96+ text: durationToString(player.position)
97+ verticalAlignment: Text.AlignVCenter
98+ width: units.gu(3)
99+ }
100+
101+ Slider {
102+ id: progressSliderMusic
103+ anchors.left: parent.left
104+ anchors.right: parent.right
105+ function formatValue(v) { return durationToString(v) }
106+
107+ property bool seeking: false
108+
109+ onSeekingChanged: {
110+ if (seeking === false) {
111+ musicToolbarFullPositionLabel.text = durationToString(player.position)
112+ }
113+ }
114+
115+ onPressedChanged: {
116+ seeking = pressed
117+ if (!pressed) {
118+ player.seek(value)
119+ }
120+ }
121+
122+ Connections {
123+ target: player
124+ onDurationChanged: {
125+ musicToolbarFullDurationLabel.text = durationToString(player.duration)
126+ progressSliderMusic.maximumValue = player.duration
127+ }
128+ onPositionChanged: {
129+ if (progressSliderMusic.seeking === false) {
130+ progressSliderMusic.value = player.position
131+ musicToolbarFullPositionLabel.text = durationToString(player.position)
132+ musicToolbarFullDurationLabel.text = durationToString(player.duration)
133+ }
134+ }
135+ onStopped: {
136+ musicToolbarFullPositionLabel.text = durationToString(0);
137+ musicToolbarFullDurationLabel.text = durationToString(0);
138+ }
139+ }
140+ }
141+
142+ /* Duration label */
143+ Label {
144+ id: musicToolbarFullDurationLabel
145+ anchors.top: progressSliderMusic.bottom
146+ anchors.right: parent.right
147+ color: styleMusic.nowPlaying.labelSecondaryColor
148+ fontSize: "small"
149+ height: parent.height
150+ horizontalAlignment: Text.AlignHCenter
151+ text: durationToString(player.duration)
152+ verticalAlignment: Text.AlignVCenter
153+ width: units.gu(3)
154+ }
155+ }
156+
157+ /* Repeat button */
158+ MouseArea {
159+ id: nowPlayingRepeatButton
160+ objectName: "repeatShape"
161+ anchors.right: nowPlayingPreviousButton.left
162+ anchors.rightMargin: units.gu(1)
163+ anchors.verticalCenter: nowPlayingPlayButton.verticalCenter
164+ height: units.gu(6)
165+ opacity: player.repeat && !emptyPage.noMusic ? 1 : .4
166+ width: height
167+ onClicked: player.repeat = !player.repeat
168+
169+ Image {
170+ id: repeatIcon
171+ height: units.gu(3)
172+ width: height
173+ anchors.verticalCenter: parent.verticalCenter
174+ anchors.horizontalCenter: parent.horizontalCenter
175+ source: Qt.resolvedUrl("images/media-playlist-repeat.svg")
176+ verticalAlignment: Text.AlignVCenter
177+ opacity: player.repeat && !emptyPage.noMusic ? 1 : .4
178+ }
179+ }
180+
181+ /* Previous button */
182+ MouseArea {
183+ id: nowPlayingPreviousButton
184+ anchors.right: nowPlayingPlayButton.left
185+ anchors.rightMargin: units.gu(1)
186+ anchors.verticalCenter: nowPlayingPlayButton.verticalCenter
187+ height: units.gu(6)
188+ objectName: "previousShape"
189+ opacity: trackQueue.model.count === 0 ? .4 : 1
190+ width: height
191+ onClicked: player.previousSong()
192+
193+ Image {
194+ id: nowPlayingPreviousIndicator
195+ height: units.gu(3)
196+ width: height
197+ anchors.horizontalCenter: parent.horizontalCenter
198+ anchors.verticalCenter: parent.verticalCenter
199+ source: Qt.resolvedUrl("images/media-skip-backward.svg")
200+ opacity: 1
201+ }
202+ }
203+
204+ /* Play/Pause button */
205+ MouseArea {
206+ id: nowPlayingPlayButton
207+ anchors.horizontalCenter: parent.horizontalCenter
208+ anchors.top:musicToolbarFullProgressContainer.bottom
209+ anchors.topMargin: units.gu(2)
210+ height: units.gu(12)
211+ objectName: "playShape"
212+ width: height
213+ onClicked: player.toggle()
214+
215+ Image {
216+ id: nowPlayingPlayIndicator
217+ height: units.gu(6)
218+ width: height
219+ anchors.horizontalCenter: parent.horizontalCenter
220+ anchors.verticalCenter: parent.verticalCenter
221+ opacity: emptyPage.noMusic ? .4 : 1
222+ source: player.playbackState === MediaPlayer.PlayingState ?
223+ Qt.resolvedUrl("images/media-playback-pause.svg") : Qt.resolvedUrl("images/media-playback-start.svg")
224+ }
225+ }
226+
227+ /* Next button */
228+ MouseArea {
229+ id: nowPlayingNextButton
230+ anchors.left: nowPlayingPlayButton.right
231+ anchors.leftMargin: units.gu(1)
232+ anchors.verticalCenter: nowPlayingPlayButton.verticalCenter
233+ height: units.gu(6)
234+ objectName: "forwardShape"
235+ opacity: trackQueue.model.count === 0 ? .4 : 1
236+ width: height
237+ onClicked: player.nextSong()
238+
239+ Image {
240+ id: nowPlayingNextIndicator
241+ height: units.gu(3)
242+ width: height
243+ anchors.horizontalCenter: parent.horizontalCenter
244+ anchors.verticalCenter: parent.verticalCenter
245+ source: Qt.resolvedUrl("images/media-skip-forward.svg")
246+ opacity: 1
247+ }
248+ }
249+
250+ /* Shuffle button */
251+ MouseArea {
252+ id: nowPlayingShuffleButton
253+ objectName: "shuffleShape"
254+ anchors.left: nowPlayingNextButton.right
255+ anchors.leftMargin: units.gu(1)
256+ anchors.verticalCenter: nowPlayingPlayButton.verticalCenter
257+ height: units.gu(6)
258+ opacity: player.shuffle && !emptyPage.noMusic ? 1 : .4
259+ width: height
260+ onClicked: player.shuffle = !player.shuffle
261+
262+ Image {
263+ id: shuffleIcon
264+ height: units.gu(3)
265+ width: height
266+ anchors.verticalCenter: parent.verticalCenter
267+ anchors.horizontalCenter: parent.horizontalCenter
268+ source: Qt.resolvedUrl("images/media-playlist-shuffle.svg")
269+ opacity: player.shuffle && !emptyPage.noMusic ? 1 : .4
270+ }
271+ }
272+ }
273 }
274
275 ListView {
276
277=== modified file 'music-app.qml'
278--- music-app.qml 2014-10-01 04:55:18 +0000
279+++ music-app.qml 2014-10-03 12:19:14 +0000
280@@ -979,6 +979,7 @@
281
282 MusicToolbar {
283 id: musicToolbar
284+ visible: nowPlaying.isListView
285 objectName: "musicToolbarObject"
286 z: 200 // put on top of everything else
287 }

Subscribers

People subscribed via source and target branches

to all changes: