Render immersive feature media cards (#13675)

abeddow91 · web-flow · commit 2e56467f026c · 2025-03-25T12:15:57.000Z
* Pass through mobile aspect ratio to youtube component

* Add immersive styling to overlay

* fix comment

* linting

* Move podcast image inside overlay of feature card

* PR review comments
diff --git a/dotcom-rendering/src/components/FeatureCard.tsx b/dotcom-rendering/src/components/FeatureCard.tsx
@@ -157,13 +157,6 @@ const podcastImageContainerStyles = css`
 const podcastImageStyles = css`
 	height: 80px;
 	width: 80px;
-	position: absolute;
-	/**
-	 * Displays 8px above the text.
-	 * desired space above text (8px) - padding-top of text container (64px) = -56px
-	 */
-	bottom: -${space[14]}px;
-	left: ${space[2]}px;
 `;
 
 const starRatingWrapper = css`
@@ -382,6 +375,7 @@ export const FeatureCard = ({
 										hideCaption={true}
 										pauseOffscreenVideo={true}
 										aspectRatio={aspectRatio}
+										mobileAspectRatio={mobileAspectRatio}
 										altText={headlineText}
 										kickerText={kickerText}
 										trailText={
@@ -402,6 +396,7 @@ export const FeatureCard = ({
 										discussionId={discussionId}
 										discussionApiUrl={discussionApiUrl}
 										isFeatureCard={true}
+										isImmersive={isImmersive}
 									/>
 								</Island>
 							</div>
@@ -481,40 +476,45 @@ export const FeatureCard = ({
 											immersiveOverlayContainerStyles,
 									]}
 								>
-									{mainMedia?.type === 'Audio' &&
-										!!mainMedia.podcastImage?.src && (
-											<div
-												css={
-													podcastImageContainerStyles
-												}
-											>
-												<div css={podcastImageStyles}>
-													<CardPicture
-														mainImage={
-															mainMedia
-																.podcastImage
-																.src
-														}
-														imageSize="podcast"
-														alt={
-															mainMedia
-																.podcastImage
-																.altText ?? ''
-														}
-														loading="lazy"
-														roundedCorners={false}
-														aspectRatio="1:1"
-													/>
-												</div>
-											</div>
-										)}
 									<div
 										css={[
 											overlayStyles,
 											isImmersive &&
 												immersiveOverlayStyles,
 										]}
 									>
+										{mainMedia?.type === 'Audio' &&
+											!!mainMedia.podcastImage?.src && (
+												<div
+													css={
+														podcastImageContainerStyles
+													}
+												>
+													<div
+														css={podcastImageStyles}
+													>
+														<CardPicture
+															mainImage={
+																mainMedia
+																	.podcastImage
+																	.src
+															}
+															imageSize="podcast"
+															alt={
+																mainMedia
+																	.podcastImage
+																	.altText ??
+																''
+															}
+															loading="lazy"
+															roundedCorners={
+																false
+															}
+															aspectRatio="1:1"
+														/>
+													</div>
+												</div>
+											)}
 										{/**
 										 * Without the wrapping div the headline and byline would have space
 										 * inserted between them due to being direct children of the flex container
diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx
@@ -196,8 +196,8 @@ const SplashCardLayout = ({
 	const card = cards[0];
 	if (!card) return null;
 
-	const isImmersive = false; // TODO: replace with live data from fronts tool - used for testing
-	const shouldShowImmersive = isImmersive && !isMediaCard(card.format);
+	// TODO: replace with live data from fronts tool - used for testing
+	const shouldShowImmersive = false;
 
 	if (shouldShowImmersive) {
 		return (
diff --git a/dotcom-rendering/src/components/MaintainAspectRatio.tsx b/dotcom-rendering/src/components/MaintainAspectRatio.tsx
@@ -1,40 +1,65 @@
 import { css } from '@emotion/react';
+import { until } from '@guardian/source/foundations';
 import type { AspectRatio } from '../types/front';
 
 type Props = {
 	height: number;
 	width: number;
 	aspectRatio?: AspectRatio;
+	mobileAspectRatio?: AspectRatio;
 	children: React.ReactNode;
 };
 
+const getAspectRatioPadding = (aspectRatio: AspectRatio): string => {
+	switch (aspectRatio) {
+		case '5:4':
+			return '80%';
+		case '4:5':
+			return '125%';
+		case '1:1':
+			return '100%';
+		case '5:3':
+			return '60%';
+	}
+};
+
+const mobileAspectRatioStyles = (aspectRatio: AspectRatio) => {
+	return css`
+		${until.tablet} {
+			padding-bottom: ${getAspectRatioPadding(aspectRatio)};
+		}
+	`;
+};
+
 export const MaintainAspectRatio = ({
 	height,
 	width,
 	aspectRatio,
+	mobileAspectRatio,
 	children,
 }: Props) => {
 	/* https://css-tricks.com/aspect-ratio-boxes/ */
-	const paddingBottom =
-		aspectRatio === '5:4'
-			? `${(4 / 5) * 100}%`
-			: `${(height / width) * 100}%`;
-
+	const paddingBottom = aspectRatio
+		? getAspectRatioPadding(aspectRatio)
+		: `${(height / width) * 100}%`;
 	return (
 		<div
-			css={css`
-				/* position relative to contain the absolutely positioned iframe plus any Overlay image */
-				position: relative;
-				padding-bottom: ${paddingBottom};
-				& > iframe,
-				& > video {
-					width: 100%;
-					height: 100%;
-					position: absolute;
-					top: 0;
-					left: 0;
-				}
-			`}
+			css={[
+				css`
+					/* position relative to contain the absolutely positioned iframe plus any Overlay image */
+					position: relative;
+					padding-bottom: ${paddingBottom};
+					& > iframe,
+					& > video {
+						width: 100%;
+						height: 100%;
+						position: absolute;
+						top: 0;
+						left: 0;
+					}
+				`,
+				mobileAspectRatio && mobileAspectRatioStyles(mobileAspectRatio),
+			]}
 		>
 			{children}
 		</div>
diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.tsx
@@ -51,6 +51,7 @@ export type Props = {
 	hidePillOnMobile: boolean;
 	renderingTarget: RenderingTarget;
 	aspectRatio?: AspectRatio;
+	mobileAspectRatio?: AspectRatio;
 	trailText?: string;
 	headlineSizes?: ResponsiveFontSize;
 	isVideoArticle?: boolean;
@@ -61,6 +62,7 @@ export type Props = {
 	discussionApiUrl?: string;
 	discussionId?: string;
 	isFeatureCard?: boolean;
+	isImmersive?: boolean;
 };
 
 /**
@@ -103,6 +105,7 @@ export const YoutubeAtom = ({
 	hidePillOnMobile,
 	renderingTarget,
 	aspectRatio,
+	mobileAspectRatio,
 	trailText,
 	headlineSizes,
 	isVideoArticle,
@@ -113,6 +116,7 @@ export const YoutubeAtom = ({
 	discussionApiUrl,
 	discussionId,
 	isFeatureCard,
+	isImmersive,
 }: Props): JSX.Element => {
 	const [overlayClicked, setOverlayClicked] = useState<boolean>(false);
 	const [playerReady, setPlayerReady] = useState<boolean>(false);
@@ -200,6 +204,7 @@ export const YoutubeAtom = ({
 					height={height}
 					width={width}
 					aspectRatio={aspectRatio}
+					mobileAspectRatio={mobileAspectRatio}
 				>
 					{
 						/**
@@ -248,6 +253,7 @@ export const YoutubeAtom = ({
 								duration={duration}
 								kicker={kicker}
 								aspectRatio={aspectRatio}
+								mobileAspectRatio={mobileAspectRatio}
 								trailText={trailText}
 								isVideoArticle={isVideoArticle}
 								webPublicationDate={webPublicationDate}
@@ -256,6 +262,7 @@ export const YoutubeAtom = ({
 								linkTo={linkTo}
 								discussionId={discussionId}
 								discussionApiUrl={discussionApiUrl}
+								isImmersive={isImmersive}
 							/>
 						) : (
 							<YoutubeAtomOverlay
diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomFeatureCardOverlay.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomFeatureCardOverlay.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { isUndefined } from '@guardian/libs';
-import { space } from '@guardian/source/foundations';
+import { from, space } from '@guardian/source/foundations';
 import type { ArticleFormat } from '../../lib/articleFormat';
 import { secondsToDuration } from '../../lib/formatTime';
 import { palette } from '../../palette';
@@ -49,17 +49,9 @@ const hoverStyles = css`
 	}
 `;
 
-const textOverlayStyles = css`
-	width: 100%;
-	position: absolute;
-	bottom: 0;
-	display: flex;
-	flex-direction: column;
-	text-align: start;
-	gap: ${space[1]}px;
-	padding: 64px ${space[2]}px ${space[2]}px;
+const overlayMaskGradientStyles = (angle: string) => css`
 	mask-image: linear-gradient(
-		180deg,
+		${angle},
 		transparent 0px,
 		rgba(0, 0, 0, 0.0381) 8px,
 		rgba(0, 0, 0, 0.1464) 16px,
@@ -70,9 +62,31 @@ const textOverlayStyles = css`
 		rgba(0, 0, 0, 0.9619) 56px,
 		rgb(0, 0, 0) 64px
 	);
+`;
+const textOverlayStyles = css`
+	width: 100%;
+	position: absolute;
+	bottom: 0;
+	display: flex;
+	flex-direction: column;
+	text-align: start;
+	gap: ${space[1]}px;
+	padding: 64px ${space[2]}px ${space[2]}px;
+	${overlayMaskGradientStyles('180deg')};
+
 	backdrop-filter: blur(12px) brightness(0.5);
 `;
 
+const immersiveOverlayStyles = css`
+	${from.tablet} {
+		height: 100%;
+		width: 25%;
+		padding: ${space[2]}px 64px ${space[2]}px ${space[2]}px;
+		backdrop-filter: blur(12px) brightness(0.5);
+		${overlayMaskGradientStyles('270deg')}
+	}
+`;
+
 const videoPillStyles = css`
 	position: absolute;
 	top: ${space[2]}px;
@@ -92,6 +106,7 @@ type Props = {
 	duration?: number; // in seconds
 	kicker?: string;
 	aspectRatio?: AspectRatio;
+	mobileAspectRatio?: AspectRatio;
 	trailText?: string;
 	isVideoArticle?: boolean;
 	webPublicationDate?: string;
@@ -100,6 +115,7 @@ type Props = {
 	linkTo?: string;
 	discussionApiUrl?: string;
 	discussionId?: string;
+	isImmersive?: boolean;
 };
 
 export const YoutubeAtomFeatureCardOverlay = ({
@@ -115,6 +131,7 @@ export const YoutubeAtomFeatureCardOverlay = ({
 	kicker,
 	format,
 	aspectRatio,
+	mobileAspectRatio,
 	trailText,
 	isVideoArticle,
 	webPublicationDate,
@@ -123,6 +140,7 @@ export const YoutubeAtomFeatureCardOverlay = ({
 	linkTo,
 	discussionId,
 	discussionApiUrl,
+	isImmersive,
 }: Props) => {
 	const id = `youtube-overlay-${uniqueId}`;
 	const hasDuration = !isUndefined(duration) && duration > 0;
@@ -153,6 +171,7 @@ export const YoutubeAtomFeatureCardOverlay = ({
 						height={height}
 						width={width}
 						aspectRatio={aspectRatio}
+						mobileAspectRatio={mobileAspectRatio}
 					/>
 				)}
 				{hasDuration && !isVideoArticle ? (
@@ -165,7 +184,12 @@ export const YoutubeAtomFeatureCardOverlay = ({
 				) : null}
 				<div className="image-overlay" />
 				<PlayIcon iconWidth="narrow" />
-				<div css={[textOverlayStyles]}>
+				<div
+					css={[
+						textOverlayStyles,
+						isImmersive && immersiveOverlayStyles,
+					]}
+				>
 					{!!kicker && (
 						<Kicker
 							text={kicker}
diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPicture.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPicture.tsx
diff --git a/dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx b/dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx
