Support playing youtube videos in feature cards

Author: domlander

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

@@ -55,10 +55,10 @@ type Props = {
 
 export const CardFooter = ({
 	format,
+	showLivePlayable,
 	age,
 	commentCount,
 	cardBranding,
-	showLivePlayable,
 	isVideo,
 	videoDuration,
 	isAudio,
@@ -107,6 +107,10 @@ export const CardFooter = ({
 		);
 	}
 
+	if (age === undefined && commentCount === undefined) {
+		return null;
+	}
+
 	return (
 		<footer css={contentStyles}>
 			{age}

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

@@ -1,7 +1,9 @@
 import { css } from '@emotion/react';
-import { from, palette } from '@guardian/source/foundations';
+import { from, palette as sourcePalette } from '@guardian/source/foundations';
 import type { ThemeIcon } from '@guardian/source/react-components';
-import { SvgMediaControlsPlay } from '@guardian/source/react-components';
+import { SvgMediaControlsPlay as WidePlayIcon } from '@guardian/source/react-components';
+import { SvgMediaControlsPlay as NarrowPlayIcon } from '../../../components/SvgMediaControlsPlay';
+import { palette } from '../../../palette';
 
 export type PlayButtonSize = keyof typeof sizes;
 
@@ -10,7 +12,7 @@ const sizes = {
 	large: { button: 80, icon: 72 },
 } as const satisfies Record<string, { button: number; icon: number }>;
 
-const iconStyles = (
+const wideIconStyles = (
 	size: PlayButtonSize,
 	sizeOnMobile: Extract<PlayButtonSize, 'small' | 'large'>,
 ) => css`
@@ -41,22 +43,53 @@ const iconStyles = (
 	}
 `;
 
+const narrowPlayIconWidth = 56;
+const narrowStyles = css`
+	position: absolute;
+	/**
+	 * Subject to change. We will wait to see how fronts editors use the
+	 * headlines and standfirsts before we decide on a final position.
+	 */
+	top: 35%;
+	left: calc(50% - ${narrowPlayIconWidth / 2}px);
+	width: ${narrowPlayIconWidth}px;
+	height: ${narrowPlayIconWidth}px;
+	background-color: ${palette('--feature-card-play-icon-background')};
+	opacity: 0.7;
+	border-radius: 50%;
+	border: 1px solid ${palette('--feature-card-play-icon-border')};
+	fill: ${palette('--feature-card-play-icon-fill')};
+`;
+
 const theme = {
-	fill: palette.neutral[100],
+	fill: sourcePalette.neutral[100],
 } satisfies Partial<ThemeIcon>;
 
 type Props = {
 	iconSizeOnDesktop: PlayButtonSize;
 	iconSizeOnMobile: PlayButtonSize;
+	iconWidth: 'narrow' | 'wide';
 };
 
-export const PlayIcon = ({ iconSizeOnDesktop, iconSizeOnMobile }: Props) => {
+export const PlayIcon = ({
+	iconSizeOnDesktop,
+	iconSizeOnMobile,
+	iconWidth,
+}: Props) => {
 	return (
 		<div
 			className="play-icon"
-			css={[iconStyles(iconSizeOnDesktop, iconSizeOnMobile)]}
+			css={[
+				iconWidth === 'narrow' && narrowStyles,
+				iconWidth === 'wide' &&
+					wideIconStyles(iconSizeOnDesktop, iconSizeOnMobile),
+			]}
 		>
-			<SvgMediaControlsPlay theme={theme} />
+			{iconWidth === 'narrow' ? (
+				<NarrowPlayIcon theme={theme} />
+			) : (
+				<WidePlayIcon theme={theme} />
+			)}
 		</div>
 	);
 };

dotcom-rendering/src/components/DecideContainer.tsx

@@ -45,6 +45,7 @@ type Props = {
 	aspectRatio: AspectRatio;
 	sectionId: string;
 	frontId?: string;
+	collectionId: number;
 };
 
 export const DecideContainer = ({
@@ -58,6 +59,7 @@ export const DecideContainer = ({
 	aspectRatio,
 	sectionId,
 	frontId,
+	collectionId,
 }: Props) => {
 	// If you add a new container type which contains an MPU, you must also add it to
 	switch (containerType) {
@@ -313,6 +315,7 @@ export const DecideContainer = ({
 						containerPalette={containerPalette}
 						absoluteServerTimes={absoluteServerTimes}
 						aspectRatio={aspectRatio}
+						collectionId={collectionId}
 					/>
 				</Island>
 			);
@@ -324,6 +327,7 @@ export const DecideContainer = ({
 					absoluteServerTimes={absoluteServerTimes}
 					imageLoading={imageLoading}
 					aspectRatio={aspectRatio}
+					collectionId={collectionId}
 				/>
 			);
 		default:

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

@@ -31,6 +31,7 @@ const cardProps: CardProps = {
 	showPulsingDot: false,
 	showClock: false,
 	imageSize: 'feature',
+	collectionId: 1,
 };
 
 const aBasicLink = {