Unity 8
PreviewAudioPlayback.qml
1 /*
2  * Copyright (C) 2014,2015 Canonical, Ltd.
3  *
4  * This program is free software; you can redistribute it and/or modify
5  * it under the terms of the GNU General Public License as published by
6  * the Free Software Foundation; version 3.
7  *
8  * This program is distributed in the hope that it will be useful,
9  * but WITHOUT ANY WARRANTY; without even the implied warranty of
10  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11  * GNU General Public License for more details.
12  *
13  * You should have received a copy of the GNU General Public License
14  * along with this program. If not, see <http://www.gnu.org/licenses/>.
15  */
16 
17 import QtQuick 2.4
18 import Ubuntu.Components 1.3
19 import Dash 0.1
20 
21 /*! \brief Preview widget for audio tracks.
22 
23  This widget shows tracks contained in widgetData["tracks"], each of which should be of the form:
24 
25  \code{.json}
26  {
27  "source" "uri://to/file",
28  "title": "Title",
29  "subtitle": "Subtitle", // optional
30  "length": 125 // in seconds
31  }
32  \endcode
33  */
34 
35 PreviewWidget {
36  id: root
37  implicitHeight: childrenRect.height
38 
39  Column {
40  anchors { left: parent.left; right: parent.right }
41  visible: trackRepeater.count > 0
42 
43  Repeater {
44  id: trackRepeater
45  objectName: "trackRepeater"
46  model: root.widgetData["tracks"]
47 
48  delegate: Item {
49  id: trackItem
50  objectName: "trackItem" + index
51 
52  readonly property url sourceUrl: modelData["source"]
53  readonly property bool isPlayingItem: AudioUrlComparer.compare(sourceUrl, DashAudioPlayer.currentSource)
54 
55  anchors { left: parent.left; right: parent.right }
56  height: units.gu(5)
57 
58  Row {
59  id: trackRow
60 
61  readonly property int column1Width: units.gu(2)
62  readonly property int column2Width: width - (2 * spacing) - column1Width - column3Width
63  readonly property int column3Width: units.gu(4)
64 
65  anchors.verticalCenter: parent.verticalCenter
66  width: parent.width
67  spacing: units.gu(1)
68 
69  AbstractButton {
70  objectName: "playButton"
71  width: trackRow.column1Width
72  height: width
73  activeFocusOnPress: false
74 
75  onClicked: {
76  if (trackItem.isPlayingItem) {
77  if (DashAudioPlayer.playing) {
78  DashAudioPlayer.pause();
79  } else if (DashAudioPlayer.paused) {
80  DashAudioPlayer.play();
81  }
82  } else {
83  var playlist = [];
84  for (var i = 0; i < trackRepeater.count; ++i) {
85  playlist.push(trackRepeater.itemAt(i).sourceUrl);
86  }
87  DashAudioPlayer.playSource(sourceUrl, playlist);
88  }
89  }
90 
91  Icon {
92  anchors.fill: parent
93  source: DashAudioPlayer.playing && trackItem.isPlayingItem ? "image://theme/media-preview-pause" : "image://theme/media-preview-start"
94  }
95  }
96 
97  Item {
98  anchors.verticalCenter: parent.verticalCenter
99  width: parent.column2Width
100  height: trackSubtitleLabel.visible ? trackTitleLabel.height + trackSubtitleLabel.height : trackTitleLabel.height
101 
102  Label {
103  id: trackTitleLabel
104  objectName: "trackTitleLabel"
105  anchors { top: parent.top; left: parent.left; right: parent.right }
106  opacity: 0.9
107  color: scopeStyle ? scopeStyle.foreground : theme.palette.normal.baseText
108  fontSize: "medium"
109  font.weight: Font.Light
110  horizontalAlignment: Text.AlignLeft
111  text: modelData["title"]
112  elide: Text.ElideRight
113  }
114 
115  Label {
116  id: trackSubtitleLabel
117  objectName: "trackSubtitleLabel"
118  anchors { top: trackTitleLabel.bottom; left: parent.left; right: parent.right }
119  visible: text !== ""
120  opacity: 0.9
121  color: scopeStyle ? scopeStyle.foreground : theme.palette.normal.baseText
122  font.weight: Font.Light
123  fontSize: "small"
124  horizontalAlignment: Text.AlignLeft
125  text: modelData["subtitle"] || ""
126  elide: Text.ElideRight
127  }
128 
129  AudioProgressBar {
130  anchors { left: parent.left; top: parent.bottom; right: parent.right }
131  visible: !DashAudioPlayer.stopped && trackItem.isPlayingItem && modelData["length"] > 0
132  source: sourceUrl
133  }
134  }
135 
136  Label {
137  id: timeLabel
138  objectName: "timeLabel"
139  anchors.verticalCenter: parent.verticalCenter
140  width: parent.column3Width
141  opacity: 0.9
142  color: scopeStyle ? scopeStyle.foreground : theme.palette.normal.baseText
143  fontSize: "small"
144  font.weight: Font.Light
145  horizontalAlignment: Text.AlignRight
146  text: DashAudioPlayer.lengthToString(modelData["length"])
147  }
148  }
149  }
150  }
151  }
152 }