Merge pull request #13318 from guardian/doml/feature-card-video

Play Youtube video within Feature Cards

Author: domlander

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

@@ -914,12 +914,9 @@ export const Card = ({
 													containerType ===
 													'fixed/video'
 												}
-												imagePositionOnMobile={
-													imagePositionOnMobile
-												}
 												//** TODO: IMPROVE THIS MAPPING */
 												// image size defaults to small if not provided. However, if the headline size is large or greater, we want to assume the image is also large so that the play icon is correctly sized.
-												imageSize={
+												iconSizeOnDesktop={
 													[
 														'small',
 														'medium',
@@ -929,9 +926,23 @@ export const Card = ({
 													].includes(
 														headlineSizes?.desktop ??
 															'',
-													)
+													) || imageSize !== 'small'
 														? 'large'
-														: imageSize
+														: 'small'
+												}
+												iconSizeOnMobile={
+													imagePositionOnMobile ===
+														'left' ||
+													imagePositionOnMobile ===
+														'right'
+														? 'small'
+														: 'large'
+												}
+												hidePillOnMobile={
+													imagePositionOnMobile ===
+														'left' ||
+													imagePositionOnMobile ===
+														'right'
 												}
 												enableAds={false}
 												aspectRatio={aspectRatio}

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

@@ -19,9 +19,7 @@ type Props = {
 const ageStyles = (colour: string) => {
 	return css`
 		${textSansBold12};
-
 		color: ${colour};
-
 		margin-top: -4px;
 
 		svg {

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,17 +1,18 @@
 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 type { ImagePositionType, ImageSizeType } from './ImageWrapper';
+import { SvgMediaControlsPlay as WidePlayIcon } from '@guardian/source/react-components';
+import { SvgMediaControlsPlay as NarrowPlayIcon } from '../../../components/SvgMediaControlsPlay';
+import { palette } from '../../../palette';
 
-type PlayButtonSize = keyof typeof sizes;
+export type PlayButtonSize = keyof typeof sizes;
 
 const sizes = {
 	small: { button: 40, icon: 32 },
 	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`
@@ -42,48 +43,59 @@ 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>;
 
-const getIconSizeOnDesktop = (imageSize: ImageSizeType) => {
-	switch (imageSize) {
-		case 'jumbo':
-		case 'large':
-		case 'podcast':
-		case 'carousel':
-		case 'medium':
-		case 'feature':
-		case 'feature-large':
-			return 'large';
-		case 'small':
-			return 'small';
-	}
-};
-
-const getIconSizeOnMobile = (imagePositionOnMobile: ImagePositionType) =>
-	imagePositionOnMobile === 'left' || imagePositionOnMobile === 'right'
-		? 'small'
-		: 'large';
+type Props =
+	| {
+			iconWidth: 'wide';
+			iconSizeOnDesktop: PlayButtonSize;
+			iconSizeOnMobile: PlayButtonSize;
+	  }
+	| {
+			iconWidth: 'narrow';
+			iconSizeOnDesktop?: never;
+			iconSizeOnMobile?: never;
+	  };
 
 export const PlayIcon = ({
-	imageSize,
-	imagePositionOnMobile,
-}: {
-	imageSize: ImageSizeType;
-	imagePositionOnMobile: ImagePositionType;
-}) => {
+	iconWidth,
+	iconSizeOnDesktop,
+	iconSizeOnMobile,
+}: Props) => {
 	return (
 		<div
 			className="play-icon"
 			css={[
-				iconStyles(
-					getIconSizeOnDesktop(imageSize),
-					getIconSizeOnMobile(imagePositionOnMobile),
-				),
+				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 = {