Skip to content

Commit f584b66

Browse files
charleycampbellcharleycampbell
authored
Merge branch 'main' into filter/carousel-card
2 parents ed273b0 + fa9e508 commit f584b66

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1232
-586
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -307,7 +307,9 @@ export const Caption = ({
307307
shouldLimitWidth && limitedWidth,
308308
isOverlaid ? overlaidStyles(format) : bottomMarginStyles,
309309
isMainMedia &&
310-
(isBlog || mediaType === 'YoutubeVideo') &&
310+
(isBlog ||
311+
mediaType === 'YoutubeVideo' ||
312+
mediaType === 'SelfHostedVideo') &&
311313
tabletCaptionPadding,
312314
padCaption && captionPadding,
313315
isImmersive && immersivePadding,

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

Lines changed: 122 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const aBasicLink = {
6060
},
6161
};
6262

63-
const mainVideo: MainMedia = {
63+
const mainYoutubeVideo: MainMedia = {
6464
type: 'YoutubeVideo',
6565
id: '1234-abcdef-09876-xyz',
6666
videoId: '8M_yH-e9cq8',
@@ -73,6 +73,22 @@ const mainVideo: MainMedia = {
7373
origin: 'The Guardian',
7474
};
7575

76+
const mainSelfHostedVideo: MainMedia = {
77+
type: 'SelfHostedVideo',
78+
videoStyle: 'Loop',
79+
atomId: '123',
80+
sources: [
81+
{
82+
src: 'https://uploads.guim.co.uk/2024/10/01/241001HeleneLoop_2.mp4',
83+
mimeType: 'video/mp4',
84+
},
85+
],
86+
height: 1080,
87+
width: 1920,
88+
image: `https://i.guim.co.uk/img/media/2eb01d138eb8fba6e59ce7589a60e3ff984f6a7a/0_0_1920_1080/1920.jpg?width=1200&quality=45&dpr=2&s=none`,
89+
duration: 100,
90+
};
91+
7692
const mainAudio: MainMedia = {
7793
type: 'Audio',
7894
duration: '30:24',
@@ -297,56 +313,98 @@ export const WithExternalLink = () => {
297313

298314
export const WithMediaType = () => {
299315
return (
300-
<CardGroup>
301-
<CardWrapper>
302-
<Card
303-
{...basicCardProps}
304-
format={{
305-
display: ArticleDisplay.Standard,
306-
design: ArticleDesign.Video,
307-
theme: Pillar.Sport,
308-
}}
309-
mainMedia={{ ...mainVideo, duration: 30 }}
310-
headlineText="Video"
311-
/>
312-
</CardWrapper>
313-
<CardWrapper>
314-
<Card
315-
{...basicCardProps}
316-
format={{
317-
display: ArticleDisplay.Standard,
318-
design: ArticleDesign.Video,
319-
theme: Pillar.Sport,
320-
}}
321-
mainMedia={{ ...mainVideo, duration: 0 }}
322-
headlineText="Video without duration"
323-
/>
324-
</CardWrapper>
325-
<CardWrapper>
326-
<Card
327-
{...basicCardProps}
328-
format={{
329-
display: ArticleDisplay.Standard,
330-
design: ArticleDesign.Audio,
331-
theme: Pillar.Sport,
332-
}}
333-
mainMedia={mainAudio}
334-
headlineText="Audio"
335-
/>
336-
</CardWrapper>
337-
<CardWrapper>
338-
<Card
339-
{...basicCardProps}
340-
format={{
341-
display: ArticleDisplay.Standard,
342-
design: ArticleDesign.Gallery,
343-
theme: Pillar.Sport,
344-
}}
345-
mainMedia={mainGallery}
346-
headlineText="Gallery"
347-
/>
348-
</CardWrapper>
349-
</CardGroup>
316+
<>
317+
<CardGroup>
318+
<CardWrapper>
319+
<Card
320+
{...basicCardProps}
321+
format={{
322+
display: ArticleDisplay.Standard,
323+
design: ArticleDesign.Video,
324+
theme: Pillar.Sport,
325+
}}
326+
mainMedia={{ ...mainYoutubeVideo, duration: 30 }}
327+
headlineText="Video"
328+
/>
329+
</CardWrapper>
330+
<CardWrapper>
331+
<Card
332+
{...basicCardProps}
333+
format={{
334+
display: ArticleDisplay.Standard,
335+
design: ArticleDesign.Video,
336+
theme: Pillar.Sport,
337+
}}
338+
mainMedia={{ ...mainYoutubeVideo, duration: 0 }}
339+
headlineText="Video without duration"
340+
/>
341+
</CardWrapper>
342+
<CardWrapper>
343+
<Card
344+
{...basicCardProps}
345+
format={{
346+
display: ArticleDisplay.Standard,
347+
design: ArticleDesign.Video,
348+
theme: Pillar.Sport,
349+
}}
350+
mainMedia={{ ...mainSelfHostedVideo }}
351+
headlineText="Video with self-hosted video main media"
352+
/>
353+
</CardWrapper>
354+
</CardGroup>
355+
<CardGroup>
356+
<CardWrapper>
357+
<Card
358+
{...basicCardProps}
359+
format={{
360+
display: ArticleDisplay.Standard,
361+
design: ArticleDesign.Audio,
362+
theme: Pillar.Sport,
363+
}}
364+
mainMedia={mainAudio}
365+
headlineText="Audio"
366+
/>
367+
</CardWrapper>
368+
<CardWrapper>
369+
<Card
370+
{...basicCardProps}
371+
format={{
372+
display: ArticleDisplay.Standard,
373+
design: ArticleDesign.Audio,
374+
theme: Pillar.Sport,
375+
}}
376+
mainMedia={{ ...mainSelfHostedVideo }}
377+
headlineText="Audio with self-hosted video main media"
378+
/>
379+
</CardWrapper>
380+
</CardGroup>
381+
<CardGroup>
382+
<CardWrapper>
383+
<Card
384+
{...basicCardProps}
385+
format={{
386+
display: ArticleDisplay.Standard,
387+
design: ArticleDesign.Gallery,
388+
theme: Pillar.Sport,
389+
}}
390+
mainMedia={mainGallery}
391+
headlineText="Gallery"
392+
/>
393+
</CardWrapper>
394+
<CardWrapper>
395+
<Card
396+
{...basicCardProps}
397+
format={{
398+
display: ArticleDisplay.Standard,
399+
design: ArticleDesign.Gallery,
400+
theme: Pillar.Sport,
401+
}}
402+
mainMedia={{ ...mainSelfHostedVideo }}
403+
headlineText="Gallery with self-hosted video main media"
404+
/>
405+
</CardWrapper>
406+
</CardGroup>
407+
</>
350408
);
351409
};
352410

@@ -361,7 +419,7 @@ export const WithMediaTypeAndSublinks = () => {
361419
design: ArticleDesign.Video,
362420
theme: Pillar.Sport,
363421
}}
364-
mainMedia={{ ...mainVideo, duration: 30 }}
422+
mainMedia={{ ...mainYoutubeVideo, duration: 30 }}
365423
headlineText="Video"
366424
supportingContent={twoSublinks}
367425
/>
@@ -374,7 +432,7 @@ export const WithMediaTypeAndSublinks = () => {
374432
design: ArticleDesign.Video,
375433
theme: Pillar.Sport,
376434
}}
377-
mainMedia={{ ...mainVideo, duration: 0 }}
435+
mainMedia={{ ...mainYoutubeVideo, duration: 0 }}
378436
headlineText="Video without duration"
379437
supportingContent={twoSublinks}
380438
/>
@@ -420,7 +478,7 @@ export const WithMediaTypeSpecialReportAlt = () => {
420478
design: ArticleDesign.Video,
421479
theme: ArticleSpecial.SpecialReportAlt,
422480
}}
423-
mainMedia={{ ...mainVideo, duration: 30 }}
481+
mainMedia={{ ...mainYoutubeVideo, duration: 30 }}
424482
headlineText="Video"
425483
/>
426484
</CardWrapper>
@@ -1049,7 +1107,7 @@ export const WhenOpinionWithImageAtBottom = () => {
10491107
);
10501108
};
10511109

1052-
export const WhenVideoWithPlayButton = () => {
1110+
export const WhenYoutubeVideoWithPlayButton = () => {
10531111
return (
10541112
<Section title="Play icons" padContent={false} centralBorder="partial">
10551113
<UL direction="row" padBottom={true}>
@@ -1064,7 +1122,7 @@ export const WhenVideoWithPlayButton = () => {
10641122
mediaPositionOnDesktop="top"
10651123
mediaSize="jumbo"
10661124
mediaPositionOnMobile="top"
1067-
mainMedia={mainVideo}
1125+
mainMedia={mainYoutubeVideo}
10681126
/>
10691127
</LI>
10701128
</UL>
@@ -1080,7 +1138,7 @@ export const WhenVideoWithPlayButton = () => {
10801138
mediaPositionOnDesktop="right"
10811139
mediaSize="large"
10821140
mediaPositionOnMobile="top"
1083-
mainMedia={mainVideo}
1141+
mainMedia={mainYoutubeVideo}
10841142
/>
10851143
</LI>
10861144
<LI percentage={'25%'} padSides={true} showDivider={true}>
@@ -1092,7 +1150,7 @@ export const WhenVideoWithPlayButton = () => {
10921150
theme: Pillar.News,
10931151
}}
10941152
mediaPositionOnDesktop="top"
1095-
mainMedia={mainVideo}
1153+
mainMedia={mainYoutubeVideo}
10961154
canPlayInline={false}
10971155
/>
10981156
</LI>
@@ -1109,7 +1167,7 @@ export const WhenVideoWithPlayButton = () => {
11091167
mediaPositionOnDesktop="top"
11101168
mediaSize="medium"
11111169
mediaPositionOnMobile="bottom"
1112-
mainMedia={mainVideo}
1170+
mainMedia={mainYoutubeVideo}
11131171
/>
11141172
</LI>
11151173
<LI percentage="50%">
@@ -1123,7 +1181,7 @@ export const WhenVideoWithPlayButton = () => {
11231181
theme: Pillar.News,
11241182
}}
11251183
mediaPositionOnDesktop="left"
1126-
mainMedia={mainVideo}
1184+
mainMedia={mainYoutubeVideo}
11271185
canPlayInline={false}
11281186
/>
11291187
</LI>
@@ -1136,7 +1194,7 @@ export const WhenVideoWithPlayButton = () => {
11361194
theme: Pillar.News,
11371195
}}
11381196
mediaPositionOnDesktop="right"
1139-
mainMedia={mainVideo}
1197+
mainMedia={mainYoutubeVideo}
11401198
canPlayInline={false}
11411199
/>
11421200
</LI>
@@ -1150,7 +1208,7 @@ export const WhenVideoWithPlayButton = () => {
11501208
theme: Pillar.News,
11511209
}}
11521210
mediaPositionOnDesktop="right"
1153-
mainMedia={mainVideo}
1211+
mainMedia={mainYoutubeVideo}
11541212
canPlayInline={false}
11551213
/>
11561214
</LI>
@@ -1170,7 +1228,7 @@ export const WhenVideoWithPlayButton = () => {
11701228
mediaPositionOnDesktop="right"
11711229
mediaSize="large"
11721230
mediaPositionOnMobile="top"
1173-
mainMedia={mainVideo}
1231+
mainMedia={mainYoutubeVideo}
11741232
/>
11751233
</LI>
11761234
<LI percentage={'33.333%'} padSides={true} showDivider={true}>
@@ -1184,7 +1242,7 @@ export const WhenVideoWithPlayButton = () => {
11841242
mediaPositionOnDesktop="top"
11851243
mediaPositionOnMobile="left"
11861244
mediaSize="medium"
1187-
mainMedia={mainVideo}
1245+
mainMedia={mainYoutubeVideo}
11881246
/>
11891247
</LI>
11901248
</UL>

0 commit comments

Comments
 (0)