Merge lp:~cimi/unity8/shadow-ubuntu-store-icon into lp:unity8

[Andrea Cimitan]

Add shadows to ubuntu store icon

 * Are there any related MPs required for this MP to build/function as expected? Please list.
n
 * Did you perform an exploratory manual test run of your code change and any related functionality?
y
 * Did you make sure that your branch does not contain spurious tags?
y
 * If you changed the packaging (debian), did you subscribe the ubuntu-unity team to this MP?
n/a
 * If you changed the UI, has there been a design review?
noy yet

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1848
http://jenkins.qa.ubuntu.com/job/unity8-ci/6761/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/5301
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-xenial-touch/176/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests-vivid/1474/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-qmluitest-xenial-amd64/176
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-vivid-amd64-ci/1368
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-vivid-i386-ci/1369
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-xenial-amd64-ci/175
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-xenial-i386-ci/175
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-touch/4206
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/5321
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/5321/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/25348
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-xenial-touch/48/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-xenial-armhf/176
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-xenial-armhf/176/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/25347

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/6761/rebuild

review: Needs Fixing (continuous-integration)

[Albert Astals Cid (aacid)]

The code looks good, tested it and works fine, the CI failure seems unrelated..

I've retriggered another CI run though, will wait for it to top approve

 * Did you perform an exploratory manual test run of the code change and any related functionality?
Yes

 * Did CI run pass?
Waiting for re-run

 * Did you make sure that the branch does not contain spurious tags?
Yes

review: Approve

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1848
http://jenkins.qa.ubuntu.com/job/unity8-ci/6769/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/5314
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-xenial-touch/184/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests-vivid/1482
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/unity8-qmluitest-xenial-amd64/184
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-vivid-amd64-ci/1376
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-vivid-i386-ci/1377
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-xenial-amd64-ci/183
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-xenial-i386-ci/183
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-touch/4219
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/5334
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/5334/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/25397
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-xenial-touch/55/console
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-xenial-armhf/184
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-xenial-armhf/184/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/25399

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/6769/rebuild

review: Needs Fixing (continuous-integration)

[lp:~cimi/unity8/shadow-ubuntu-store-icon]

1849. By Andrea Cimitan on 2015-12-08

merged trunk

=== modified file 'debian/control'
--- debian/control	2015-11-26 13:51:24 +0000
+++ debian/control	2015-12-04 12:30:34 +0000
@@ -29,7 +29,7 @@
                libqt5xmlpatterns5-dev,
                libsystemsettings-dev,
                libudev-dev,
-               libunity-api-dev (>= 7.103),
+               libunity-api-dev (>= 7.104),
                libusermetricsoutput1-dev,
                libxcb1-dev,
                pkg-config,
@@ -131,7 +131,7 @@
          unity-application-impl-11,
          unity-notifications-impl-3,
          unity-plugin-scopes | unity-scopes-impl,
-         unity-scopes-impl-7,
+         unity-scopes-impl-9,
          unity8-fake-env | unity-application-impl,
          ${misc:Depends},
 Breaks: unity8 (<< 7.86),

=== added file 'plugins/Dash/AudioProgressBar.qml'
--- plugins/Dash/AudioProgressBar.qml	1970-01-01 00:00:00 +0000
+++ plugins/Dash/AudioProgressBar.qml	2015-12-04 12:30:34 +0000
@@ -0,0 +1,53 @@
+/*
+ * Copyright 2015 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+import Dash 0.1
+
+Item {
+    id: root
+
+    implicitHeight: progressBarImage.height
+
+    property url source
+    readonly property double progress: AudioUrlComparer.compare(source, DashAudioPlayer.currentSource) ? DashAudioPlayer.progress : 0
+
+    Image {
+        id: progressBarImage
+        anchors { left: parent.left; right: parent.right }
+        height: units.dp(6)
+        source: "graphics/music_progress_bg.png"
+        sourceSize.width: width
+        sourceSize.height: height
+    }
+
+    UbuntuShape {
+        id: progressBarFill
+        objectName: "progressBarFill"
+
+        readonly property int maxWidth: progressBarImage.width
+
+        anchors {
+            left: progressBarImage.left
+            right: progressBarImage.right
+            verticalCenter: progressBarImage.verticalCenter
+            rightMargin: maxWidth - (maxWidth * root.progress)
+        }
+        height: units.dp(2)
+        backgroundColor: UbuntuColors.orange
+    }
+}

=== modified file 'plugins/Dash/CMakeLists.txt'
--- plugins/Dash/CMakeLists.txt	2015-08-26 15:47:28 +0000
+++ plugins/Dash/CMakeLists.txt	2015-12-04 12:30:34 +0000
@@ -38,3 +38,6 @@
 qt5_use_modules(Dash-qml Qml Quick Concurrent)
 
 add_unity8_plugin(Dash 0.1 Dash TARGETS Dash-qml)
+
+install(FILES graphics/music_progress_bg.png DESTINATION ${SHELL_INSTALL_QML}/Dash/graphics/)
+file(COPY graphics/music_progress_bg.png DESTINATION ${CMAKE_CURRENT_BINARY_DIR}/graphics/)

=== added file 'plugins/Dash/CardAudioProgress.qml'
--- plugins/Dash/CardAudioProgress.qml	1970-01-01 00:00:00 +0000
+++ plugins/Dash/CardAudioProgress.qml	2015-12-04 12:30:34 +0000
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2015 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+import Ubuntu.Components 1.3
+import Dash 0.1
+
+Item {
+    id: root
+
+    implicitHeight: positionLabel.y + positionLabel.height
+    visible: AudioUrlComparer.compare(source, DashAudioPlayer.currentSource)
+
+    property int duration: 0
+    property alias source: progress.source
+    property color color: theme.palette.normal.baseText
+    readonly property int position: root.visible ? DashAudioPlayer.position / 1000 : 0
+
+    AudioProgressBar {
+        id: progress
+        anchors { left: parent.left; right: parent.right }
+    }
+
+    Label {
+        id: positionLabel
+        anchors {
+            left: parent.left
+            top: progress.bottom
+        }
+        verticalAlignment: Text.AlignBottom
+        fontSize: "x-small"
+        text: DashAudioPlayer.lengthToString(root.position)
+        color: root.color
+    }
+
+    Label {
+        anchors {
+            right: parent.right
+            top: progress.bottom
+        }
+        verticalAlignment: Text.AlignBottom
+        fontSize: "x-small"
+        text: DashAudioPlayer.lengthToString(duration)
+        color: root.color
+    }
+}

=== modified file 'plugins/Dash/CardCreator.js'
--- plugins/Dash/CardCreator.js	2015-11-19 16:55:31 +0000
+++ plugins/Dash/CardCreator.js	2015-12-04 12:30:34 +0000
@@ -28,6 +28,14 @@
                                 sourceComponent: UbuntuShape { \n\
                                     objectName: "background"; \n\
                                     radius: "medium"; \n\
+                                    aspect: { \n\
+                                        switch (root.backgroundShapeStyle) { \n\
+                                            case "inset": return UbuntuShape.Inset; \n\
+                                            case "shadow": return UbuntuShape.DropShadow; \n\
+                                            default: \n\
+                                            case "flat": return UbuntuShape.Flat; \n\
+                                        } \n\
+                                    } \n\
                                     backgroundColor: getColor(0) || "white"; \n\
                                     secondaryBackgroundColor: getColor(1) || backgroundColor; \n\
                                     backgroundMode: UbuntuShape.VerticalGradient; \n\
@@ -128,6 +136,43 @@
                             } \n\
                         }\n';
 
+// %1 is anchors.fill
+// %2 is width
+// %3 is height
+var kAudioButtonCode = 'AbstractButton { \n\
+                            id: audioButton; \n\
+                            anchors.fill: %1; \n\
+                            width: %2; \n\
+                            height: %3; \n\
+                            readonly property url source: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["uri"]) || ""; \n\
+                            UbuntuShape { \n\
+                                anchors.fill: parent; \n\
+                                visible: parent.pressed; \n\
+                                radius: "medium"; \n\
+                            } \n\
+                            Icon {  \n\
+                                anchors.fill: parent; \n\
+                                anchors.margins: parent.height > units.gu(5) ? units.gu(2) : 0; \n\
+                                opacity: 0.9; \n\
+                                name: DashAudioPlayer.playing && AudioUrlComparer.compare(parent.source, DashAudioPlayer.currentSource) ? "media-playback-pause" : "media-playback-start"; \n\
+                            } \n\
+                            onClicked: { \n\
+                                if (AudioUrlComparer.compare(source, DashAudioPlayer.currentSource)) { \n\
+                                    if (DashAudioPlayer.playing) { \n\
+                                        DashAudioPlayer.pause(); \n\
+                                    } else { \n\
+                                        DashAudioPlayer.play(); \n\
+                                    } \n\
+                                } else { \n\
+                                    var playlist = (cardData["quickPreviewData"] && cardData["quickPreviewData"]["playlist"]) || null; \n\
+                                    DashAudioPlayer.playSource(source, playlist); \n\
+                                } \n\
+                            } \n\
+                            onPressAndHold: { \n\
+                                root.pressAndHold(); \n\
+                            } \n\
+                        }';
+
 var kOverlayLoaderCode = 'Loader { \n\
                             id: overlayLoader; \n\
                             readonly property real overlayHeight: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2); \n\
@@ -308,6 +353,22 @@
                             color: %3; \n\
                         }\n';
 
+// %1 is used as bottom anchor of audio progress bar
+// %2 is used as left anchor of audio progress bar
+// %3 is used as text color
+var kAudioProgressBarCode = 'CardAudioProgress { \n\
+                            id: audioProgressBar; \n\
+                            duration: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["duration"]) || 0; \n\
+                            source: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["uri"]) || ""; \n\
+                            anchors { \n\
+                                bottom: %1; \n\
+                                left: %2; \n\
+                                right: parent.right; \n\
+                                margins: units.gu(1); \n\
+                            } \n\
+                            color: %3; \n\
+                         }';
+
 function cardString(template, components) {
     var code;
 
@@ -318,6 +379,7 @@
                 property var components; \n\
                 property var cardData; \n\
                 property string artShapeStyle: "inset"; \n\
+                property string backgroundShapeStyle: "inset"; \n\
                 property real fontScale: 1.0; \n\
                 property var scopeStyle: null; \n\
                 property int titleAlignment: Text.AlignLeft; \n\
@@ -342,7 +404,20 @@
     var headerAsOverlay = hasArt && template && template["overlay"] === true && (hasTitle || hasMascot);
     var hasSubtitle = hasTitle && components["subtitle"] || false;
     var hasHeaderRow = hasMascot && hasTitle;
-    var hasAttributes = hasTitle && components["attributes"]["field"] || false;
+    var hasAttributes = hasTitle && components["attributes"] && components["attributes"]["field"] || false;
+    var isAudio = template["quick-preview-type"] === "audio";
+
+    if (isAudio) {
+        // For now we only support audio cards with [optional] art, title, subtitle
+        // in horizontal mode
+        // Anything else makes it behave not like an audio card
+        if (hasSummary) isAudio = false;
+        if (!isHorizontal) isAudio = false;
+        if (hasMascot) isAudio = false;
+        if (hasEmblem) isAudio = false;
+        if (headerAsOverlay) isAudio = false;
+        if (hasAttributes) isAudio = false;
+    }
 
     if (hasBackground) {
         var templateCardBackground = (template && typeof template["card-background"] === "string") ? template["card-background"] :  "";
@@ -412,17 +487,22 @@
                                      topMargin: units.gu(1);\n';
         }
     }
+
     var headerLeftAnchor;
     var headerLeftAnchorHasMargin = false;
     if (isHorizontal && hasArt) {
         headerLeftAnchor = 'left: artShapeHolder.right; \n\
                             leftMargin: units.gu(1);\n';
         headerLeftAnchorHasMargin = true;
+    } else if (isHorizontal && isAudio) {
+        headerLeftAnchor = 'left: audioButton.right; \n\
+                            leftMargin: units.gu(1);\n';
+        headerLeftAnchorHasMargin = true;
     } else {
         headerLeftAnchor = 'left: parent.left;\n';
     }
 
-    var touchdownOnArtShape = !hasBackground && hasArt && !hasMascot && !hasSummary;
+    var touchdownOnArtShape = !hasBackground && hasArt && !hasMascot && !hasSummary && !isAudio;
 
     if (hasHeaderRow) {
         code += 'readonly property int headerHeight: row.height;\n'
@@ -436,6 +516,14 @@
         } else {
             code += 'readonly property int headerHeight: attributesRow.height;\n'
         }
+    } else if (isAudio) {
+        if (hasSubtitle) {
+            code += 'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin + audioProgressBar.height + audioProgressBar.anchors.topMargin;\n'
+        } else if (hasTitle) {
+            code += 'readonly property int headerHeight: titleLabel.height + audioProgressBar.height + audioProgressBar.anchors.topMargin;\n'
+        } else {
+            code += 'readonly property int headerHeight: audioProgressBar.height;\n'
+        }
     } else if (hasSubtitle) {
         code += 'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin;\n'
     } else if (hasTitle) {
@@ -623,6 +711,30 @@
         code += mascotShapeCode + mascotCode + titleSubtitleCode;
     }
 
+    if (isAudio) {
+        var audioProgressBarLeftAnchor = 'audioButton.right';
+        var audioProgressBarBottomAnchor = 'audioButton.bottom';
+        var audioProgressBarTextColor = 'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
+
+        code += kAudioProgressBarCode.arg(audioProgressBarBottomAnchor)
+                                     .arg(audioProgressBarLeftAnchor)
+                                     .arg(audioProgressBarTextColor);
+
+        var audioButtonAnchorsFill;
+        var audioButtonWidth;
+        var audioButtonHeight;
+        if (hasArt) {
+            audioButtonAnchorsFill = 'artShapeHolder';
+            audioButtonWidth = 'undefined';
+            audioButtonHeight = 'undefined';
+        } else {
+            audioButtonAnchorsFill = 'undefined';
+            audioButtonWidth = 'height';
+            audioButtonHeight = '(root.fixedHeaderHeight > 0 ? root.fixedHeaderHeight : headerHeight) + 2 * units.gu(1)';
+        }
+        code += kAudioButtonCode.arg(audioButtonAnchorsFill).arg(audioButtonWidth).arg(audioButtonHeight);
+    }
+
     if (hasSummary) {
         var summaryTopAnchor;
         if (isHorizontal && hasArt) summaryTopAnchor = 'artShapeHolder.bottom';
@@ -661,6 +773,8 @@
     var implicitHeight = 'implicitHeight: ';
     if (hasSummary) {
         implicitHeight += 'summary.y + summary.height + units.gu(1);\n';
+    } else if (isAudio) {
+        implicitHeight += 'audioButton.height;\n';
     } else if (headerAsOverlay) {
         implicitHeight += 'artShapeHolder.height;\n';
     } else if (hasHeaderRow) {

=== added file 'plugins/Dash/DashAudioPlayer.qml'
--- plugins/Dash/DashAudioPlayer.qml	1970-01-01 00:00:00 +0000
+++ plugins/Dash/DashAudioPlayer.qml	2015-12-04 12:30:34 +0000
@@ -0,0 +1,96 @@
+/*
+ * Copyright (C) 2015 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+pragma Singleton
+import QtQuick 2.4
+import QtMultimedia 5.4
+import Dash 0.1
+
+QtObject {
+    readonly property real progress: audio.position / audio.duration
+    readonly property bool playing: audio.playbackState === Audio.PlayingState
+    readonly property bool paused: audio.playbackState === Audio.PausedState
+    readonly property bool stopped: audio.playbackState === Audio.StoppedState
+    readonly property alias position: audio.position
+    readonly property url currentSource: audio.playlist.currentItemSource
+
+    function playSource(newSource, newPlaylist) {
+        stop();
+        audio.playlist.clear();
+        if (newPlaylist) {
+            // Look for newSource in newPlaylist
+            var sourceIndex = -1;
+            for (var i in newPlaylist) {
+                if (AudioUrlComparer.compare(newSource, newPlaylist[i])) {
+                    sourceIndex = i;
+                    break;
+                }
+            }
+            var urls = [];
+            if (sourceIndex === -1 && newSource != "") {
+                // If the playing song is not in the playlist, add it
+                urls.push(newSource);
+                sourceIndex = 0;
+            }
+            for (var i in newPlaylist) {
+                urls.push(newPlaylist[i]);
+            }
+            audio.playlist.addItems(urls);
+            audio.playlist.currentIndex = sourceIndex;
+        } else {
+            audio.playlist.addItem(newSource);
+            audio.playlist.currentIndex = 0;
+        }
+        play();
+    }
+
+    function stop() {
+        audio.stop();
+    }
+
+    function play() {
+        audio.play();
+    }
+
+    function pause() {
+        audio.pause();
+    }
+
+    property QtObject audio: Audio {
+        id: audio
+        objectName: "audio"
+        playlist: Playlist {
+            objectName: "playlist"
+        }
+
+        onErrorStringChanged: console.warn("Dash Audio player error:", errorString)
+    }
+
+    function lengthToString(s) {
+        if (typeof(s) !== "number" || s < 0) return "";
+
+        var sec = "" + s % 60;
+        if (sec.length == 1) sec = "0" + sec;
+        var hour = Math.floor(s / 3600);
+        if (hour < 1) {
+            return Math.floor(s / 60) + ":" + sec;
+        } else {
+            var min = "" + Math.floor(s / 60) % 60;
+            if (min.length == 1) min = "0" + min;
+            return hour + ":" + min + ":" + sec;
+        }
+    }
+}

=== added directory 'plugins/Dash/graphics'
=== renamed file 'qml/Dash/Previews/graphics/music_progress_bg.png' => 'plugins/Dash/graphics/music_progress_bg.png'
Binary files qml/Dash/Previews/graphics/music_progress_bg.png	2013-11-13 14:40:58 +0000 and plugins/Dash/graphics/music_progress_bg.png	2015-12-04 12:30:34 +0000 differ
=== modified file 'plugins/Dash/plugin.cpp'
--- plugins/Dash/plugin.cpp	2015-08-26 15:47:28 +0000
+++ plugins/Dash/plugin.cpp	2015-12-04 12:30:34 +0000
@@ -23,6 +23,38 @@
 #include "verticaljournal.h"
 
 #include <QAbstractItemModel>
+#include <QUrlQuery>
+
+static QUrl oauthCleanedUrl(QUrl u)
+{
+    QUrlQuery q(u);
+    q.removeQueryItem("oauth_nonce");
+    q.removeQueryItem("oauth_timestamp");
+    q.removeQueryItem("oauth_consumer_key");
+    q.removeQueryItem("oauth_signature_method");
+    q.removeQueryItem("oauth_version");
+    q.removeQueryItem("oauth_signature");
+    u.setQuery(q);
+    return u;
+}
+
+class AudioComparer : public QObject
+{
+    Q_OBJECT
+public:
+    Q_INVOKABLE bool compare(const QUrl &url1, const QUrl &url2)
+    {
+        return oauthCleanedUrl(url1) == oauthCleanedUrl(url2);
+    }
+};
+
+static QObject *audio_comparer_singleton_provider(QQmlEngine *engine, QJSEngine *scriptEngine)
+{
+    Q_UNUSED(engine)
+    Q_UNUSED(scriptEngine)
+
+    return new AudioComparer();
+}
 
 void DashPlugin::registerTypes(const char *uri)
 {
@@ -32,4 +64,7 @@
     qmlRegisterType<ListViewWithPageHeader>(uri, 0, 1, "ListViewWithPageHeader");
     qmlRegisterType<OrganicGrid>(uri, 0, 1, "OrganicGrid");
     qmlRegisterType<VerticalJournal>(uri, 0, 1, "VerticalJournal");
+    qmlRegisterSingletonType<AudioComparer>(uri, 0, 1, "AudioUrlComparer", audio_comparer_singleton_provider);
 }
+
+#include "plugin.moc"

=== modified file 'plugins/Dash/qmldir'
--- plugins/Dash/qmldir	2014-08-25 08:25:54 +0000
+++ plugins/Dash/qmldir	2015-12-04 12:30:34 +0000
@@ -2,6 +2,9 @@
 plugin Dash-qml
 typeinfo Dash.qmltypes
 singleton CardCreatorCache 0.1 CardCreatorCache.qml
+singleton DashAudioPlayer 0.1 DashAudioPlayer.qml
 ScopeStyle 0.1 ScopeStyle.qml
 CardAttributes 0.1 CardAttributes.qml
 CroppedImageMinimumSourceSize 0.1 CroppedImageMinimumSourceSize.qml
+AudioProgressBar 0.1 AudioProgressBar.qml
+CardAudioProgress 0.1 CardAudioProgress.qml

=== modified file 'qml/Dash/CardGrid.qml'
--- qml/Dash/CardGrid.qml	2015-11-20 15:36:42 +0000
+++ qml/Dash/CardGrid.qml	2015-12-04 12:30:34 +0000
@@ -25,6 +25,7 @@
         return cardTool.template["collapsed-rows"];
     }
     property string artShapeStyle: "inset";
+    property string backgroundShapeStyle: "inset";
 
     expandedHeight: grid.totalContentHeight
     collapsedHeight: Math.min(grid.contentHeightForRows(collapsedRows, grid.cellHeight), expandedHeight)
@@ -71,6 +72,7 @@
                     item.titleAlignment = Qt.binding(function() { return cardTool.titleAlignment; });
                     item.scopeStyle = root.scopeStyle;
                     item.artShapeStyle = root.artShapeStyle;
+                    item.backgroundShapeStyle = root.backgroundShapeStyle;
                 }
                 Connections {
                     target: loader.item

=== modified file 'qml/Dash/GenericScopeView.qml'
--- qml/Dash/GenericScopeView.qml	2015-11-20 15:36:42 +0000
+++ qml/Dash/GenericScopeView.qml	2015-12-04 12:30:34 +0000
@@ -360,17 +360,23 @@
                         baseItem.expand(shouldExpand, false /*animate*/);
                     }
                     updateRanges();
-                    if (scope && scope.id === "clickscope" && (categoryId === "predefined" || categoryId === "local")) {
-                        // Yeah, hackish :/
-                        if (scopeView.width > units.gu(45)) {
-                            if (scopeView.width >= units.gu(70)) {
-                                cardTool.cardWidth = units.gu(9);
-                            } else {
-                                cardTool.cardWidth = units.gu(10);
+                    if (scope && scope.id === "clickscope") {
+                        if (categoryId === "predefined" || categoryId === "local") {
+                            // Yeah, hackish :/
+                            if (scopeView.width > units.gu(45)) {
+                                if (scopeView.width >= units.gu(70)) {
+                                    cardTool.cardWidth = units.gu(9);
+                                } else {
+                                    cardTool.cardWidth = units.gu(10);
+                                }
                             }
+                            cardTool.artShapeSize = Qt.size(units.gu(8), units.gu(7.5));
+                            item.artShapeStyle = "icon";
+                        } else {
+                            // Should be ubuntu store icon
+                            item.artShapeStyle = "flat";
+                            item.backgroundShapeStyle = "shadow";
                         }
-                        cardTool.artShapeSize = Qt.size(units.gu(8), units.gu(7.5));
-                        item.artShapeStyle = "icon";
                     }
                     item.cardTool = cardTool;
                 }

=== modified file 'qml/Dash/Previews/PreviewAudioPlayback.qml'
--- qml/Dash/Previews/PreviewAudioPlayback.qml	2015-11-04 14:57:13 +0000
+++ qml/Dash/Previews/PreviewAudioPlayback.qml	2015-12-04 12:30:34 +0000
@@ -15,8 +15,8 @@
  */
 
 import QtQuick 2.4
-import QtMultimedia 5.0
 import Ubuntu.Components 1.3
+import Dash 0.1
 
 /*! \brief Preview widget for audio tracks.
 
@@ -36,38 +36,6 @@
     id: root
     implicitHeight: childrenRect.height
 
-    onIsCurrentPreviewChanged: if (!isCurrentPreview) audio.stop()
-
-    Audio {
-        id: audio
-        objectName: "audio"
-
-        property real progress: audio.position / audio.duration
-        property Item playingItem
-
-        Component.onDestruction: {
-            // destroying the component doesn't automatically send stop to the media service, probably a bug in QtMultimedia
-            audio.stop();
-        }
-
-        onErrorStringChanged: console.warn("Audio player error:", errorString)
-
-        function lengthToString(s) {
-            if (typeof(s) !== "number" || s <= 0) return "";
-
-            var sec = "" + s % 60;
-            if (sec.length == 1) sec = "0" + sec;
-            var hour = Math.floor(s / 3600);
-            if (hour < 1) {
-                return Math.floor(s / 60) + ":" + sec;
-            } else {
-                var min = "" + Math.floor(s / 60) % 60;
-                if (min.length == 1) min = "0" + min;
-                return hour + ":" + min + ":" + sec;
-            }
-        }
-    }
-
     Column {
         anchors { left: parent.left; right: parent.right }
         visible: trackRepeater.count > 0
@@ -77,20 +45,12 @@
             objectName: "trackRepeater"
             model: root.widgetData["tracks"]
 
-            function play(item, source) {
-                audio.stop();
-                // Make sure we change the source, even if two items point to the same uri location
-                audio.source = "";
-                audio.source = source;
-                audio.playingItem = item;
-                audio.play();
-            }
-
             delegate: Item {
                 id: trackItem
                 objectName: "trackItem" + index
 
-                property bool isPlayingItem: audio.playingItem == trackItem
+                readonly property url sourceUrl: modelData["source"]
+                readonly property bool isPlayingItem: AudioUrlComparer.compare(sourceUrl, DashAudioPlayer.currentSource)
 
                 anchors { left: parent.left; right: parent.right }
                 height: units.gu(5)
@@ -98,9 +58,9 @@
                 Row {
                     id: trackRow
 
-                    property int column1Width: units.gu(3)
-                    property int column2Width: width - (2 * spacing) - column1Width - column3Width
-                    property int column3Width: units.gu(4)
+                    readonly property int column1Width: units.gu(3)
+                    readonly property int column2Width: width - (2 * spacing) - column1Width - column3Width
+                    readonly property int column3Width: units.gu(4)
 
                     anchors.verticalCenter: parent.verticalCenter
                     width: parent.width
@@ -110,7 +70,7 @@
                         objectName: "playButton"
                         width: trackRow.column1Width
                         height: width
-                        iconSource: audio.playbackState == Audio.PlayingState && trackItem.isPlayingItem ? "image://theme/media-playback-pause" : "image://theme/media-playback-start"
+                        iconSource: DashAudioPlayer.playing && trackItem.isPlayingItem ? "image://theme/media-playback-pause" : "image://theme/media-playback-start"
 
                         // Can't be "transparent" or "#00xxxxxx" as the button optimizes away the surrounding shape
                         // FIXME when this is resolved: https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1251685
@@ -118,13 +78,13 @@
 
                         onClicked: {
                             if (trackItem.isPlayingItem) {
-                                if (audio.playbackState == Audio.PlayingState) {
-                                    audio.pause();
-                                } else if (audio.playbackState == Audio.PausedState) {
-                                    audio.play();
+                                if (DashAudioPlayer.playing) {
+                                    DashAudioPlayer.pause();
+                                } else if (DashAudioPlayer.paused) {
+                                    DashAudioPlayer.play();
                                 }
                             } else {
-                                trackRepeater.play(trackItem, modelData["source"]);
+                                DashAudioPlayer.playSource(sourceUrl);
                             }
                         }
                     }
@@ -160,30 +120,10 @@
                             elide: Text.ElideRight
                         }
 
-                        UbuntuShape {
-                            id: progressBarFill
-                            objectName: "progressBarFill"
-
-                            property int maxWidth: progressBarImage.width - units.dp(4)
-
-                            anchors {
-                                left: progressBarImage.left
-                                right: progressBarImage.right
-                                verticalCenter: progressBarImage.verticalCenter
-                                margins: units.dp(2)
-                                rightMargin: maxWidth - (maxWidth * audio.progress) + units.dp(2)
-                            }
-                            height: units.dp(2)
-                            visible: progressBarImage.visible
-                            backgroundColor: UbuntuColors.orange
-                        }
-
-                        Image {
-                            id: progressBarImage
+                        AudioProgressBar {
                             anchors { left: parent.left; top: parent.bottom; right: parent.right }
-                            height: units.dp(6)
-                            visible: audio.playbackState != Audio.StoppedState && trackItem.isPlayingItem && modelData["length"] > 0
-                            source: "graphics/music_progress_bg.png"
+                            visible: !DashAudioPlayer.stopped && trackItem.isPlayingItem && modelData["length"] > 0
+                            source: sourceUrl
                         }
                     }
 
@@ -196,7 +136,7 @@
                         color: scopeStyle ? scopeStyle.foreground : theme.palette.normal.baseText
                         fontSize: "small"
                         horizontalAlignment: Text.AlignRight
-                        text: audio.lengthToString(modelData["length"])
+                        text: DashAudioPlayer.lengthToString(modelData["length"])
                     }
                 }
             }

=== modified file 'tests/mocks/QtMultimedia/CMakeLists.txt'
--- tests/mocks/QtMultimedia/CMakeLists.txt	2014-05-02 22:57:21 +0000
+++ tests/mocks/QtMultimedia/CMakeLists.txt	2015-12-04 12:30:34 +0000
@@ -1,6 +1,7 @@
 add_library(QtMultimedia-qml MODULE
     plugin.cpp
     audio.cpp
+    declarativeplaylist.cpp
     )
 
 qt5_use_modules(QtMultimedia-qml Qml)

=== modified file 'tests/mocks/QtMultimedia/audio.cpp'
--- tests/mocks/QtMultimedia/audio.cpp	2015-08-19 13:56:21 +0000
+++ tests/mocks/QtMultimedia/audio.cpp	2015-12-04 12:30:34 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2013 Canonical, Ltd.
+ * Copyright (C) 2013, 2015 Canonical, Ltd.
  *
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -20,30 +20,18 @@
 
 Audio::Audio(QObject* parent):
     QObject(parent),
-    m_playbackState(StoppedState)
+    m_playbackState(StoppedState),
+    m_playlist(0)
 {
     qsrand(time(nullptr));
     m_timer.setInterval(1000);
     connect(&m_timer, &QTimer::timeout, this, &Audio::timerEvent);
-}
-
-QUrl Audio::source() const
-{
-    return m_source;
-}
-
-void Audio::setSource(const QUrl &source)
-{
-    if (m_source != source) {
-        m_source = source;
-        Q_EMIT sourceChanged(source);
-
-        m_position = 0;
-        Q_EMIT positionChanged(m_position);
-
-        m_duration = (qrand() % 20000) + 10000;
-        Q_EMIT durationChanged(m_duration);
-    }
+
+    m_position = 0;
+    Q_EMIT positionChanged(m_position);
+
+    m_duration = (qrand() % 20000) + 10000;
+    Q_EMIT durationChanged(m_duration);
 }
 
 Audio::PlaybackState Audio::playbackState() const
@@ -115,3 +103,17 @@
 {
     Q_UNUSED(audioRole);
 }
+
+DeclarativePlaylist *Audio::playlist() const
+{
+    return m_playlist;
+}
+
+void Audio::setPlaylist(DeclarativePlaylist *playlist)
+{
+    if (playlist == m_playlist)
+        return;
+
+    m_playlist = playlist;
+    Q_EMIT playlistChanged();
+}

=== modified file 'tests/mocks/QtMultimedia/audio.h'
--- tests/mocks/QtMultimedia/audio.h	2015-06-08 11:37:27 +0000
+++ tests/mocks/QtMultimedia/audio.h	2015-12-04 12:30:34 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2012,2013 Canonical, Ltd.
+ * Copyright (C) 2012, 2013, 2015 Canonical, Ltd.
  *
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -13,7 +13,6 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
- * Authors: Michael Zanetti <[e-mail]>
  */
 
 #ifndef MOCK_AUDIO_H
@@ -23,17 +22,19 @@
 #include <QUrl>
 #include <QTimer>
 
+class DeclarativePlaylist;
+
 class Audio: public QObject
 {
     Q_OBJECT
     Q_ENUMS(PlaybackState)
     Q_ENUMS(AudioRole)
-    Q_PROPERTY(QUrl source READ source WRITE setSource NOTIFY sourceChanged)
     Q_PROPERTY(PlaybackState playbackState READ playbackState NOTIFY playbackStateChanged)
     Q_PROPERTY(int position READ position NOTIFY positionChanged)
     Q_PROPERTY(int duration READ duration NOTIFY durationChanged)
     Q_PROPERTY(QString errorString READ errorString NOTIFY errorStringChanged)
     Q_PROPERTY(AudioRole audioRole READ audioRole WRITE setAudioRole)
+    Q_PROPERTY(DeclarativePlaylist *playlist READ playlist WRITE setPlaylist NOTIFY playlistChanged)
 public:
     enum PlaybackState {
         PlayingState,
@@ -50,8 +51,8 @@
 
     explicit Audio(QObject *parent = 0);
 
-    QUrl source() const;
-    void setSource(const QUrl &source);
+    DeclarativePlaylist *playlist() const;
+    void setPlaylist(DeclarativePlaylist *playlist);
 
     PlaybackState playbackState() const;
 
@@ -70,6 +71,7 @@
     void stop();
 
 Q_SIGNALS:
+    void playlistChanged();
     void sourceChanged(const QUrl &source);
     void playbackStateChanged(PlaybackState playbackState);
     void positionChanged(int position);
@@ -80,11 +82,11 @@
     void timerEvent();
 
 private:
-    QUrl m_source;
     PlaybackState m_playbackState;
     QTimer m_timer;
     int m_position;
     int m_duration;
+    DeclarativePlaylist *m_playlist;
 };
 
 #endif

=== added file 'tests/mocks/QtMultimedia/declarativeplaylist.cpp'
--- tests/mocks/QtMultimedia/declarativeplaylist.cpp	1970-01-01 00:00:00 +0000
+++ tests/mocks/QtMultimedia/declarativeplaylist.cpp	2015-12-04 12:30:34 +0000
@@ -0,0 +1,73 @@
+/*
+ * Copyright (C) 2015 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+#include "declarativeplaylist.h"
+
+DeclarativePlaylist::DeclarativePlaylist(QObject *parent)
+    : QObject(parent)
+    , m_currentIndex(-1)
+{
+}
+
+QUrl DeclarativePlaylist::currentItemSource() const
+{
+    return itemSource(currentIndex());
+}
+
+int DeclarativePlaylist::currentIndex() const
+{
+    return m_currentIndex;
+}
+
+void DeclarativePlaylist::setCurrentIndex(int index)
+{
+    if (currentIndex() == index)
+        return;
+
+    m_currentIndex = index;
+    Q_EMIT currentIndexChanged();
+    Q_EMIT currentItemSourceChanged();
+}
+
+QUrl DeclarativePlaylist::itemSource(int index) const
+{
+    if (index < 0 || index >= m_medias.count())
+        return QUrl();
+    return m_medias[index];
+}
+
+bool DeclarativePlaylist::addItem(const QUrl &source)
+{
+    m_medias << source;
+    setCurrentIndex(0);
+    return true;
+}
+
+bool DeclarativePlaylist::addItems(const QList<QUrl> &sources)
+{
+    m_medias << sources;
+    if (!sources.isEmpty())
+        setCurrentIndex(0);
+    return true;
+}
+
+bool DeclarativePlaylist::clear()
+{
+    m_medias.clear();
+    setCurrentIndex(-1);
+    return true;
+}

=== added file 'tests/mocks/QtMultimedia/declarativeplaylist.h'
--- tests/mocks/QtMultimedia/declarativeplaylist.h	1970-01-01 00:00:00 +0000
+++ tests/mocks/QtMultimedia/declarativeplaylist.h	2015-12-04 12:30:34 +0000
@@ -0,0 +1,54 @@
+/*
+ * Copyright (C) 2015 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+#ifndef DECLARATIVEPLAYLIST_H
+#define DECLARATIVEPLAYLIST_H
+
+#include <QObject>
+#include <QUrl>
+
+class DeclarativePlaylist : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(QUrl currentItemSource READ currentItemSource NOTIFY currentItemSourceChanged)
+    Q_PROPERTY(int currentIndex READ currentIndex WRITE setCurrentIndex NOTIFY currentIndexChanged)
+
+public:
+    DeclarativePlaylist(QObject *parent = 0);
+
+    QUrl currentItemSource() const;
+    int currentIndex() const;
+    void setCurrentIndex(int currentIndex);
+
+public Q_SLOTS:
+    QUrl itemSource(int index) const;
+    bool addItem(const QUrl &source);
+    bool addItems(const QList<QUrl> &sources);
+    bool clear();
+
+Q_SIGNALS:
+    void currentItemSourceChanged();
+    void currentIndexChanged();
+
+private:
+    Q_DISABLE_COPY(DeclarativePlaylist)
+
+    int m_currentIndex;
+    QList<QUrl> m_medias;
+};
+
+#endif

=== modified file 'tests/mocks/QtMultimedia/plugin.cpp'
--- tests/mocks/QtMultimedia/plugin.cpp	2015-06-08 11:37:27 +0000
+++ tests/mocks/QtMultimedia/plugin.cpp	2015-12-04 12:30:34 +0000
@@ -18,6 +18,7 @@
 
 #include "plugin.h"
 #include "audio.h"
+#include "declarativeplaylist.h"
 
 #include <QtQml/qqml.h>
 
@@ -26,4 +27,5 @@
     Q_ASSERT(uri == QLatin1String("QtMultimedia"));
     qmlRegisterType<Audio>(uri, 5, 0, "Audio");
     qmlRegisterType<Audio>(uri, 5, 0, "MediaPlayer");
+    qmlRegisterType<DeclarativePlaylist>(uri, 5, 4, "Playlist");
 }

=== modified file 'tests/mocks/Unity/CMakeLists.txt'
--- tests/mocks/Unity/CMakeLists.txt	2015-10-14 09:23:16 +0000
+++ tests/mocks/Unity/CMakeLists.txt	2015-12-04 12:30:34 +0000
@@ -7,7 +7,7 @@
 add_subdirectory(DashCommunicator)
 
 pkg_search_module(GOBJECT gobject-2.0 REQUIRED)
-pkg_check_modules(SCOPES_API REQUIRED unity-shell-scopes=8)
+pkg_check_modules(SCOPES_API REQUIRED unity-shell-scopes=9)
 
 include_directories(
   ${CMAKE_CURRENT_BINARY_DIR}

=== modified file 'tests/plugins/Dash/cardcreator/1.res'
--- tests/plugins/Dash/cardcreator/1.res	2015-10-23 10:16:09 +0000
+++ tests/plugins/Dash/cardcreator/1.res	2015-12-04 12:30:34 +0000
@@ -3,6 +3,7 @@
                 property var components; 
                 property var cardData; 
                 property string artShapeStyle: "inset"; 
+                property string backgroundShapeStyle: "inset"; 
                 property real fontScale: 1.0; 
                 property var scopeStyle: null; 
                 property int titleAlignment: Text.AlignLeft; 

=== modified file 'tests/plugins/Dash/cardcreator/2.res'
--- tests/plugins/Dash/cardcreator/2.res	2015-08-24 15:00:19 +0000
+++ tests/plugins/Dash/cardcreator/2.res	2015-12-04 12:30:34 +0000
@@ -3,6 +3,7 @@
                 property var components; 
                 property var cardData; 
                 property string artShapeStyle: "inset"; 
+                property string backgroundShapeStyle: "inset"; 
                 property real fontScale: 1.0; 
                 property var scopeStyle: null; 
                 property int titleAlignment: Text.AlignLeft; 
@@ -23,6 +24,14 @@
                                 sourceComponent: UbuntuShape { 
                                     objectName: "background"; 
                                     radius: "medium"; 
+                                    aspect: { 
+                                        switch (root.backgroundShapeStyle) { 
+                                            case "inset": return UbuntuShape.Inset; 
+                                            case "shadow": return UbuntuShape.DropShadow; 
+                                            default: 
+                                            case "flat": return UbuntuShape.Flat; 
+                                        } 
+                                    } 
                                     backgroundColor: getColor(0) || "white"; 
                                     secondaryBackgroundColor: getColor(1) || backgroundColor; 
                                     backgroundMode: UbuntuShape.VerticalGradient;

=== modified file 'tests/plugins/Dash/cardcreator/3.res'
--- tests/plugins/Dash/cardcreator/3.res	2015-10-23 10:16:09 +0000
+++ tests/plugins/Dash/cardcreator/3.res	2015-12-04 12:30:34 +0000
@@ -3,6 +3,7 @@
                 property var components; 
                 property var cardData; 
                 property string artShapeStyle: "inset"; 
+                property string backgroundShapeStyle: "inset"; 
                 property real fontScale: 1.0; 
                 property var scopeStyle: null; 
                 property int titleAlignment: Text.AlignLeft; 

=== modified file 'tests/plugins/Dash/cardcreator/4.res'
--- tests/plugins/Dash/cardcreator/4.res	2015-10-23 10:16:09 +0000
+++ tests/plugins/Dash/cardcreator/4.res	2015-12-04 12:30:34 +0000
@@ -3,6 +3,7 @@
                 property var components; 
                 property var cardData; 
                 property string artShapeStyle: "inset"; 
+                property string backgroundShapeStyle: "inset"; 
                 property real fontScale: 1.0; 
                 property var scopeStyle: null;
                 property int titleAlignment: Text.AlignLeft;

=== modified file 'tests/plugins/Dash/cardcreator/5.res'
--- tests/plugins/Dash/cardcreator/5.res	2015-10-23 10:16:09 +0000
+++ tests/plugins/Dash/cardcreator/5.res	2015-12-04 12:30:34 +0000
@@ -3,6 +3,7 @@
                 property var components; 
                 property var cardData; 
                 property string artShapeStyle: "inset"; 
+                property string backgroundShapeStyle: "inset"; 
                 property real fontScale: 1.0; 
                 property var scopeStyle: null; 
                 property int titleAlignment: Text.AlignLeft; 

=== modified file 'tests/plugins/Dash/cardcreator/6.res'
--- tests/plugins/Dash/cardcreator/6.res	2015-08-24 15:00:19 +0000
+++ tests/plugins/Dash/cardcreator/6.res	2015-12-04 12:30:34 +0000
@@ -3,6 +3,7 @@
                 property var components;
                 property var cardData;
                 property string artShapeStyle: "inset"; 
+                property string backgroundShapeStyle: "inset"; 
                 property real fontScale: 1.0;
                 property var scopeStyle: null;
                 property int titleAlignment: Text.AlignLeft;
@@ -23,6 +24,14 @@
                                 sourceComponent: UbuntuShape { 
                                     objectName: "background"; 
                                     radius: "medium"; 
+                                    aspect: { 
+                                        switch (root.backgroundShapeStyle) { 
+                                            case "inset": return UbuntuShape.Inset; 
+                                            case "shadow": return UbuntuShape.DropShadow; 
+                                            default: 
+                                            case "flat": return UbuntuShape.Flat; 
+                                        } 
+                                    } 
                                     backgroundColor: getColor(0) || "white"; 
                                     secondaryBackgroundColor: getColor(1) || backgroundColor; 
                                     backgroundMode: UbuntuShape.VerticalGradient;

=== modified file 'tests/plugins/Dash/cardcreator/7.res'
--- tests/plugins/Dash/cardcreator/7.res	2015-08-24 15:00:19 +0000
+++ tests/plugins/Dash/cardcreator/7.res	2015-12-04 12:30:34 +0000
@@ -3,6 +3,7 @@
                 property var components; 
                 property var cardData; 
                 property string artShapeStyle: "inset"; 
+                property string backgroundShapeStyle: "inset"; 
                 property real fontScale: 1.0; 
                 property var scopeStyle: null; 
                 property int titleAlignment: Text.AlignLeft; 
@@ -23,6 +24,14 @@
                                 sourceComponent: UbuntuShape { 
                                     objectName: "background"; 
                                     radius: "medium"; 
+                                    aspect: { 
+                                        switch (root.backgroundShapeStyle) { 
+                                            case "inset": return UbuntuShape.Inset; 
+                                            case "shadow": return UbuntuShape.DropShadow; 
+                                            default: 
+                                            case "flat": return UbuntuShape.Flat; 
+                                        } 
+                                    } 
                                     backgroundColor: getColor(0) || "white"; 
                                     secondaryBackgroundColor: getColor(1) || backgroundColor; 
                                     backgroundMode: UbuntuShape.VerticalGradient;

=== modified file 'tests/plugins/Dash/cardcreator/8.res'
--- tests/plugins/Dash/cardcreator/8.res	2015-08-24 15:00:19 +0000
+++ tests/plugins/Dash/cardcreator/8.res	2015-12-04 12:30:34 +0000
@@ -3,6 +3,7 @@
                 property var components; 
                 property var cardData; 
                 property string artShapeStyle: "inset"; 
+                property string backgroundShapeStyle: "inset"; 
                 property real fontScale: 1.0; 
                 property var scopeStyle: null; 
                 property int titleAlignment: Text.AlignLeft; 
@@ -23,6 +24,14 @@
                                 sourceComponent: UbuntuShape { 
                                     objectName: "background"; 
                                     radius: "medium"; 
+                                    aspect: { 
+                                        switch (root.backgroundShapeStyle) { 
+                                            case "inset": return UbuntuShape.Inset; 
+                                            case "shadow": return UbuntuShape.DropShadow; 
+                                            default: 
+                                            case "flat": return UbuntuShape.Flat; 
+                                        } 
+                                    } 
                                     backgroundColor: getColor(0) || "white"; 
                                     secondaryBackgroundColor: getColor(1) || backgroundColor; 
                                     backgroundMode: UbuntuShape.VerticalGradient;

=== added file 'tests/plugins/Dash/cardcreator/9.res'
--- tests/plugins/Dash/cardcreator/9.res	1970-01-01 00:00:00 +0000
+++ tests/plugins/Dash/cardcreator/9.res	2015-12-04 12:30:34 +0000
@@ -0,0 +1,113 @@
+AbstractButton { 
+                id: root; 
+                property var components; 
+                property var cardData; 
+                property string artShapeStyle: "inset"; 
+                property string backgroundShapeStyle: "inset"; 
+                property real fontScale: 1.0; 
+                property var scopeStyle: null; 
+                property int titleAlignment: Text.AlignLeft; 
+                property int fixedHeaderHeight: -1; 
+                property size fixedArtShapeSize: Qt.size(-1, -1); 
+                readonly property string title: cardData && cardData["title"] || ""; 
+                property bool asynchronous: true; 
+                property bool showHeader: true; 
+                implicitWidth: childrenRect.width; 
+                enabled: true; 
+                
+readonly property size artShapeSize: Qt.size(-1, -1);
+readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin + audioProgressBar.height + audioProgressBar.anchors.topMargin;
+Label { 
+                        id: titleLabel; 
+                        objectName: "titleLabel"; 
+                        anchors { right: parent.right; 
+rightMargin: units.gu(1); 
+left: audioButton.right; 
+                            leftMargin: units.gu(1);
+top: parent.top; 
+                                     topMargin: units.gu(1);
+ } 
+                        elide: Text.ElideRight; 
+                        fontSize: "small"; 
+                        wrapMode: Text.Wrap; 
+                        maximumLineCount: 2; 
+                        font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); 
+                        color: root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText; 
+                        visible: showHeader ; 
+                        width: undefined; 
+                        text: root.title; 
+                        font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal; 
+                        horizontalAlignment: root.titleAlignment; 
+                    }
+Label { 
+                            id: subtitleLabel; 
+                            objectName: "subtitleLabel"; 
+                            anchors { left: titleLabel.left; 
+                               leftMargin: titleLabel.leftMargin; 
+rightMargin: units.gu(1); 
+right: titleLabel.right; 
+top: titleLabel.bottom;
+ } 
+                            anchors.topMargin: units.dp(2); 
+                            elide: Text.ElideRight; 
+                            maximumLineCount: 1; 
+                            fontSize: "x-small"; 
+                            font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); 
+                            color: root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText; 
+                            visible: titleLabel.visible && titleLabel.text; 
+                            text: cardData && cardData["subtitle"] || ""; 
+                            font.weight: Font.Light; 
+                        }
+CardAudioProgress { 
+                            id: audioProgressBar; 
+                            duration: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["duration"]) || 0; 
+                            source: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["uri"]) || ""; 
+                            anchors { 
+                                bottom: audioButton.bottom; 
+                                left: audioButton.right; 
+                                right: parent.right; 
+                                margins: units.gu(1); 
+                            } 
+                            color: root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText; 
+                         }AbstractButton { 
+                            id: audioButton; 
+                            anchors.fill: undefined; 
+                            width: height; 
+                            height: (root.fixedHeaderHeight > 0 ? root.fixedHeaderHeight : headerHeight) + 2 * units.gu(1); 
+                            readonly property url source: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["uri"]) || ""; 
+                            UbuntuShape { 
+                                anchors.fill: parent; 
+                                visible: parent.pressed; 
+                                radius: "medium"; 
+                            } 
+                            Icon {  
+                                anchors.fill: parent; 
+                                anchors.margins: parent.height > units.gu(5) ? units.gu(2) : 0; 
+                                opacity: 0.9; 
+                                name: DashAudioPlayer.playing && AudioUrlComparer.compare(parent.source, DashAudioPlayer.currentSource) ? "media-playback-pause" : "media-playback-start"; 
+                            } 
+                            onClicked: { 
+                                if (AudioUrlComparer.compare(source, DashAudioPlayer.currentSource)) { 
+                                    if (DashAudioPlayer.playing) { 
+                                        DashAudioPlayer.pause(); 
+                                    } else { 
+                                        DashAudioPlayer.play(); 
+                                    } 
+                                } else { 
+                                    var playlist = (cardData["quickPreviewData"] && cardData["quickPreviewData"]["playlist"]) || null; 
+                                    DashAudioPlayer.playSource(source, playlist); 
+                                } 
+                            } 
+                            onPressAndHold: { 
+                                root.pressAndHold(); 
+                            } 
+                        }UbuntuShape { 
+                        id: touchdown; 
+                        objectName: "touchdown"; 
+                        anchors { fill: root } 
+                        visible: root.artShapeStyle != "shadow" && root.artShapeStyle != "icon" && root.pressed; 
+                        radius: "medium"; 
+                        borderSource: "radius_pressed.sci" 
+                    }
+implicitHeight: audioButton.height;
+}

=== added file 'tests/plugins/Dash/cardcreator/9.tst'
--- tests/plugins/Dash/cardcreator/9.tst	1970-01-01 00:00:00 +0000
+++ tests/plugins/Dash/cardcreator/9.tst	2015-12-04 12:30:34 +0000
@@ -0,0 +1,3 @@
+template: {"card-layout":"horizontal","card-size":"medium","category-layout":"grid","collapsed-rows":2,"quick-preview-type": "audio"}
+components: {"art":{"aspect-ratio":1},"subtitle":{"field":"author"},"title":{"field":"title"}, "quickPreviewData": "quickPreviewData"}
+result: 9.res

=== modified file 'tests/qmltests/Dash/CardHelpers.js'
--- tests/qmltests/Dash/CardHelpers.js	2014-09-05 07:27:00 +0000
+++ tests/qmltests/Dash/CardHelpers.js	2015-12-04 12:30:34 +0000
@@ -16,7 +16,7 @@
 
 .pragma library
 
-var components = ["title", "art", "subtitle", "mascot", "emblem", "summary", "attributes", "overlayColor"]
+var components = ["title", "art", "subtitle", "mascot", "emblem", "summary", "attributes", "overlayColor", "quickPreviewData"]
 
 var defaultLayout = ' \
 { \

=== modified file 'tests/qmltests/Dash/Previews/tst_PreviewAudioPlayback.qml'
--- tests/qmltests/Dash/Previews/tst_PreviewAudioPlayback.qml	2015-07-15 15:07:19 +0000
+++ tests/qmltests/Dash/Previews/tst_PreviewAudioPlayback.qml	2015-12-04 12:30:34 +0000
@@ -18,6 +18,7 @@
 import QtTest 1.0
 import Ubuntu.Components 1.3
 import "../../../../qml/Dash/Previews"
+import Dash 0.1
 import Unity.Test 0.1 as UT
 import QtMultimedia 5.0
 
@@ -58,8 +59,8 @@
         function test_time_formatter_data() {
             return [
                     { tag: "NaN", value: "not a number", result: "" },
-                    { tag: "0", value: 0, result: "" },
                     { tag: "-1", value: -1, result: "" },
+                    { tag: "0", value: 0, result: "0:00" },
                     { tag: "30", value: 30, result: "0:30" },
                     { tag: "60", value: 60, result: "1:00" },
                     { tag: "3600", value: 3600, result: "1:00:00" }
@@ -67,8 +68,7 @@
         }
 
         function test_time_formatter(data) {
-            var audio = findInvisibleChild(previewAudioPlayback, "audio");
-            compare(audio.lengthToString(data.value), data.result)
+            compare(DashAudioPlayer.lengthToString(data.value), data.result)
         }
 
         function test_tracks_data() {
@@ -102,7 +102,7 @@
 
         function checkPlayerSource(index) {
             var modelFilename = previewAudioPlayback.widgetData["tracks"][index]["source"].replace(/^.*[\\\/]/, '');
-            var playerFilename = findInvisibleChild(previewAudioPlayback, "audio").source.toString().replace(/^.*[\\\/]/, '');
+            var playerFilename = DashAudioPlayer.currentSource.toString().replace(/^.*[\\\/]/, '');
 
             compare(modelFilename, playerFilename, "Player source is not set correctly.");
         }
@@ -123,7 +123,7 @@
             var track1PlayButton = findChild(track1Item, "playButton");
             var track2PlayButton = findChild(track2Item, "playButton");
 
-            var audio = findInvisibleChild(previewAudioPlayback, "audio");
+            var audio = DashAudioPlayer.audio;
 
             // All progress bars must be hidden in the beginning
             compare(track0ProgressBar.visible, false);
@@ -170,10 +170,6 @@
             tryCompare(track0ProgressBar, "visible", false);
             tryCompare(track1ProgressBar, "visible", false);
             tryCompare(track2ProgressBar, "visible", true);
-
-            // Changing preview should make all players shut up!
-            previewAudioPlayback.isCurrentPreview = false
-            tryCompare(audio, "playbackState", Audio.StoppedState);
         }
     }
 }

=== modified file 'tests/qmltests/Dash/tst_Card.qml'
--- tests/qmltests/Dash/tst_Card.qml	2015-11-04 14:57:13 +0000
+++ tests/qmltests/Dash/tst_Card.qml	2015-12-04 12:30:34 +0000
@@ -35,7 +35,8 @@
       "title": "foo",
       "subtitle": "bar",
       "summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
-      "attributes": [{"value":"text1","icon":"image://theme/ok"},{"value":"text2","icon":"image://theme/cancel"}]
+      "attributes": [{"value":"text1","icon":"image://theme/ok"},{"value":"text2","icon":"image://theme/cancel"}],
+      "quickPreviewData": {"uri": "/some/file", "duration": "14"}
     }'
 
     property var cardsModel: [
@@ -106,6 +107,11 @@
             "layout": { "template": { "card-layout": "horizontal" },
                         "components": JSON.parse(Helpers.fullMapping) }
         },
+        {
+            "name": "Art, title, subtitle - Audio",
+            "layout": { "template": { "card-layout": "horizontal", "quick-preview-type": "audio" },
+                        "components": { "art": "art", "title": "title", "subtitle": "subtitle", "quickPreviewData": "quickPreviewData" } }
+        },
     ]
 
     CardTool {
@@ -129,6 +135,7 @@
             item.width = Qt.binding(function() { return cardTool.cardWidth || item.implicitWidth; });
             item.height = Qt.binding(function() { return cardTool.cardHeight || item.implicitHeight; });
             item.fixedHeaderHeight = Qt.binding(function() { return cardTool.headerHeight; });
+            item.fixedArtShapeSize = Qt.binding(function() { return cardTool.artShapeSize; });
         }
     }