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

Revert "Display test loop video container when in 0% AB test"

Author: domlander

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

@@ -150,7 +150,6 @@ export type Props = {
 	trailTextSize?: TrailTextSize;
 	/** A kicker image is seperate to the main media and renders as part of the kicker */
 	showKickerImage?: boolean;
-	isInLoopVideoTest?: boolean;
 };
 
 const starWrapper = (cardHasImage: boolean) => css`
@@ -411,7 +410,6 @@ export const Card = ({
 	showTopBarMobile = false,
 	trailTextSize,
 	showKickerImage = false,
-	isInLoopVideoTest = false,
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 	const sublinkPosition = decideSublinkPosition(
@@ -829,7 +827,6 @@ export const Card = ({
 							media.type === 'slideshow' && isFlexibleContainer
 						}
 						padImage={isMediaCardOrNewsletter && isBetaContainer}
-						isInLoopVideoTest={isInLoopVideoTest}
 					>
 						{media.type === 'slideshow' &&
 							(isFlexibleContainer ? (
@@ -996,7 +993,6 @@ export const Card = ({
 									loading={imageLoading}
 									roundedCorners={isOnwardContent}
 									aspectRatio={aspectRatio}
-									isInLoopVideoTest={isInLoopVideoTest}
 								/>
 								{(isVideoMainMedia ||
 									(isVideoArticle && !isBetaContainer)) &&

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

@@ -42,7 +42,6 @@ type Props = {
 	 */
 	hideImageOverlay?: boolean;
 	padImage?: boolean;
-	isInLoopVideoTest?: boolean;
 };
 
 /**
@@ -129,13 +128,11 @@ export const ImageWrapper = ({
 	imagePositionOnMobile,
 	hideImageOverlay,
 	padImage,
-	isInLoopVideoTest = false,
 }: Props) => {
 	const isHorizontalOnDesktop =
 		imagePositionOnDesktop === 'left' || imagePositionOnDesktop === 'right';
 	const isHorizontalOnMobile =
 		imagePositionOnMobile === 'left' || imagePositionOnMobile === 'right';
-
 	return (
 		<div
 			css={[
@@ -182,8 +179,7 @@ export const ImageWrapper = ({
 				{children}
 				{/* This image overlay is styled when the CardLink is hovered */}
 				{(imageType === 'picture' || imageType === 'slideshow') &&
-					!hideImageOverlay &&
-					!isInLoopVideoTest && <div className="image-overlay" />}
+					!hideImageOverlay && <div className="image-overlay" />}
 			</>
 		</div>
 	);

dotcom-rendering/src/components/CardPicture.tsx

@@ -4,7 +4,6 @@ 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';
 
@@ -18,7 +17,6 @@ type Props = {
 	roundedCorners?: boolean;
 	isCircular?: boolean;
 	aspectRatio?: AspectRatio;
-	isInLoopVideoTest?: boolean;
 };
 
 /**
@@ -157,7 +155,6 @@ export const CardPicture = ({
 	roundedCorners,
 	isCircular,
 	aspectRatio,
-	isInLoopVideoTest = false,
 }: Props) => {
 	const sources = generateSources(
 		mainImage,
@@ -167,10 +164,6 @@ export const CardPicture = ({
 
 	const fallbackSource = getFallbackSource(sources);
 
-	if (isInLoopVideoTest) {
-		return <LoopVideoABTest />;
-	}
-
 	return (
 		<picture
 			data-size={imageSize}

dotcom-rendering/src/components/FrontCard.tsx

@@ -57,7 +57,6 @@ export const FrontCard = (props: Props) => {
 		slideshowImages: trail.slideshowImages,
 		showLivePlayable: trail.showLivePlayable,
 		showMainVideo: trail.showMainVideo,
-		isInLoopVideoTest: trail.isInLoopVideoTest,
 	};
 
 	return Card({ ...defaultProps, ...cardProps });

dotcom-rendering/src/components/LoopVideoABTest.tsx

@@ -43,7 +43,6 @@ 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';
@@ -109,13 +108,7 @@ const decideLeftContent = (
 
 export const FrontLayout = ({ front, NAV }: Props) => {
 	const {
-		config: {
-			abTests,
-			hasPageSkin: hasPageSkinConfig,
-			isPaidContent,
-			isPreview,
-			pageId,
-		},
+		config: { isPaidContent, hasPageSkin: hasPageSkinConfig, pageId },
 		editionId,
 	} = front;
 
@@ -125,18 +118,9 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 
 	const hasPageSkin = renderAds && hasPageSkinConfig;
 
-	const isInLoopVideoTest = abTests.loopVideoTestVariant === 'variant';
-
-	const filteredCollections = isInLoopVideoTest
-		? [
-				testVideoCollection,
-				...front.pressedPage.collections.filter(
-					(collection) => !isHighlights(collection),
-				),
-		  ]
-		: front.pressedPage.collections.filter(
-				(collection) => !isHighlights(collection),
-		  );
+	const filteredCollections = front.pressedPage.collections.filter(
+		(collection) => !isHighlights(collection),
+	);
 
 	const merchHighAdPosition = getMerchHighPosition(filteredCollections);
 
@@ -153,6 +137,8 @@ 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) => {
@@ -286,13 +272,9 @@ 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)
-						.map((tr) => ({
-							...tr,
-							isInLoopVideoTest: isInLoopVideoTest && index === 0,
-						}));
-
+					const trails = collection.curated.concat(
+						collection.backfill,
+					);
 					const [trail] = trails;
 
 					// There are some containers that have zero trails. We don't want to render these

dotcom-rendering/src/layouts/FrontLayout.tsx

@@ -351,7 +351,6 @@ export type DCRFrontCard = {
 	branding?: Branding;
 	slideshowImages?: DCRSlideshowImage[];
 	showMainVideo?: boolean;
-	isInLoopVideoTest?: boolean;
 };
 
 export type DCRSlideshowImage = {