Skip to content

Commit a5e5f5d

Browse files
abeddow91abeddow91
authored
Refactor media card types (#13423)
* Refactor media types so they're included on the main media object
1 parent 2eec07c commit a5e5f5d

18 files changed

+120
-125
lines changed

‎dotcom-rendering/src/components/Card/Card.stories.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,6 @@ const basicCardProps: CardProps = {
4545
discussionApiUrl: 'https://discussion.theguardian.com/discussion-api/',
4646
showMainVideo: true,
4747
absoluteServerTimes: true,
48-
galleryCount: 8,
49-
audioDuration: '20:25',
5048
};
5149

5250
const aBasicLink = {
@@ -77,11 +75,12 @@ const mainVideo: MainMedia = {
7775

7876
const mainAudio: MainMedia = {
7977
type: 'Audio',
80-
duration: 24,
78+
duration: '30:24',
8179
};
8280

8381
const mainGallery: MainMedia = {
8482
type: 'Gallery',
83+
count: '5',
8584
};
8685

8786
const CardWrapper = ({ children }: { children: React.ReactNode }) => {
@@ -356,7 +355,7 @@ export const WithMediaTypeSpecialReportAlt = () => {
356355
design: ArticleDesign.Audio,
357356
theme: ArticleSpecial.SpecialReportAlt,
358357
}}
359-
mainMedia={{ ...mainAudio, duration: 90 }}
358+
mainMedia={mainAudio}
360359
headlineText="Audio"
361360
/>
362361
</CardWrapper>
@@ -1305,7 +1304,7 @@ export const WithSpecialPaletteVariations = () => {
13051304
imagePositionOnDesktop="top"
13061305
imagePositionOnMobile="left"
13071306
imageSize="medium"
1308-
mainMedia={{ ...mainAudio, duration: 90 }}
1307+
mainMedia={mainAudio}
13091308
containerPalette={containerPalette}
13101309
/>
13111310
</LI>

‎dotcom-rendering/src/components/Card/Card.tsx

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ import type {
2929
} from '../../types/front';
3030
import type { MainMedia } from '../../types/mainMedia';
3131
import type { OnwardsSource } from '../../types/onwards';
32-
import type { PodcastSeriesImage } from '../../types/tag';
3332
import { Avatar } from '../Avatar';
3433
import { CardCommentCount } from '../CardCommentCount.importable';
3534
import { CardHeadline, type ResponsiveFontSize } from '../CardHeadline';
@@ -143,12 +142,8 @@ export type Props = {
143142
showTopBarDesktop?: boolean;
144143
showTopBarMobile?: boolean;
145144
trailTextSize?: TrailTextSize;
146-
/** The square podcast series image, if it exists for a card */
147-
podcastImage?: PodcastSeriesImage;
148145
/** A kicker image is seperate to the main media and renders as part of the kicker */
149146
showKickerImage?: boolean;
150-
galleryCount?: number;
151-
audioDuration?: string;
152147
isInLoopVideoTest?: boolean;
153148
};
154149

@@ -252,7 +247,6 @@ const getMedia = ({
252247
slideshowImages,
253248
mainMedia,
254249
canPlayInline,
255-
podcastImage,
256250
isBetaContainer,
257251
}: {
258252
imageUrl?: string;
@@ -262,10 +256,9 @@ const getMedia = ({
262256
slideshowImages?: DCRSlideshowImage[];
263257
mainMedia?: MainMedia;
264258
canPlayInline?: boolean;
265-
podcastImage?: PodcastSeriesImage;
266259
isBetaContainer: boolean;
267260
}) => {
268-
if (mainMedia && mainMedia.type === 'Video' && canPlayInline) {
261+
if (mainMedia?.type === 'Video' && canPlayInline) {
269262
return {
270263
type: 'video',
271264
mainMedia,
@@ -274,10 +267,14 @@ const getMedia = ({
274267
}
275268
if (slideshowImages) return { type: 'slideshow', slideshowImages } as const;
276269
if (avatarUrl) return { type: 'avatar', avatarUrl } as const;
277-
if (podcastImage && isBetaContainer) {
270+
if (
271+
mainMedia?.type === 'Audio' &&
272+
mainMedia.podcastImage &&
273+
isBetaContainer
274+
) {
278275
return {
276+
...mainMedia,
279277
type: 'podcast',
280-
podcastImage,
281278
trailImage: { src: imageUrl, altText: imageAltText },
282279
} as const;
283280
}
@@ -402,10 +399,7 @@ export const Card = ({
402399
showTopBarDesktop = true,
403400
showTopBarMobile = false,
404401
trailTextSize,
405-
podcastImage,
406402
showKickerImage = false,
407-
galleryCount,
408-
audioDuration,
409403
isInLoopVideoTest = false,
410404
}: Props) => {
411405
const hasSublinks = supportingContent && supportingContent.length > 0;
@@ -518,15 +512,15 @@ export const Card = ({
518512

519513
{mainMedia?.type === 'Audio' && (
520514
<Pill
521-
content={audioDuration ?? ''}
515+
content={mainMedia.duration}
522516
icon={<SvgMediaControlsPlay />}
523517
iconSize={'small'}
524518
/>
525519
)}
526520
{mainMedia?.type === 'Gallery' && (
527521
<Pill
528522
prefix="Gallery"
529-
content={galleryCount?.toString() ?? ''}
523+
content={mainMedia.count}
530524
icon={<SvgCamera />}
531525
iconSide="right"
532526
/>
@@ -556,7 +550,6 @@ export const Card = ({
556550
slideshowImages,
557551
mainMedia,
558552
canPlayInline,
559-
podcastImage,
560553
isBetaContainer,
561554
});
562555

@@ -1011,7 +1004,7 @@ export const Card = ({
10111004

10121005
{media.type === 'podcast' && (
10131006
<>
1014-
{media.podcastImage.src && !showKickerImage ? (
1007+
{media.podcastImage?.src && !showKickerImage ? (
10151008
<div css={[podcastImageStyles(imageSize)]}>
10161009
<CardPicture
10171010
mainImage={media.podcastImage.src}

‎dotcom-rendering/src/components/Card/components/CardFooter.tsx

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -39,18 +39,18 @@ const labStyles = css`
3939
margin-top: ${space[1]}px;
4040
`;
4141

42+
type MainMedia =
43+
| { type: 'Video'; duration: number }
44+
| { type: 'Audio'; duration: string }
45+
| { type: 'Gallery'; count: string };
46+
4247
type Props = {
4348
format: ArticleFormat;
4449
showLivePlayable: boolean;
4550
age?: JSX.Element;
4651
commentCount?: JSX.Element;
4752
cardBranding?: JSX.Element;
48-
isVideo?: boolean;
49-
videoDuration?: number;
50-
isAudio?: boolean;
51-
audioDuration?: string;
52-
isGallery?: boolean;
53-
galleryCount?: number;
53+
mainMedia?: MainMedia;
5454
};
5555

5656
export const CardFooter = ({
@@ -59,46 +59,43 @@ export const CardFooter = ({
5959
age,
6060
commentCount,
6161
cardBranding,
62-
isVideo,
63-
videoDuration,
64-
isAudio,
65-
audioDuration,
66-
isGallery,
67-
galleryCount,
62+
mainMedia,
6863
}: Props) => {
6964
if (showLivePlayable) return null;
7065

7166
if (format.theme === ArticleSpecial.Labs && cardBranding) {
7267
return <footer css={labStyles}>{cardBranding}</footer>;
7368
}
7469

75-
if (isVideo && videoDuration !== undefined) {
70+
if (mainMedia?.type === 'Video') {
7671
return (
7772
<footer css={contentStyles}>
7873
<Pill
79-
content={<time>{secondsToDuration(videoDuration)}</time>}
74+
content={
75+
<time>{secondsToDuration(mainMedia.duration)}</time>
76+
}
8077
icon={<SvgMediaControlsPlay />}
8178
/>
8279
</footer>
8380
);
8481
}
8582

86-
if (isAudio && audioDuration !== undefined) {
83+
if (mainMedia?.type === 'Audio') {
8784
return (
8885
<footer css={contentStyles}>
8986
<Pill
90-
content={<time>{audioDuration}</time>}
87+
content={<time>{mainMedia.duration}</time>}
9188
icon={<SvgMediaControlsPlay />}
9289
/>
9390
</footer>
9491
);
9592
}
9693

97-
if (isGallery && galleryCount !== undefined) {
94+
if (mainMedia?.type === 'Gallery') {
9895
return (
9996
<footer css={contentStyles}>
10097
<Pill
101-
content={galleryCount.toString()}
98+
content={mainMedia.count}
10299
prefix="Gallery"
103100
icon={<SvgCamera />}
104101
iconSide="right"

‎dotcom-rendering/src/components/FeatureCard.stories.tsx

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -131,13 +131,12 @@ export const Podcast: Story = {
131131
},
132132
mainMedia: {
133133
type: 'Audio',
134-
duration: 120,
135-
},
136-
podcastImage: {
137-
src: 'https://media.guim.co.uk/be8830289638b0948b1ba4ade906e540554ada88/0_0_5000_3000/master/5000.jpg',
138-
altText: 'Football Weekly',
134+
podcastImage: {
135+
src: 'https://media.guim.co.uk/be8830289638b0948b1ba4ade906e540554ada88/0_0_5000_3000/master/5000.jpg',
136+
altText: 'Football Weekly',
137+
},
138+
duration: '55:09',
139139
},
140-
audioDuration: '55:09',
141140
},
142141
};
143142

@@ -153,8 +152,8 @@ export const Gallery: Story = {
153152
},
154153
mainMedia: {
155154
type: 'Gallery',
155+
count: '12',
156156
},
157-
galleryCount: 12,
158157
},
159158
};
160159

‎dotcom-rendering/src/components/FeatureCard.tsx

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import type {
1313
DCRSupportingContent,
1414
} from '../types/front';
1515
import type { MainMedia } from '../types/mainMedia';
16-
import type { PodcastSeriesImage } from '../types/tag';
1716
import { CardFooter } from './Card/components/CardFooter';
1817
import { CardLink } from './Card/components/CardLink';
1918
import type {
@@ -215,9 +214,6 @@ export type Props = {
215214
/** Alows the consumer to set an aspect ratio on the image of 5:3 or 5:4 */
216215
aspectRatio?: AspectRatio;
217216
showQuotes?: boolean;
218-
galleryCount?: number;
219-
podcastImage?: PodcastSeriesImage;
220-
audioDuration?: string;
221217
/**
222218
* Youtube video requires a unique ID. We append the collectionId to the youtube asset ID, to allow
223219
* same video to be on the page multiple times, as long as they are in different collections.
@@ -256,17 +252,12 @@ export const FeatureCard = ({
256252
aspectRatio,
257253
starRating,
258254
showQuotes,
259-
galleryCount,
260-
podcastImage,
261-
audioDuration,
262255
collectionId,
263256
}: Props) => {
264257
const hasSublinks = supportingContent && supportingContent.length > 0;
265258

266259
const isVideoMainMedia = mainMedia?.type === 'Video';
267260
const isVideoArticle = format.design === ArticleDesign.Video;
268-
const isAudioArticle = format.design === ArticleDesign.Audio;
269-
const isGalleryArticle = format.design === ArticleDesign.Gallery;
270261

271262
const videoDuration =
272263
mainMedia?.type === 'Video' ? mainMedia.duration : undefined;
@@ -426,7 +417,7 @@ export const FeatureCard = ({
426417
`}
427418
>
428419
{mainMedia?.type === 'Audio' &&
429-
!!podcastImage?.src && (
420+
!!mainMedia.podcastImage?.src && (
430421
<div
431422
css={
432423
podcastImageContainerStyles
@@ -435,12 +426,15 @@ export const FeatureCard = ({
435426
<div css={podcastImageStyles}>
436427
<CardPicture
437428
mainImage={
438-
podcastImage.src
429+
mainMedia
430+
.podcastImage
431+
.src
439432
}
440433
imageSize="podcast"
441434
alt={
442-
podcastImage.altText ??
443-
''
435+
mainMedia
436+
.podcastImage
437+
.altText ?? ''
444438
}
445439
loading="lazy"
446440
roundedCorners={false}
@@ -551,12 +545,7 @@ export const FeatureCard = ({
551545
// ) : undefined
552546
// }
553547
showLivePlayable={false}
554-
isVideo={isVideoArticle}
555-
isAudio={isAudioArticle}
556-
isGallery={isGalleryArticle}
557-
videoDuration={videoDuration}
558-
audioDuration={audioDuration}
559-
galleryCount={galleryCount}
548+
mainMedia={mainMedia}
560549
/>
561550
</div>
562551
{/* On video article cards, the duration is displayed in the footer */}

‎dotcom-rendering/src/components/FrontCard.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,6 @@ export const FrontCard = (props: Props) => {
5555
slideshowImages: trail.slideshowImages,
5656
showLivePlayable: trail.showLivePlayable,
5757
showMainVideo: trail.showMainVideo,
58-
galleryCount: trail.galleryCount,
59-
podcastImage: trail.podcastImage,
60-
audioDuration: trail.audioDuration,
6158
isInLoopVideoTest: trail.isInLoopVideoTest,
6259
};
6360

‎dotcom-rendering/src/components/Masthead/HighlightsCard.stories.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { HighlightsCard } from './HighlightsCard';
77

88
const mainGallery: MainMedia = {
99
type: 'Gallery',
10+
count: '10',
1011
};
1112

1213
const meta = {
@@ -113,11 +114,14 @@ export const WithPodcastSeriesImage: Story = {
113114
design: ArticleDesign.Audio,
114115
theme: Pillar.Sport,
115116
},
116-
podcastImage: {
117-
src: 'https://uploads.guim.co.uk/2024/08/01/FootballWeekly_FINAL_3000_(1).jpg',
118-
altText: 'Football Weekly',
117+
mainMedia: {
118+
type: 'Audio',
119+
duration: '31.76',
120+
podcastImage: {
121+
src: 'https://uploads.guim.co.uk/2024/08/01/FootballWeekly_FINAL_3000_(1).jpg',
122+
altText: 'Football Weekly',
123+
},
119124
},
120-
mainMedia: { type: 'Audio', duration: 31.76 },
121125
},
122126

123127
parameters: {},

0 commit comments

Comments
 (0)