Skip to content

Commit

Permalink
feat(Card): Support mainVideo
Browse files Browse the repository at this point in the history 
The settings comes from the facia-tool via Frontend,
when “Show Video” is enabled for a trail in a container,
it should be displayed as a playable video inline instead
or redirecting to the article itself.

Currently, only Youtube Atoms are supported.

There is currently no guarantee that the first atom will be the expected
video, but it happens to be the case the vast majority of the time

A minimum Card width of one third or three columns is required for
the YouTube atom to be embedded, similar to the existing Frontend logic:
https://github.com/guardian/frontend/blob/1c4555a9f/common/app/layout/cards/CardType.scala#L20-L23
  • Loading branch information
@mxdvl
mxdvl committed Jun 28, 2023
1 parent eafd8a0 commit 17bb65c
Show file tree
Hide file tree
Showing 16 changed files with 309 additions and 59 deletions.
40 changes: 20 additions & 20 deletions dotcom-rendering/fixtures/manual/trails.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export const trails: [
kickerText: 'Kicker',
},
],
showMainVideo: false,
mainVideo: undefined,
isExternalLink: false,
showLivePlayable: false,
},
Expand All @@ -91,7 +91,7 @@ export const trails: [
mediaDuration: 378,
dataLinkName: 'news | group-0 | card-@2',
showQuotedHeadline: false,
showMainVideo: false,
mainVideo: undefined,
isExternalLink: false,
showLivePlayable: false,
},
Expand All @@ -110,7 +110,7 @@ export const trails: [
kickerText: 'Live',
dataLinkName: 'news | group-0 | card-@3',
showQuotedHeadline: false,
showMainVideo: false,
mainVideo: undefined,
isExternalLink: false,
showLivePlayable: false,
},
Expand All @@ -128,7 +128,7 @@ export const trails: [
},
dataLinkName: 'news | group-0 | card-@4',
showQuotedHeadline: true,
showMainVideo: false,
mainVideo: undefined,
isExternalLink: false,
showLivePlayable: false,
},
Expand All @@ -146,7 +146,7 @@ export const trails: [
},
dataLinkName: 'news | group-0 | card-@5',
showQuotedHeadline: false,
showMainVideo: false,
mainVideo: undefined,
isExternalLink: false,
showLivePlayable: false,
},
Expand All @@ -165,7 +165,7 @@ export const trails: [
},
dataLinkName: 'news | group-0 | card-@6',
showQuotedHeadline: false,
showMainVideo: false,
mainVideo: undefined,
isExternalLink: false,
showLivePlayable: false,
},
Expand All @@ -185,7 +185,7 @@ export const trails: [
},
dataLinkName: 'news | group-0 | card-@7',
showQuotedHeadline: false,
showMainVideo: false,
mainVideo: undefined,
isExternalLink: false,
showLivePlayable: false,
},
Expand All @@ -204,7 +204,7 @@ export const trails: [
},
dataLinkName: 'news | group-0 | card-@8',
showQuotedHeadline: false,
showMainVideo: false,
mainVideo: undefined,
isExternalLink: false,
showLivePlayable: false,
},
Expand All @@ -225,7 +225,7 @@ export const trails: [
'UK Covid live: England lockdown to be eased in stages, says PM, amid reports of nationwide mass testing',
dataLinkName: 'news | group-0 | card-@9',
showQuotedHeadline: false,
showMainVideo: false,
mainVideo: undefined,
isExternalLink: false,
showLivePlayable: false,
},
Expand All @@ -245,7 +245,7 @@ export const trails: [
'UK to infect up to 90 healthy volunteers with Covid in world first trial',
dataLinkName: 'news | group-0 | card-@10',
showQuotedHeadline: false,
showMainVideo: false,
mainVideo: undefined,
isExternalLink: false,
showLivePlayable: false,
},
Expand All @@ -265,7 +265,7 @@ export const trails: [
'Scottish government inadequately prepared for Covid, says watchdog',
dataLinkName: 'news | group-0 | card-@11',
showQuotedHeadline: false,
showMainVideo: false,
mainVideo: undefined,
isExternalLink: false,
showLivePlayable: false,
},
Expand All @@ -285,7 +285,7 @@ export const trails: [
'‘Encouraging’ signs for Covid vaccine as over-80s deaths fall in England',
dataLinkName: 'news | group-0 | card-@12',
showQuotedHeadline: false,
showMainVideo: false,
mainVideo: undefined,
isExternalLink: false,
showLivePlayable: false,
},
Expand All @@ -305,7 +305,7 @@ export const trails: [
'Contact tracing alone has little impact on curbing Covid spread, report finds',
dataLinkName: 'news | group-0 | card-@1',
showQuotedHeadline: false,
showMainVideo: false,
mainVideo: undefined,
isExternalLink: false,
showLivePlayable: false,
},
Expand All @@ -325,7 +325,7 @@ export const trails: [
'Ethnicity and poverty are Covid risk factors, new Oxford modelling tool shows',
dataLinkName: 'news | group-0 | card-@13',
showQuotedHeadline: false,
showMainVideo: false,
mainVideo: undefined,
isExternalLink: false,
showLivePlayable: false,
},
Expand All @@ -345,7 +345,7 @@ export const trails: [
'UK Covid: 799 more deaths and 10,625 new cases reported; Scottish schools in phased return from Monday – as it happened',
dataLinkName: 'news | group-0 | card-@14',
showQuotedHeadline: false,
showMainVideo: false,
mainVideo: undefined,
isExternalLink: false,
showLivePlayable: false,
},
Expand All @@ -365,7 +365,7 @@ export const trails: [
'QCovid: how improved algorithm can identify more higher-risk adults',
dataLinkName: 'news | group-0 | card-@1',
showQuotedHeadline: false,
showMainVideo: false,
mainVideo: undefined,
isExternalLink: false,
showLivePlayable: false,
},
Expand All @@ -383,7 +383,7 @@ export const trails: [
},
dataLinkName: 'news | group-0 | card-@15',
showQuotedHeadline: false,
showMainVideo: false,
mainVideo: undefined,
isExternalLink: false,
showLivePlayable: false,
},
Expand All @@ -402,7 +402,7 @@ export const trails: [
},
dataLinkName: 'news | group-0 | card-@16',
showQuotedHeadline: false,
showMainVideo: false,
mainVideo: undefined,
isExternalLink: false,
showLivePlayable: false,
},
Expand All @@ -421,7 +421,7 @@ export const trails: [
},
dataLinkName: 'news | group-0 | card-@17',
showQuotedHeadline: false,
showMainVideo: false,
mainVideo: undefined,
isExternalLink: false,
showLivePlayable: false,
},
Expand All @@ -440,7 +440,7 @@ export const trails: [
},
dataLinkName: 'news | group-0 | card-@18',
showQuotedHeadline: false,
showMainVideo: false,
mainVideo: undefined,
isExternalLink: false,
showLivePlayable: false,
},
Expand Down
1 change: 1 addition & 0 deletions dotcom-rendering/makefile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,7 @@ gen-schema:
@git add src/model/article-schema.json
@git add src/model/front-schema.json
@git add src/model/block-schema.json
@git add src/model/tag-front-schema.json

check-stories:
$(call log, "Checking Storybook stories")
Expand Down
27 changes: 18 additions & 9 deletions dotcom-rendering/src/components/Card/Card.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
} from '@guardian/libs';
import { from } from '@guardian/source-foundations';
import React from 'react';
import type { CardYoutubeVideo } from '../../types/video';
import { Section } from '../Section';
import type { Props as CardProps } from './Card';
import { Card } from './Card';
Expand Down Expand Up @@ -43,6 +44,14 @@ const aBasicLink = {
},
};

const mainVideo: CardYoutubeVideo = {
elementId: 'some-atom-id',
videoId: 'abcd-01234',
width: 500,
height: 300,
origin: 'The Guardian',
};

const CardWrapper = ({ children }: { children: React.ReactNode }) => {
return (
<div
Expand Down Expand Up @@ -920,7 +929,7 @@ export const WhenVideoWithPlayButton = () => {
imagePositionOnMobile="top"
mediaDuration={200}
mediaType="Video"
showMainVideo={true}
mainVideo={mainVideo}
/>
</LI>
</UL>
Expand All @@ -938,7 +947,7 @@ export const WhenVideoWithPlayButton = () => {
imagePositionOnMobile="top"
mediaDuration={200}
mediaType="Video"
showMainVideo={true}
mainVideo={mainVideo}
/>
</LI>
<LI percentage={'25%'} padSides={true} showDivider={true}>
Expand All @@ -952,7 +961,7 @@ export const WhenVideoWithPlayButton = () => {
imagePosition="top"
mediaDuration={200}
mediaType="Video"
showMainVideo={true}
mainVideo={mainVideo}
/>
</LI>
</UL>
Expand All @@ -970,7 +979,7 @@ export const WhenVideoWithPlayButton = () => {
imagePositionOnMobile="bottom"
mediaDuration={200}
mediaType="Video"
showMainVideo={true}
mainVideo={mainVideo}
/>
</LI>
<LI percentage="50%">
Expand All @@ -986,7 +995,7 @@ export const WhenVideoWithPlayButton = () => {
imagePosition="left"
mediaDuration={200}
mediaType="Video"
showMainVideo={true}
mainVideo={mainVideo}
/>
</LI>
<LI padSides={true}>
Expand All @@ -1000,7 +1009,7 @@ export const WhenVideoWithPlayButton = () => {
imagePosition="right"
mediaDuration={200}
mediaType="Video"
showMainVideo={true}
mainVideo={mainVideo}
/>
</LI>

Expand All @@ -1015,7 +1024,7 @@ export const WhenVideoWithPlayButton = () => {
imagePosition="right"
mediaDuration={200}
mediaType="Video"
showMainVideo={true}
mainVideo={mainVideo}
/>
</LI>
</UL>
Expand All @@ -1036,7 +1045,7 @@ export const WhenVideoWithPlayButton = () => {
imagePositionOnMobile="top"
mediaDuration={200}
mediaType="Video"
showMainVideo={true}
mainVideo={mainVideo}
/>
</LI>
<LI percentage={'33.333%'} padSides={true} showDivider={true}>
Expand All @@ -1052,7 +1061,7 @@ export const WhenVideoWithPlayButton = () => {
imageSize="medium"
mediaDuration={200}
mediaType="Video"
showMainVideo={true}
mainVideo={mainVideo}
/>
</LI>
</UL>
Expand Down
37 changes: 33 additions & 4 deletions dotcom-rendering/src/components/Card/Card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import type {
DCRSupportingContent,
} from '../../types/front';
import type { Palette } from '../../types/palette';
import type { CardYoutubeVideo } from '../../types/video';
import { Avatar } from '../Avatar';
import { CardHeadline } from '../CardHeadline';
import { CardPicture } from '../CardPicture';
Expand All @@ -27,6 +28,7 @@ import { SnapCssSandbox } from '../SnapCssSandbox';
import { StarRating } from '../StarRating/StarRating';
import type { Alignment } from '../SupportingContent';
import { SupportingContent } from '../SupportingContent';
import { YoutubeBlockComponent } from '../YoutubeBlockComponent.importable';
import { AvatarContainer } from './components/AvatarContainer';
import { CardAge } from './components/CardAge';
import { CardBranding } from './components/CardBranding';
Expand Down Expand Up @@ -64,7 +66,7 @@ export type Props = {
showClock?: boolean;
mediaType?: MediaType;
mediaDuration?: number;
showMainVideo?: boolean;
mainVideo?: CardYoutubeVideo;
kickerText?: string;
showPulsingDot?: boolean;
starRating?: number;
Expand Down Expand Up @@ -276,7 +278,7 @@ export const Card = ({
avatarUrl,
showClock,
mediaDuration,
showMainVideo,
mainVideo,
kickerText,
showPulsingDot,
starRating,
Expand Down Expand Up @@ -420,7 +422,7 @@ export const Card = ({
imageType={image.type}
imagePosition={imagePosition}
imagePositionOnMobile={imagePositionOnMobile}
showPlayIcon={showMainVideo ?? false}
mainVideo={mainVideo}
>
{image.type === 'slideshow' &&
image.slideshowImages && (
Expand All @@ -442,7 +444,34 @@ export const Card = ({
/>
</AvatarContainer>
)}
{image.type === 'mainMedia' && (
{mainVideo && (
<div
data-chromatic="ignore"
data-component="youtube-atom"
css={css`
display: block;
position: relative;
${getZIndex('card-nested-link')}
`}
>
<Island>
<YoutubeBlockComponent
id={mainVideo.elementId}
elementId={mainVideo.elementId}
assetId={mainVideo.videoId}
duration={mainVideo.duration}
posterImage={mainVideo.images}
width={mainVideo.width}
height={mainVideo.height}
format={format}
expired={false}
role="inline"
stickyVideos={false}
/>
</Island>
</div>
)}
{image.type === 'mainMedia' && !mainVideo && (
<CardPicture
master={image.src}
imageSize={imageSize}
Expand Down
Loading

0 comments on commit 17bb65c

Please sign in to comment.