Skip to content

Commit 4d2d03a

Browse files
domlanderdomlander
committed
Show video pill on youtube video card with self-hosted video main media
1 parent 642828e commit 4d2d03a

File tree

2 files changed

+97
-49
lines changed

2 files changed

+97
-49
lines changed

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

Lines changed: 57 additions & 16 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',
@@ -306,7 +322,7 @@ export const WithMediaType = () => {
306322
design: ArticleDesign.Video,
307323
theme: Pillar.Sport,
308324
}}
309-
mainMedia={{ ...mainVideo, duration: 30 }}
325+
mainMedia={{ ...mainYoutubeVideo, duration: 30 }}
310326
headlineText="Video"
311327
/>
312328
</CardWrapper>
@@ -318,10 +334,22 @@ export const WithMediaType = () => {
318334
design: ArticleDesign.Video,
319335
theme: Pillar.Sport,
320336
}}
321-
mainMedia={{ ...mainVideo, duration: 0 }}
337+
mainMedia={{ ...mainYoutubeVideo, duration: 0 }}
322338
headlineText="Video without duration"
323339
/>
324340
</CardWrapper>
341+
<CardWrapper>
342+
<Card
343+
{...basicCardProps}
344+
format={{
345+
display: ArticleDisplay.Standard,
346+
design: ArticleDesign.Video,
347+
theme: Pillar.Sport,
348+
}}
349+
mainMedia={{ ...mainSelfHostedVideo }}
350+
headlineText="Video with self-hosted video main media"
351+
/>
352+
</CardWrapper>
325353
<CardWrapper>
326354
<Card
327355
{...basicCardProps}
@@ -361,7 +389,7 @@ export const WithMediaTypeAndSublinks = () => {
361389
design: ArticleDesign.Video,
362390
theme: Pillar.Sport,
363391
}}
364-
mainMedia={{ ...mainVideo, duration: 30 }}
392+
mainMedia={{ ...mainYoutubeVideo, duration: 30 }}
365393
headlineText="Video"
366394
supportingContent={twoSublinks}
367395
/>
@@ -374,11 +402,24 @@ export const WithMediaTypeAndSublinks = () => {
374402
design: ArticleDesign.Video,
375403
theme: Pillar.Sport,
376404
}}
377-
mainMedia={{ ...mainVideo, duration: 0 }}
405+
mainMedia={{ ...mainYoutubeVideo, duration: 0 }}
378406
headlineText="Video without duration"
379407
supportingContent={twoSublinks}
380408
/>
381409
</CardWrapper>
410+
<CardWrapper>
411+
<Card
412+
{...basicCardProps}
413+
format={{
414+
display: ArticleDisplay.Standard,
415+
design: ArticleDesign.Video,
416+
theme: Pillar.Sport,
417+
}}
418+
mainMedia={{ ...mainSelfHostedVideo }}
419+
headlineText="Self-hosted video"
420+
supportingContent={twoSublinks}
421+
/>
422+
</CardWrapper>
382423
<CardWrapper>
383424
<Card
384425
{...basicCardProps}
@@ -420,7 +461,7 @@ export const WithMediaTypeSpecialReportAlt = () => {
420461
design: ArticleDesign.Video,
421462
theme: ArticleSpecial.SpecialReportAlt,
422463
}}
423-
mainMedia={{ ...mainVideo, duration: 30 }}
464+
mainMedia={{ ...mainYoutubeVideo, duration: 30 }}
424465
headlineText="Video"
425466
/>
426467
</CardWrapper>
@@ -1049,7 +1090,7 @@ export const WhenOpinionWithImageAtBottom = () => {
10491090
);
10501091
};
10511092

1052-
export const WhenVideoWithPlayButton = () => {
1093+
export const WhenYoutubeVideoWithPlayButton = () => {
10531094
return (
10541095
<Section title="Play icons" padContent={false} centralBorder="partial">
10551096
<UL direction="row" padBottom={true}>
@@ -1064,7 +1105,7 @@ export const WhenVideoWithPlayButton = () => {
10641105
mediaPositionOnDesktop="top"
10651106
mediaSize="jumbo"
10661107
mediaPositionOnMobile="top"
1067-
mainMedia={mainVideo}
1108+
mainMedia={mainYoutubeVideo}
10681109
/>
10691110
</LI>
10701111
</UL>
@@ -1080,7 +1121,7 @@ export const WhenVideoWithPlayButton = () => {
10801121
mediaPositionOnDesktop="right"
10811122
mediaSize="large"
10821123
mediaPositionOnMobile="top"
1083-
mainMedia={mainVideo}
1124+
mainMedia={mainYoutubeVideo}
10841125
/>
10851126
</LI>
10861127
<LI percentage={'25%'} padSides={true} showDivider={true}>
@@ -1092,7 +1133,7 @@ export const WhenVideoWithPlayButton = () => {
10921133
theme: Pillar.News,
10931134
}}
10941135
mediaPositionOnDesktop="top"
1095-
mainMedia={mainVideo}
1136+
mainMedia={mainYoutubeVideo}
10961137
canPlayInline={false}
10971138
/>
10981139
</LI>
@@ -1109,7 +1150,7 @@ export const WhenVideoWithPlayButton = () => {
11091150
mediaPositionOnDesktop="top"
11101151
mediaSize="medium"
11111152
mediaPositionOnMobile="bottom"
1112-
mainMedia={mainVideo}
1153+
mainMedia={mainYoutubeVideo}
11131154
/>
11141155
</LI>
11151156
<LI percentage="50%">
@@ -1123,7 +1164,7 @@ export const WhenVideoWithPlayButton = () => {
11231164
theme: Pillar.News,
11241165
}}
11251166
mediaPositionOnDesktop="left"
1126-
mainMedia={mainVideo}
1167+
mainMedia={mainYoutubeVideo}
11271168
canPlayInline={false}
11281169
/>
11291170
</LI>
@@ -1136,7 +1177,7 @@ export const WhenVideoWithPlayButton = () => {
11361177
theme: Pillar.News,
11371178
}}
11381179
mediaPositionOnDesktop="right"
1139-
mainMedia={mainVideo}
1180+
mainMedia={mainYoutubeVideo}
11401181
canPlayInline={false}
11411182
/>
11421183
</LI>
@@ -1150,7 +1191,7 @@ export const WhenVideoWithPlayButton = () => {
11501191
theme: Pillar.News,
11511192
}}
11521193
mediaPositionOnDesktop="right"
1153-
mainMedia={mainVideo}
1194+
mainMedia={mainYoutubeVideo}
11541195
canPlayInline={false}
11551196
/>
11561197
</LI>
@@ -1170,7 +1211,7 @@ export const WhenVideoWithPlayButton = () => {
11701211
mediaPositionOnDesktop="right"
11711212
mediaSize="large"
11721213
mediaPositionOnMobile="top"
1173-
mainMedia={mainVideo}
1214+
mainMedia={mainYoutubeVideo}
11741215
/>
11751216
</LI>
11761217
<LI percentage={'33.333%'} padSides={true} showDivider={true}>
@@ -1184,7 +1225,7 @@ export const WhenVideoWithPlayButton = () => {
11841225
mediaPositionOnDesktop="top"
11851226
mediaPositionOnMobile="left"
11861227
mediaSize="medium"
1187-
mainMedia={mainVideo}
1228+
mainMedia={mainYoutubeVideo}
11881229
/>
11891230
</LI>
11901231
</UL>

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

Lines changed: 40 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -447,17 +447,7 @@ export const Card = ({
447447
* A "video article" refers to standalone video content presented as the main focus of the article.
448448
* It is treated as a media card in the design system.
449449
*/
450-
const isVideoArticle =
451-
mainMedia?.type === 'YoutubeVideo' &&
452-
format.design === ArticleDesign.Video;
453-
454-
/**
455-
* Articles with a video as the main media but not classified as "video articles"
456-
* are styled differently and are not treated as media cards.
457-
*/
458-
const isVideoMainMedia =
459-
mainMedia?.type === 'YoutubeVideo' &&
460-
format.design !== ArticleDesign.Video;
450+
const isVideoArticle = format.design === ArticleDesign.Video;
461451

462452
const isLabs = format.theme === ArticleSpecial.Labs;
463453

@@ -521,7 +511,7 @@ export const Card = ({
521511
display: flex;
522512
`}
523513
>
524-
{isVideoArticle && (
514+
{mainMedia?.type === 'YoutubeVideo' && isVideoArticle && (
525515
<>
526516
{mainMedia.duration === 0 ? (
527517
<Pill
@@ -537,7 +527,6 @@ export const Card = ({
537527
)}
538528
</>
539529
)}
540-
541530
{mainMedia?.type === 'Audio' && (
542531
<Pill
543532
content={mainMedia.duration}
@@ -552,6 +541,22 @@ export const Card = ({
552541
prefix="Gallery"
553542
/>
554543
)}
544+
{mainMedia?.type === 'SelfHostedVideo' &&
545+
(format.design === ArticleDesign.Video ? (
546+
<Pill
547+
content=""
548+
icon={<SvgMediaControlsPlay width={18} />}
549+
prefix="Video"
550+
/>
551+
) : format.design === ArticleDesign.Audio ? (
552+
<Pill
553+
content=""
554+
icon={<SvgMediaControlsPlay width={18} />}
555+
prefix="Podcast"
556+
/>
557+
) : format.design === ArticleDesign.Gallery ? (
558+
<Pill content="" icon={<SvgCamera />} prefix="Gallery" />
559+
) : null)}
555560
{isNewsletter && <Pill content="Newsletter" />}
556561
</div>
557562
);
@@ -1122,26 +1127,28 @@ export const Card = ({
11221127
loading={imageLoading}
11231128
aspectRatio={aspectRatio}
11241129
/>
1125-
{isVideoMainMedia && mainMedia.duration > 0 && (
1126-
<div
1127-
css={css`
1128-
position: absolute;
1129-
top: ${space[2]}px;
1130-
right: ${space[2]}px;
1131-
`}
1132-
>
1133-
<Pill
1134-
content={secondsToDuration(
1135-
mainMedia.duration,
1136-
)}
1137-
icon={
1138-
<SvgMediaControlsPlay
1139-
width={18}
1140-
/>
1141-
}
1142-
/>
1143-
</div>
1144-
)}
1130+
{format.design !== ArticleDesign.Video &&
1131+
mainMedia?.type === 'YoutubeVideo' &&
1132+
mainMedia.duration > 0 && (
1133+
<div
1134+
css={css`
1135+
position: absolute;
1136+
top: ${space[2]}px;
1137+
right: ${space[2]}px;
1138+
`}
1139+
>
1140+
<Pill
1141+
content={secondsToDuration(
1142+
mainMedia.duration,
1143+
)}
1144+
icon={
1145+
<SvgMediaControlsPlay
1146+
width={18}
1147+
/>
1148+
}
1149+
/>
1150+
</div>
1151+
)}
11451152
</>
11461153
)}
11471154
{media.type === 'crossword' && (

0 commit comments

Comments
 (0)