Merge branch 'main' into rachel/test-sourcepoint-australia-migration

Author: codingWithRach

dotcom-rendering/.storybook/mocks/bridgetApi.ts

@@ -102,6 +102,14 @@ export const getListenToArticleClient: BridgetApi<
 	isAvailable: async () => true,
 	isPlaying: async () => false,
 });
+
+export const getNativeABTestingClient: BridgetApi<
+	'getNativeABTestingClient'
+> = () => ({
+	getParticipations: async () =>
+		new Map(Object.entries({ 'test-id': 'variant' })),
+});
+
 export const ensure_all_exports_are_present = {
 	getUserClient,
 	getAcquisitionsClient,
@@ -119,6 +127,7 @@ export const ensure_all_exports_are_present = {
 	getInteractionClient,
 	getInteractivesClient,
 	getListenToArticleClient,
+	getNativeABTestingClient,
 } satisfies {
 	[Method in keyof BridgeModule]: BridgetApi<Method>;
 };

dotcom-rendering/package.json

@@ -28,7 +28,7 @@
 		"@emotion/server": "11.11.0",
 		"@guardian/ab-core": "8.0.0",
 		"@guardian/braze-components": "22.2.0",
-		"@guardian/bridget": "8.6.0",
+		"@guardian/bridget": "8.7.0",
 		"@guardian/browserslist-config": "6.1.0",
 		"@guardian/cdk": "61.4.0",
 		"@guardian/commercial-core": "27.1.0",
@@ -46,8 +46,7 @@
 		"@guardian/support-dotcom-components": "7.7.0",
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.52.0",
-		"@sentry/browser": "7.75.1",
-		"@sentry/integrations": "7.75.1",
+		"@sentry/browser": "10.3.0",
 		"@storybook/addon-essentials": "8.6.14",
 		"@storybook/addon-interactions": "8.6.14",
 		"@storybook/addon-webpack5-compiler-swc": "3.0.0",

dotcom-rendering/src/client/sentryLoader/sentry.ts

@@ -1,6 +1,5 @@
 import * as Sentry from '@sentry/browser';
 import type { BrowserOptions } from '@sentry/browser';
-import { CaptureConsole } from '@sentry/integrations';
 import { BUILD_VARIANT, dcrJavascriptBundle } from '../../../webpack/bundles';
 import type { ReportError } from '../../types/sentry';
 
@@ -44,7 +43,7 @@ Sentry.init({
 	allowUrls,
 	dsn: dcrSentryDsn,
 	environment: stage || 'DEV',
-	integrations: [new CaptureConsole({ levels: ['error'] })],
+	integrations: [Sentry.captureConsoleIntegration({ levels: ['error'] })],
 	maxBreadcrumbs: 50,
 	// sampleRate: // We use Math.random in init.ts to sample errors
 });

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

@@ -147,6 +147,8 @@ export type Props = {
 	trailTextSize?: TrailTextSize;
 	/** A kicker image is seperate to the main media and renders as part of the kicker */
 	showKickerImage?: boolean;
+	isInLoopingVideoTestVariant?: boolean;
+	isInLoopingVideoTestControl?: boolean;
 };
 
 const starWrapper = (cardHasImage: boolean) => css`
@@ -250,6 +252,7 @@ const getMedia = ({
 	mainMedia,
 	canPlayInline,
 	isBetaContainer,
+	isInLoopingVideoTestControl,
 }: {
 	imageUrl?: string;
 	imageAltText?: string;
@@ -259,8 +262,13 @@ const getMedia = ({
 	mainMedia?: MainMedia;
 	canPlayInline?: boolean;
 	isBetaContainer: boolean;
+	isInLoopingVideoTestControl: boolean;
 }) => {
-	if (mainMedia?.type === 'LoopVideo' && canPlayInline) {
+	if (
+		mainMedia?.type === 'LoopVideo' &&
+		!isInLoopingVideoTestControl &&
+		canPlayInline
+	) {
 		return {
 			type: 'loop-video',
 			mainMedia,
@@ -412,6 +420,8 @@ export const Card = ({
 	showTopBarMobile = true,
 	trailTextSize,
 	showKickerImage = false,
+	isInLoopingVideoTestVariant = false,
+	isInLoopingVideoTestControl = false,
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 	const sublinkPosition = decideSublinkPosition(
@@ -564,6 +574,7 @@ export const Card = ({
 		mainMedia,
 		canPlayInline,
 		isBetaContainer,
+		isInLoopingVideoTestControl,
 	});
 
 	/**
@@ -895,6 +906,10 @@ export const Card = ({
 									fallbackImageLoading={imageLoading}
 									fallbackImageAlt={media.imageAltText}
 									fallbackImageAspectRatio="5:4"
+									linkTo={linkTo}
+									isInLoopingVideoTestVariant={
+										isInLoopingVideoTestVariant
+									}
 								/>
 							</Island>
 						)}
@@ -1011,6 +1026,9 @@ export const Card = ({
 									loading={imageLoading}
 									roundedCorners={isOnwardContent}
 									aspectRatio={aspectRatio}
+									isInLoopingVideoTestControl={
+										isInLoopingVideoTestControl
+									}
 								/>
 								{isVideoMainMedia && mainMedia.duration > 0 && (
 									<div

dotcom-rendering/src/components/CardPicture.tsx

@@ -18,6 +18,7 @@ export type Props = {
 	isCircular?: boolean;
 	aspectRatio?: AspectRatio;
 	mobileAspectRatio?: AspectRatio;
+	isInLoopingVideoTestControl?: boolean;
 };
 
 /**
@@ -200,6 +201,7 @@ export const CardPicture = ({
 	isCircular,
 	aspectRatio = '5:3',
 	mobileAspectRatio,
+	isInLoopingVideoTestControl,
 }: Props) => {
 	if (mainImage === '') {
 		return null;
@@ -214,6 +216,11 @@ export const CardPicture = ({
 
 	return (
 		<picture
+			data-component={
+				isInLoopingVideoTestControl
+					? 'loop-video-player-control'
+					: undefined
+			}
 			data-size={imageSize}
 			css={[
 				block,

dotcom-rendering/src/components/DecideContainer.tsx

@@ -48,6 +48,8 @@ type Props = {
 	frontId?: string;
 	collectionId: number;
 	containerLevel?: DCRContainerLevel;
+	isInLoopingVideoTestVariant?: boolean;
+	isInLoopingVideoTestControl?: boolean;
 };
 
 export const DecideContainer = ({
@@ -63,6 +65,8 @@ export const DecideContainer = ({
 	frontId,
 	collectionId,
 	containerLevel,
+	isInLoopingVideoTestVariant,
+	isInLoopingVideoTestControl,
 }: Props) => {
 	switch (containerType) {
 		case 'dynamic/fast':
@@ -255,6 +259,8 @@ export const DecideContainer = ({
 					imageLoading={imageLoading}
 					aspectRatio={aspectRatio}
 					collectionId={collectionId}
+					isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
+					isInLoopingVideoTestControl={isInLoopingVideoTestControl}
 				/>
 			);
 		case 'flexible/general':
@@ -268,6 +274,8 @@ export const DecideContainer = ({
 					aspectRatio={aspectRatio}
 					containerLevel={containerLevel}
 					collectionId={collectionId}
+					isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
+					isInLoopingVideoTestControl={isInLoopingVideoTestControl}
 				/>
 			);
 		case 'scrollable/small':

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

@@ -7,7 +7,7 @@ import { FrontSection } from './FrontSection';
 
 export default {
 	component: DynamicFast,
-	title: 'Components/DynamicFast',
+	title: 'Front Containers/Deprecated Containers/DynamicFast',
 	parameters: {
 		chromatic: {
 			viewports: [

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

@@ -22,7 +22,7 @@ const defaultGroupedTrails: DCRGroupedTrails = {
 
 const meta = {
 	component: DynamicPackage,
-	title: 'Components/DynamicPackage',
+	title: 'Front Containers/Deprecated Containers/DynamicPackage',
 	parameters: {
 		chromatic: {
 			viewports: [

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

@@ -23,7 +23,7 @@ const defaultGroupedTrails: DCRGroupedTrails = {
 
 export default {
 	component: DynamicSlow,
-	title: 'Components/DynamicSlow',
+	title: 'Front Containers/Deprecated Containers/DynamicSlow',
 	parameters: {
 		chromatic: {
 			viewports: [

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

@@ -7,7 +7,7 @@ import { FrontSection } from './FrontSection';
 
 export default {
 	component: DynamicSlowMPU,
-	title: 'Components/DynamicSlowMPU',
+	title: 'Front Containers/Deprecated Containers/DynamicSlowMPU',
 	parameters: {
 		chromatic: {
 			viewports: [