Add audio duration to card models and use in audio pill (#13114)

guardian · Jan 9, 2025 · 5df7716 · 5df7716
1 parent ac8a346
commit 5df7716
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 1 deletion.
diff --git a/dotcom-rendering/src/components/Card/Card.stories.tsx b/dotcom-rendering/src/components/Card/Card.stories.tsx
@@ -46,6 +46,7 @@ const basicCardProps: CardProps = {
 	showMainVideo: true,
 	absoluteServerTimes: true,
 	galleryCount: 8,
+	audioDuration: '20:25',
 };
 
 const aBasicLink = {

diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -150,6 +150,7 @@ export type Props = {
 	/** A kicker image is seperate to the main media and renders as part of the kicker */
 	showKickerImage?: boolean;
 	galleryCount?: number;
+	audioDuration?: string;
 };
 
 const starWrapper = (cardHasImage: boolean) => css`
@@ -385,6 +386,7 @@ export const Card = ({
 	podcastImage,
 	showKickerImage = false,
 	galleryCount,
+	audioDuration,
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 	const sublinkPosition = decideSublinkPosition(
@@ -464,7 +466,7 @@ export const Card = ({
 		>
 			{mainMedia?.type === 'Audio' && (
 				<Pill
-					content="0:00" // TODO: get podcast duration
+					content={audioDuration ?? ''}
 					icon={<SvgMediaControlsPlay />}
 				/>
 			)}

diff --git a/dotcom-rendering/src/components/FrontCard.tsx b/dotcom-rendering/src/components/FrontCard.tsx
@@ -57,6 +57,7 @@ export const FrontCard = (props: Props) => {
 		showMainVideo: trail.showMainVideo,
 		galleryCount: trail.galleryCount,
 		podcastImage: trail.podcastImage,
+		audioDuration: trail.audioDuration,
 	};
 
 	return Card({ ...defaultProps, ...cardProps });

diff --git a/dotcom-rendering/src/model/enhanceCards.ts b/dotcom-rendering/src/model/enhanceCards.ts
@@ -329,5 +329,6 @@ export const enhanceCards = (
 			}),
 			podcastImage,
 			galleryCount: faciaCard.card.galleryCount,
+			audioDuration: faciaCard.card.audioDuration,
 		};
 	});
diff --git a/dotcom-rendering/src/model/front-schema.json b/dotcom-rendering/src/model/front-schema.json
@@ -1030,6 +1030,9 @@
                                                 },
                                                 "galleryCount": {
                                                     "type": "number"
+                                                },
+                                                "audioDuration": {
+                                                    "type": "string"
                                                 }
                                             },
                                             "required": [
@@ -1781,6 +1784,9 @@
                                                 },
                                                 "galleryCount": {
                                                     "type": "number"
+                                                },
+                                                "audioDuration": {
+                                                    "type": "string"
                                                 }
                                             },
                                             "required": [
@@ -2532,6 +2538,9 @@
                                                 },
                                                 "galleryCount": {
                                                     "type": "number"
+                                                },
+                                                "audioDuration": {
+                                                    "type": "string"
                                                 }
                                             },
                                             "required": [

diff --git a/dotcom-rendering/src/model/tag-page-schema.json b/dotcom-rendering/src/model/tag-page-schema.json
@@ -555,6 +555,9 @@
                             },
                             "galleryCount": {
                                 "type": "number"
+                            },
+                            "audioDuration": {
+                                "type": "string"
                             }
                         },
                         "required": [

diff --git a/dotcom-rendering/src/types/front.ts b/dotcom-rendering/src/types/front.ts
@@ -291,6 +291,7 @@ export type FEFrontCard = {
 		group: string;
 		isLive: boolean;
 		galleryCount?: number;
+		audioDuration?: string;
 	};
 	discussion: {
 		isCommentable: boolean;
@@ -350,6 +351,7 @@ export type DCRFrontCard = {
 	showMainVideo?: boolean;
 	galleryCount?: number;
 	podcastImage?: PodcastSeriesImage;
+	audioDuration?: string;
 };
 
 export type DCRSlideshowImage = {