Use the article main media in the card footer of youtube atom feature card overlay.

This requires drilling the article main media data through to be used on the card footer

Author: abeddow91

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

@@ -62,6 +62,7 @@ type Props = {
 	isNewsletter?: boolean;
 	shouldReserveSpace?: { mobile: boolean; desktop: boolean };
 	isStorylines?: boolean;
+	headline?: string;
 };
 
 export const CardFooter = ({
@@ -73,6 +74,7 @@ export const CardFooter = ({
 	isNewsletter,
 	shouldReserveSpace,
 	isStorylines,
+	headline,
 }: Props) => {
 	const shouldShowBranding =
 		format.theme === ArticleSpecial.Labs && !!cardBranding;
@@ -83,6 +85,7 @@ export const CardFooter = ({
 		mainMedia?.type === 'Gallery' ||
 		isNewsletter;
 
+	console.log(headline, shouldShowPill, mainMedia);
 	if (shouldShowPill) {
 		return (
 			<footer css={contentStyles}>

dotcom-rendering/src/components/FeatureCard.tsx

@@ -540,6 +540,7 @@ export const FeatureCard = ({
 										byline={byline}
 										showByline={showByline}
 										isLive={media.mainMedia.isLive}
+										articleMedia={articleMainMedia}
 									/>
 								</Island>
 							</div>
@@ -803,6 +804,7 @@ export const FeatureCard = ({
 											}
 											isNewsletter={isNewsletter}
 											mainMedia={articleMainMedia}
+											headline={headlineText}
 										/>
 
 										{!isImmersive &&

dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.tsx

@@ -4,6 +4,7 @@ import { useCallback, useState } from 'react';
 import type { ArticleFormat } from '../../lib/articleFormat';
 import type { AdTargeting } from '../../types/commercial';
 import type { AspectRatio } from '../../types/front';
+import type { MainMedia } from '../../types/mainMedia';
 import type { RenderingTarget } from '../../types/renderingTarget';
 import type { PlayButtonSize } from '../Card/components/PlayIcon';
 import type { ResponsiveFontSize } from '../CardHeadline';
@@ -64,6 +65,7 @@ export type Props = {
 	byline?: string;
 	showByline?: boolean;
 	isLive?: boolean;
+	articleMedia?: MainMedia;
 };
 
 /**
@@ -119,6 +121,7 @@ export const YoutubeAtom = ({
 	byline,
 	showByline,
 	isLive,
+	articleMedia,
 }: Props): JSX.Element => {
 	const [overlayClicked, setOverlayClicked] = useState<boolean>(false);
 	const [playerReady, setPlayerReady] = useState<boolean>(false);
@@ -266,6 +269,7 @@ export const YoutubeAtom = ({
 								isImmersive={isImmersive}
 								byline={byline}
 								showByline={showByline}
+								articleMedia={articleMedia}
 							/>
 						) : (
 							<YoutubeAtomOverlay

dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomFeatureCardOverlay.tsx

@@ -11,6 +11,7 @@ import { secondsToDuration } from '../../lib/formatTime';
 import { transparentColour } from '../../lib/transparentColour';
 import { palette } from '../../palette';
 import type { AspectRatio } from '../../types/front';
+import type { MainMedia } from '../../types/mainMedia';
 import { CardFooter } from '../Card/components/CardFooter';
 import { narrowPlayIconDiameter, PlayIcon } from '../Card/components/PlayIcon';
 import { TrailText } from '../Card/components/TrailText';
@@ -140,6 +141,7 @@ type Props = {
 	isImmersive?: boolean;
 	byline?: string;
 	showByline?: boolean;
+	articleMedia?: MainMedia;
 };
 
 export const YoutubeAtomFeatureCardOverlay = ({
@@ -166,6 +168,7 @@ export const YoutubeAtomFeatureCardOverlay = ({
 	isImmersive,
 	byline,
 	showByline,
+	articleMedia,
 }: Props) => {
 	const id = `youtube-overlay-${uniqueId}`;
 	const hasDuration = !isUndefined(duration) && duration > 0;
@@ -255,38 +258,28 @@ export const YoutubeAtomFeatureCardOverlay = ({
 							/>
 						</div>
 					)}
-
-					{isVideoArticle ? (
-						<Pill
-							content={
-								<time>{secondsToDuration(duration ?? 0)}</time>
-							}
-							prefix="Video"
-							icon={<SvgMediaControlsPlay width={18} />}
-						/>
-					) : (
-						<CardFooter
-							format={format}
-							age={
-								showCardAge ? (
-									<FeatureCardCardAge
-										webPublicationDate={webPublicationDate}
-										showClock={!!showClock}
-										serverTime={serverTime}
-									/>
-								) : undefined
-							}
-							commentCount={
-								showCommentCount ? (
-									<FeatureCardCommentCount
-										linkTo={linkTo}
-										discussionId={discussionId}
-										discussionApiUrl={discussionApiUrl}
-									/>
-								) : undefined
-							}
-						/>
-					)}
+					<CardFooter
+						format={format}
+						age={
+							showCardAge ? (
+								<FeatureCardCardAge
+									webPublicationDate={webPublicationDate}
+									showClock={!!showClock}
+									serverTime={serverTime}
+								/>
+							) : undefined
+						}
+						commentCount={
+							showCommentCount ? (
+								<FeatureCardCommentCount
+									linkTo={linkTo}
+									discussionId={discussionId}
+									discussionApiUrl={discussionApiUrl}
+								/>
+							) : undefined
+						}
+						mainMedia={articleMedia}
+					/>
 				</div>
 			</button>
 		</FormatBoundary>

dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx

@@ -5,6 +5,7 @@ import { useAB } from '../lib/useAB';
 import { useAdTargeting } from '../lib/useAdTargeting';
 import type { AdTargeting } from '../types/commercial';
 import type { AspectRatio } from '../types/front';
+import type { MainMedia } from '../types/mainMedia';
 import { Caption } from './Caption';
 import type { PlayButtonSize } from './Card/components/PlayIcon';
 import type { ResponsiveFontSize } from './CardHeadline';
@@ -55,6 +56,7 @@ type Props = {
 	contentType?: string;
 	contentLayout?: string;
 	isLive?: boolean;
+	articleMedia?: MainMedia;
 };
 
 export const YoutubeBlockComponent = ({
@@ -97,6 +99,7 @@ export const YoutubeBlockComponent = ({
 	contentType,
 	contentLayout,
 	isLive,
+	articleMedia,
 }: Props) => {
 	const [consentState, setConsentState] = useState<ConsentState | undefined>(
 		undefined,
@@ -225,6 +228,7 @@ export const YoutubeBlockComponent = ({
 				byline={byline}
 				showByline={showByline}
 				isLive={isLive}
+				articleMedia={articleMedia}
 			/>
 			{!hideCaption && (
 				<Caption