@@ -136,6 +136,43 @@ var kArtShapeHolderCode = 'Item { \n\
136136 } \n\
137137 }\n';
138138
139+// %1 is anchors.fill
140+// %2 is width
141+// %3 is height
142+var kAudioButtonCode = 'AbstractButton { \n\
143+ id: audioButton; \n\
144+ anchors.fill: %1; \n\
145+ width: %2; \n\
146+ height: %3; \n\
147+ readonly property url source: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["uri"]) || ""; \n\
148+ UbuntuShape { \n\
149+ anchors.fill: parent; \n\
150+ visible: parent.pressed; \n\
151+ radius: "medium"; \n\
152+ } \n\
153+ Icon { \n\
154+ anchors.fill: parent; \n\
155+ anchors.margins: parent.height > units.gu(5) ? units.gu(2) : 0; \n\
156+ opacity: 0.9; \n\
157+ name: DashAudioPlayer.playing && AudioUrlComparer.compare(parent.source, DashAudioPlayer.currentSource) ? "media-playback-pause" : "media-playback-start"; \n\
158+ } \n\
159+ onClicked: { \n\
160+ if (AudioUrlComparer.compare(source, DashAudioPlayer.currentSource)) { \n\
161+ if (DashAudioPlayer.playing) { \n\
162+ DashAudioPlayer.pause(); \n\
163+ } else { \n\
164+ DashAudioPlayer.play(); \n\
165+ } \n\
166+ } else { \n\
167+ var playlist = (cardData["quickPreviewData"] && cardData["quickPreviewData"]["playlist"]) || null; \n\
168+ DashAudioPlayer.playSource(source, playlist); \n\
169+ } \n\
170+ } \n\
171+ onPressAndHold: { \n\
172+ root.pressAndHold(); \n\
173+ } \n\
174+ }';
175+
139176var kOverlayLoaderCode = 'Loader { \n\
140177 id: overlayLoader; \n\
141178 readonly property real overlayHeight: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2); \n\
@@ -316,6 +353,22 @@ var kSummaryLabelCode = 'Label { \n\
316353 color: %3; \n\
317354 }\n';
318355
356+// %1 is used as bottom anchor of audio progress bar
357+// %2 is used as left anchor of audio progress bar
358+// %3 is used as text color
359+var kAudioProgressBarCode = 'CardAudioProgress { \n\
360+ id: audioProgressBar; \n\
361+ duration: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["duration"]) || 0; \n\
362+ source: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["uri"]) || ""; \n\
363+ anchors { \n\
364+ bottom: %1; \n\
365+ left: %2; \n\
366+ right: parent.right; \n\
367+ margins: units.gu(1); \n\
368+ } \n\
369+ color: %3; \n\
370+ }';
371+
319372function cardString(template, components) {
320373 var code;
321374
@@ -351,7 +404,20 @@ function cardString(template, components) {
351404 var headerAsOverlay = hasArt && template && template["overlay"] === true && (hasTitle || hasMascot);
352405 var hasSubtitle = hasTitle && components["subtitle"] || false;
353406 var hasHeaderRow = hasMascot && hasTitle;
354− var hasAttributes = hasTitle && components["attributes"]["field"] || false;
407+ var hasAttributes = hasTitle && components["attributes"] && components["attributes"]["field"] || false;
408+ var isAudio = template["quick-preview-type"] === "audio";
409+
410+ if (isAudio) {
411+ // For now we only support audio cards with [optional] art, title, subtitle
412+ // in horizontal mode
413+ // Anything else makes it behave not like an audio card
414+ if (hasSummary) isAudio = false;
415+ if (!isHorizontal) isAudio = false;
416+ if (hasMascot) isAudio = false;
417+ if (hasEmblem) isAudio = false;
418+ if (headerAsOverlay) isAudio = false;
419+ if (hasAttributes) isAudio = false;
420+ }
355421
356422 if (hasBackground) {
357423 var templateCardBackground = (template && typeof template["card-background"] === "string") ? template["card-background"] : "";
@@ -421,17 +487,22 @@ function cardString(template, components) {
421487 topMargin: units.gu(1);\n';
422488 }
423489 }
490+
424491 var headerLeftAnchor;
425492 var headerLeftAnchorHasMargin = false;
426493 if (isHorizontal && hasArt) {
427494 headerLeftAnchor = 'left: artShapeHolder.right; \n\
428495 leftMargin: units.gu(1);\n';
429496 headerLeftAnchorHasMargin = true;
497+ } else if (isHorizontal && isAudio) {
498+ headerLeftAnchor = 'left: audioButton.right; \n\
499+ leftMargin: units.gu(1);\n';
500+ headerLeftAnchorHasMargin = true;
430501 } else {
431502 headerLeftAnchor = 'left: parent.left;\n';
432503 }
433504
434− var touchdownOnArtShape = !hasBackground && hasArt && !hasMascot && !hasSummary;
505+ var touchdownOnArtShape = !hasBackground && hasArt && !hasMascot && !hasSummary && !isAudio;
435506
436507 if (hasHeaderRow) {
437508 code += 'readonly property int headerHeight: row.height;\n'
@@ -445,6 +516,14 @@ function cardString(template, components) {
445516 } else {
446517 code += 'readonly property int headerHeight: attributesRow.height;\n'
447518 }
519+ } else if (isAudio) {
520+ if (hasSubtitle) {
521+ code += 'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin + audioProgressBar.height + audioProgressBar.anchors.topMargin;\n'
522+ } else if (hasTitle) {
523+ code += 'readonly property int headerHeight: titleLabel.height + audioProgressBar.height + audioProgressBar.anchors.topMargin;\n'
524+ } else {
525+ code += 'readonly property int headerHeight: audioProgressBar.height;\n'
526+ }
448527 } else if (hasSubtitle) {
449528 code += 'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin;\n'
450529 } else if (hasTitle) {
@@ -632,6 +711,30 @@ function cardString(template, components) {
632711 code += mascotShapeCode + mascotCode + titleSubtitleCode;
633712 }
634713
714+ if (isAudio) {
715+ var audioProgressBarLeftAnchor = 'audioButton.right';
716+ var audioProgressBarBottomAnchor = 'audioButton.bottom';
717+ var audioProgressBarTextColor = 'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
718+
719+ code += kAudioProgressBarCode.arg(audioProgressBarBottomAnchor)
720+ .arg(audioProgressBarLeftAnchor)
721+ .arg(audioProgressBarTextColor);
722+
723+ var audioButtonAnchorsFill;
724+ var audioButtonWidth;
725+ var audioButtonHeight;
726+ if (hasArt) {
727+ audioButtonAnchorsFill = 'artShapeHolder';
728+ audioButtonWidth = 'undefined';
729+ audioButtonHeight = 'undefined';
730+ } else {
731+ audioButtonAnchorsFill = 'undefined';
732+ audioButtonWidth = 'height';
733+ audioButtonHeight = '(root.fixedHeaderHeight > 0 ? root.fixedHeaderHeight : headerHeight) + 2 * units.gu(1)';
734+ }
735+ code += kAudioButtonCode.arg(audioButtonAnchorsFill).arg(audioButtonWidth).arg(audioButtonHeight);
736+ }
737+
635738 if (hasSummary) {
636739 var summaryTopAnchor;
637740 if (isHorizontal && hasArt) summaryTopAnchor = 'artShapeHolder.bottom';
@@ -670,6 +773,8 @@ function cardString(template, components) {
670773 var implicitHeight = 'implicitHeight: ';
671774 if (hasSummary) {
672775 implicitHeight += 'summary.y + summary.height + units.gu(1);\n';
776+ } else if (isAudio) {
777+ implicitHeight += 'audioButton.height;\n';
673778 } else if (headerAsOverlay) {
674779 implicitHeight += 'artShapeHolder.height;\n';
675780 } else if (hasHeaderRow) {