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 
75  // Can't be "transparent" or "#00xxxxxx" as the button optimizes away the surrounding shape
76  // FIXME when this is resolved: https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1251685
77  color: "#01000000"
78 
79  onClicked: {
80  if (trackItem.isPlayingItem) {
81  if (DashAudioPlayer.playing) {
82  DashAudioPlayer.pause();
83  } else if (DashAudioPlayer.paused) {
84  DashAudioPlayer.play();
85  }
86  } else {
87  DashAudioPlayer.playSource(sourceUrl);
88  }
89  }
90  }
91 
92  Item {
93  anchors.verticalCenter: parent.verticalCenter
94  width: parent.column2Width
95  height: trackSubtitleLabel.visible ? trackTitleLabel.height + trackSubtitleLabel.height : trackTitleLabel.height
96 
97  Label {
98  id: trackTitleLabel
99  objectName: "trackTitleLabel"
100  anchors { top: parent.top; left: parent.left; right: parent.right }
101  opacity: 0.9
102  color: scopeStyle ? scopeStyle.foreground : theme.palette.normal.baseText
103  fontSize: "small"
104  horizontalAlignment: Text.AlignLeft
105  text: modelData["title"]
106  elide: Text.ElideRight
107  }
108 
109  Label {
110  id: trackSubtitleLabel
111  objectName: "trackSubtitleLabel"
112  anchors { top: trackTitleLabel.bottom; left: parent.left; right: parent.right }
113  visible: text !== ""
114  opacity: 0.9
115  color: scopeStyle ? scopeStyle.foreground : theme.palette.normal.baseText
116  font.weight: Font.Light
117  fontSize: "small"
118  horizontalAlignment: Text.AlignLeft
119  text: modelData["subtitle"] || ""
120  elide: Text.ElideRight
121  }
122 
123  AudioProgressBar {
124  anchors { left: parent.left; top: parent.bottom; right: parent.right }
125  visible: !DashAudioPlayer.stopped && trackItem.isPlayingItem && modelData["length"] > 0
126  source: sourceUrl
127  }
128  }
129 
130  Label {
131  id: timeLabel
132  objectName: "timeLabel"
133  anchors.verticalCenter: parent.verticalCenter
134  width: parent.column3Width
135  opacity: 0.9
136  color: scopeStyle ? scopeStyle.foreground : theme.palette.normal.baseText
137  fontSize: "small"
138  horizontalAlignment: Text.AlignRight
139  text: DashAudioPlayer.lengthToString(modelData["length"])
140  }
141  }
142  }
143  }
144  }
145 }