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(3)
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  Button {
70  objectName: "playButton"
71  width: trackRow.column1Width
72  height: width
73  iconSource: DashAudioPlayer.playing && trackItem.isPlayingItem ? "image://theme/media-playback-pause" : "image://theme/media-playback-start"
74  activeFocusOnPress: false
75 
76  // Can't be "transparent" or "#00xxxxxx" as the button optimizes away the surrounding shape
77  // FIXME when this is resolved: https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1251685
78  color: "#01000000"
79 
80  onClicked: {
81  if (trackItem.isPlayingItem) {
82  if (DashAudioPlayer.playing) {
83  DashAudioPlayer.pause();
84  } else if (DashAudioPlayer.paused) {
85  DashAudioPlayer.play();
86  }
87  } else {
88  var playlist = [];
89  for (var i = 0; i < trackRepeater.count; ++i) {
90  playlist.push(trackRepeater.itemAt(i).sourceUrl);
91  }
92  DashAudioPlayer.playSource(sourceUrl, playlist);
93  }
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: "small"
109  horizontalAlignment: Text.AlignLeft
110  text: modelData["title"]
111  elide: Text.ElideRight
112  }
113 
114  Label {
115  id: trackSubtitleLabel
116  objectName: "trackSubtitleLabel"
117  anchors { top: trackTitleLabel.bottom; left: parent.left; right: parent.right }
118  visible: text !== ""
119  opacity: 0.9
120  color: scopeStyle ? scopeStyle.foreground : theme.palette.normal.baseText
121  font.weight: Font.Light
122  fontSize: "small"
123  horizontalAlignment: Text.AlignLeft
124  text: modelData["subtitle"] || ""
125  elide: Text.ElideRight
126  }
127 
128  AudioProgressBar {
129  anchors { left: parent.left; top: parent.bottom; right: parent.right }
130  visible: !DashAudioPlayer.stopped && trackItem.isPlayingItem && modelData["length"] > 0
131  source: sourceUrl
132  }
133  }
134 
135  Label {
136  id: timeLabel
137  objectName: "timeLabel"
138  anchors.verticalCenter: parent.verticalCenter
139  width: parent.column3Width
140  opacity: 0.9
141  color: scopeStyle ? scopeStyle.foreground : theme.palette.normal.baseText
142  fontSize: "small"
143  horizontalAlignment: Text.AlignRight
144  text: DashAudioPlayer.lengthToString(modelData["length"])
145  }
146  }
147  }
148  }
149  }
150 }