@@ -52,154 +52,174 @@ GenericPreview {
5252 Component {
5353 id: descriptionComponent
5454
55− Column {
55+ Item {
5656 height: childrenRect.height
57+ Audio {
58+ id: audioPlayer
59+ objectName: "audioPlayer"
60+ property real percent: audioPlayer.position * 100 / audioPlayer.duration
61+ property string uri
62+ source: uri
63+
64+ Component.onDestruction: {
65+ audioPlayer.stop();
66+ }
67+
68+ onErrorStringChanged: print("Audio player error:", errorString)
5769
58− ThinDivider {
59− objectName: "topDivider"
70+ }
71+ Connections {
72+ target: root
73+ onIsCurrentChanged: {
74+ if (!root.isCurrent) {
75+ audioPlayer.stop();
76+ }
77+ }
78+ }
79+
80+ Column {
6081 anchors {
6182 left: parent.left
6283 right: parent.right
6384 }
64− visible: trackRepeater.count > 0
65− }
6685
67− Repeater {
68− id: trackRepeater
69− objectName: "trackRepeater"
86+ height: childrenRect.height
87+
88+ ThinDivider {
89+ objectName: "topDivider"
90+ anchors {
91+ left: parent.left
92+ right: parent.right
93+ }
94+ visible: trackRepeater.count > 0
95+ }
7096
71− model: previewData.tracks
97+ Repeater {
98+ id: trackRepeater
99+ objectName: "trackRepeater"
72100
73− signal stopPlayback()
101+ model: previewData.tracks
74102
75− delegate: Item {
76− objectName: "trackItem" + index
77− width: parent.width
78− height: units.gu(5)
79− Row {
80− id: trackRow
103+ delegate: Item {
104+ id: trackItem
105+ objectName: "trackItem" + index
81106 width: parent.width
82− spacing: units.gu(1)
83− property int column1Width: units.gu(3)
84− property int column2Width: width - (2 * spacing) - column1Width - column3Width
85− property int column3Width: units.gu(4)
86− anchors.verticalCenter: parent.verticalCenter
87−
88− UbuntuShape {
89− id: playButtonShape
90− objectName: "playButton"
91− width: trackRow.column1Width
92− height: width
93− Icon {
94− width: units.gu(2)
95− height: width
96− anchors.centerIn: playButtonShape
97− name: audioPlayer.playbackState == Audio.PlayingState ? "media-playback-pause" : "media-playback-start"
98− color: "white"
99− opacity: .9
100− }
101− MouseArea {
102− anchors.fill: parent
103− onClicked: {
104− if (audioPlayer.playbackState == Audio.PlayingState) {
105− audioPlayer.pause();
106− } else if (audioPlayer.playbackState == Audio.PausedState){
107− audioPlayer.play();
108− } else {
109− trackRepeater.stopPlayback();
110− audioPlayer.play();
111− }
112− }
113− }
107+ height: units.gu(5)
108+ property bool isPlayingItem: false
109+
110+ Connections {
111+ target: audioPlayer
112+ onUriChanged: trackItem.isPlayingItem = false;
114113 }
115114
116− Label {
117− objectName: "trackTitleLabel"
118− fontSize: "small"
119− opacity: 0.9
120− color: "white"
121− horizontalAlignment: Text.AlignLeft
115+ function play() {
116+ audioPlayer.stop();
117+ audioPlayer.uri = "";
118+ audioPlayer.uri = model.uri;
119+ isPlayingItem = true;
120+ audioPlayer.play();
121+ }
122+
123+ Row {
124+ id: trackRow
125+ width: parent.width
126+ spacing: units.gu(1)
127+ property int column1Width: units.gu(3)
128+ property int column2Width: width - (2 * spacing) - column1Width - column3Width
129+ property int column3Width: units.gu(4)
122130 anchors.verticalCenter: parent.verticalCenter
123− width: parent.column2Width
124− text: title
125− style: Text.Raised
126− styleColor: "black"
127− elide: Text.ElideRight
128131
129132 UbuntuShape {
130− id: progressBarFill
131− objectName: "progressBarFill"
132− color: UbuntuColors.orange
133− anchors.left: progressBarImage.left
134− anchors.right: progressBarImage.right
135− anchors.verticalCenter: progressBarImage.verticalCenter
136− height: units.dp(2)
137− anchors.margins: units.dp(2)
138− anchors.rightMargin: maxWidth - (maxWidth * audioPlayer.percent / 100) + units.dp(2)
139− visible: progressBarImage.visible
140− property int maxWidth: progressBarImage.width - units.dp(4)
141− }
142− Image {
143− id: progressBarImage
144− anchors {
145− left: parent.left
146− top: parent.bottom
147− right: parent.right
133+ id: playButtonShape
134+ objectName: "playButton"
135+ width: trackRow.column1Width
136+ height: width
137+ Icon {
138+ width: units.gu(2)
139+ height: width
140+ anchors.centerIn: playButtonShape
141+ name: audioPlayer.playbackState == Audio.PlayingState && trackItem.isPlayingItem ? "media-playback-pause" : "media-playback-start"
142+ color: "white"
143+ opacity: .9
144+ }
145+ MouseArea {
146+ anchors.fill: parent
147+ onClicked: {
148+ if (trackItem.isPlayingItem) {
149+ if (audioPlayer.playbackState == Audio.PlayingState) {
150+ audioPlayer.pause();
151+ } else if (audioPlayer.playbackState == Audio.PausedState){
152+ audioPlayer.play();
153+ }
154+ } else {
155+ trackItem.play();
156+ }
157+ }
148158 }
149− height: units.dp(6)
150− visible: audioPlayer.playbackState != Audio.StoppedState
151− source: "graphics/music_progress_bg.png"
152−
153159 }
154− }
155− Label {
156− id: valueLabel
157− objectName: "timeLabel"
158− fontSize: "small"
159− opacity: 0.9
160− color: "white"
161− anchors.verticalCenter: parent.verticalCenter
162− horizontalAlignment: Text.AlignRight
163− width: parent.column3Width
164− text: length
165− style: Text.Raised
166− styleColor: "black"
167− }
168− }
169−
170− ThinDivider {
171− anchors {
172− left: parent.left
173− bottom: parent.bottom
174− right: parent.right
175− }
176− }
177160
178− Audio {
179− id: audioPlayer
180− objectName: "audioPlayer"
181− source: uri
182− property real percent: audioPlayer.position * 100 / audioPlayer.duration
161+ Label {
162+ objectName: "trackTitleLabel"
163+ fontSize: "small"
164+ opacity: 0.9
165+ color: "white"
166+ horizontalAlignment: Text.AlignLeft
167+ anchors.verticalCenter: parent.verticalCenter
168+ width: parent.column2Width
169+ text: title
170+ style: Text.Raised
171+ styleColor: "black"
172+ elide: Text.ElideRight
173+
174+ UbuntuShape {
175+ id: progressBarFill
176+ objectName: "progressBarFill"
177+ color: UbuntuColors.orange
178+ anchors.left: progressBarImage.left
179+ anchors.right: progressBarImage.right
180+ anchors.verticalCenter: progressBarImage.verticalCenter
181+ height: units.dp(2)
182+ anchors.margins: units.dp(2)
183+ anchors.rightMargin: maxWidth - (maxWidth * audioPlayer.percent / 100) + units.dp(2)
184+ visible: progressBarImage.visible
185+ property int maxWidth: progressBarImage.width - units.dp(4)
186+ }
187+ Image {
188+ id: progressBarImage
189+ anchors {
190+ left: parent.left
191+ top: parent.bottom
192+ right: parent.right
193+ }
194+ height: units.dp(6)
195+ visible: audioPlayer.playbackState != Audio.StoppedState && trackItem.isPlayingItem
196+ source: "graphics/music_progress_bg.png"
183197
184− Component.onDestruction: {
185− audioPlayer.stop();
198+ }
199+ }
200+ Label {
201+ id: valueLabel
202+ objectName: "timeLabel"
203+ fontSize: "small"
204+ opacity: 0.9
205+ color: "white"
206+ anchors.verticalCenter: parent.verticalCenter
207+ horizontalAlignment: Text.AlignRight
208+ width: parent.column3Width
209+ text: length
210+ style: Text.Raised
211+ styleColor: "black"
212+ }
186213 }
187214
188− onErrorStringChanged: print("Audio player error:", errorString)
189−
190− }
191− Connections {
192− target: root
193− onIsCurrentChanged: {
194− if (!root.isCurrent) {
195− audioPlayer.stop();
215+ ThinDivider {
216+ anchors {
217+ left: parent.left
218+ bottom: parent.bottom
219+ right: parent.right
196220 }
197221 }
198222 }
199− Connections {
200− target: trackRepeater
201− onStopPlayback: audioPlayer.stop();
202− }
203223 }
204224 }
205225 }