Merge pull request #13344 from guardian/mob/video-spike

domlander · web-flow · commit 8bef7c7ec2f2 · 2025-02-18T11:14:01.000Z
Display test loop video container when in 0% AB test
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -151,6 +151,7 @@ export type Props = {
 	showKickerImage?: boolean;
 	galleryCount?: number;
 	audioDuration?: string;
+	isInLoopVideoTest?: boolean;
 };
 
 const starWrapper = (cardHasImage: boolean) => css`
@@ -408,6 +409,7 @@ export const Card = ({
 	showKickerImage = false,
 	galleryCount,
 	audioDuration,
+	isInLoopVideoTest = false,
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 	const sublinkPosition = decideSublinkPosition(
@@ -816,6 +818,7 @@ export const Card = ({
 							media.type === 'slideshow' && isFlexibleContainer
 						}
 						padImage={isMediaCard && isBetaContainer}
+						isInLoopVideoTest={isInLoopVideoTest}
 					>
 						{media.type === 'slideshow' &&
 							(isFlexibleContainer ? (
@@ -982,6 +985,7 @@ export const Card = ({
 									loading={imageLoading}
 									roundedCorners={isOnwardContent}
 									aspectRatio={aspectRatio}
+									isInLoopVideoTest={isInLoopVideoTest}
 								/>
 								{(isVideoMainMedia ||
 									(isVideoArticle && !isBetaContainer)) &&
diff --git a/dotcom-rendering/src/components/Card/components/ImageWrapper.tsx b/dotcom-rendering/src/components/Card/components/ImageWrapper.tsx
@@ -42,6 +42,7 @@ type Props = {
 	 */
 	hideImageOverlay?: boolean;
 	padImage?: boolean;
+	isInLoopVideoTest?: boolean;
 };
 
 /**
@@ -128,11 +129,13 @@ export const ImageWrapper = ({
 	imagePositionOnMobile,
 	hideImageOverlay,
 	padImage,
+	isInLoopVideoTest = false,
 }: Props) => {
 	const isHorizontalOnDesktop =
 		imagePositionOnDesktop === 'left' || imagePositionOnDesktop === 'right';
 	const isHorizontalOnMobile =
 		imagePositionOnMobile === 'left' || imagePositionOnMobile === 'right';
+
 	return (
 		<div
 			css={[
@@ -179,7 +182,8 @@ export const ImageWrapper = ({
 				{children}
 				{/* This image overlay is styled when the CardLink is hovered */}
 				{(imageType === 'picture' || imageType === 'slideshow') &&
-					!hideImageOverlay && <div className="image-overlay" />}
+					!hideImageOverlay &&
+					!isInLoopVideoTest && <div className="image-overlay" />}
 			</>
 		</div>
 	);
diff --git a/dotcom-rendering/src/components/CardPicture.tsx b/dotcom-rendering/src/components/CardPicture.tsx
@@ -4,6 +4,7 @@ import type { ImgHTMLAttributes } from 'react';
 import React from 'react';
 import type { AspectRatio } from '../types/front';
 import type { ImageSizeType } from './Card/components/ImageWrapper';
+import { LoopVideoABTest } from './LoopVideoABTest';
 import type { ImageWidthType } from './Picture';
 import { generateSources, getFallbackSource } from './Picture';
 
@@ -17,6 +18,7 @@ type Props = {
 	roundedCorners?: boolean;
 	isCircular?: boolean;
 	aspectRatio?: AspectRatio;
+	isInLoopVideoTest?: boolean;
 };
 
 /**
@@ -155,6 +157,7 @@ export const CardPicture = ({
 	roundedCorners,
 	isCircular,
 	aspectRatio,
+	isInLoopVideoTest = false,
 }: Props) => {
 	const sources = generateSources(
 		mainImage,
@@ -164,6 +167,10 @@ export const CardPicture = ({
 
 	const fallbackSource = getFallbackSource(sources);
 
+	if (isInLoopVideoTest) {
+		return <LoopVideoABTest />;
+	}
+
 	return (
 		<picture
 			data-size={imageSize}
diff --git a/dotcom-rendering/src/components/FrontCard.tsx b/dotcom-rendering/src/components/FrontCard.tsx
@@ -58,6 +58,7 @@ export const FrontCard = (props: Props) => {
 		galleryCount: trail.galleryCount,
 		podcastImage: trail.podcastImage,
 		audioDuration: trail.audioDuration,
+		isInLoopVideoTest: trail.isInLoopVideoTest,
 	};
 
 	return Card({ ...defaultProps, ...cardProps });
diff --git a/dotcom-rendering/src/components/LoopVideoABTest.tsx b/dotcom-rendering/src/components/LoopVideoABTest.tsx
@@ -0,0 +1,27 @@
+import { css } from '@emotion/react';
+
+export const LoopVideoABTest = () => (
+	<video
+		id="video1"
+		autoPlay={true}
+		loop={true}
+		muted={true}
+		playsInline={true}
+		controls={true}
+		preload="none"
+		css={[
+			css`
+				position: relative;
+				z-index: 10;
+				width: 100%;
+				height: 100%;
+			`,
+		]}
+	>
+		Your browser does not support the video tag.
+		<source
+			type="video/mp4"
+			src="https://uploads.guim.co.uk/2024/45/14/TEST+1+FOR+ELLEN--0ee1b132-3a0d-405b-b493-aada74b259b2-2.mp4"
+		/>
+	</video>
+);
diff --git a/dotcom-rendering/src/layouts/FrontLayout.tsx b/dotcom-rendering/src/layouts/FrontLayout.tsx
@@ -43,6 +43,7 @@ import {
 	getMobileAdPositions,
 } from '../lib/getFrontsAdPositions';
 import { hideAge } from '../lib/hideAge';
+import { testVideoCollection } from '../lib/loop-video-ab-test-data';
 import { ophanComponentId } from '../lib/ophan-helpers';
 import type { NavType } from '../model/extract-nav';
 import { palette as schemePalette } from '../palette';
@@ -108,7 +109,13 @@ const decideLeftContent = (
 
 export const FrontLayout = ({ front, NAV }: Props) => {
 	const {
-		config: { isPaidContent, hasPageSkin: hasPageSkinConfig, pageId },
+		config: {
+			abTests,
+			hasPageSkin: hasPageSkinConfig,
+			isPaidContent,
+			isPreview,
+			pageId,
+		},
 		editionId,
 	} = front;
 
@@ -118,9 +125,18 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 
 	const hasPageSkin = renderAds && hasPageSkinConfig;
 
-	const filteredCollections = front.pressedPage.collections.filter(
-		(collection) => !isHighlights(collection),
-	);
+	const isInLoopVideoTest = abTests.loopVideoTestVariant === 'variant';
+
+	const filteredCollections = isInLoopVideoTest
+		? [
+				testVideoCollection,
+				...front.pressedPage.collections.filter(
+					(collection) => !isHighlights(collection),
+				),
+		  ]
+		: front.pressedPage.collections.filter(
+				(collection) => !isHighlights(collection),
+		  );
 
 	const merchHighAdPosition = getMerchHighPosition(filteredCollections);
 
@@ -137,8 +153,6 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 
 	const contributionsServiceUrl = getContributionsServiceUrl(front);
 
-	const { abTests, isPreview } = front.config;
-
 	const { absoluteServerTimes = false } = front.config.switches;
 
 	const fallbackAspectRatio = (collectionType: DCRContainerType) => {
@@ -272,9 +286,13 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 				)}
 				{filteredCollections.map((collection, index) => {
 					// Backfills should be added to the end of any curated content
-					const trails = collection.curated.concat(
-						collection.backfill,
-					);
+					const trails = collection.curated
+						.concat(collection.backfill)
+						.map((tr) => ({
+							...tr,
+							isInLoopVideoTest: isInLoopVideoTest && index === 0,
+						}));
+
 					const [trail] = trails;
 
 					// There are some containers that have zero trails. We don't want to render these
diff --git a/dotcom-rendering/src/lib/loop-video-ab-test-data.ts b/dotcom-rendering/src/lib/loop-video-ab-test-data.ts
@@ -0,0 +1,63 @@
+import type { DCRCollectionType, DCRFrontCard } from '../types/front';
+
+const exampleCard: DCRFrontCard = {
+	format: {
+		design: 3,
+		display: 0,
+		theme: 0,
+	},
+	dataLinkName: 'media | group-0 | card-@1',
+	url: '/science/audio/2024/dec/12/does-googles-mindboggling-new-chip-bring-quantum-computers-any-closer-podcast',
+	headline: ' Google’s ‘mindboggling’ new quantum chip',
+	trailText:
+		'Ian Sample speaks to Winfried Hensinger, professor of quantum technologies at the University of Sussex to find out how quantum computers work, and whether Google’s new chip is an important milestone in their development.',
+	webPublicationDate: '2024-12-12T05:00:09.000Z',
+	kickerText: 'Podcast',
+	supportingContent: [],
+	discussionApiUrl:
+		'https://discussion.code.dev-theguardian.com/discussion-api',
+	byline: 'Presented by Ian Sample, produced by Joshan Chana and Madeleine Finlay, sound design by Tony Onuchukwu, the executive producer is Ellie Bury',
+	showByline: false,
+	snapData: {},
+	isBoosted: false,
+	boostLevel: 'default',
+	isCrossword: false,
+	showQuotedHeadline: false,
+	showLivePlayable: false,
+	mainMedia: {
+		type: 'Audio',
+		duration: 0,
+	},
+	isExternalLink: false,
+	showMainVideo: false,
+	image: {
+		src: 'https://media.guim.co.uk/e8d98902b166c562f0f3283c969c4a02c04129d0/0_364_5461_3277/master/5461.jpg',
+		altText:
+			'Inauguration of the first IBM Quantum Data Center in Europe, in Ehningen, Germany<br>epa11635230 A model of the IBM Quantum System Two quantum computer is seen at the inauguration of the first IBM Quantum Data Center in Europe, in Ehningen, Germany, 01 October 2024. The Europe-based quantum data center will facilitate access to cutting-edge quantum computing for companies, research institutions and government agencies.  EPA/ANNA SZILAGYI',
+	},
+	podcastImage: {
+		src: 'https://uploads.guim.co.uk/2021/11/17/ScienceWeekly_FINAL_3000.jpeg',
+		altText: 'Science Weekly',
+	},
+	audioDuration: '18:03',
+};
+
+export const testVideoCollection: DCRCollectionType = {
+	id: '2e10eba3-7836-4381-bfc0-07d71a3295f6',
+	displayName: 'video test',
+	collectionType: 'fixed/small/slow-V-third',
+	grouped: {
+		snap: [],
+		huge: [],
+		veryBig: [],
+		big: [],
+		standard: [],
+		splash: [],
+	},
+	curated: [exampleCard, exampleCard, exampleCard, exampleCard, exampleCard],
+	backfill: [],
+	treats: [],
+	config: {
+		showDateHeader: false,
+	},
+};
diff --git a/dotcom-rendering/src/types/front.ts b/dotcom-rendering/src/types/front.ts
@@ -352,6 +352,7 @@ export type DCRFrontCard = {
 	galleryCount?: number;
 	podcastImage?: PodcastSeriesImage;
 	audioDuration?: string;
+	isInLoopVideoTest?: boolean;
 };
 
 export type DCRSlideshowImage = {
